/* ==========================================================================
   Jam Pod — Header
   Figma: node 4:857 (Header, 1440w) — total 192px
   Row 1: 120px → py-24 px-120, border-bottom 1px #2B4D00
   Row 2:  72px → py-24 px-120, border-bottom 1px #2B4D00
   ========================================================================== */

/* --------------------------------------------------------------------------
   Row 1 — top bar: socials | branding | search + language
   -------------------------------------------------------------------------- */

.site-header {
	background-color: var(--wp--preset--color--cream, #f8f1e7);
	position: relative;
	z-index: 100;
}

/* Figma 4:857 row 1 — 120px tall: 24px padding, the 72px logo block, 24px.
   Three grid tracks rather than space-between: the side tracks stay equal, so
   the logo is optically centred and the search field expanding from 44px to
   200px grows inside its own track instead of shoving the logo sideways. */
.site-header__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	padding: 24px 120px 23px; /* Figma: py-24 px-120, border drawn inside → 120 total */
	border-bottom: 1px solid var(--wp--preset--color--green-dark, #2b4d00);
}

/* Socials (left) */
.site-header__social {
	display: flex;
	align-items: center;
	justify-self: start;
	gap: 20px; /* Figma: gap 20px */
}

.site-header__social a {
	display: flex;
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.site-header__social a:hover {
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

.site-header__social svg {
	width: 18px;  /* Figma: 18px */
	height: 18px;
}

/* Branding (center) */
.site-branding {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;        /* Figma 4:496: gap 16 */
	width: 194px;     /* Figma 4:496 */
	text-align: center;
}

.site-branding__logo {
	display: flex;
	align-items: center;
	gap: 6px; /* Figma: gap 6px before the dot */
	font-size: 44px;           /* Figma: 44px */
	line-height: 28px;         /* Figma: leading 28px */
	font-weight: 700;          /* Merriweather Bold */
	color: var(--wp--preset--color--green-deep, #2d4f00);
	white-space: nowrap;
}

.site-branding__logo:hover {
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

.site-branding__dot {
	width: 12px;   /* Figma: 12px circle */
	height: 12px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--green-dark, #2b4d00);
	flex-shrink: 0;
}

.site-branding__tagline {
	font-size: 20px;    /* Figma: 20px */
	line-height: 28px;  /* Figma: leading 28px */
	font-weight: 400;
	color: var(--wp--preset--color--green-deep, #2d4f00);
	letter-spacing: 0;
	margin: 0;
}

/* Search + language (right) — Figma I4:857;4:601: gap 40, justify-end */
.site-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	justify-self: end;
	gap: 40px;
}

/* Figma 4:923 — one component with two states. Default is a 24px icon in 10px
   of padding; Open keeps the icon, widens the box to 200px and adds a 1px
   bottom rule. The field grows in place inside the header rather than dropping
   a panel underneath it. */
.jp-search {
	display: flex;
	align-items: center;
	gap: 0; /* no gap while collapsed, so the box stays exactly 44px */
	padding: 10px;
	border-bottom: 1px solid transparent;
	transition: width 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}

.jp-search.is-open {
	width: 200px; /* Figma 4:924 */
	gap: 8px;
	border-bottom-color: var(--wp--preset--color--green-dark, #2b4d00);
}

.jp-search__toggle {
	display: flex;
	align-items: center;
	padding: 0;
	color: var(--wp--preset--color--ink, #1f1f1f);
	background: none;
	border: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.jp-search__toggle svg {
	width: 24px;
	height: 24px;
	display: block;
}

.jp-search__toggle:hover {
	color: #003300;
}

.jp-search__field {
	width: 0;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	color: var(--wp--preset--color--ink, #1f1f1f);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.jp-search.is-open .jp-search__field {
	flex: 1 1 auto;
	width: auto;
	opacity: 1;
}

.jp-search__field:focus {
	outline: none;
}
/* The burger panel's copy of the socials and search — desktop shows the ones
   in the top bar instead. */
.primary-nav__extras {
	display: none;
}

/* Figma 4:523 — "ENG", Public Sans Bold 18/1.2, tracking -0.18px. */
.jp-lang {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "Public Sans", var(--wp--preset--font-family--inter, "Inter"), system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.18px;
	color: #003300;
}

/* Figma has a single "Property 1=Default" state for the switcher (4:523), so
   the open list borrows the header dropdown's own language: cream panel, 42px
   rows, a hairline under each. It hangs off the right edge because the
   switcher sits at the end of the header row. */
.jp-lang--has-list {
	position: relative;
}

.jp-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	cursor: pointer;
}

.jp-lang__caret svg {
	display: block;
	width: 18px;
	height: 18px;
}

.jp-lang--has-list .jp-lang__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 72px;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--wp--preset--color--cream, #f8f1e7);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 60;
}

/* The 8px gap would drop :hover on the way down — bridge it. */
.jp-lang--has-list .jp-lang__list::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 8px;
}

.jp-lang--has-list:hover .jp-lang__list,
.jp-lang--has-list:focus-within .jp-lang__list,
.jp-lang--has-list.is-open .jp-lang__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.jp-lang--has-list.is-open .jp-lang__caret svg,
.jp-lang--has-list:hover .jp-lang__caret svg {
	transform: rotate(180deg);
}

.jp-lang__list li {
	display: flex;
}

.jp-lang__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 42px;                 /* matches the nav dropdown row */
	padding: 0 10px;
	border-bottom: 1px solid var(--wp--preset--color--green-deep, #2d4f00);
	color: inherit;
	opacity: 0.6;
}

.jp-lang__link:hover,
.jp-lang__link:focus {
	opacity: 1;
	color: inherit;
}

.jp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--green-dark, #2b4d00);
	color: var(--wp--preset--color--paper, #fffefa);
	font-size: 16px;       /* Figma: 16px */
	line-height: 17.6px;   /* Figma: 17.6px */
	font-weight: 400;
	padding: 15px 30px;    /* Figma: py-15 px-30 → 48px tall */
	border-radius: 0;
	transition: background-color 0.2s ease;
}

.jp-btn:hover {
	background-color: var(--wp--preset--color--green-deep, #2d4f00);
	color: var(--wp--preset--color--paper, #fffefa);
}

/* --------------------------------------------------------------------------
   Row 2 — primary navigation bar
   -------------------------------------------------------------------------- */

/* Figma I4:857;4:854 — 72px row: py-24 px-120, same border as row 1. */
.site-header__nav-bar {
	border-bottom: 1px solid var(--wp--preset--color--green-dark, #2b4d00);
	padding: 24px 120px 23px;
}

.site-header__nav-inner {
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.primary-nav {
	display: flex;
}

/* Figma I4:857;4:770 — the three items sit in a centred row with a 20px gap
   and no padding of their own. */
.primary-nav > ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

/* display:flex, not the default list-item — otherwise the body's 26.4px line
   box wraps the 24px link and makes the nav row 3px too tall. */
.primary-nav > ul > li {
	position: relative;
	display: flex;
	align-items: center;
}

.primary-nav > ul > li > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;              /* Figma 4:603 */
	font-size: 16px;       /* Figma 4:502 */
	line-height: 24px;
	font-weight: 700;      /* Merriweather Bold */
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.primary-nav > ul > li > a:hover,
.primary-nav > ul > li.current-menu-item > a,
.primary-nav > ul > li.current-menu-ancestor > a {
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

/* Figma 4:669 — a 24px caret on every top-level item, added by
   jampod_nav_caret() rather than only on items that have children. */
.primary-nav__caret {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.primary-nav__caret svg {
	width: 24px;
	height: 24px;
	display: block;
}

.primary-nav > ul > li.is-open > .primary-nav__caret svg,
.primary-nav > ul > li > a.is-open .primary-nav__caret svg {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Dropdown (Figma 15:1089 "Header nav subnav" → 4:693 desktop / 15:1090 mobile)
   Both variants are the same stack: the parent link, a 20px gap, then 42px
   rows with a divider inside each. Desktop is 155 wide and starts at the
   link's left edge — not centred under it.
   -------------------------------------------------------------------------- */

.primary-nav .sub-menu {
	position: absolute;
	top: calc(100% + var(--jp-s500)); /* Figma 4:657: 20 under the 24px link */
	left: 0;
	transform: translateY(8px);
	min-width: 155px;                 /* Figma 4:693: 155 */
	background-color: var(--wp--preset--color--cream, #f8f1e7);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 50;
}

/* The 20px gap would drop :hover on the way down, so bridge it. */
.primary-nav .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--jp-s500) * -1);
	height: var(--jp-s500);
}

.primary-nav > ul > li:hover > .sub-menu,
.primary-nav > ul > li:focus-within > .sub-menu,
.primary-nav > ul > li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: center; /* Figma: centered */
	box-sizing: border-box;
	height: 42px;            /* Figma 4:640: 42 tall with the divider inside */
	padding: 0 10px;         /* Figma: px-10 */
	border-bottom: 1px solid var(--wp--preset--color--green-deep, #2d4f00);
	font-size: 14px;         /* Figma: 14px */
	line-height: 17.6px;     /* Figma: 17.6px */
	font-weight: 700;        /* Merriweather Bold */
	color: var(--wp--preset--color--ink, #1f1f1f);
	white-space: nowrap;
}

.primary-nav .sub-menu a:hover {
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

/* --------------------------------------------------------------------------
   Mobile toggle (hidden on desktop)
   -------------------------------------------------------------------------- */

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	align-items: center;
}

.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--wp--preset--color--ink, #1f1f1f);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Submenu toggle button (mobile) */
.submenu-toggle {
	display: none;
}

/* --------------------------------------------------------------------------
   Responsive
   NOTE: Figma has 1440w frames only — breakpoints follow the reference
   site behaviour (tortoisemedia.com) and standard WP conventions.
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
	.site-header__top {
		padding-inline: 40px;
	}

	.site-header__nav-bar {
		padding-inline: 40px;
	}
}

/* --------------------------------------------------------------------------
   Mobile — Figma 15:468 (390w). The logo shrinks and moves left, the search
   drops out of the bar into the burger panel, and ENG sits beside the burger.
   -------------------------------------------------------------------------- */
@media (max-width: 921px) {

	.site-header__top {
		display: flex;
		justify-content: space-between;
		padding: var(--jp-s600) var(--jp-s400); /* Figma 15:469: py-24 px-16 */
	}

	.site-branding {
		width: auto;
		align-items: flex-start;
		gap: 0;
		text-align: left;
	}

	.site-branding__logo {
		font-size: 24px;    /* Figma 15:522 */
		line-height: 28px;
		margin-bottom: -2px;
	}

	.site-branding__tagline {
		font-size: 10px;    /* Figma 15:524 */
		line-height: 28px;
	}

	/* Socials and search live in the panel on mobile, not the bar. */
	.site-header__social,
	.site-header__top .jp-search {
		display: none;
	}

	/* Figma 15:475 — ENG and the burger are one right-aligned group, 20px apart.
	   The toggle is a sibling of .site-header__actions in the markup, so the
	   auto margin pulls the pair together instead of spacing them apart. */
	.site-header__actions {
		gap: var(--jp-s500);
		margin-left: auto;
	}

	.menu-toggle {
		display: flex;
		width: 24px;      /* Figma 15:516 */
		height: 24px;
		gap: 4px;
		margin-left: var(--jp-s500);
	}

	.menu-toggle__bar {
		width: 20px;
		height: 1px;
	}

	/* Nav row becomes the burger panel — Figma 15:851: p-24, gap 20. */
	.site-header__nav-bar {
		padding: 0;
		border-bottom: 0;
	}

	.site-header__nav-inner {
		display: block;
		max-width: none;
	}

	.primary-nav {
		display: none;
		width: 100%;
	}

	.site-header.is-menu-open .primary-nav {
		display: block;
		padding: var(--jp-s600);
		border-bottom: 1px solid var(--wp--preset--color--green-dark, #2b4d00);
	}

	.primary-nav > ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--jp-s500);
	}

	.primary-nav > ul > li > a {
		justify-content: flex-start;
	}

	/* Figma 15:851 — socials then the open search sit under the nav, 20px apart. */
	.primary-nav__extras {
		display: flex;
		flex-direction: column;
		gap: var(--jp-s500);
		margin-top: var(--jp-s500);
	}

	.site-header__social--panel {
		display: flex;
		gap: var(--jp-s500);   /* Figma I15:851;15:1010 */
	}

	.jp-search--panel {
		width: 200px;          /* Figma 4:924 — the panel copy is always open */
		border-bottom-color: var(--wp--preset--color--green-dark, #2b4d00);
		gap: var(--jp-s200);
	}

	.jp-search--panel .jp-search__field {
		flex: 1 1 auto;
		width: auto;
		opacity: 1;
	}

	/* Sub-menus become accordions — Figma 15:1090: the parent link, a 20px
	   gap, then full-width 42px rows. Same rows as the desktop dropdown, so
	   only the positioning is reset here. */
	.primary-nav .sub-menu {
		position: static;
		transform: none;
		min-width: 0;
		opacity: 1;
		visibility: visible;
		display: none;
		background: none;
		margin-top: var(--jp-s500);
	}

	.primary-nav .sub-menu::before {
		display: none;
	}

	.primary-nav > ul > li:hover > .sub-menu {
		display: none;
	}

	.primary-nav > ul > li.is-open > .sub-menu {
		display: block;
	}

	/* The rows span the whole panel column, so the item stops being a row of
	   [link][submenu] and becomes the link stacked over its rows. */
	.primary-nav > ul > li {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.primary-nav > ul > li > a {
		align-self: flex-start;
	}

	.primary-nav > ul > li.is-open > a .primary-nav__caret svg {
		transform: rotate(180deg);
	}
}

@media (min-width: 922px) {
	.primary-nav__mobile-cta {
		display: none;
	}
}

@media (max-width: 600px) {
	.site-header__social {
		gap: 14px;
	}

	.site-header__social svg {
		width: 16px;
		height: 16px;
	}
}