/*
Theme Name: Starter Block Theme v2.0
Theme URI: https://jakson.co/
Author: Jakson
Author URI: https://jakson.co/
Description: 
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starter-block-theme-v2
Tags: Block Editor Patterns, Site Editor

/*  Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/*  Reduced motion prefs  */
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/*  Navigation Block Breakpoint. Credit: https://wpdocs.io/ */
body .wp-block-navigation__responsive-container-open:not(.always-shown) {
  display: block !important;
}

body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
  display: none !important;
}

/* Change the width to the breakpoit of the Nav */
@media (min-width: 799px) {
  body .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }

  body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
  }
}

/* end nav break point */

/* Nicley wrapped headlines */
h1, h2, h3, {
    hyphens: none !important;          /* stop hyphenation */
    overflow-wrap: normal !important;  /* prevent word breaking */
    word-break: normal !important;     /* prevent breaking mid-word */
    font-size: clamp(32px, 5vw, 72px) !important; /* responsive font: min 24px, max 48px */
    line-height: 1.2;
    overflow: hidden;                  /* hide overflow if text too long */
    text-overflow: ellipsis;           /* optional: show "..." if text is cut */
} 

/* I've no idea why when you add a backgroud colour to a column, WP by default adds padding to it... so weird - this get's rid of that */
:where(.wp-block-columns.has-background) {
  padding: initial;
}

/* Pull Quote */
.wp-block-pullquote blockquote {
  display: grid;
  gap: 20px;
}

.wp-block-pullquote cite {
  font-size: 80%;
  font-weight: 600;
}

/* Search Block */
.wp-block-search__input {
  border: 1px solid;
}

.wp-block-search__button {
  box-shadow: none;
  border: 1px solid var(--wp--preset--color--custom-off-black);
  border-radius: 0;
  color: white;
  padding: 0.4rem 1rem 0.5rem 1rem;
  font-weight: 500;
}

/* Comments */
.comment-form-cookies-consent {
  font-size: 14px;
  line-height: 2;
}

/* Keep our titles link the off black color*/
/*.wp-block-post-title :where(a) {
  color: var(--wp--preset--color--custom-off-black);
}*/

/* Button hover state  - core button block still does not have this and I can't figure out how to do it in theme.json! */
.wp-block-button__link,
a {
  transition: 0.3s;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
#commentform .form-submit.wp-block-button input:hover {
  background: var(--wp--preset--color--custom-white);
  color: var(--wp--preset--color--custom-off-black);
}

.wp-block-button .wp-block-button__link:hover {
  background: var(--wp--preset--color--custom-custom-white);
  color: var(--wp--preset--color--off-black);
  border-color: var(--wp--preset--color--custom-off-black);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--custom-off-black);
  color: var(--wp--preset--color--custom-white);
  border-color: var(--wp--preset--color--custom-off-black);
}

a:hover:not(.wp-block-site-title a, .wp-block-button__link.wp-element-button) {
  text-decoration: underline !important;
} 
/*
.site-logo img {
  width: 5vw;   /* 5% of viewport width */
/*  height: auto;
  max-width: 130px;  /* Prevents it from getting too large */
/*}
*/
/* removing the site logo from the left panel navigation so it is only available on clicking into the menu */
.nav-logo {
	display: none;
	opacity: 0
}

/* removing the socials from the left panel navigation so it is only available on clicking into the menu */
.socialsmenu {
	display: none !important;
	opacity: 0
}

/* Mouse  - bringing in the left menu and site content */

.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
}   

.wp-site-blocks {
	display: flex;
}

.mouse-header {
	width: 25%;
}
	
.mouse-content {
	width: 75%;
}

/* put curves on the selfie image */
.halfcircle {
	/* Only top-right and bottom-left corners curved */
    border-top-right-radius: 50%;  /* adjust as needed */
    border-bottom-left-radius: 50%; /* adjust as needed */

    /* Keep the other corners sharp */
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
	overflow: hidden;
	display: inline-block !important
}

.nowrap {
	hyphens: none !important;          /* stop auto hyphenation */
    overflow-wrap: normal !important;  /* don’t break words */
    word-break: normal !important;     /* keep whole words */
} 

.nowraptoo {
	white-space: nowrap !important;    /* keep header on one line */
} 

/* Adjust spacing only in overlay/navigation view  - this is needed */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  	margin-bottom: 1rem; /* change spacing between menu items */
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation {
  	gap: 1.5rem; /* adjust block spacing (if using flexbox gap) */
}

.wp-block-social-link a {
    align-items: center;
    display: flex;
    line-height: 2;
}

/* Show the logo only when the navigation menu is open */
.wp-block-navigation__responsive-container.is-menu-open .nav-logo {
 	display: block !important; /* Show logo when menu is open */
 	margin: 0 auto 0.5rem auto; /* Center the logo */
 	max-width: 300px;  /* Adjust the logo size */
}

/* Center the navigation content when the menu is open */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
 	padding-left: 75px;
	display: flex;
 	justify-content: center; /* Centers the nav items horizontally */
	align-items: center;     /* Centers the nav items vertically */
}

@media (max-width:799px) {
    .wp-site-blocks {
  		display: block !important;      /* instead of flex */
   		overflow: visible !important;   /* ensure sticky works */
  }	
	.mouse-header{
		position: sticky !important;
		top:0;
		width: 100%;
		z-index:9999;
	}
	.mouse-content{
		width: 100%;
	}	
/*	.scaled-image {
    	max-width: 50%;
    	height: auto;
	}
*/
	.wp-site-blocks {
		flex-direction: column;
	}

	.hide-799 {
		display: none !important
	}

	.mouse-header_inner {
		min-height: 60px !important;
		max-height: 75px !important;
		display: flex;
		justify-content: space-between;
		padding: 0 20px !important;
		align-items: center;
		}
	
		/* Show the logo only when the menu is open */
	.wp-block-navigation__responsive-container.is-menu-open .nav-logo {
 		display: block; /* Only shows the logo when the menu is open */
		opacity: 1
		}

		/* Show the socials only when the menu is open */
	.wp-block-navigation__responsive-container.is-menu-open .socialsmenu {
		display: block !important; /* Only shows the logo when the menu is open */
		opacity: 1
		}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-social-link {
    	/* align-items: Left; */
    	flex-direction: column !important;
		align-items: flex-start
    	line-height: 2;	
		}
	
	.scaled-image {
		height: auto !important;      /* Keeps proportions */
    	width: 20vw;
    	max-width: 125px;
  		}
}

/* Custom styling for image + text block */
.image-text-block {
  display: flex;
  align-items: center;        /* Vertically align image & text */
  justify-content: center;    /* Keep them centered */
  gap: 20px;                  /* Space between image and text */
  flex-wrap: wrap;            /* Allow wrapping on small screens */
}

.image-text-block .wp-block-column {
  flex: 1;                    /* Make both columns equal width */
  text-align: center;         /* Center content when stacked */
}

.image-text-block img {
  max-width: 100%;            /* Keep images responsive */
  height: auto;
}

@media (max-width: 768px) {
  .image-text-block {
    flex-direction: column;   /* Stack image above text */
    gap: 10px;                /* Reduce spacing on mobile */
  }
}