/**
 * Site header and footer.
 *
 * Loads on every page. The markup is Tactiko's own header partial and footer
 * landmark (see inc/chrome.php); this only styles the two additions - the
 * utility bar and the social cluster - and the footer contents.
 *
 * Breakpoints are 1024/767 to match Tactiko's own Elementor breakpoints
 * (viewport_lg 1025 / viewport_md 768), so the chrome and the still-Elementor
 * page content break at the same widths.
 *
 * @package tactiko-child
 */

:root {
	--ssg-shell: 1410px;
	--ssg-gutter: 1.875rem;
}

/* -------------------------------------------------------------------------
 * Utility bar
 * ---------------------------------------------------------------------- */

.ssg-topbar {
	background: #252525;
	color: #fff;
	font-size: 0.8125rem;
}

.ssg-topbar__inner,
.ssg-header__inner {
	max-width: var(--ssg-shell);
	margin-inline: auto;
	padding-inline: var(--ssg-gutter);
}

/*
 * The bar is a block template part: a flex group of paragraphs, one per item.
 * Icons are attached by CSS rather than sitting in the markup, so the editor
 * shows plain editable text and an author cannot accidentally delete an SVG.
 */
.ssg-topbar__inner.wp-block-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.5rem;
	padding-block: 0.6rem;
}

.ssg-topbar__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.ssg-topbar__item + .ssg-topbar__item::after {
	content: "";
	position: absolute;
	left: -0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 12px;
	background: rgba(255, 255, 255, 0.28);
}

.ssg-topbar__item::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-color: var(--wp--preset--color--brand, #8e8b5e);
	-webkit-mask: var(--ssg-topbar-icon) center / contain no-repeat;
	mask: var(--ssg-topbar-icon) center / contain no-repeat;
}

.ssg-topbar__item--phone {
	--ssg-topbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 2.5h3l1.5 3.7-1.9 1.1a10 10 0 0 0 4.5 4.5l1.1-1.9 3.7 1.5v3a1.4 1.4 0 0 1-1.5 1.4A13 13 0 0 1 3.2 4a1.4 1.4 0 0 1 1.4-1.5z'/%3E%3C/svg%3E");
}

.ssg-topbar__item--book {
	--ssg-topbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5l4 4 9-9'/%3E%3C/svg%3E");
}

.ssg-topbar__item--pricing {
	--ssg-topbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v16M13.5 5.6H8.4a2.6 2.6 0 0 0 0 5.2h3.2a2.6 2.6 0 0 1 0 5.2H6.2'/%3E%3C/svg%3E");
}

/* An item the author adds gets no icon rather than a broken one. */
.ssg-topbar__item:not([class*="ssg-topbar__item--"])::before { display: none; }

.ssg-topbar__item a {
	color: inherit;
	text-decoration: none;
}

.ssg-topbar__item a:hover,
.ssg-topbar__item a:focus-visible { color: #fff; }

.ssg-topbar__item strong { font-weight: 700; }

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.ssg-header {
	background: #fff;
	position: relative;
	z-index: 20;
}

/*
 * Tactiko puts margin-bottom: 60px on .site-header. On the full-width template
 * that gap is a white band above a full-bleed hero, so it goes - but only
 * there. Ordinary pages (page-template-default, archives, single posts) render
 * inside the boxed .col-full wrapper and still want the breathing room, so the
 * rule is scoped to the template that actually bleeds.
 */
.page-template-template-homepage .ssg-header {
	margin-bottom: 0;
}

.ssg-header__brandrow .ssg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 128px;
}

.ssg-header .site-branding { line-height: 0; }

/*
 * The logo is a transparent PNG cropped to the artwork itself, so this height
 * maps to the visible mark rather than to the white margin the old JPEG
 * carried. 99px matches the old site; the 128px row leaves ~14px above and
 * below it.
 */
.ssg-header .site-branding img.custom-logo {
	display: block;
	width: auto;
	height: 99px;
	max-height: 99px;
}

/* The site name is a visual duplicate of the wordmark inside the logo file. */
.ssg-header .site-branding-text { display: none; }

.ssg-header__tools {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ssg-header .site-header-search a,
.ssg-header .menu-mobile-nav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--ink, #000);
	text-decoration: none;
}

.ssg-header .menu-mobile-nav-button { display: none; }

/* Nav row */
.ssg-header__navrow {
	border-top: 1px solid var(--wp--preset--color--rule, #ddd);
	border-bottom: 1px solid var(--wp--preset--color--rule, #ddd);
}

.ssg-header__navrow .ssg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.ssg-header .main-navigation { flex: 1 1 auto; min-width: 0; }

.ssg-header .main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssg-header .main-navigation > div > ul > li { position: relative; }

/*
 * The selector mirrors Tactiko's own (`.main-navigation ul.menu > li.menu-item
 * > a`, inside its min-width:768px block) with `.ssg-header` prepended. That is
 * deliberate: the theme's rule carries three classes and sets
 * `padding: 1.765em 1.3em`, so the shorter `.ssg-header .main-navigation > div
 * > ul > li > a` this replaced had lower specificity and silently lost. Four
 * classes beats three, so this wins without needing !important.
 *
 * Vertical padding is cut from 1.765em to 1.05em to tighten the bar; the
 * horizontal 1.3em is the theme's own value, kept so item spacing is unchanged.
 */
.ssg-header .main-navigation ul.menu > li.menu-item > a,
.ssg-header .main-navigation ul.nav-menu > li.menu-item > a {
	display: block;
	padding: 1.05em 1.3em;
	color: var(--wp--preset--color--ink, #000);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
}

/*
 * These have to out-specify the base rule above (4 classes), not just the
 * theme's - adding `.menu-item` and the state class puts them at five.
 */
.ssg-header .main-navigation ul.menu > li.menu-item.current-menu-item > a,
.ssg-header .main-navigation ul.menu > li.menu-item.current-menu-ancestor > a,
.ssg-header .main-navigation ul.menu > li.menu-item:hover > a,
.ssg-header .main-navigation ul.menu > li.menu-item:focus-within > a,
.ssg-header .main-navigation ul.nav-menu > li.menu-item.current-menu-item > a,
.ssg-header .main-navigation ul.nav-menu > li.menu-item.current-menu-ancestor > a,
.ssg-header .main-navigation ul.nav-menu > li.menu-item:hover > a,
.ssg-header .main-navigation ul.nav-menu > li.menu-item:focus-within > a {
	color: var(--wp--preset--color--brand, #8e8b5e);
}

/*
 * No caret rules here on purpose. Tactiko already renders a submenu arrow on
 * `> a::after` using its own `tactiko-icon` font; adding a second border-drawn
 * chevron to the same pseudo-element made the two composite into a mangled
 * glyph. The theme's arrow is left to do the job.
 */

/* Dropdowns: CSS only, opened by hover and by keyboard focus. */
.ssg-header .main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: block;
	min-width: 240px;
	padding: 0.5rem 0;
	border: 1px solid var(--wp--preset--color--rule, #ddd);
	background: #fff;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.ssg-header .main-navigation li:hover > .sub-menu,
.ssg-header .main-navigation li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ssg-header .main-navigation .sub-menu li { width: 100%; }

.ssg-header .main-navigation .sub-menu a {
	display: block;
	padding: 0.6rem 1.25rem;
	color: var(--wp--preset--color--body-text, #505050);
	font-size: 0.875rem;
	text-decoration: none;
}

.ssg-header .main-navigation .sub-menu a:hover,
.ssg-header .main-navigation .sub-menu a:focus-visible {
	background: var(--wp--preset--color--shell, #f5f5f5);
	color: var(--wp--preset--color--brand, #8e8b5e);
}

/* -------------------------------------------------------------------------
 * Social cluster (header + footer)
 * ---------------------------------------------------------------------- */

.ssg-social {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssg-social li { margin: 0; }

.ssg-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--wp--preset--color--ink, #000);
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.ssg-social a:hover,
.ssg-social a:focus-visible {
	background: var(--wp--preset--color--brand, #8e8b5e);
	color: #fff;
}

.ssg-social .ssg-icon { width: 18px; height: 18px; }

/*
 * Only the PHP fallback footer uses this cluster - the template part renders
 * core/social-links instead (styled as .ssg-footer__social below). It is kept
 * so the fallback still looks right on the dark ground if it ever renders.
 */
.ssg-social--footer a { color: rgba(255, 255, 255, 0.8); }

.ssg-social--footer a:hover,
.ssg-social--footer a:focus-visible {
	background: var(--wp--preset--color--brand, #8e8b5e);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

#colophon.site-footer {
	background: #252525;
	color: rgba(255, 255, 255, 0.75);
}

.ssg-footer__inner {
	max-width: var(--ssg-shell);
	margin-inline: auto;
	padding: 4rem var(--ssg-gutter);
}

.ssg-footer__cols.wp-block-columns {
	gap: var(--ssg-gutter);
	align-items: flex-start;
}

.ssg-footer__logo { margin: 0; line-height: 0; }

.ssg-footer__logo img {
	width: 190px;
	max-width: 100%;
	height: auto;
}

.ssg-footer__brand .wp-block-buttons { margin-top: 1.5rem; }

.ssg-footer__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.4rem;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
}

/* The arrow is decoration, so it is a pseudo-element, not editable content. */
.ssg-footer__cta .wp-block-button__link::after {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h11M11 6l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h11M11 6l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ssg-footer__cta .wp-block-button__link:hover,
.ssg-footer__cta .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--brand, #8e8b5e);
	background: var(--wp--preset--color--brand, #8e8b5e);
	color: #fff;
}

.ssg-footer__address {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.ssg-footer__address li { margin: 0; }

.ssg-footer__address a {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9375rem;
	line-height: 1.45;
	text-decoration: none;
}

.ssg-footer__address a:hover,
.ssg-footer__address a:focus-visible { color: #fff; }

/*
 * Icons are matched on the link's own href, not on position, so reordering the
 * list or adding a line in the editor cannot hand an item the wrong icon.
 */
.ssg-footer__address a::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background-color: var(--wp--preset--color--brand, #8e8b5e);
	-webkit-mask: var(--ssg-addr-icon) center / contain no-repeat;
	mask: var(--ssg-addr-icon) center / contain no-repeat;
}

.ssg-footer__address a[href^="tel:"] {
	--ssg-addr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 2.5h3l1.5 3.7-1.9 1.1a10 10 0 0 0 4.5 4.5l1.1-1.9 3.7 1.5v3a1.4 1.4 0 0 1-1.5 1.4A13 13 0 0 1 3.2 4a1.4 1.4 0 0 1 1.4-1.5z'/%3E%3C/svg%3E");
}

.ssg-footer__address a[href^="mailto:"] {
	--ssg-addr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='1.5'/%3E%3Cpath d='M2.9 5.4 10 10.8l7.1-5.4'/%3E%3C/svg%3E");
}

.ssg-footer__address a[href*="maps."],
.ssg-footer__address a[href*="/maps"] {
	--ssg-addr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 18s6-5.4 6-9.4A6 6 0 0 0 4 8.6C4 12.6 10 18 10 18z'/%3E%3Ccircle cx='10' cy='8.6' r='2.2'/%3E%3C/svg%3E");
}

/* No matching scheme: no icon, and the text still aligns. */
.ssg-footer__address a:not([href^="tel:"]):not([href^="mailto:"]):not([href*="maps."]):not([href*="/maps"])::before {
	display: none;
}

/* Core social-links block, replacing the hand-rolled footer social markup. */
.ssg-footer__social.wp-block-social-links { gap: 0.35rem; }

.ssg-footer__social .wp-social-link {
	background-color: transparent;
	color: rgba(255, 255, 255, 0.8);
}

.ssg-footer__social .wp-social-link:hover,
.ssg-footer__social .wp-social-link:focus-within {
	background-color: var(--wp--preset--color--brand, #8e8b5e);
	color: #fff;
	transform: none;
}

.ssg-footer__heading {
	margin: 0 0 1.1rem;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.ssg-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssg-footer__col .wp-block-heading { margin-top: 0; }

.ssg-footer__links li { margin: 0 0 0.6rem; }

.ssg-footer__links a {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9375rem;
	text-decoration: none;
}

.ssg-footer__links a:hover,
.ssg-footer__links a:focus-visible {
	color: var(--wp--preset--color--gold, #dfb62a);
}

.ssg-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ssg-footer__copy {
	max-width: var(--ssg-shell);
	margin: 0 auto;
	padding: 1.4rem var(--ssg-gutter);
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.8125rem;
	text-align: center;
}

/* Underlined: the link and the text around it are both muted white, so color
   alone cannot mark it as a link (WCAG 1.4.1). */
.ssg-footer__copy a { color: rgba(255, 255, 255, 0.75); text-decoration: underline; text-underline-offset: 0.15em; }
.ssg-footer__copy a:hover,
.ssg-footer__copy a:focus-visible { color: #fff; }

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.ssg-footer__inner { padding-block: 3rem; }

	/* Core stacks .wp-block-columns below 782px; this is the 2-up step above it. */
	.ssg-footer__cols.wp-block-columns {
		flex-wrap: wrap !important;
		gap: 2.5rem var(--ssg-gutter);
	}

	.ssg-footer__cols.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - (var(--ssg-gutter) / 2)) !important;
	}
}

@media (max-width: 767px) {
	/*
	 * Below the drawer breakpoint the desktop nav row is replaced by Tactiko's
	 * own off-canvas drawer (tactiko_mobile_nav, printed in wp_footer), which
	 * is driven by the theme's existing JS - so the burger keeps working
	 * without any script of ours.
	 */
	.ssg-header__navrow { display: none; }

	.ssg-header .menu-mobile-nav-button { display: inline-flex; }

	.ssg-header__brandrow .ssg-header__inner { min-height: 92px; }

	/* Both, not just max-height: the desktop rule sets an explicit height. */
	.ssg-header .site-branding img.custom-logo {
		height: 68px;
		max-height: 68px;
	}

	.ssg-topbar__inner.wp-block-group {
		justify-content: center;
		gap: 0 1rem;
	}

	.ssg-topbar__item { font-size: 0.75rem; }

	.ssg-footer__cols.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}