/**
 * Accessible off-canvas (hamburger) navigation.
 * Mobile-first: the drawer and trigger only exist below --ssc-breakpoint.
 */

:root {
	--ssc-bp: 992px;              /* matches the parent theme's desktop breakpoint */
	--ssc-head-h: 56px;
	--ssc-panel-w: min(86vw, 360px);
	--ssc-bg: #333;
	--ssc-fg: #fff;
	--ssc-accent: #b9a79f;
	--ssc-border: rgba(255, 255, 255, .14);
	--ssc-speed: .28s;
}

/* ---------------------------------------------------------------- trigger */

/* The hamburger lives inside the theme's own .toggle-container in the header,
   so the theme keeps control of header layout, logo and spacing. We only
   change what the trigger looks like and what it does. */
.ssc-toggle,
.ssc-toggle:hover,
.ssc-toggle:focus,
.ssc-toggle:active {
	appearance: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	width: 44px;                 /* 44px minimum tap target */
	height: 44px;
	min-width: 0;
	padding: 10px;
	margin: 0;
	cursor: pointer;
	color: var(--ssc-fg);
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 0 0 auto;
}

.ssc-toggle:focus-visible {
	outline: 2px solid var(--ssc-fg);
	outline-offset: 2px;
	border-radius: 3px;
}

.ssc-toggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--ssc-speed) ease, opacity calc(var(--ssc-speed) / 2) ease;
}

/* Morph the three bars into a cross while the drawer is open. */
.ssc-nav-open .ssc-toggle__bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.ssc-nav-open .ssc-toggle__bar:nth-child(2) { opacity: 0; }
.ssc-nav-open .ssc-toggle__bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ------------------------------------------------------------ header search
 * A compact icon button that expands a search field, replacing the theme's
 * native toggle in the coloured breadcrumbs strip (hidden further down).
 * Font Awesome is already enqueued by the parent, so the glyph costs nothing.
 * -------------------------------------------------------------------------- */

/* NOTE: colour is deliberately NOT set here. It is emitted as inline CSS from
   ssc_icon_colour_styles() using the Customiser's menu colours, so the icons
   always match the menu. Setting `color: inherit` in this block was a bug: on
   :focus it inherited the nav's black and the icon vanished against the dark
   header until hovered. */
.ssc-search-toggle,
.ssc-search-toggle:hover,
.ssc-search-toggle:focus,
.ssc-search-toggle:active {
	appearance: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	width: 44px;
	height: 44px;
	min-width: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	line-height: 1;
	border-radius: 4px;
	transition: color .18s ease, background-color .18s ease;
}

/* A subtle wash on hover/open so the control reads as interactive without
   inventing a new colour that could clash with the header. */
.ssc-search-toggle:hover,
.ssc-search-open .ssc-search-toggle {
	background: rgba(127, 127, 127, .18);
}

.ssc-search-toggle__icon::before {
	font-family: "FontAwesome";
	content: "\f002";               /* fa-search */
	font-size: 17px;
	display: block;
	speak: never;
}

/* Swap to a cross while the panel is open. */
.ssc-search-open .ssc-search-toggle__icon::before { content: "\f00d"; }

.ssc-search-toggle:hover { color: var(--ssc-accent); }

.ssc-search-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 3px;
}

/* The panel is a full-width row inside the header. */
.ssc-search-panel {
	width: 100%;
	padding: 10px 0 4px;
}

.ssc-search-panel[hidden] { display: none; }

/* One clean white pill: plain white background, black text, nothing else.
   The wrapper owns the shape; the field and button are stripped bare.
   The theme (and Foundation) style inputs with their own border, square
   corners and a grey glow, which showed through as a rectangle inside the
   pill — hence the deliberately specific selectors and !important below. */
.ssc-search-form {
	display: flex;
	align-items: stretch;
	max-width: 460px;
	margin: 0 auto;
	width: 100%;
	background: #fff;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: none;
	border: 1px solid rgba(0, 0, 0, .12);
	transition: border-color .18s ease;
}

.ssc-search-form:focus-within {
	border-color: rgba(0, 0, 0, .45);
}

.ssc-search-panel .ssc-search-form input.ssc-search-form__field,
.ssc-search-panel .ssc-search-form input.ssc-search-form__field:focus,
.ssc-search-panel .ssc-search-form input.ssc-search-form__field:hover,
.ssc-search-panel .ssc-search-form input.ssc-search-form__field:active {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 42px;
	margin: 0 !important;
	padding: 0 6px 0 20px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	background-image: none !important;
	color: #000 !important;
	font-size: 15px;
	line-height: 42px;
	box-shadow: none !important;
	outline: 0 !important;
	appearance: none;
	-webkit-appearance: none;
	transition: none;
}

.ssc-search-form__field::placeholder {
	color: #8a8a8a;
	opacity: 1;
}

/* Remove the browser's native clear/decoration widgets on type=search. */
.ssc-search-form__field::-webkit-search-decoration,
.ssc-search-form__field::-webkit-search-cancel-button {
	appearance: none;
}

.ssc-search-panel .ssc-search-form button.ssc-search-form__submit,
.ssc-search-panel .ssc-search-form button.ssc-search-form__submit:hover,
.ssc-search-panel .ssc-search-form button.ssc-search-form__submit:focus,
.ssc-search-panel .ssc-search-form button.ssc-search-form__submit:active {
	flex: 0 0 auto;
	width: 50px;
	height: 42px;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	background-image: none !important;
	color: #000 !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none !important;
	text-shadow: none;
	transition: opacity .18s ease;
}

.ssc-search-panel .ssc-search-form button.ssc-search-form__submit:hover { opacity: .6; }

.ssc-search-form__submit:focus-visible {
	outline: 2px solid var(--ssc-accent);
	outline-offset: -3px;
	border-radius: 999px;
}

.ssc-search-form__icon::before {
	font-family: "FontAwesome";
	content: "\f002";
	font-size: 16px;
	display: block;
}

/* Hide the theme's own search control — the header now owns search. */
#social-navigation .search-toggle,
#social-navigation #search-container {
	display: none !important;
}

/* With search moved into the header and the social menu empty, the theme's
   coloured breadcrumbs strip is left as a bare band under the header. Hide it;
   its colour is reapplied as the header's bottom border (see
   ssc_icon_colour_styles()). If a breadcrumbs widget is ever added back, drop
   this rule and the strip returns. */
#social-breadcrumbs-wrapper {
	display: none;
}

/* ---------------------------------------------------------------- backdrop */

.ssc-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ssc-speed) ease, visibility var(--ssc-speed) ease;
	z-index: 9998;
}

.ssc-nav-open .ssc-backdrop { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------------ drawer */

.ssc-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--ssc-panel-w);
	max-width: 100%;
	background: var(--ssc-bg);
	color: var(--ssc-fg);
	transform: translateX(100%);
	transition: transform var(--ssc-speed) ease;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	visibility: hidden;
}

.ssc-nav-open .ssc-drawer { transform: translateX(0); visibility: visible; }

/* The WordPress admin bar is fixed over the top of the viewport for logged-in
   users, so a drawer anchored at top:0 slides underneath it and loses its
   close button. Offset by the admin bar's height at each of its breakpoints. */
body.admin-bar .ssc-drawer {
	top: 32px;
	height: calc(100% - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .ssc-drawer {
		top: 46px;
		height: calc(100% - 46px);
	}
}

.ssc-drawer__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: var(--ssc-head-h);
	padding: 0 12px;
	border-bottom: 1px solid var(--ssc-border);
	flex: 0 0 auto;
}

/* The parent theme styles bare <button> elements (padding + a coloured focus
   state), so these declarations are deliberately explicit to stop that
   bleeding into the drawer controls. */
.ssc-drawer__close,
.ssc-drawer__close:hover,
.ssc-drawer__close:focus,
.ssc-drawer__close:active {
	appearance: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--ssc-fg);
	font-size: 28px;
	line-height: 1;
	width: 44px;
	height: 44px;
	min-width: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ssc-drawer__close:hover { color: var(--ssc-accent); }

.ssc-drawer__close:focus-visible {
	outline: 2px solid var(--ssc-fg);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- menu items */

.ssc-drawer .ssc-menu,
.ssc-drawer .ssc-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ssc-drawer .ssc-menu li { border-bottom: 1px solid var(--ssc-border); }

.ssc-drawer .ssc-menu a {
	display: block;
	padding: 14px 18px;
	color: var(--ssc-fg);
	text-decoration: none;
	font-size: 16px;
	line-height: 1.4;
}

.ssc-drawer .ssc-menu a:hover,
.ssc-drawer .ssc-menu a:focus {
	background: rgba(255, 255, 255, .08);
	color: var(--ssc-accent);
}

.ssc-drawer .ssc-menu .current-menu-item > a,
.ssc-drawer .ssc-menu .current_page_item > a {
	background: rgba(255, 255, 255, .12);
	font-weight: 600;
}

/* Nested levels get progressive indent instead of hover fly-outs. */
.ssc-drawer .ssc-menu .sub-menu a { padding-left: 34px; font-size: 15px; }
.ssc-drawer .ssc-menu .sub-menu .sub-menu a { padding-left: 50px; }
.ssc-drawer .ssc-menu .sub-menu .sub-menu .sub-menu a { padding-left: 66px; }

/* Collapsible submenus: hidden until the parent row is expanded. */
.ssc-drawer .ssc-menu .sub-menu { display: none; }
.ssc-drawer .ssc-menu .ssc-expanded > .sub-menu { display: block; }

.ssc-menu__row { display: flex; align-items: stretch; }
.ssc-menu__row > a { flex: 1 1 auto; }

.ssc-submenu-toggle {
	appearance: none;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--ssc-border);
	color: inherit;
	width: 48px;
	flex: 0 0 48px;
	cursor: pointer;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ssc-submenu-toggle:focus-visible { outline: 2px solid var(--ssc-fg); outline-offset: -2px; }
.ssc-submenu-toggle::before { content: "\25BC"; transition: transform var(--ssc-speed) ease; display: block; }
.ssc-expanded > .ssc-menu__row .ssc-submenu-toggle::before { transform: rotate(180deg); }

/* ------------------------------------------------------- state + viewport */

/* Only engage the mobile pattern below the desktop breakpoint. */
@media (max-width: 991px) {
	/* Lock background scrolling while the drawer is open. */
	body.ssc-nav-open { overflow: hidden; }

	/* Put the logo and the hamburger on a single row inside the theme's own
	   header. The theme stacks them by default; this only changes the layout,
	   not the markup, so the header stays the theme's to style. */
	#site-header1,
	#site-header2,
	#site-header3 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		column-gap: 12px;
		/* Breathing room at the screen edges; respects notches/rounded corners
		   on modern phones via safe-area insets. */
		padding-left: max(16px, env(safe-area-inset-left));
		padding-right: max(16px, env(safe-area-inset-right));
		box-sizing: border-box;
	}

	#site-header1 .site-logo,
	#site-header2 .site-logo,
	#site-header3 .site-logo {
		flex: 0 1 auto;
		margin: 0;
		text-align: left;
		min-width: 0;          /* let a wide logo shrink instead of pushing the button off */
	}

	#site-header1 .site-logo img,
	#site-header2 .site-logo img,
	#site-header3 .site-logo img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* The nav wrapper only carries the two icon buttons at these widths (the
	   menu itself is hidden), so lay them out as a row: search then hamburger,
	   sharing the single header line with the logo. */
	#site-header1 #site-navigation,
	#site-header2 #site-navigation,
	#site-header3 #site-navigation {
		flex: 0 0 auto;
		width: auto;
		margin: 0;
		order: 2;
		display: flex;
		align-items: center;
		gap: 2px;
	}

	/* DOM order inside the nav is [hamburger container][menu][search], so put
	   the search first visually. */
	#site-header1 .ssc-search-toggle,
	#site-header2 .ssc-search-toggle,
	#site-header3 .ssc-search-toggle { order: 1; }

	#site-header1 .toggle-container,
	#site-header2 .toggle-container,
	#site-header3 .toggle-container { order: 2; }

	/* The panel is a full-width row beneath the logo/search/hamburger line. */
	#site-header1 .ssc-search-panel,
	#site-header2 .ssc-search-panel,
	#site-header3 .ssc-search-panel {
		flex: 1 0 100%;
		order: 4;
	}

	#site-header1 .toggle-container,
	#site-header2 .toggle-container,
	#site-header3 .toggle-container {
		margin: 0;
		padding: 0;
		float: none;
		text-align: right;
	}

	/* If the site title / description are enabled they get their own full-width
	   row underneath rather than fighting the logo for space. */
	#site-header1 #site-title,
	#site-header1 #site-description,
	#site-header2 #site-title,
	#site-header2 #site-description,
	#site-header3 #site-title,
	#site-header3 #site-description {
		flex: 1 0 100%;
		order: 3;
	}
}

/* Above the breakpoint the parent theme's own desktop menu takes over.
   The theme already hides .toggle-container at these widths. */
@media (min-width: 992px) {
	.ssc-toggle,
	.ssc-drawer,
	.ssc-backdrop { display: none !important; }

	/* wp_nav_menu() wraps the list in a block-level <div class="menu-…-container">,
	   and the list itself is a full-width block — between them they pushed the
	   search button onto its own line. Shrink both to their content so the icon
	   sits beside the menu on the same centred row. */
	#site-navigation > div[class*="-container"]:not(.toggle-container),
	#site-navigation .nav-menu {
		display: inline-block;
		width: auto;
		vertical-align: middle;
	}

	#site-navigation .ssc-search-toggle {
		vertical-align: middle;
		margin-left: 4px;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.ssc-drawer,
	.ssc-backdrop,
	.ssc-toggle__bar,
	.ssc-submenu-toggle::before { transition: none !important; }
}

/* Visually hidden but available to screen readers. */
.ssc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}