/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.0
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

.main-nav .menu { list-style:none; margin:0; padding:0; display:flex; gap:1rem; }
.main-nav .menu li { position:relative; }
.main-nav .menu li ul { position:absolute; left:0; top:100%; display:none; list-style:none; margin:0; padding:0.5rem 0; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.main-nav .menu li:hover > ul { display:block; }
.main-nav a { text-decoration:none; }
/* --- Header bar --- */
.site-header {
	background: var(--wp--preset--color--base-2, #fff);
	box-shadow: 0 2px 10px rgba(0,0,0,.06);
	position: sticky; top: 0; z-index: 1000;
}
.header-inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin: 0 auto;
	padding: 0.75rem var(--wp--preset--spacing--50, 2rem);
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem;
}

/* Brand */
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; color: var(--wp--preset--color--contrast, #111); }
.brand img { height: 40px; width: auto; }

/* Menu reset */
.main-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; }
.main-nav a { text-decoration: none; color: var(--wp--preset--color--contrast, #111); }
.main-nav a:hover, .main-nav a:focus { text-decoration: underline; }

/* Dropdowns */
.main-nav .menu > li { position: relative; }
.main-nav .menu li ul {
	position: absolute; left: 0; top: 100%;
	min-width: 220px;
	background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: .5rem;
	box-shadow: 0 12px 24px rgba(0,0,0,.12);
	list-style: none; margin: .5rem 0 0; padding: .5rem 0; display: none;
}
.main-nav .menu li:hover > ul, .main-nav .menu li:focus-within > ul { display: block; }
.main-nav .menu li ul li { padding: 0; }
.main-nav .menu li ul a { display: block; padding: .5rem .9rem; }
.main-nav .menu li ul a:hover { background: var(--wp--preset--color--base, #f9f9f9); }

/* Mobile toggle (CSS-only) */
.nav-toggle { display: none; }
.nav-toggle-btn {
	display: none; cursor: pointer; width: 40px; height: 40px;
	align-items: center; justify-content: center;
}
.nav-toggle-btn span { display: block; height: 2px; width: 22px; background: currentColor; margin: 4px 0; }

/* Responsive */
@media (max-width: 900px) {
	.header-inner { flex-wrap: wrap; }
	.nav-toggle-btn { display: inline-flex; }
	.main-nav { width: 100%; }
	.main-nav .menu { display: none; flex-direction: column; align-items: flex-start; gap: 0; padding-top: .5rem; }
	.main-nav .menu > li { width: 100%; }
	.main-nav .menu > li > a { display: block; width: 100%; padding: .6rem 0; }
	.main-nav .menu li ul { position: static; box-shadow: none; border: 0; margin: 0; padding: 0 0 .5rem 1rem; }
	#nav-toggle:checked ~ nav .menu { display: flex; }
}

/* Make admin bar not overlap sticky header */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
/* --- Layout spacing improvements --- */
body {
	margin: 0;
	padding: 0;
	font-family: system-ui, sans-serif;
	line-height: 1.6;
}

.site-header {
	padding: 0.75rem 2rem;
}

.site-main {
	max-width: 1100px;
	margin: 3rem auto;
	padding: 0 2rem;
}

.site-footer {
	margin-top: 3rem;
	padding: 1rem 2rem;
	text-align: center;
	border-top: 1px solid #ddd;
	font-size: 0.9rem;
	color: #555;
}

/* Logo sizing + alignment */
.site-branding { display:flex; align-items:center; gap:.6rem; }

.site-branding a.custom-logo-link { 
  display:inline-flex; align-items:center; line-height:0;
}

.site-branding img.custom-logo {
  max-height: 52px;   /* ← change this to the size you want */
  height: auto;
  width: auto;
}

/* Optional: tweak on larger screens */
@media (min-width: 900px) {
  .site-branding img.custom-logo { max-height: 64px; }
}

/* Force logo to a sane size */
.site-header .site-branding img.custom-logo,
.site-header a.custom-logo-link img.custom-logo,
.site-header img.custom-logo {
  height: 56px !important;   /* ← pick your target height */
  width: auto !important;
  max-width: none !important;
  display: inline-block;
  vertical-align: middle;
}

.site-branding { 
  display:flex; 
  align-items:center; 
  gap:.6rem;
  max-height: 60px;           /* keeps the header tight */
}

/* Optional: bump on large screens */
@media (min-width: 900px) {
  .site-header .site-branding img.custom-logo { height: 64px !important; }
}

/* --- Header layout alignment fix --- */
.site-header .header-inner {
	display: flex;
	align-items: center;
	justify-content: flex-start; /* keeps everything aligned left */
	gap: 2rem; /* spacing between logo and nav */
	padding: 1rem 2rem;
	max-width: 1280px;
	margin: 0 auto;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.site-header .main-nav {
	margin-left: auto; /* pushes menu to the right */
}
/* Fix dropdown hover gap + stacking */
.site-header { overflow: visible; }
.main-nav { position: relative; z-index: 20; }
.main-nav .menu > li { position: relative; }

/* Remove the gap between the parent item and the submenu */
.main-nav .menu li ul {
  top: 100%;          /* sit directly under the parent li */
  margin-top: 0;      /* was creating a gap */
  z-index: 9999;      /* stay above page content */
}

/* Keep the menu open while hovering the dropdown itself */
.main-nav .menu li:hover > ul,
.main-nav .menu li:focus-within > ul,
.main-nav .menu li ul:hover {
  display: block;
}
/* Keep dropdowns inside the viewport */
.main-nav .menu > li { position: relative; }
.main-nav .menu > li > ul { left: 0; right: auto; }               /* default: open to the left side */

/* For rightmost items, open inward (to the left) */
.main-nav .menu > li:nth-last-child(-n+2) > ul {                  /* adjust -n+2 to cover more items if needed */
  right: 0;
  left: auto;
}

/* Safety sizing so long menus don't overflow the screen height/width */
.main-nav .menu li ul {
  max-width: min(320px, calc(100vw - 32px));
  max-height: calc(100vh - 96px); /* header + breathing room */
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9999;
}

.site-header { overflow: visible; } /* make sure dropdowns aren't clipped */

/* --- Mobile header fixes --- */
@media (max-width: 900px) {
	.site-header .header-inner {
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0.75rem 1rem;
	}

	.brand-link img {
		max-height: 36px;
		width: auto;
		display: block;
	}

	.nav-toggle-btn {
		display: inline-flex;
		background: none;
		border: 0;
		font-size: 1.5rem;
		cursor: pointer;
		align-items: center;
		justify-content: center;
	}

	/* Hide menu until toggled */
	.main-nav {
		width: 100%;
		display: none;
		background: #fff;
		border-top: 1px solid #ddd;
		margin-top: 0.5rem;
		padding: 0.5rem 0;
	}

	.main-nav.active {
		display: block;
	}

	.main-nav .menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.main-nav .menu li {
		width: 100%;
	}

	.main-nav .menu a {
		display: block;
		width: 100%;
		padding: 0.75rem 1rem;
	}
}
/* Mobile header/layout + toggle fix */
@media (max-width: 900px) {
  .site-header .header-inner{
    padding: .75rem .75rem;           /* a bit tighter left padding */
    justify-content: flex-start;      /* brand stays left */
  }

  .brand-link { margin: 0; }          /* ensure no stray margins */
  .brand-link img { max-height: 36px; width: auto; display:block; }

  .nav-toggle-btn{
    display:inline-flex;
    margin-left:auto;                 /* pushes hamburger to right edge */
    background:none; border:0; cursor:pointer;
    width:40px; height:40px; align-items:center; justify-content:center;
    font-size:1.6rem; line-height:1;
  }

  /* nav is hidden until toggled */
  .main-nav{ width:100%; display:none; background:#fff; border-top:1px solid #ddd; margin-top:.5rem; }
  .main-nav .menu{ display:none; flex-direction:column; align-items:flex-start; gap:0; }
  .main-nav .menu a{ display:block; width:100%; padding:.75rem 1rem; }

  /* when toggled on */
  .main-nav.active{ display:block; }
  .main-nav.active .menu{ display:flex; }  /* <-- key line that shows the UL */
}