/*
Theme Name: AICBOX Child
Template: astra
Description: AICBOX design system (institutional navy / blue / red) on top of Astra. RTL-first.
Version: 1.0.0
Text Domain: aicbox-child
*/

/* ---------- Fonts (self-hosted, Noto Kufi Arabic variable) ---------- */
@font-face {
	font-family: "AICBOX Kufi";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/nk-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
	font-family: "AICBOX Kufi";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/nk-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

/* ---------- Design tokens ---------- */
:root {
	--aic-bg: #0a1128;
	--aic-bg-2: #0e1836;
	--aic-surface: #111c3d;
	--aic-surface-2: #16244d;
	--aic-border: rgba(148, 163, 184, .2);
	--aic-text: #e8edf8;
	--aic-muted: #aebbd8;
	--aic-blue: #2f6bff;
	--aic-blue-2: #1fa4ff;
	--aic-blue-soft: #7db4ff;
	--aic-red: #e5384f;
	--aic-red-soft: #ff7587;
	--aic-grad: linear-gradient(135deg, #2f6bff 0%, #1fa4ff 100%);
	--aic-grad-hero: linear-gradient(135deg, #070d24 0%, #0c1a52 55%, #14307f 100%);
	--aic-heading: #ffffff;
	--aic-header-1: #070d24;
	--aic-header-2: #0a1330;
	--aic-radius-s: 12px;
	--aic-radius: 20px;
	--aic-radius-pill: 999px;
	--aic-shadow: 0 14px 40px rgba(2, 8, 30, .45);
	--aic-shadow-btn: 0 12px 28px rgba(47, 107, 255, .35);
	--aic-space: 8px;
	--aic-font: "AICBOX Kufi", "Noto Kufi Arabic", Tahoma, Arial, sans-serif;

	/* Astra global palette -> brand */
	--ast-global-color-0: #2f6bff;
	--ast-global-color-1: #1fa4ff;
}

html { scroll-behavior: smooth; overflow-x: clip; }
body {
	font-family: var(--aic-font);
	background: var(--aic-bg);
	color: var(--aic-text);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.site-title, .entry-title, .ast-archive-title, .widget-title {
	font-family: var(--aic-font);
	color: var(--aic-heading);
	font-weight: 800;
	line-height: 1.35;
}
a { color: var(--aic-blue-soft); transition: color .2s ease; }
a:hover, a:focus { color: var(--aic-red-soft); }
:focus-visible { outline: 3px solid var(--aic-blue-2); outline-offset: 2px; }
::selection { background: var(--aic-blue); color: #fff; }

/* ---------- Light theme (toggle: html[data-theme="light"]) ---------- */
html[data-theme="light"] {
	--aic-bg: #f4f7fb;
	--aic-bg-2: #ffffff;
	--aic-surface: #ffffff;
	--aic-surface-2: #eaf0fa;
	--aic-border: rgba(15, 27, 61, .13);
	--aic-text: #1a2547;
	--aic-muted: #53627f;
	--aic-heading: #0b1636;
	--aic-blue-soft: #1a56db;
	--aic-red-soft: #c4233a;
	--aic-header-1: #ffffff;
	--aic-header-2: #ffffff;
	--aic-shadow: 0 10px 30px rgba(15, 27, 61, .09);
	color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] ::placeholder { color: #8391ad; }

/* ---------- Header ---------- */
.site-header,
.ast-primary-header-bar,
.main-header-bar {
	background: linear-gradient(180deg, var(--aic-header-1) 0%, var(--aic-header-2) 100%) !important;
	border-bottom: 1px solid var(--aic-border) !important;
}
.site-header { position: relative; z-index: 50; }
.site-header::after {
	content: ""; display: block; height: 3px;
	background: linear-gradient(90deg, var(--aic-blue), var(--aic-blue-2) 55%, var(--aic-red));
}
.site-title a, .site-title a:hover { color: var(--aic-heading) !important; font-weight: 800; }
.site-description { color: var(--aic-muted) !important; }
.main-header-menu > .menu-item > a,
.ast-header-sections-navigation a {
	font-family: var(--aic-font);
	font-weight: 600;
	color: var(--aic-text) !important;
	transition: color .2s ease, background .2s ease;
}
.main-header-menu > .menu-item:hover > a,
.main-header-menu > .current-menu-item > a,
.main-header-menu > .current-menu-ancestor > a {
	color: var(--aic-heading) !important;
	background: rgba(47, 107, 255, .16) !important;
	border-radius: var(--aic-radius-s);
}
.main-header-menu .sub-menu {
	background: var(--aic-surface) !important;
	border: 1px solid var(--aic-border);
	border-radius: var(--aic-radius-s);
	box-shadow: var(--aic-shadow);
	overflow: hidden;
}
.main-header-menu .sub-menu a { color: var(--aic-text) !important; }
.main-header-menu .sub-menu a:hover { background: rgba(47, 107, 255, .2) !important; }
.ast-header-break-point .main-header-menu { background: var(--aic-bg-2) !important; }
.ast-header-break-point .main-header-menu a { border-color: var(--aic-border) !important; }
.menu-toggle, .ast-mobile-menu-trigger-minimal .menu-toggle { color: var(--aic-blue-soft) !important; }

/* ---------- Buttons ---------- */
.ast-button, .button, button[type="submit"], input[type="submit"], input[type="button"],
.wp-block-button__link, .elementor-button, .aicbox-btn--primary {
	font-family: var(--aic-font);
	font-weight: 700;
	color: #fff !important;
	background: var(--aic-grad) !important;
	border: 0 !important;
	border-radius: var(--aic-radius-pill) !important;
	box-shadow: var(--aic-shadow-btn);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ast-button:hover, .button:hover, button[type="submit"]:hover, input[type="submit"]:hover,
.wp-block-button__link:hover, .elementor-button:hover, .aicbox-btn--primary:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	color: #fff !important;
}
.aicbox-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 28px; text-decoration: none !important; font-weight: 700;
	border-radius: var(--aic-radius-pill);
}
.aicbox-btn--ghost {
	color: #fff !important; border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .06); transition: background .2s ease, transform .2s ease;
}
.aicbox-btn--ghost:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="tel"], input[type="number"], textarea, select {
	background: var(--aic-surface) !important;
	color: var(--aic-text) !important;
	border: 1px solid var(--aic-border) !important;
	border-radius: var(--aic-radius-s) !important;
	font-family: var(--aic-font);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--aic-blue-2) !important;
	box-shadow: 0 0 0 3px rgba(31, 164, 255, .25) !important;
}
::placeholder { color: #8091b8; }

/* ---------- Cards / content ---------- */
.ast-article-post, .ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single, .ast-separate-container .comments-area,
.widget, .ast-search-box .search-field, .wp-block-group.has-background {
	border-radius: var(--aic-radius);
}
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comments-area,
.ast-separate-container .ast-woocommerce-container {
	background: var(--aic-surface) !important;
	border: 1px solid var(--aic-border);
	box-shadow: var(--aic-shadow);
}
.ast-separate-container .ast-article-post { transition: transform .25s ease, border-color .25s ease; }
.ast-separate-container .ast-article-post:hover { transform: translateY(-4px); border-color: rgba(47, 107, 255, .5); }
.entry-title a { color: var(--aic-heading) !important; }
.entry-title a:hover { color: var(--aic-blue-soft) !important; }
.entry-meta { color: var(--aic-muted) !important; }
.entry-meta a { color: var(--aic-blue-soft) !important; }
.post-thumb-img-content img, .entry-content img { border-radius: var(--aic-radius-s); }
.entry-content p, .entry-content li { line-height: 2; }
blockquote { border-inline-start: 4px solid var(--aic-red); background: var(--aic-surface); border-radius: var(--aic-radius-s); }
table th { background: var(--aic-surface-2); color: var(--aic-heading); }
table td, table th { border-color: var(--aic-border) !important; }
.page-title, .ast-archive-description { background: transparent; }
.ast-pagination .page-numbers, .nav-links .page-numbers {
	border-radius: var(--aic-radius-s); background: var(--aic-surface); color: var(--aic-text); border: 1px solid var(--aic-border);
}
.ast-pagination .page-numbers.current, .nav-links .page-numbers.current { background: var(--aic-blue); color: #fff; }
.ast-search-menu-icon .search-field, .search-form .search-field { padding-inline: 16px; }

/* ---------- Home hero (.cyber-*), full-bleed, brand colours ---------- */
.cyber-hero {
	width: 100vw;
	max-width: 100vw;
	margin: 0 calc(50% - 50vw) 64px !important;
	background:
		radial-gradient(circle at 15% 25%, rgba(31, 164, 255, .22), transparent 34%),
		radial-gradient(circle at 85% 30%, rgba(229, 56, 79, .16), transparent 30%),
		var(--aic-grad-hero) !important;
	border-bottom: 1px solid var(--aic-border);
	font-family: var(--aic-font);
}
.cyber-hero h1 { font-weight: 800 !important; letter-spacing: 0 !important; color: #fff !important; }
.cyber-hero { --aic-muted: #aebbd8; }
.cyber-hero h1 span {
	background: linear-gradient(90deg, #fff 0%, #7dd3ff 45%, #3d8bff 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.cyber-hero p { color: var(--aic-muted) !important; }
.cyber-badge { color: #cfe3ff !important; background: rgba(47, 107, 255, .18) !important; border: 1px solid rgba(125, 180, 255, .4) !important; }
.cyber-btn-primary, .cyber-bot-app {
	background: var(--aic-grad) !important; box-shadow: var(--aic-shadow-btn) !important;
}
.cyber-btn-secondary, .cyber-bot-web {
	border: 1px solid rgba(255, 255, 255, .32) !important; background: rgba(255, 255, 255, .06) !important;
}
.cyber-panel { background: rgba(255, 255, 255, .06) !important; border-color: var(--aic-border) !important; }
.cyber-card { background: rgba(10, 17, 40, .75) !important; }
.cyber-shield { color: var(--aic-blue-soft) !important; }
.cyber-metric strong { color: var(--aic-blue-soft) !important; }
.cyber-metric span { color: var(--aic-muted) !important; }

.home .site-content > .ast-container, .home #primary { padding-top: 0 !important; margin-top: 0 !important; }
.home .entry-content > :first-child { margin-top: 0; }

/* ---------- Footer ---------- */
.site-footer, .site-below-footer-wrap, .site-primary-footer-wrap, .ast-small-footer {
	background: var(--aic-grad-hero) !important;
	color: var(--aic-text);
	border-top: 0 !important;
}
.site-footer { border-top: 3px solid transparent !important; border-image: linear-gradient(90deg, var(--aic-blue), var(--aic-blue-2) 55%, var(--aic-red)) 1 !important; }
.site-footer a { color: var(--aic-blue-soft); }
.site-footer a:hover { color: #fff; }
.aicbox-footer-brand {
	display: flex; align-items: center; justify-content: center; gap: 16px;
	padding: 28px 16px 8px; text-align: start;
}
.aicbox-footer-brand img { width: 72px; height: 72px; object-fit: contain; }
.aicbox-footer-brand strong { display: block; color: #fff; font-size: 20px; letter-spacing: .5px; }
.aicbox-footer-brand span { display: block; color: var(--aic-muted); font-size: 14px; }

/* ---------- 404 ---------- */
.aicbox-404 {
	text-align: center; padding: 72px 20px 88px; max-width: 720px; margin: 0 auto;
}
.aicbox-404__logo { width: 120px; height: 120px; object-fit: contain; margin: 0 auto 8px; display: block; }
.aicbox-404__code {
	font-size: clamp(72px, 14vw, 128px); font-weight: 800; line-height: 1; margin: 0 0 8px;
	background: linear-gradient(90deg, var(--aic-blue-2), var(--aic-red)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.aicbox-404 h1 { color: var(--aic-heading); margin: 0 0 12px; font-size: clamp(26px, 5vw, 38px); }
.aicbox-404__text { color: var(--aic-muted); font-size: 18px; line-height: 2; margin: 0 0 28px; }
.aicbox-404__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 28px; }
.aicbox-404__search { max-width: 460px; margin: 0 auto; }
.aicbox-404__search .search-form { display: flex; gap: 8px; align-items: center; }
.aicbox-404__search .search-form label { flex: 1; margin: 0; }
.aicbox-404__search .ast-search-icon { display: none; }
.aicbox-404__search .search-field { width: 100%; min-height: 46px; }

/* ---------- Responsive ---------- */
@media (max-width: 921px) {
	.cyber-hero { margin-bottom: 40px !important; }
}
@media (max-width: 640px) {
	.aicbox-footer-brand { flex-direction: column; text-align: center; }
	.aicbox-404 { padding: 48px 16px 64px; }
	.aicbox-btn { width: 100%; max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Registration is closed: hide every register entry point ---------- */
a[href*="action=register"], .wp-login-register, .cyber-actions a[href*="/login"] { display: none !important; }
.menu-item:has(> a[href*="action=register"]) { display: none !important; }

/* ---------- Header polish ---------- */
.ast-primary-header-bar .site-primary-header-wrap { min-height: 76px; }
.ast-below-header-bar { background: var(--aic-surface-2) !important; border-bottom: 1px solid var(--aic-border) !important; }
.ast-below-header-bar .main-header-menu > .menu-item > a { font-size: 15px; padding-inline: 14px; }
.ast-builder-menu-2 .main-header-menu > .menu-item > a,
.ast-builder-menu-2 .menu-link {
	background: var(--aic-grad) !important; color: #fff !important; border-radius: var(--aic-radius-pill) !important;
	padding: 8px 22px !important; font-weight: 700; font-size: 14px; line-height: 1.6; box-shadow: var(--aic-shadow-btn);
}
.ast-builder-menu-2 .main-header-menu > .menu-item:hover > a { filter: brightness(1.08); }
.site-header-primary-section-right { gap: 10px; align-items: center; }
.site-title { font-size: 22px; line-height: 1.3; }
.site-description { font-size: 13px; }

/* ---------- Theme toggle ---------- */
.aicbox-theme-toggle {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
	border-radius: 50%; cursor: pointer; color: var(--aic-text); background: var(--aic-surface);
	border: 1px solid var(--aic-border); box-shadow: none; transition: background .2s ease, transform .2s ease;
}
.aicbox-theme-toggle:hover { background: var(--aic-surface-2); transform: translateY(-1px); }
.aicbox-theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aicbox-theme-toggle .i-moon { display: none; }
html[data-theme="light"] .aicbox-theme-toggle .i-moon { display: block; }
html[data-theme="light"] .aicbox-theme-toggle .i-sun { display: none; }
.aicbox-theme-toggle--login { position: fixed; top: 16px; inset-inline-start: 16px; z-index: 20; }

/* ---------- Light-mode fixes ---------- */
html[data-theme="light"] .ast-separate-container .ast-article-post,
html[data-theme="light"] .ast-separate-container .ast-article-single { box-shadow: var(--aic-shadow); }
html[data-theme="light"] .entry-content, html[data-theme="light"] .entry-content p { color: var(--aic-text); }
html[data-theme="light"] .main-header-menu .sub-menu a { color: var(--aic-text) !important; }
html[data-theme="light"] .ast-header-break-point .main-header-menu { background: var(--aic-surface) !important; }
html[data-theme="light"] .menu-toggle, html[data-theme="light"] .ast-mobile-menu-trigger-minimal .menu-toggle { color: var(--aic-blue-soft) !important; }

/* ---------- Surfaces follow the theme (Astra defaults are dark) ---------- */
html body, body .site, #page, #content, .site-content, .ast-separate-container,
.ast-separate-container .site-content, .ast-plain-container .site-content, .ast-container { background-color: var(--aic-bg); }
.ast-builder-menu-1 .main-header-menu, .ast-builder-menu-1 .main-header-menu .menu-item,
.ast-builder-menu-2 .main-header-menu, .ast-builder-menu-2 .menu-item,
.main-header-bar-navigation, .ast-below-header-bar .ast-builder-grid-row { background: transparent !important; }
.ast-builder-menu-1 .main-header-menu > .menu-item > a { color: var(--aic-text) !important; }
.ast-builder-menu-1 .main-header-menu > .menu-item:hover > a,
.ast-builder-menu-1 .main-header-menu > .current-menu-item > a { color: var(--aic-heading) !important; background: rgba(47, 107, 255, .16) !important; }
.ast-builder-menu-1 .menu-item .ast-icon svg { fill: currentColor; }
.cyber-hero { margin-top: 0 !important; --aic-blue-soft: #7db4ff; --aic-heading: #ffffff; }
.home .site-content, .home #content, .home .ast-container { padding-top: 0 !important; }

/* Mobile/tablet login link */
.aicbox-login-link { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--aic-radius-pill); background: var(--aic-grad); color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
@media (min-width: 922px) { .aicbox-login-link { display: none !important; } }
@media (max-width: 380px) { .aicbox-login-link { padding: 5px 10px; font-size: 12px; } }

/* ===== Contrast pass =====
   Root cause: Astra palette_4 is a dark-only palette (--ast-global-color-1/2 = white used as heading/text,
   --ast-global-color-5 = #0F172A used as card/archive surface). In light mode the surfaces stayed dark or the
   text stayed white. Remap the Astra globals together with our tokens (no blanket !important). */
html[data-theme="light"] {
	--ast-global-color-0: #1a56db;
	--ast-global-color-1: #0b1636;
	--ast-global-color-2: #0b1636;
	--ast-global-color-3: #eaf0fa;
	--ast-global-color-4: #1a2547;
	--ast-global-color-5: #ffffff;
	--ast-global-color-6: #53627f;
	--ast-global-color-7: #0b1636;
	--aic-ink: #0b1636;
	--aic-paper: #f1f5ff;
}
:root { --aic-ink: #0b1636; --aic-paper: #f1f5ff; }
/* Always-dark regions keep light text in both modes */
.site-footer, .aicbox-footer-brand, .cyber-hero, .ast-footer-overlay {
	--aic-text: #e8edf8; --aic-muted: #aebbd8; --aic-heading: #ffffff; --aic-blue-soft: #7db4ff;
	--ast-global-color-1: #ffffff; --ast-global-color-2: #ffffff; --ast-global-color-4: #e8edf8; --ast-global-color-6: #aebbd8;
}
/* Header/footer containers must not take the page surface */
.site-header .ast-container, .site-header .ast-builder-grid-row-container, .site-footer .ast-container { background-color: transparent; }
.aicbox-btn--ghost { color: var(--aic-heading); border-color: var(--aic-border); }
/* Contrast guard (aicbox-ui.js) marks text that inline/Elementor colours made unreadable */
[data-aic-fix="ink"] { color: var(--aic-ink) !important; }
[data-aic-fix="paper"] { color: var(--aic-paper) !important; }
/* Toggle: self-contained so page-level button CSS can't blank it */
button.aicbox-theme-toggle { box-sizing: border-box; min-width: 40px; font-size: 0; line-height: 0; flex: 0 0 auto; }
button.aicbox-theme-toggle svg { width: 20px; height: 20px; flex: none; }
/* Login-page links in light mode */
html[data-theme="light"] .login a { color: #1456c8; }

/* Mobile/tablet header: keep brand on one line */
@media (max-width: 921px) {
	#ast-mobile-header .ast-site-identity { flex: 1 1 auto; min-width: 0; }
	#ast-mobile-header .site-title { font-size: 17px; white-space: nowrap; }
	#ast-mobile-header .site-description { display: none; }
	#ast-mobile-header .site-header-primary-section-right { gap: 8px; flex: 0 0 auto; }
	#ast-mobile-header .aicbox-theme-toggle { width: 36px; height: 36px; min-width: 36px; }
}
.cyber-badge { color: #e8edf8; }
.author-name, .entry-meta .published, .ast-blog-meta-container a, .ast-blog-meta-container .published { color: var(--aic-blue-soft); }
.cyber-hero .cyber-badge, .cyber-hero .cyber-badge * { color: #e8edf8 !important; }

/* ===== Icon fixes =====
   Root cause 1 (toggle): Astra sets `button:hover, button:focus { color:#fff }` and our token colours were only
   defined for the resting state, so the stroke (currentColor) followed Astra on interaction and was white-on-pale.
   Root cause 2 (scroll-top): Astra paints #ast-scroll-top with --ast-global-color-5 and the arrow with white; the light
   palette remap turned color-5 into #fff => white arrow on white square at 63px (font-size:30px). */
button.aicbox-theme-toggle,
button.aicbox-theme-toggle:is(:hover, :focus, :focus-visible, :active) {
	color: var(--aic-text);
	border-color: var(--aic-border);
}
button.aicbox-theme-toggle { background-color: var(--aic-surface); }
button.aicbox-theme-toggle:is(:hover, :focus, :focus-visible, :active) { background-color: var(--aic-surface-2); }
button.aicbox-theme-toggle:focus-visible { outline: 2px solid var(--aic-blue-2); outline-offset: 2px; }
button.aicbox-theme-toggle svg { stroke: currentColor; fill: none; opacity: 1; visibility: visible; }

#ast-scroll-top.ast-scroll-top-icon {
	width: 46px; height: 46px; padding: 0; font-size: 20px; line-height: 1; border-radius: 14px;
	background-color: var(--aic-surface); color: var(--aic-blue-soft); border: 1px solid var(--aic-border);
	box-shadow: var(--aic-shadow, 0 8px 22px rgba(2, 8, 30, .28));
	transition: background-color .2s ease, transform .2s ease; z-index: 90;
}
#ast-scroll-top.ast-scroll-top-icon:is(:hover, :focus, :focus-visible, :active) {
	background-color: var(--aic-surface-2); color: var(--aic-blue-soft); transform: translateY(-2px);
}
#ast-scroll-top .ast-icon.icon-arrow { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#ast-scroll-top .ast-icon.icon-arrow svg { width: 20px; height: 20px; margin: 0; fill: currentColor; }

/* ===== Mobile nav (2026-10-30) =====
   Root cause: the single-line brand (nowrap title) + login pill + theme toggle + hamburger were wider than 390px, so the
   RTL row pushed the Astra menu toggle off-screen (x=-49) while the menu itself still worked. Let the brand shrink and
   move the login link into the menu on narrow screens. */
@media (max-width: 921px) {
	#ast-mobile-header .ast-builder-grid-row { gap: 8px; }
	#ast-mobile-header .site-header-primary-section-left { flex: 1 1 0; min-width: 0; }
	#ast-mobile-header .site-branding, #ast-mobile-header .ast-site-identity { min-width: 0; max-width: 100%; }
	#ast-mobile-header .site-title { overflow: hidden; text-overflow: ellipsis; }
	#ast-mobile-header .site-header-primary-section-right { flex: 0 0 auto; }
	#ast-mobile-header .ast-button-wrap, #ast-mobile-header .ast-button-wrap .menu-toggle { flex: 0 0 auto; }
	#ast-mobile-header button.menu-toggle.main-header-menu-toggle {
		width: 44px; height: 44px; padding: 0; justify-content: center; align-items: center; border-radius: 12px;
		color: var(--aic-text); background: var(--aic-surface); border: 1px solid var(--aic-border);
	}
	#ast-mobile-header button.menu-toggle.main-header-menu-toggle:is(:hover, :focus, :focus-visible, :active) { color: var(--aic-text); background: var(--aic-surface-2); }
	#ast-mobile-header .menu-toggle .mobile-menu-toggle-icon, #ast-mobile-header .menu-toggle svg { color: currentColor; fill: currentColor; }
	#ast-mobile-header .ast-mobile-header-content, #ast-mobile-header .ast-mobile-header-content .main-header-menu { background: var(--aic-surface) !important; }
}
@media (max-width: 520px) {
	#ast-mobile-header .aicbox-login-link { display: none !important; }
	#ast-mobile-header .site-title { font-size: 16px; }
}
@media (min-width: 521px) { .aicbox-menu-login { display: none !important; } }
@media (max-width: 921px) {
}
@media (max-width: 921px) {
	.ast-mobile-header-content .main-header-menu > .menu-item.aicbox-menu-login { padding: 0 18px; }
	.ast-mobile-header-content .main-header-menu > .menu-item.aicbox-menu-login > a { color: #fff !important; background: var(--aic-grad) !important; margin: 12px 0 16px; width: 100%; border-radius: 999px; border-bottom: 0; }
}

/* ===== Mobile menu layout (2026-10-30, v2) =====
   Root cause of uneven rows/overlap: Astra makes each parent <li> a flex container and positions its toggle with an
   RTL-flipped inset (313px), while our earlier link rules fought Astra's `ul .sub-menu .menu-link` padding. One block
   now owns the rhythm: 48px rows, block <li>, toggle pinned to the left, quiet sub-menu panel. */
@media (max-width: 921px) {
	.ast-mobile-header-content .main-header-menu { padding: 6px 0 4px; }
	.ast-mobile-header-content .main-header-menu > .menu-item {
		display: block; position: relative; margin: 0; border-bottom: 1px solid var(--aic-border);
	}
	.ast-mobile-header-content .main-header-menu .menu-item > .menu-link {
		display: flex; align-items: center; box-sizing: border-box; min-height: 48px; height: auto; margin: 0;
		padding: 10px 20px; line-height: 1.5; font-size: 16px; font-weight: 600; text-align: right;
		color: var(--aic-text) !important; background: transparent !important; border: 0;
	}
	.ast-mobile-header-content .main-header-menu > .menu-item-has-children > .menu-link { padding-left: 64px; }
	.ast-mobile-header-content .main-header-menu .menu-item > .menu-link:is(:hover, :focus-visible) {
		color: var(--aic-heading) !important; background: rgba(47, 107, 255, .09) !important;
	}
	.ast-mobile-header-content .main-header-menu .menu-item.current-menu-item > .menu-link,
	.ast-mobile-header-content .main-header-menu .menu-item.current-menu-ancestor > .menu-link {
		color: var(--aic-heading) !important; background: transparent !important; box-shadow: inset -3px 0 0 var(--aic-blue);
	}
	.ast-mobile-header-content .main-header-menu .menu-item > .ast-menu-toggle {
		position: absolute; top: 0; left: 8px; right: auto; inset-inline-start: auto; width: 48px; height: 48px; margin: 0; padding: 0;
		display: flex; align-items: center; justify-content: center; color: var(--aic-muted); background: transparent; border: 0; box-shadow: none; border-radius: 10px;
	}
	.ast-mobile-header-content .ast-menu-toggle .ast-icon svg, .ast-mobile-header-content .ast-menu-toggle .dropdown-menu-toggle svg { width: 12px; height: 12px; fill: currentColor; }
	.ast-mobile-header-content .main-header-menu .sub-menu {
		margin: 2px 20px 10px 20px; padding: 4px 0; background: var(--aic-surface-2); border-radius: 12px;
		border-inline-start: 2px solid var(--aic-blue); position: static; width: auto;
	}
	.ast-mobile-header-content .main-header-menu .sub-menu .menu-item { display: block; border-bottom: 1px solid var(--aic-border); }
	.ast-mobile-header-content .main-header-menu .sub-menu .menu-item:last-child { border-bottom: 0; }
	.ast-mobile-header-content .main-header-menu .sub-menu .menu-item > .menu-link {
		min-height: 44px; padding: 8px 16px; font-size: 15px; font-weight: 500; color: var(--aic-muted) !important;
	}
	.ast-mobile-header-content .main-header-menu .sub-menu .menu-item > .menu-link:is(:hover, :focus-visible),
	.ast-mobile-header-content .main-header-menu .sub-menu .current-menu-item > .menu-link { color: var(--aic-heading) !important; }
	.ast-mobile-header-content .main-header-menu > .menu-item.aicbox-menu-login { border-bottom: 0; padding: 12px 20px 14px; }
	.ast-mobile-header-content .main-header-menu > .menu-item.aicbox-menu-login > .menu-link {
		justify-content: center; min-height: 48px; color: #fff !important; background: var(--aic-grad) !important; border-radius: 999px; box-shadow: none; text-align: center;
	}
}
@media (max-width: 921px) {
	.ast-mobile-header-content .main-header-menu { display: block; }
	.ast-mobile-header-content .main-header-menu .menu-item > .menu-link { border-radius: 0; }
	.ast-mobile-header-content .main-header-menu .sub-menu .menu-item > .menu-link { border-radius: 0; box-shadow: none; }
	.ast-mobile-header-content .main-header-menu > .menu-item.aicbox-menu-login > .menu-link { margin: 0; width: 100%; border-radius: 999px; }
}
/* Astra's long `.ast-hfb-header ... .menu-item > .menu-link` rule keeps links inline-block (line-box adds ~15px per row): win by id */
@media (max-width: 921px) {
	#ast-mobile-header .ast-mobile-header-content .main-header-menu .menu-item > .menu-link { display: flex; width: 100%; box-sizing: border-box; }
	#ast-mobile-header .ast-mobile-header-content .main-header-menu .menu-item { line-height: 0; }
	#ast-mobile-header .ast-mobile-header-content .main-header-menu .menu-item > .menu-link { line-height: 1.5; }
}
@media (max-width: 921px) {
	#ast-mobile-header .ast-mobile-header-content .main-header-menu .sub-menu .menu-link > .ast-icon.icon-arrow { display: none; }
}

/* ===== Mobile menu: arrow button & link press states (single source of truth) =====
   Replaces the earlier hover/focus/tap-highlight rules. UA-drawn paint on touch devices (tap highlight, text selection
   from repeated taps, native button appearance, focus ring) is switched off or tinted AICBOX blue; visible feedback is
   our own :active/[aria-expanded] background. Arrow: blue in light mode, soft light blue in dark (--aic-blue-soft). */
@media (max-width: 921px) {
	#ast-mobile-header .ast-mobile-header-content .menu-item > button.ast-menu-toggle,
	#ast-mobile-header .ast-mobile-header-content .menu-item > .menu-link {
		-webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
		-webkit-user-select: none; user-select: none; touch-action: manipulation; outline: 0; filter: none;
	}
	#ast-mobile-header .ast-mobile-header-content .menu-item > button.ast-menu-toggle { box-shadow: none; }
	#ast-mobile-header .ast-mobile-header-content .menu-item > button.ast-menu-toggle {
		background: transparent; border: 0; color: var(--aic-blue-soft);
	}
	#ast-mobile-header .ast-mobile-header-content .menu-item > button.ast-menu-toggle .ast-icon,
	#ast-mobile-header .ast-mobile-header-content .menu-item > button.ast-menu-toggle svg { color: inherit; fill: currentColor; }
	#ast-mobile-header .ast-mobile-header-content .menu-item > button.ast-menu-toggle:is(:hover, :focus) { background: rgba(47, 107, 255, .12); color: var(--aic-blue-soft); }
	#ast-mobile-header .ast-mobile-header-content .menu-item > button.ast-menu-toggle .ast-icon { transition: transform .2s ease; }
	#ast-mobile-header .ast-mobile-header-content .menu-item > button.ast-menu-toggle[aria-expanded="true"] .ast-icon { transform: rotate(180deg); }
	#ast-mobile-header .ast-mobile-header-content .menu-item > button.ast-menu-toggle:active { background: rgba(47, 107, 255, .22); }
	#ast-mobile-header .ast-mobile-header-content .menu-item > button.ast-menu-toggle:focus-visible,
	#ast-mobile-header .ast-mobile-header-content .menu-item > .menu-link:focus-visible { outline: 2px solid var(--aic-blue-2); outline-offset: -2px; }
	#ast-mobile-header .ast-mobile-header-content .menu-item > .menu-link:active { background: rgba(47, 107, 255, .16) !important; }
	#ast-mobile-header ::selection { background: rgba(47, 107, 255, .25); color: inherit; }
}

/* Mobile menu taller than the screen scrolls inside itself instead of being cut off */
@media (max-width: 921px) {
	#ast-mobile-header .ast-mobile-header-content { max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}

/* ===== Lucky wheel buttons (page 3357 widget) — contrast =====
   Root cause: the widget paints .spinBtn/.addBtn #4b74ff with white 500-weight Arial (contrast 4.0:1) and Astra's
   `button:hover/focus{color:#fff}` never changes it, so on the dark page the label looked washed out. Use the AICBOX
   deep blue (white text >= 6:1), bolder site font, and explicit hover/active/focus/disabled states. */
button.spinBtn, button.addBtn {
	background: linear-gradient(135deg, #2457d6, #1b6fe0); color: #fff; font-family: var(--aic-font); font-weight: 700;
	letter-spacing: 0; text-shadow: 0 1px 1px rgba(2, 8, 30, .35); border: 1px solid rgba(125, 180, 255, .45);
	box-shadow: 0 8px 20px rgba(36, 87, 214, .35);
}
button.spinBtn:hover, button.addBtn:hover { background: linear-gradient(135deg, #2c63e6, #2380ee); color: #fff; }
button.spinBtn:active, button.addBtn:active { background: linear-gradient(135deg, #1d49b3, #1859b8); color: #fff; box-shadow: 0 3px 10px rgba(36, 87, 214, .3); }
button.spinBtn:focus-visible, button.addBtn:focus-visible, button.delete:focus-visible { outline: 2px solid var(--aic-blue-soft); outline-offset: 3px; }
button.spinBtn:disabled, button.addBtn:disabled { background: #3a4a78; color: #d7def2; border-color: transparent; box-shadow: none; cursor: not-allowed; }
button.delete { font-family: var(--aic-font); font-weight: 600; }
/* No transitions on the mobile menu's sections: the current section must appear with the menu, not animate in */
@media (max-width: 921px) {
	#ast-mobile-header .ast-mobile-header-content .menu-item,
	#ast-mobile-header .ast-mobile-header-content .sub-menu,
	#ast-mobile-header .ast-mobile-header-content .ast-menu-toggle,
	#ast-mobile-header .ast-mobile-header-content .ast-menu-toggle .ast-icon { transition: none; animation: none; }
}