/* ============================================================
   ILM Tuition — Design Tokens
   v1.2.3 · Batch 2 · Header + Footer
   Ported from ilm-tuition-website-content.html

   Loaded by wp-content/mu-plugins/ilm-styles.php, which
   declares a dependency on Astra's `astra-theme-css` handle so
   this file prints AFTER Astra's 64 KB inline CSS block.

   ⚠️  SPECIFICITY, NOT SOURCE ORDER
   Astra targets headings as:
       h1, .entry-content :where(h1)                          (0,1,0)
       .elementor-widget-heading h1.elementor-heading-title    (0,2,2)
   A bare `h1 {}` from us is (0,0,1) and LOSES to both, however
   late it loads. Our heading rules therefore mirror Astra's
   selector shapes. Do not "simplify" them back to bare tags.

   SCOPE: tokens, base type, layout + button primitives only.
   Components (cards, price table, FAQ, tick lists, offer grid)
   land section by section in Batch 2.
   ============================================================ */


/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
	--ink:         #14213d;
	--ink-soft:    #2a3b5c;
	--paper:       #f1f3ee;
	--panel:       #ffffff;
	--gold:        #b8862b;
	--gold-light:  #e8c468;
	--teal:        #2f6f62;
	--teal-soft:   #e3eeea;
	--slate:       #5b6472;
	--line:        #dadfd3;
	--line-strong: #c3cab9;

	--radius: 10px;
	--maxw:   960px;
}


/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* Astra sets the system stack on this exact selector list.
   Form controls do not inherit font-family, which is why they
   are named here rather than relying on `body` alone. */
body,
button,
input,
select,
textarea {
	font-family: 'Inter', sans-serif;
}

body {
	background: var(--paper);
	color: var(--ink);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

p {
	margin: 0 0 1em;
	color: var(--ink-soft);
}

a {
	color: inherit;
}

/* Focus ring for keyboard users only. Astra's a:focus { outline: thin
   dotted } (0,1,1) fires on every click too; (0,2,1) removes it for
   pointer focus. The keyboard ring uses --gold, which clears 3:1 on
   both white and --ink. */
a:focus:not(:focus-visible) {
	outline: none;
}

a:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 2px;
}


/* ------------------------------------------------------------
   3. HEADINGS
   Selector lists mirror Astra's. See the note at the top.
   ------------------------------------------------------------ */
h1,
h2,
h3,
.entry-content :where(h1),
.entry-content :where(h2),
.entry-content :where(h3),
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 0.4em;
	letter-spacing: -0.01em;
}

h1,
.entry-content :where(h1),
.elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(2rem, 5vw, 2.9rem);
	line-height: 1.08;
}

/* The mockup sets no line-height on h2/h3, so they inherit the
   body's 1.6. Stated explicitly here only to defeat Astra's
   1.3em, which would otherwise win on specificity. */
h2,
.entry-content :where(h2),
.elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	line-height: 1.6;
}

h3,
.entry-content :where(h3),
.elementor-widget-heading h3.elementor-heading-title {
	font-size: 1.2rem;
	line-height: 1.6;
}


/* ------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   ------------------------------------------------------------ */
.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 24px;
}

.mono {
	font-family: 'IBM Plex Mono', monospace;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}


/* ------------------------------------------------------------
   5. BUTTON PRIMITIVES
   Needed by the header at 4.6. Hover values are kept as the
   mockup's literals rather than promoted to tokens — each is
   used exactly once, and verbatim beats tidy here.
   ------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: 0.15s;
}

.btn-primary {
	background: var(--gold);
	color: #fff;
}

.btn-primary:hover {
	background: #a3771f;
}

.btn-ghost {
	background: transparent;
	border-color: var(--ink);
	color: var(--ink);
}

.btn-ghost:hover {
	background: var(--ink);
	color: #fff;
}

.btn-teal {
	background: var(--teal);
	color: #fff;
}

.btn-teal:hover {
	background: #255a4f;
}


/* ------------------------------------------------------------
   6. HEADER
   Astra Header Builder stays at defaults; this section owns every
   visual. All selectors are scoped to #masthead: one ID outranks
   any number of Astra's classes (its header rules reach 0,5,0).
   Exception: Astra itself uses #masthead once, for mobile bar
   padding (1,3,0); 6.1 matches that shape. Audited 2026-09-11.
   Desktop vs mobile is split by Astra's own containers
   (.ast-builder-menu-1 / .ast-builder-menu-mobile), not by media
   queries — Astra's JS picks the header at 767px.
   ------------------------------------------------------------ */

/* 6.1 Bar */
#masthead {
	position: sticky;
	top: 0;
	z-index: 50;
}

#masthead .ast-primary-header-bar {
	background: var(--ink);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Desktop: 960 wrap, 24px gutters, 64px + 1px border = the mockup's 65 */
#masthead .site-primary-header-wrap.ast-container {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 24px;
}

#masthead .ast-primary-header-bar .site-primary-header-wrap {
	min-height: 64px;
}

/* Mobile: bar and wrap are one element, and border-box counts the
   border inside min-height, so 65px gives the mockup's 64 + 1. */
#masthead .ast-mobile-header-wrap .ast-primary-header-bar {
	min-height: 65px;
}

/* Astra's rule is .ast-header-break-point #masthead … (1,3,0) at
   20px. Same shape, loaded later, so 24px wins and the tick lines
   up with the dropdown links' 24px. */
.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar {
	padding-left: 24px;
	padding-right: 24px;
}

/* 6.2 Logo: Astra's site title plus the mockup's gold tick */
#masthead .ast-site-identity {
	padding: 0;
}

#masthead .site-title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.6;
}

#masthead .site-title a,
#masthead .site-title a:hover {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Fraunces', serif;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}

#masthead .site-title a::before {
	content: '';
	flex: none;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5L9 17.5L20 5' stroke='%23E8C468' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

/* 6.3 Desktop links */
#masthead .ast-builder-menu-1 .main-header-menu {
	gap: 28px;
}

#masthead .ast-builder-menu-1 .main-header-menu > .menu-item {
	line-height: 1.6; /* Astra: 80px */
}

#masthead .ast-builder-menu-1 .menu-item > .menu-link {
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	font-size: 0.92rem;
	font-weight: 500;
	color: #d7dcea;
	text-decoration: none;
	transition: 0.2s;
}

#masthead .ast-builder-menu-1 .menu-item > .menu-link:hover,
#masthead .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link {
	color: #fff;
	border-color: var(--gold);
}

/* 6.4 Mobile toggle: the mockup's three bars, drawn in CSS.
   Astra's SVGs (bars + close) are hidden; the mockup's toggle
   has no close state. Box = 22x26: three 2px bars, 5px margins. */
#masthead .menu-toggle.main-header-menu-toggle {
	padding: 8px;
	border: none;
	background: none;
}

#masthead .menu-toggle .ahfb-svg-iconset {
	display: none;
}

#masthead .menu-toggle .mobile-menu-toggle-icon {
	display: block;
	width: 22px;
	height: 26px;
	background:
		linear-gradient(#fff, #fff) 0 5px / 22px 2px no-repeat,
		linear-gradient(#fff, #fff) 0 12px / 22px 2px no-repeat,
		linear-gradient(#fff, #fff) 0 19px / 22px 2px no-repeat;
}

/* Astra's :focus box shows after a tap. Removed for pointer
   focus only; keyboard focus keeps a visible indicator. */
#masthead .menu-toggle:focus:not(:focus-visible) {
	outline: none;
	border: none;
	box-shadow: none;
}

/* 6.5 Mobile dropdown panel: overlays the page, as the mockup */
#masthead .ast-mobile-header-wrap .ast-mobile-header-content {
	position: absolute;
	top: calc(100% - 1px); /* over the bar's border: mockup top 64px */
	left: 0;
	right: 0;
	background: var(--ink);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#masthead .ast-mobile-header-content > * {
	padding: 0; /* Astra: 10px 0 */
}

#masthead .ast-builder-menu-mobile .main-header-menu,
#masthead .ast-builder-menu-mobile .menu-item {
	background: transparent;
	border: 0;
}

#masthead .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link {
	display: block;
	padding: 14px 24px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	background: transparent;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.6;
	color: #d7dcea;
	text-decoration: none;
	transition: 0.2s;
}

#masthead .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link:hover,
#masthead .ast-builder-menu-mobile .main-header-menu .menu-item.current-menu-item > .menu-link {
	color: #fff;
	border-color: var(--gold);
}

/* 6.6 Admin bar (logged-in only): keeps the sticky bar below it */
.admin-bar #masthead {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar #masthead {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar #masthead {
		top: 0; /* WP's admin bar stops being fixed here */
	}
}

/* 6.7 Mobile dropdown slide: the mockup's 0.25s max-height.
   Astra shows the panel only while <body> has
   .ast-main-header-nav-open, via display, which can't animate.
   So the panel stays display:block and max-height does the work.
   visibility:hidden keeps collapsed links out of the Tab order. */
#masthead .ast-mobile-header-wrap .ast-mobile-header-content {
	display: block;
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: max-height 0.25s ease, visibility 0s linear 0.25s;
}

.ast-main-header-nav-open #masthead .ast-mobile-header-wrap .ast-mobile-header-content {
	max-height: 320px;
	visibility: visible;
	/* Opens slower than it closes: max-height runs to 320px but the
	   panel is ~211px, so a 0.25s open shows only ~0.1s of motion. */
	transition: max-height 0.5s ease, visibility 0s linear 0s;
}

/* Astra sets, then clears, an inline display on an inner element.
   Holding it at block lets the closing half of the slide play. */
#masthead .ast-mobile-header-content .main-header-bar-navigation {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content,
	.ast-main-header-nav-open #masthead .ast-mobile-header-wrap .ast-mobile-header-content {
		transition: none;
	}
}


/* ------------------------------------------------------------
   7. FOOTER
   Astra Footer Builder: primary row 3-equal (Astra default) =
   HTML 1 + Social | HTML 2 | Footer Menu; below row = Copyright.
   Content is single-line markup in astra-settings (footer-html-1/2)
   with our own .ilm-foot-* classes, so wpautop has no line breaks
   to convert. Scoped to #colophon: Astra's CSS uses that ID 0 times
   (audited before and after the structure write, 2026-09-11); its
   heaviest footer rules are (0,3,0).
   The mockup's footer was incomplete: values it doesn't define are
   marked NEW. Icons: Tabler (MIT, tabler.io) as CSS masks in
   --ilm-i-*, so kses can't strip them and colour comes from tokens.
   Astra centres and colours the INNER elements (.ast-builder-html-
   element, .menu-item, the copyright <p>), so alignment and type are
   set on those leaves, never only on the column. Astra's one ID rule
   here, #astra-footer-menu (1,1,1), loses to 7.5 (1,2,0).
   ------------------------------------------------------------ */

/* 7.0 Icon tokens (Tabler: outline UI icons + Facebook "f"; Instagram: Simple Icons, CC0; generated from the official SVGs) */
#colophon {
	--ilm-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0'/%3E%3C/svg%3E");
	--ilm-i-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9'/%3E%3Cpath d='M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1'/%3E%3C/svg%3E");
	--ilm-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2'/%3E%3C/svg%3E");
	--ilm-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10'/%3E%3Cpath d='M3 7l9 6l9 -6'/%3E%3C/svg%3E");
	--ilm-i-fb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' %3E%3Cpath d='M18 2a1 1 0 0 1 .993 .883l.007 .117v4a1 1 0 0 1 -.883 .993l-.117 .007h-3v1h3a1 1 0 0 1 .991 1.131l-.02 .112l-1 4a1 1 0 0 1 -.858 .75l-.113 .007h-2v6a1 1 0 0 1 -.883 .993l-.117 .007h-4a1 1 0 0 1 -.993 -.883l-.007 -.117v-6h-2a1 1 0 0 1 -.993 -.883l-.007 -.117v-4a1 1 0 0 1 .883 -.993l.117 -.007h2v-1a6 6 0 0 1 5.775 -5.996l.225 -.004h3z'/%3E%3C/svg%3E");
	--ilm-i-ig: url("data:image/svg+xml,%3Csvg fill='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E");
}

/* 7.1 Shell: mockup footer = --ink, #b9c0d6, 0.85rem */
#colophon {
	background: var(--ink);
	color: #b9c0d6;
	font-size: 0.85rem;
	line-height: 1.6;
}

#colophon .site-primary-footer-wrap,
#colophon .site-below-footer-wrap {
	background: transparent;
	border: 0;
}

#colophon .site-primary-footer-wrap {
	padding: 44px 0 32px; /* mockup top 44 */
}

#colophon .site-below-footer-wrap {
	padding: 0 0 30px; /* mockup bottom 30 */
}

/* 960 wrap with 24px gutters, as the header */
#colophon .ast-builder-grid-row {
	max-width: var(--maxw);
	min-height: 0;
	padding: 0 24px;
}

/* Equal visible gaps: each column is only as wide as its content
   (Elementor's --width: fit-content, in grid terms) and the free
   space is split evenly between them. 3-equal columns looked uneven
   because the content widths differ. */
#colophon .site-primary-footer-wrap .ast-builder-grid-row {
	grid-template-columns: repeat(3, auto);
	justify-content: space-between;
	column-gap: 32px; /* NEW: floor for narrow tablets */
}

#colophon .site-footer-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

#colophon .site-footer-section > * {
	margin-bottom: 0;
}

/* Left on every device: Astra centres the element INSIDE each HTML
   column at (0,3,0), plus 921/544 variants. */
#colophon .ast-builder-html-element {
	text-align: left;
}

/* 7.2 Brand column */
#colophon .ilm-foot-logo {
	margin: 0;
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 1.1rem; /* mockup .foot-logo */
	line-height: 1.6;
}

/* Colour on the link itself (the leaf), or Astra's HTML-element link
   colour applies. */
#colophon .ilm-foot-logo a,
#colophon .ilm-foot-logo a:hover {
	color: #fff;
	text-decoration: none;
}

#colophon .ilm-foot-tagline {
	margin: 12px 0 0; /* NEW: the 12px rhythm shared by all three columns */
	max-width: 30ch; /* NEW */
	font-size: 0.85rem;
	line-height: 1.6;
	color: #b9c0d6;
}

#colophon .ast-footer-social-wrap {
	margin-top: 18px; /* NEW */
}

#colophon .footer-social-inner-wrap {
	display: flex;
	gap: 10px; /* NEW */
	text-align: left;
}

#colophon .ast-builder-social-element {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; /* NEW */
	height: 34px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	background: transparent;
	color: #b9c0d6;
	transition: 0.2s;
}

/* Brand marks in each brand's own form: Facebook's solid "f" (Tabler
   filled) and Instagram's official line glyph (Simple Icons, CC0,
   traced from Meta's brand resources). UI icons (contact) stay outline. */
#colophon .ast-builder-social-element svg {
	display: none;
}

#colophon .ast-builder-social-element::before {
	content: '';
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--ilm-i) center / contain no-repeat;
	mask: var(--ilm-i) center / contain no-repeat;
}

#colophon .ast-facebook { --ilm-i: var(--ilm-i-fb); }
#colophon .ast-instagram { --ilm-i: var(--ilm-i-ig); }

/* The Instagram glyph fills its whole 24px box (Tabler's "f" sits in
   padding), so 14px optically matches the "f" at 16px. Same
   specificity as the shared ::before rule (1,1,1), and later. */
#colophon .ast-instagram::before {
	width: 14px;
	height: 14px;
}

#colophon .ast-builder-social-element:hover {
	color: #fff;
	border-color: var(--gold);
}

/* 7.3 Column headings: Fraunces at the wordmark's size, so the tops
   of all three columns read as one line. "Quick links" is generated
   here because Astra's free builder has no element slot left above
   the menu; current screen readers announce generated content. */
#colophon .ilm-foot-label,
#colophon .footer-bar-navigation::before {
	display: block;
	margin: 0 0 12px;
	font-family: 'Fraunces', serif;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.6;
	color: #fff;
}

#colophon .footer-bar-navigation::before {
	content: 'Quick links';
}

/* 7.4 Contact column */
#colophon .ilm-foot-contact {
	font-style: normal; /* <address> is italic by default */
}

/* Type set on the leaves: five contact rows and five links share one
   pitch (0.85rem x 1.6 + 12px), so the columns line up row for row. */
#colophon .ilm-foot-name,
#colophon .ilm-foot-line {
	margin: 0 0 12px;
	font-size: 0.85rem;
	line-height: 1.6;
}

#colophon .ilm-foot-name {
	font-weight: 600;
	color: #fff;
}

#colophon .ilm-foot-line {
	position: relative;
	padding-left: 26px;
	color: #b9c0d6;
}

#colophon .ilm-foot-line:last-child {
	margin-bottom: 0;
}

#colophon .ilm-foot-line::before {
	content: '';
	position: absolute;
	left: 0;
	top: calc((1.6em - 16px) / 2); /* centred on the first line */
	width: 16px;
	height: 16px;
	background: var(--gold-light);
	-webkit-mask: var(--ilm-i) center / contain no-repeat;
	mask: var(--ilm-i) center / contain no-repeat;
}

#colophon .ilm-ic-pin { --ilm-i: var(--ilm-i-pin); }
#colophon .ilm-ic-wa { --ilm-i: var(--ilm-i-wa); }
#colophon .ilm-ic-phone { --ilm-i: var(--ilm-i-phone); }
#colophon .ilm-ic-mail { --ilm-i: var(--ilm-i-mail); }

#colophon .ilm-foot-contact a {
	color: #b9c0d6;
	text-decoration: none;
	transition: 0.2s;
}

#colophon .ilm-foot-contact a:hover {
	color: #fff;
}

/* 7.5 Quick links: mockup footer nav = 0.85rem #b9c0d6, hover #fff */
#colophon .footer-nav-wrap .astra-footer-vertical-menu {
	display: grid;
	gap: 12px; /* matches the contact rows, so the columns line up */
	justify-content: start; /* Astra centres the list at <=921 */
	justify-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

#colophon .footer-nav-wrap .menu-item {
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1.6;
	align-items: start; /* Astra: center at (0,4,0) */
}

#colophon .footer-nav-wrap .menu-link {
	padding: 0;
	font-size: 0.85rem;
	color: #b9c0d6;
	text-decoration: none;
	transition: 0.2s;
}

#colophon .footer-nav-wrap .menu-link:hover,
#colophon .footer-nav-wrap .current-menu-item > .menu-link {
	color: #fff;
}

/* 7.6 Copyright bar: centred, as the mosque footer. 0.78rem from the
   mockup; colour raised to #b9c0d6 (Mahmud, 2026-09-11). */
#colophon .site-footer-below-section-1 {
	width: 100%;
	padding-top: 22px; /* mockup small margin-top 22 */
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#colophon .ast-footer-copyright {
	width: 100%;
	text-align: center;
	font-size: 0.78rem;
}

/* Colour on the <p> itself: otherwise our base p colour (--ink-soft)
   wins and the line disappears into the navy. */
#colophon .ast-footer-copyright p {
	margin: 0;
	color: #b9c0d6;
}

/* 7.7 Stack at 767, the site-wide breakpoint (Astra's footer stacks only at 544) */
@media (max-width: 767px) {
	#colophon .site-primary-footer-wrap .ast-builder-grid-row {
		grid-template-columns: 1fr;
		row-gap: 28px; /* NEW */
	}
}

/* 7.8 Scroll-to-top: Astra's gold square restyled to the footer's
   outlined circle. (1,1,0) outranks Astra's #ast-scroll-top (1,0,0). */
#ast-scroll-top.ast-scroll-top-icon {
	width: 40px;
	height: 40px;
	line-height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	transition: border-color 0.2s;
}

#ast-scroll-top.ast-scroll-top-icon:hover {
	border-color: var(--gold);
}