/*
Theme Name:   Be AI-gile
Theme URI:    https://beai-gile.com
Description:  Flying Cloud Solutions brand child theme for the Be AI-gile framework site.
Author:       Flying Cloud Solutions
Template:     generatepress
Version:      1.14.0
Text Domain:  be-aigile
*/

/* ==========================================================================
   Design tokens — Be AI-gile brand system
   Source of truth: FCS/be-aigile-page-extracted mockup + logo
   ========================================================================== */
:root{
	--bai-navy: #1a3a52;
	--bai-navy-deep: #0d2233;
	--bai-blue: #2c5aa0;
	--bai-blue-light: #4a90e2;
	--bai-cyan: #4dd0e1;
	--bai-cyan-deep: #26c6da;
	/* --bai-cyan / --bai-cyan-deep read at ~2:1 against white or paper-tint —
	   fine on the navy hero backgrounds they were designed for, but fails
	   WCAG AA (4.5:1 text / 3:1 large text) wherever they land on a light
	   section. This darker value is for text sitting on light backgrounds. */
	--bai-cyan-text: #0e7c8f;
	--bai-teal: #1e8a7a;
	--bai-ink: #333333;
	--bai-ink-soft: #555555;
	--bai-muted: #666666;
	--bai-paper: #ffffff;
	--bai-paper-tint: #f8f9fa;
	--bai-paper-tint-2: #e9ecef;
	--bai-line: rgba(0,0,0,0.08);
	--bai-radius-sm: 10px;
	--bai-radius-md: 15px;
	--bai-radius-lg: 20px;
	--bai-shadow: 0 10px 30px rgba(0,0,0,0.10);
	--bai-shadow-lg: 0 15px 40px rgba(26,58,82,0.20);
	--bai-max: 1200px;
	--bai-font: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ==========================================================================
   Site chrome — full-width header
   GP boxes .grid-container to 1200px by default; the header/nav should
   span edge to edge while the rest of the site stays contained via .bai-wrap.
   ========================================================================== */
.site-header .inside-header.grid-container,
.site-header .main-navigation .inside-navigation.grid-container{
	max-width: none;
	width: 100%;
	padding-left: clamp(1.25rem, 4vw, 3.5rem);
	padding-right: clamp(1.25rem, 4vw, 3.5rem);
}
.site-header .site-logo{ margin-right: auto; }
.site-header .main-navigation{ margin-left: auto; }

.bai-footer-nav-wrap{
	background: var(--bai-navy-deep, #0d2233);
	padding: 1.6rem clamp(1.25rem, 4vw, 3.5rem);
}
.bai-footer-nav ul{
	list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
	gap: 0.6rem 1.8rem; justify-content:center; max-width: 1200px; margin: 0 auto;
}
.bai-footer-nav a{
	color: rgba(255,255,255,0.75); text-decoration:none; font-size:0.9rem; font-family: var(--bai-font);
}
.bai-footer-nav a:hover{ color: var(--bai-cyan, #4dd0e1); }

/* ==========================================================================
   Base
   ========================================================================== */
.bai-page{
	font-family: var(--bai-font);
	color: var(--bai-ink);
	line-height: 1.6;
	/* #content is a flex container; without this, .bai-page (as GP's only
	   #primary/.content-area substitute) sizes to its content's intrinsic
	   width instead of filling the row, silently re-boxing every section. */
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
}
.bai-page *{ box-sizing: border-box; }
.bai-page img{ max-width:100%; height:auto; display:block; }
.bai-wrap{ max-width: var(--bai-max); margin:0 auto; padding:0 20px; }

/* Avoid orphaned single words on their own line, sitewide. text-wrap:pretty
   keeps paragraph line-breaks from stranding a word; text-wrap:balance
   evens out heading line lengths. Unsupported browsers just ignore these. */
.bai-page p, .bai-page li{ text-wrap: pretty; }
.bai-page h1, .bai-page h2, .bai-page h3{ text-wrap: balance; }

/* GeneratePress boxes the ENTIRE site (not just the header) in a
   max-width .grid-container. A calc(50vw) breakout trick doesn't work
   here because that container is itself nested and already centered —
   the %-based math resolves against the wrong box. Simpler and correct:
   remove the constraint at its source, only on full-bleed template
   pages (marked with the .bai-fullbleed body class), so WooCommerce/
   blog pages keep their normal boxed layout. .bai-wrap inside each
   section still keeps the readable content contained. */
.bai-fullbleed .site.grid-container{
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}
body{ overflow-x: hidden; }

.bai-section{ padding: 6rem 0; }
.bai-section.tight{ padding: 3.5rem 0; }
.bai-section-head{ text-align:center; margin-bottom: 3.5rem; }
.bai-section-head h2{ font-size: 2.6rem; color: var(--bai-navy); margin: 0 0 1.2rem; font-weight:700; letter-spacing:-0.01em; }
.bai-section-head p{ font-size:1.2rem; color:var(--bai-muted); max-width:720px; margin:0 auto; }
.bai-eyebrow{
	display:inline-block; font-size:0.8rem; font-weight:700; letter-spacing:0.08em;
	text-transform:uppercase; color: var(--bai-cyan-text); margin-bottom:0.9rem;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.bai-hero{
	/* Navy-only — the previous blue gradient sat too close in hue to the
	   teal logo/icon and washed it out. Navy keeps enough value contrast
	   for teal + white to read cleanly all the way through the section. */
	background: linear-gradient(160deg, var(--bai-navy-deep) 0%, var(--bai-navy) 100%);
	color:#fff; text-align:center; padding: 7rem 0 6rem; position:relative; overflow:hidden;
}
.bai-hero::before{
	content:""; position:absolute; inset:0; opacity:0.2; pointer-events:none;
	background-image: radial-gradient(circle at 15% 15%, rgba(255,255,255,0.1) 0, transparent 40%),
		radial-gradient(circle at 85% 80%, rgba(77,208,225,0.12) 0, transparent 40%);
}
.bai-hero-inner{ position:relative; z-index:2; }
.bai-page img.bai-hero-logo{ max-width:280px; width:100%; margin:0 auto 2rem; }

/* Split hero — headline/CTAs on one side, a photo on the other. Used on
   the home page; other pages keep the simpler centered .bai-hero. */
.bai-hero-split{ text-align:left; padding: 5rem 0; }
.bai-hero-split .bai-wrap{
	display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items:center;
}
.bai-hero-split .bai-hero-logo{ margin:0 0 1.6rem; }
.bai-hero-split h1{ text-align:left; }
.bai-hero-split p.subtitle{ margin:0 0 2.2rem; text-align:left; }
.bai-hero-split .bai-hero-ctas{ justify-content:flex-start; }
@media (max-width: 900px){
	.bai-hero-split .bai-wrap{ grid-template-columns: 1fr; }
	.bai-hero-split{ text-align:center; }
	.bai-hero-split h1, .bai-hero-split p.subtitle{ text-align:center; }
	.bai-hero-split .bai-hero-ctas{ justify-content:center; }
	.bai-hero-split .bai-hero-logo{ margin-left:auto; margin-right:auto; }
}

/* Photo placeholders — reserve real space/aspect ratio for photography
   to be dropped in later. Swap the <div> for an <img> when photos exist. */
.bai-photo-placeholder{
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:0.6rem; text-align:center; padding:1.5rem;
	background: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.01) 12px 24px);
	border: 2px dashed rgba(255,255,255,0.3);
	border-radius: var(--bai-radius-lg);
	color: rgba(255,255,255,0.7);
	font-size:0.85rem;
}
.bai-photo-placeholder .icon{ font-size:2rem; opacity:0.6; }
.bai-photo-placeholder .dims{ font-family: monospace; font-size:0.72rem; opacity:0.6; }
.bai-hero-split .bai-photo-placeholder{ aspect-ratio: 4 / 5; width:100%; }

.bai-page img.bai-photo{ width:100%; height:100%; object-fit:cover; border-radius: var(--bai-radius-lg); display:block; }
.bai-hero-split img.bai-photo{ aspect-ratio: 4 / 5; width:100%; height:auto; }
/* Cards stretch to fill their grid row by default; a height:100% photo inside
   an auto-sized row creates a circular sizing dependency that the browser
   resolves by shrinking the row, cutting off the card's own text below it.
   Cards give their photo an explicit aspect-ratio instead, so it needs
   height:auto to actually take effect over the height:100% above. */
.bai-card img.bai-photo{ height:auto; }

/* Light variant for placeholders on white/tinted sections */
.bai-photo-placeholder.on-light{
	background: repeating-linear-gradient(45deg, rgba(26,58,82,0.035) 0 12px, rgba(26,58,82,0.01) 12px 24px);
	border-color: rgba(26,58,82,0.25);
	color: var(--bai-muted);
}
.bai-hero h1{
	font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight:800; margin:0 0 1.4rem;
	background: linear-gradient(135deg, #ffffff, #e0f2fe);
	-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.bai-hero p.subtitle{ font-size:1.3rem; opacity:0.95; max-width:760px; margin:0 auto 2.6rem; }
.bai-hero-ctas{ display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.bai-btn{
	display:inline-block; padding:1.05rem 2.2rem; border-radius:30px; font-weight:700;
	font-size:1.05rem; text-decoration:none; transition: all .25s ease; cursor:pointer; border:2px solid transparent;
}
.bai-btn-primary{
	background: linear-gradient(135deg, var(--bai-cyan), var(--bai-cyan-deep)); color: var(--bai-navy-deep);
	box-shadow: 0 8px 25px rgba(77,208,225,0.4);
}
.bai-btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 12px 32px rgba(77,208,225,0.55); color: var(--bai-navy-deep); }
.bai-btn-outline{ background:transparent; color:#fff; border-color: rgba(255,255,255,0.75); }
.bai-btn-outline:hover{ background: rgba(255,255,255,0.12); transform: translateY(-3px); color:#fff; }
.bai-btn-dark{ background: var(--bai-navy); color:#fff; box-shadow: 0 8px 25px rgba(26,58,82,0.3); }
.bai-btn-dark:hover{ transform: translateY(-3px); color:#fff; }
.bai-btn-ghost-dark{ background:transparent; color: var(--bai-navy); border-color: var(--bai-navy); }
.bai-btn-ghost-dark:hover{ background: var(--bai-navy); color:#fff; }

/* ==========================================================================
   Cards — audience / service / tier
   ========================================================================== */
.bai-grid{ display:grid; gap:2.5rem; margin-top: 3rem; }
.bai-grid-3{ grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.bai-grid-4{ grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.bai-grid-2{ grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
/* True 2x2 for exactly-four-item grids (e.g. the four tenets) — auto-fit
   wraps unevenly (3 then 1) once cards get narrow enough to fit three
   per row, which a fixed 2-column grid never does. */
.bai-grid-2x2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px){ .bai-grid-2x2{ grid-template-columns: 1fr; } }

.bai-page img.bai-tenet-detail-icon{ width:64px; height:64px; object-fit:contain; margin-bottom:1.1rem; }
.bai-page img.bai-theory-cover{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; margin-bottom:1.2rem; }

.bai-card{
	background: var(--bai-paper); border-radius: var(--bai-radius-lg); padding: 2.5rem 2.2rem;
	box-shadow: var(--bai-shadow); border:2px solid transparent; transition: all .25s ease; position:relative;
}
a.bai-card{ display:block; color:inherit; text-decoration:none; }
a.bai-card h3, a.bai-card p{ text-decoration:none; }
a.bai-card:hover h3{ color: var(--bai-teal); }
.bai-card:hover{ transform: translateY(-8px); border-color: var(--bai-cyan); }
.bai-card h3{ font-size:1.4rem; color: var(--bai-navy); margin: 0 0 1rem; font-weight:700; }
.bai-card p{ color:var(--bai-muted); margin:0; }
.bai-card-accent-top::before{
	content:""; position:absolute; top:0; left:0; right:0; height:5px; border-radius: var(--bai-radius-lg) var(--bai-radius-lg) 0 0;
	background: linear-gradient(135deg, var(--bai-cyan), var(--bai-cyan-deep));
}

/* ==========================================================================
   Tenet cards (dark, image + numbered)
   ========================================================================== */
.bai-tenets-section{ background: linear-gradient(135deg, var(--bai-navy-deep), var(--bai-blue)); color:#fff; }
.bai-tenets-section .bai-section-head h2{ color:#fff; }
.bai-tenets-section .bai-section-head p{ color: rgba(255,255,255,0.85); }
.bai-tenet-card{
	background: var(--bai-navy); border-radius: var(--bai-radius-lg); overflow:hidden;
	box-shadow: var(--bai-shadow-lg); transition: all .25s ease;
}
.bai-tenet-card:hover{ transform: translateY(-8px) scale(1.015); }
.bai-tenet-card img{ width:100%; aspect-ratio: 1 / 1; object-fit:cover; }
.bai-tenet-card .body{ padding:1.8rem; }
.bai-tenet-card h3{ font-size:1.3rem; margin:0 0 0.8rem; color: var(--bai-cyan); font-weight:700; }
.bai-tenet-card p{ font-size:0.98rem; opacity:0.9; margin:0; }
.bai-tenet-card .tag{
	font-family: monospace; font-size:0.8rem; letter-spacing:0.05em; color: var(--bai-cyan);
	text-transform:uppercase; display:block; margin-bottom:0.4rem;
}

/* ==========================================================================
   Pillars (Be / AI / gile)
   ========================================================================== */
.bai-pillars{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:2rem; margin-top:3rem; }
.bai-pillar{
	text-align:center; padding: 2.6rem 1.8rem; border-radius: var(--bai-radius-lg);
	background: var(--bai-paper-tint); border: 1px solid var(--bai-line);
}
.bai-pillar .letter{
	font-size:3rem; font-weight:800; color: var(--bai-cyan-text); display:block; margin-bottom:0.6rem;
	font-family: monospace;
}
.bai-pillar h3{ font-size:1.3rem; color: var(--bai-navy); margin:0 0 0.9rem; font-weight:700; }
.bai-pillar p{ color: var(--bai-muted); margin:0; }

/* ==========================================================================
   Panels / highlight blocks
   ========================================================================== */
.bai-panel{
	background: linear-gradient(135deg, var(--bai-navy), var(--bai-blue)); color:#fff;
	padding: 3rem; border-radius: var(--bai-radius-lg); box-shadow: var(--bai-shadow-lg);
}
.bai-panel h3{ font-size:1.8rem; margin:0 0 1rem; font-weight:700; }
.bai-panel p{ margin:0; opacity:0.95; }
.bai-panel-light{
	background: var(--bai-paper-tint); color: var(--bai-ink); border:1px solid var(--bai-line);
	box-shadow:none;
}

/* ==========================================================================
   Two-column content
   ========================================================================== */
.bai-split{ display:grid; grid-template-columns: 1fr 1fr; gap:3.5rem; align-items:center; }
@media (max-width: 860px){ .bai-split{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Quote / character card blocks (book page "cast")
   ========================================================================== */
.bai-cast-card{
	background:#fff; border-radius: var(--bai-radius-md); padding:2rem; box-shadow: var(--bai-shadow);
	border-left: 5px solid var(--bai-cyan-deep);
}
.bai-cast-card h4{ margin:0 0 0.6rem; color: var(--bai-navy); font-size:1.2rem; }
.bai-cast-card p{ margin:0; color: var(--bai-ink-soft); }

blockquote.bai-pull{
	font-size:1.4rem; font-style:italic; color: var(--bai-navy); border-left:4px solid var(--bai-cyan-deep);
	padding: 0.4rem 0 0.4rem 1.6rem; margin: 2.4rem 0;
}
blockquote.bai-pull cite{ display:block; font-size:0.95rem; font-style:normal; color:var(--bai-muted); margin-top:0.6rem; }

/* ==========================================================================
   Pricing / tier table
   ========================================================================== */
.bai-tiers{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:2rem; margin-top:3rem; align-items:stretch; }
.bai-tier{
	background:#fff; border-radius: var(--bai-radius-lg); padding: 2.4rem; box-shadow: var(--bai-shadow);
	border:2px solid var(--bai-line); display:flex; flex-direction:column;
}
.bai-tier.featured{ border-color: var(--bai-cyan-deep); position:relative; }
.bai-tier.featured::before{
	content:"Most Popular"; position:absolute; top:-14px; left:2rem; background: var(--bai-cyan-deep); color:#fff;
	font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:0.35rem 0.9rem; border-radius:999px;
}
.bai-tier h3{ color:var(--bai-navy); font-size:1.4rem; margin:0 0 0.3rem; }
.bai-tier .price{ font-size:1rem; color:var(--bai-muted); margin-bottom:1.5rem; }
.bai-tier ul{ list-style:none; margin:0 0 2rem; padding:0; flex:1; }
.bai-tier li{ padding-left:1.6rem; position:relative; margin-bottom:0.8rem; color:var(--bai-ink-soft); }
.bai-tier li::before{ content:"✓"; position:absolute; left:0; color:var(--bai-teal); font-weight:700; }

/* ==========================================================================
   Gamification showcase (Community page)
   GamiPress shortcodes render their own markup/classes per install; these
   rules target plain ul/li/img so they hold regardless of GamiPress's own
   class names, with its bundled stylesheet as the fallback if they don't.
   ========================================================================== */
.bai-gami-mystats{
	display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center; margin-bottom:2.8rem;
}
.bai-gami-mystats > div{
	background:#fff; border:1px solid var(--bai-line); border-radius:999px;
	padding:0.7rem 1.6rem; font-weight:700; color:var(--bai-navy); box-shadow:var(--bai-shadow);
	/* GamiPress's own CSS sets these wrappers to width:100%/display:block;
	   override so they size to content and sit in a row instead of stacking. */
	width:auto !important; flex:0 0 auto !important; display:inline-block !important;
}
.bai-gami-mystats img{ display:inline-block !important; vertical-align:middle; margin-right:0.4rem; width:20px; height:20px; }
/* The rank widget carries real paragraph content, not a short number+label
   like the points chips — the shared pill radius/inline sizing above reads
   as a mistake at that size, so give it its own full-width card treatment. */
.bai-gami-mystats > div.gamipress-user-ranks{
	width:100% !important; flex-basis:100% !important; display:block !important;
	border-radius: var(--bai-radius-lg) !important; text-align:left; padding:1.8rem 2rem;
}
.bai-gami-mystats .gamipress-user-ranks a{ color:var(--bai-navy); }
.bai-gami-mystats .gamipress-rank{ margin-bottom:1rem; }
.bai-gami-mystats .gamipress-rank:last-child{ margin-bottom:0; }
.bai-gami-unit{ display:block; font-size:0.65rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--bai-muted); margin-top:0.3rem; }
.bai-gami-achievements{ margin-top:4rem; }
.bai-gami-achievements h3{ font-size:1.4rem; color:var(--bai-navy); margin:3rem 0 0.4rem; font-weight:700; }
.bai-gami-achievements h3:first-child{ margin-top:0; }
.bai-gami-achievements > p{ color:var(--bai-muted); margin:0 0 1.5rem; }
/* Targets GamiPress's actual achievement-grid markup: a
   .gamipress-achievements-container of .gamipress-achievement items (not a
   ul/li — an earlier version of this rule mistakenly matched the ul/li used
   internally for a badge's hidden "required steps" list instead). */
.bai-gami-block .gamipress-achievements-container{
	display:flex; flex-wrap:wrap; gap:1.5rem; margin:0 0 1.5rem; list-style:none; padding:0;
}
.bai-gami-block .gamipress-achievement{
	background:#fff; border:1px solid var(--bai-line); border-radius: var(--bai-radius-md);
	padding:1.6rem 1.4rem; text-align:center; box-shadow: var(--bai-shadow);
	transition: all .25s ease; box-sizing:border-box;
	width: calc(33.333% - 1rem);
}
.bai-gami-block .gamipress-achievement:hover{ transform: translateY(-6px); border-color: var(--bai-cyan); }
/* GamiPress's "layout-left" class floats .gamipress-achievement-image and
   flows the title/excerpt around it — fine for a wide list row, but it
   turns into a tiny floated icon jammed against an oversized <h2> in a
   narrow card. Force the simple stacked layout our cards actually use. */
.bai-gami-block .gamipress-achievement-image{ float:none !important; display:block !important; margin:0 0 1rem; width:100% !important; max-width:none !important; }
.bai-gami-block .gamipress-achievement img.gamipress-achievement-thumbnail{
	width:88px !important; height:88px !important; max-width:88px !important; min-width:88px !important;
	object-fit:contain; margin:0 auto !important; display:block !important; float:none !important; flex:none !important;
}
.bai-gami-block .gamipress-achievement-title{
	font-size:1.15rem; font-weight:700; color:var(--bai-navy); margin:0 0 0.5rem; line-height:1.3;
}
.bai-gami-block .gamipress-achievement-description{ clear:both; }
.bai-gami-block .gamipress-achievement-excerpt p{ font-size:0.92rem; color:var(--bai-muted); margin:0; }
.bai-gami-block .gamipress-achievement-steps{ display:none; }
@media (max-width: 900px){ .bai-gami-block .gamipress-achievement{ width: calc(50% - 0.75rem); } }
@media (max-width: 560px){ .bai-gami-block .gamipress-achievement{ width:100%; } }
.bai-gami-categories{ margin-top:2.5rem; }
/* The Achievements tab on a BuddyPress member profile renders outside
   .bai-page/.bai-wrap, so it needs its own width constraint and padding —
   everything inside it still reuses the .bai-gami-* classes above. */
.bai-gami-profile{ max-width: var(--bai-max); margin:0 auto; padding:2rem 20px 4rem; font-family: var(--bai-font); }
.bai-gami-profile .bai-gami-achievements{ margin-top:3rem; }
.bai-gami-profile .bai-gami-achievements h3{ margin-top:2.5rem; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.bai-final-cta{
	background: linear-gradient(135deg, var(--bai-cyan), var(--bai-cyan-deep)); color: var(--bai-navy-deep);
	text-align:center; padding: 6rem 0;
}
.bai-final-cta h2{ font-size:2.6rem; margin:0 0 1.2rem; font-weight:800; }
.bai-final-cta p{ font-size:1.2rem; max-width:640px; margin:0 auto 2.6rem; }
.bai-final-cta .bai-btn-primary{ background:var(--bai-navy-deep); color:#fff; box-shadow:0 8px 25px rgba(13,34,51,0.3); }
.bai-final-cta .bai-btn-primary:hover{ color:#fff; }
.bai-final-cta .bai-btn-outline{ color:var(--bai-navy-deep); border-color:var(--bai-navy-deep); }
.bai-final-cta .bai-btn-outline:hover{ background:var(--bai-navy-deep); color:#fff; }

/* ==========================================================================
   Utility
   ========================================================================== */
.bai-center{ text-align:center; }
.bai-mt-lg{ margin-top:3rem; }
.bai-alt-bg{ background: var(--bai-paper-tint); }
.bai-navy-bg{ background: linear-gradient(135deg, var(--bai-navy-deep), var(--bai-blue)); color:#fff; }
.bai-navy-bg h2{ color:#fff; }
.bai-navy-bg p{ color: rgba(255,255,255,0.85); }

@media (max-width: 768px){
	.bai-hero h1{ font-size: 2.2rem; }
	.bai-section{ padding: 4rem 0; }
	.bai-section-head h2{ font-size: 2rem; }
}

/* ==========================================================================
   Accessibility — visible keyboard focus (WCAG 2.4.7)
   Browser default focus rings still work everywhere; this just makes them
   on-brand and reliably visible against both light and dark (navy) sections.
   ========================================================================== */
.bai-page a:focus-visible,
.bai-page button:focus-visible,
.bai-page .bai-btn:focus-visible,
.bai-gami-profile a:focus-visible,
.bai-gami-profile button:focus-visible,
.bai-cookie-notice a:focus-visible,
.bai-cookie-notice button:focus-visible{
	outline: 3px solid var(--bai-cyan);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ==========================================================================
   Cookie notice
   ========================================================================== */
.bai-cookie-notice{
	position: fixed; left:0; right:0; bottom:0; z-index:9999;
	background: var(--bai-navy-deep); color:#fff;
	padding: 1.1rem 20px; box-shadow: 0 -6px 24px rgba(0,0,0,0.2);
	font-family: var(--bai-font);
}
.bai-cookie-notice[hidden]{ display:none; }
.bai-cookie-notice-inner{
	max-width: var(--bai-max); margin:0 auto; display:flex; flex-wrap:wrap;
	align-items:center; justify-content:space-between; gap:1rem 1.5rem;
}
.bai-cookie-notice p{ margin:0; font-size:0.92rem; line-height:1.5; color: rgba(255,255,255,0.9); flex:1 1 380px; }
.bai-cookie-notice a{ color: var(--bai-cyan); text-decoration:underline; }
.bai-cookie-notice-actions{ display:flex; gap:0.75rem; flex:0 0 auto; }
.bai-cookie-notice button{
	font: inherit; font-weight:700; font-size:0.9rem; cursor:pointer;
	padding:0.65rem 1.3rem; border-radius: var(--bai-radius-sm); border:1px solid transparent;
}
.bai-cookie-accept{ background: var(--bai-cyan); color: var(--bai-navy-deep); }
.bai-cookie-decline{ background:transparent; color:#fff; border-color: rgba(255,255,255,0.4); }
@media (max-width: 560px){
	.bai-cookie-notice-inner{ flex-direction:column; align-items:stretch; }
	.bai-cookie-notice-actions{ justify-content:stretch; }
	.bai-cookie-notice button{ flex:1; }
}