/*
Theme Name: TeraFi Astra Child
Theme URI: https://terafi.me/
Description: Child theme for the TeraFi partner-program site on the Astra parent theme. Renders the homepage funnel via the [terafi_front_page_funnel] shortcode; header and footer are managed in Astra's builder.
Author: TeraFi
Template: astra
Version: 1.0.21
Text Domain: terafi-astra-child
*/

/* Keep global overrides light. The front page design lives in assets/css/front-page.css. */
html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* v1.0.4: kill the ~8px horizontal scroll caused by 100vw full-bleed sections
   (100vw includes the scrollbar). clip, unlike hidden, keeps position:sticky working. */
html,
body {
	overflow-x: clip;
}

/* v1.0.4: footer link columns live in an Astra footer HTML element; strip theme list bullets. */
.site-footer .ast-builder-html-element ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.site-footer .ast-builder-html-element ul li {
	list-style: none;
}

/* v1.0.4: readable rhythm for plain inner-page content (product/legal/support pages). */
body:not(.home) .site-main .entry-content h1 {
	margin-bottom: 0.6em;
}

body:not(.home) .site-main .entry-content h2 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

body:not(.home) .site-main .entry-content h3 {
	margin-top: 1.2em;
}

body:not(.home) .site-main .entry-content ul,
body:not(.home) .site-main .entry-content ol {
	margin-bottom: 1.2em;
}

/* v1.0.6: transparent header on inner pages - clear the header height. */
body.ast-theme-transparent-header:not(.home) .site-content {
	padding-block-start: clamp(96px, 12vw, 130px);
}

/* v1.0.15: ink-hero pages — drop that clearance padding so the dark hero rises
   up BEHIND the transparent header instead of leaving a white band underneath
   it. The clearance is only right for LIGHT inner pages (transparent header
   over the page's white top + dark text). Ink pages supply their own dark
   backdrop, force white header text (their inline ≥1201px CSS), and already
   carry extra pagehead padding so hero content clears the overlaid header.
   Without this, every ink page showed WHITE header text on the WHITE band at
   desktop widths. (:has() matches the pattern already used in front-page.css.) */
body.ast-theme-transparent-header:not(.home):has(.tf-pagehead--ink) .site-content {
	padding-block-start: 0;
}

/* v1.0.6: adaptive header contrast. JS adds tf-header-on-dark when the area
   behind the transparent header has a dark background.
   v1.0.14: scoped to the desktop header (>1200px). At/below the 1200px header
   breakpoint the bar is always the solid LIGHT mobile header, so whitening its
   contents on a detector misfire produced light-on-light text. */
@media (min-width: 1201px) {
	body.tf-header-on-dark .site-header .main-header-menu > .menu-item > .menu-link,
	body.tf-header-on-dark .site-header .site-title a,
	body.tf-header-on-dark .site-header .ast-header-html .ast-builder-html-element {
		color: #ffffff;
	}

	body.tf-header-on-dark .site-header .main-header-menu > .menu-item > .menu-link:hover {
		color: #dbe4ff;
	}

	body.tf-header-on-dark .site-header .custom-logo,
	body.tf-header-on-dark .site-header .astra-logo-svg,
	body.tf-header-on-dark .site-header img.ast-logo-file {
		filter: invert(1) hue-rotate(180deg);
	}

	body.tf-header-on-dark .site-header .menu-toggle {
		color: #ffffff;
	}
}

/* v1.0.14: the mobile menu toggle is a dark circular button (Astra customizer
   background #364151). The ink pages' inline ≤1200px dark-text rule (v1.0.9,
   baked into their page content) was also painting the toggle ICON dark →
   a dark-on-dark hamburger on every ink page at tablet/laptop widths. The icon
   must stay white on its dark circle everywhere; extra class specificity beats
   the page-inline #masthead .menu-toggle rule regardless of order. */
#masthead .menu-toggle.main-header-menu-toggle,
#masthead .menu-toggle.main-header-menu-toggle .menu-toggle-icon,
#masthead .menu-toggle.main-header-menu-toggle svg {
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* v1.0.8: "Get Started" header button was blue-on-blue on hover (Astra hover
   swaps to global colours). Keep white text on a darker blue instead. */
#masthead .ast-button:hover,
#masthead .ast-button:focus,
#masthead a.spectra-popup-trigger-8160:hover,
#masthead a.spectra-popup-trigger-8160:focus,
.ast-header-html .ast-button:hover,
.ast-header-html .ast-button:focus {
	color: #ffffff !important;
	background-color: #0052c4 !important;
	border-color: #0052c4 !important;
}

/* v1.0.8: logo sizing — the fixed width read too small on mobile and too large
   at tablet widths. Give it sensible per-breakpoint sizes. */
@media (max-width: 600px) {
	#masthead .custom-logo,
	#masthead .astra-logo-svg,
	#masthead img.ast-logo-file {
		width: 152px !important;
		max-width: 152px !important;
		height: auto !important;
	}
}

/* v1.0.13: extended from 921px to 1199.98px — the mobile header now officially
   spans the whole sub-1200 range (see header-switch fix below), so the tablet
   logo size must cover 922–1199px too (it previously rendered uncapped there). */
@media (min-width: 601px) and (max-width: 1199.98px) {
	#masthead .custom-logo,
	#masthead .astra-logo-svg,
	#masthead img.ast-logo-file {
		width: 168px !important;
		max-width: 168px !important;
		height: auto !important;
	}
}

/* v1.0.13: make the CSS header switch match the astra_header_break_point filter
   (1200, set in functions.php v1.0.8). Astra's header-footer builder hardcodes
   its #ast-desktop-header / #ast-mobile-header visibility media queries at the
   default 921px and relies on JS (astra.break_point) to enforce a custom value.
   Result: in the 922–1199px band — exactly a high-DPI laptop at 200–250% OS
   scaling — the desktop header can render alongside the mobile header whenever
   that JS is late, blocked or errors (seen in Edge InPrivate): duplicate logo
   over the hero H1, menu items stacked over the hero, clipped header CTA.
   Enforce the 1200px switch in pure CSS so it can't depend on JS timing. */
@media (min-width: 922px) and (max-width: 1199.98px) {
	#ast-desktop-header {
		display: none !important;
	}

	#ast-mobile-header {
		display: block !important;
	}
}

/* v1.0.20: full-bleed custom-page sections.
   Custom TeraFi pages already contain their own readable inner wrappers. Keep
   those wrappers constrained, but allow their section backgrounds to span the
   viewport. This also repairs newer custom pages saved with Astra's plain
   container without widening ordinary posts or non-TeraFi legal text. */
body.ast-page-builder-template .site-main > article:has(.entry-content > .tf-page),
body.ast-plain-container:not(.home):has(.entry-content > .tf-page) .site-main > article {
	margin: 0;
	padding: 0 !important;
}

body.ast-page-builder-template .entry-content > .tf-page,
body.ast-plain-container:not(.home) .entry-content > .tf-page {
	max-width: none !important;
	width: 100% !important;
}

body.ast-page-builder-template .entry-content > .tf-page > section {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

body.ast-plain-container:not(.home):has(.entry-content > .tf-page) .site-content > .ast-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

body.ast-plain-container:not(.home):has(.entry-content > .tf-page) .content-area,
body.ast-plain-container:not(.home):has(.entry-content > .tf-page) .entry-content {
	max-width: none;
	width: 100%;
}

/* v1.0.20: desktop mega menus inspired by the useful parts of MyNiche's
   navigation: broad panels, scannable columns, icon cues and short context.
   Astra retains control of keyboard, hover and mobile/off-canvas behaviour. */
@media (min-width: 1201px) {
	#ast-desktop-header .ast-primary-header-bar {
		position: relative;
	}

	#ast-desktop-header #ast-hf-menu-1,
	#ast-desktop-header #ast-hf-menu-1 > .astra-megamenu-li {
		position: static;
	}

	#ast-desktop-header #ast-hf-menu-1 > .astra-megamenu-li > .astra-megamenu {
		background: #ffffff !important;
		border: 1px solid rgba(0, 110, 225, 0.16) !important;
		border-radius: 0 0 18px 18px;
		border-top: 3px solid #006ee1 !important;
		box-shadow: 0 22px 55px rgba(16, 31, 58, 0.16) !important;
		display: grid !important;
		gap: 12px 16px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		left: 50% !important;
		max-width: 1180px !important;
		padding: 22px !important;
		right: auto !important;
		top: 100% !important;
		transform: translateX(-50%);
		width: min(1180px, calc(100vw - 48px)) !important;
	}

	#ast-desktop-header #ast-hf-menu-1 > .astra-megamenu-li > .astra-megamenu::before {
		color: #9a6800;
		display: block;
		font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
		font-size: 0.74rem;
		font-weight: 800;
		grid-column: 1 / -1;
		height: auto;
		left: auto;
		letter-spacing: 0.1em;
		line-height: 1.2;
		padding: 3px 4px 9px;
		position: static;
		right: auto;
		text-transform: uppercase;
		top: auto;
		transform: none;
		width: auto;
	}

	#ast-desktop-header #menu-item-8332 > .astra-megamenu::before { content: "Products and services"; }
	#ast-desktop-header #menu-item-8339 > .astra-megamenu::before { content: "Partner models and enablement"; }
	#ast-desktop-header #menu-item-8364 > .astra-megamenu::before { content: "Support and resources"; }
	#ast-desktop-header #menu-item-8034 > .astra-megamenu::before { content: "Company and governance"; }

	#ast-desktop-header .astra-megamenu > .menu-item {
		border: 0 !important;
		width: auto !important;
	}

	#ast-desktop-header .astra-megamenu > .menu-item > .menu-link {
		align-items: center;
		background: #f8fbff;
		border: 1px solid rgba(0, 110, 225, 0.11);
		border-radius: 13px;
		color: #101f3a !important;
		display: grid;
		gap: 2px 13px;
		grid-template-columns: 44px minmax(0, 1fr);
		grid-template-rows: auto auto;
		min-height: 84px;
		padding: 13px 15px !important;
		transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
		white-space: normal;
	}

	#ast-desktop-header .astra-megamenu > .menu-item > .menu-link:hover,
	#ast-desktop-header .astra-megamenu > .menu-item > .menu-link:focus-visible {
		background: #ffffff;
		border-color: rgba(0, 110, 225, 0.35);
		box-shadow: 0 10px 26px rgba(0, 80, 170, 0.1);
		transform: translateY(-2px);
	}

	#ast-desktop-header .astra-megamenu > .menu-item > .menu-link > .menu-text {
		align-self: end;
		font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
		font-size: 0.98rem;
		font-weight: 800;
		grid-column: 2;
		grid-row: 1;
		line-height: 1.2;
	}

	#ast-desktop-header .astra-megamenu > .menu-item > .menu-link::before {
		align-items: center;
		align-self: center;
		background: #e9f3ff;
		border: 1px solid rgba(0, 110, 225, 0.13);
		border-radius: 11px;
		color: #006ee1;
		content: var(--tf-mega-icon, "•");
		display: flex;
		font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
		font-size: 1.05rem;
		font-weight: 900;
		grid-column: 1;
		grid-row: 1 / 3;
		height: 42px;
		justify-content: center;
		width: 42px;
	}

	#ast-desktop-header .astra-megamenu > .menu-item > .menu-link::after {
		align-self: start;
		color: #65727a;
		content: var(--tf-mega-copy, "Explore this section");
		font-size: 0.78rem;
		font-weight: 500;
		grid-column: 2;
		grid-row: 2;
		line-height: 1.35;
	}

	#ast-desktop-header .astra-megamenu > .menu-item > .menu-link > .ast-icon {
		display: none;
	}

	#menu-item-8386 { --tf-mega-icon: "☎"; --tf-mega-copy: "Cloud PBX, SIP trunks and numbers"; }
	#menu-item-8794 { --tf-mega-icon: "✦"; --tf-mega-copy: "P-Series routes and partner enablement"; }
	#menu-item-8387 { --tf-mega-icon: "▣"; --tf-mega-copy: "SIM-only, shared data and IoT"; }
	#menu-item-8388 { --tf-mega-icon: "◎"; --tf-mega-copy: "NBN, fibre and managed connectivity"; }
	#menu-item-8389 { --tf-mega-icon: "+"; --tf-mega-copy: "Messaging, devices and specialist services"; }

	#menu-item-8390 { --tf-mega-icon: "◇"; --tf-mega-copy: "Your brand, our operational layer"; }
	#menu-item-8391 { --tf-mega-icon: "⇄"; --tf-mega-copy: "Control the offer and customer margin"; }
	#menu-item-8392 { --tf-mega-icon: "◫"; --tf-mega-copy: "Add telecom beside managed services"; }
	#menu-item-8649 { --tf-mega-icon: "⌘"; --tf-mega-copy: "Connect voice with the business stack"; }
	#menu-item-8393 { --tf-mega-icon: "▤"; --tf-mega-copy: "See partner delivery patterns"; }

	#menu-item-8365 { --tf-mega-icon: "◉"; --tf-mega-copy: "Reach the Australian partner team"; }
	#menu-item-8367 { --tf-mega-icon: "{}"; --tf-mega-copy: "Technical guides and integration paths"; }
	#menu-item-8793 { --tf-mega-icon: "Aa"; --tf-mega-copy: "Plain-English telecom terminology"; }
	#menu-item-8370 { --tf-mega-icon: "→"; --tf-mega-copy: "From partner fit to first live customer"; }
	#menu-item-8366 { --tf-mega-icon: "⌖"; --tf-mega-copy: "Networks, reach and service options"; }
	#menu-item-8369 { --tf-mega-icon: "●"; --tf-mega-copy: "Current platform and carrier notices"; }
	#menu-item-8368 { --tf-mega-icon: "?"; --tf-mega-copy: "Fast answers to common partner questions"; }

	#menu-item-8361 { --tf-mega-icon: "i"; --tf-mega-copy: "Who TeraFi serves and how we work"; }
	#menu-item-8360 { --tf-mega-icon: "▱"; --tf-mega-copy: "Updates, insights and announcements"; }
	#menu-item-8362 { --tf-mega-icon: "✉"; --tf-mega-copy: "Start a commercial conversation"; }
	#menu-item-8363 { --tf-mega-icon: "§"; --tf-mega-copy: "Agreements, policies and compliance"; }
	#menu-item-8359 { --tf-mega-icon: "⌑"; --tf-mega-copy: "How personal information is handled"; }
}

@media (prefers-reduced-motion: reduce) {
	#ast-desktop-header .astra-megamenu > .menu-item > .menu-link {
		transition: none;
	}
}