/* ==========================================================================
   BYB Global — base.css
   Standalone-theme foundation: reset + base typography + global chrome
   (header / nav / Countries mega-menu / footer / default page). Design tokens
   live in tokens.css; cross-page primitives in components.css. Both load
   before this file. Page-specific styling stays in each template's scoped CSS.
   The header/footer here RECREATE the current (Joule) chrome faithfully — a
   like-for-like migration, not a redesign.
   ========================================================================== */

/* Design tokens now live in tokens.css, which is enqueued before this file.
   Add or change a colour / font / radius there, never here. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing:border-box; }
/* The page canvas is the footer colour, so pulling past the end of a page on a
   phone (iOS bounce) shows the dark footer continuing, not a white band. The
   body stays white and covers everything above. */
html { -webkit-text-size-adjust:100%; background:var(--foot-bg); }
body {
	margin:0;
	font-family:var(--sans);
	font-size:15px;
	line-height:1.6;
	color:var(--text);
	background:#fff;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
img, svg { max-width:100%; height:auto; vertical-align:middle; }
a { color:var(--gold-dark); text-decoration:none; }
.serif { font-family:var(--serif); }

.byb-container { max-width:1240px; margin:0 auto; padding:0 48px; }

/* ---------- Skip link (a11y) ---------- */
.byb-skip { position:absolute; left:-9999px; top:0; z-index:2000; background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 4px 0; }
.byb-skip:focus { left:8px; top:8px; }

/* ==========================================================================
   HEADER  (deliberate spacing + polished motion; keeps the current visual direction)
   ========================================================================== */
.byb-head { position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid rgba(0,0,0,0.06); transition:transform .35s cubic-bezier(.4,0,.2,1), background-color .25s ease, box-shadow .25s ease; }
html { scroll-padding-top:110px; }
body.admin-bar .byb-head { top:32px; }
@media (max-width: 782px) { body.admin-bar .byb-head { top:46px; } }
/* Scroll behaviour (header script): hides while scrolling down past the fold,
   returns on scroll-up as a solid white bar with a soft shadow. */
.byb-head.is-hidden { transform:translateY(-100%); }
.byb-head.is-floating { box-shadow:0 10px 30px -18px rgba(0,0,0,0.25); }
@media (prefers-reduced-motion: reduce) { .byb-head { transition:none; } }
.byb-head__bar { display:flex; align-items:center; justify-content:space-between; gap:40px; min-height:96px; }

.byb-head__brand { flex:0 1 auto; min-width:0; display:flex; align-items:center; }
.byb-head__brand .byb-logo-link { display:inline-flex; }
.byb-head__brand .byb-logo-link img { max-height:56px; width:auto; display:block; }
.byb-head__brand .custom-logo-link { display:inline-flex; }
.byb-head__brand img, .byb-head__brand .custom-logo { max-height:56px; width:auto; display:block; }
.byb-logo-text { font-family:var(--serif); font-size:26px; font-weight:600; color:var(--gold); letter-spacing:0.01em; }

/* ---------- Primary nav ---------- */
.byb-nav { display:flex; align-items:center; gap:40px; }              /* clear space between nav and CTAs */
.byb-nav__list { display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.byb-nav__item { position:relative; }
.byb-nav__item--mega { display:inline-flex; align-items:center; gap:4px; }
.byb-nav__link { position:relative; display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:500; color:var(--text); padding:10px 1px; white-space:nowrap; transition:color .25s ease; }
/* animated gold underline: grows in on hover, retracts on hover-out — both smooth */
.byb-nav__link::after { content:""; position:absolute; left:0; right:0; bottom:2px; height:1.5px; background:var(--gold); transform:scaleX(0); transform-origin:left center; transition:transform .3s cubic-bezier(.4,0,.2,1); }
.byb-nav__link:hover, .byb-nav__link:focus-visible { color:var(--gold-dark) !important; }
.byb-nav__link:hover::after,
.byb-nav__link:focus-visible::after,
.byb-nav__item--mega:hover > .byb-nav__link::after,
.byb-nav__item--mega.is-open > .byb-nav__link::after { transform:scaleX(1); }
.byb-head .byb-nav__caret { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; padding:0 !important; margin:0; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none; color:var(--text) !important; cursor:pointer; line-height:0; transition:transform .3s cubic-bezier(.4,0,.2,1), color .25s ease; }
.byb-head .byb-nav__caret svg { display:block; width:16px; height:16px; stroke:currentColor; fill:none; }
.byb-nav__item--mega:hover .byb-nav__caret,
.byb-nav__item--mega.is-open .byb-nav__caret { color:var(--gold-dark) !important; transform:rotate(180deg); }

/* ---------- Actions (buttons — rounded per current visual direction) ---------- */
.byb-nav__actions { display:flex; align-items:center; gap:16px; }
/* Buttons live in components.css — the two site-wide variants. The header's
   markup (.byb-btn--outline / --solid) is aliased there, so nothing changed
   here except where the rules live. */

/* ---------- Countries mega-menu ---------- */
.byb-mega {
	position:absolute; top:100%; left:0; z-index:1001;
	padding-top:14px;                                  /* transparent hover-bridge → no flicker crossing the gap */
	opacity:0; visibility:hidden; transform:translateY(10px);
	transition:opacity .28s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility .28s ease;
}
.byb-nav__item--mega:hover .byb-mega,
.byb-nav__item--mega:focus-within .byb-mega,
.byb-nav__item--mega.is-open .byb-mega { opacity:1; visibility:visible; transform:none; }
.byb-mega__inner { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); column-gap:30px; min-width:940px; background:#fff; border-radius:16px; box-shadow:0 30px 64px -26px rgba(0,0,0,0.30); padding:38px 44px; overflow:hidden; }
.byb-mega__col { min-width:0; }
/* first column tinted + bled to the rounded panel edge (matches current look) */
.byb-mega__col:first-child { background:var(--paper); margin:-38px 0 -38px -44px; padding:38px 30px 38px 44px; border-radius:16px 0 0 16px; }
.byb-mega__label { display:block; font-size:15px; line-height:1.35; color:#9a9a9a; margin-bottom:20px; min-height:2.7em; }
.byb-mega__list { list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.byb-mega__list a { display:inline-block; font-size:16px; color:var(--text); transition:color .2s ease, transform .2s ease; }
.byb-mega__list a:hover { color:var(--gold-dark) !important; transform:translateX(3px); }

/* Services mega: the item sits mid-nav, so anchoring the panel to it would run
   off the right edge. Anchor it to the (positioned) header instead and centre
   the panel across the full width; the wrapper ignores the pointer so the empty
   sides never block the page, only the panel itself is interactive. */
.byb-nav__item--mega-center { position:static; }
.byb-mega--center { left:0; right:0; display:flex; justify-content:center; pointer-events:none; }
.byb-mega--center::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(1000px, calc(100% - 48px)); height:14px; pointer-events:auto; } /* hover bridge, since the wrapper itself ignores the pointer */
.byb-mega--center .byb-mega__inner { pointer-events:auto; min-width:0; width:min(1000px, calc(100% - 48px)); }

/* Narrow desktop: a 5-column panel anchored to the nav item would overflow the
   viewport, so span the header width instead. Above 1200px the panel keeps its
   approved position under "Countries". */
@media (min-width: 981px) and (max-width: 1200px) {
	.byb-nav__item--mega { position:static; }
	.byb-mega { left:24px; right:24px; }
	.byb-mega__inner { min-width:0; column-gap:22px; padding:34px 32px; }
	.byb-mega__col:first-child { margin:-34px 0 -34px -32px; padding:34px 22px 34px 32px; }
	.byb-mega__list a { font-size:15px; }
}

/* Intermediate squeeze (F20/B16, widened for R02): the drawer only starts at
 * 980px, and the container caps at 1240px, so every desktop width from 981px
 * up to (and past) 1440px hands the nav the same ~1144px of inner space. With
 * the Insights link added (R03) the header's natural width (logo + 5 nav
 * links + 2 buttons) no longer fits that space at 1024/1280/1440 without
 * tightening. Tighten gaps/padding rather than let content clip or wrap —
 * same layout and type, just less air. */
@media (min-width: 981px) and (max-width: 1440px) {
	.byb-head__bar { gap:16px; }
	.byb-nav { gap:18px; }
	.byb-nav__list { gap:16px; }
	.byb-nav__link { font-size:13.5px; }
	.byb-nav__actions { gap:8px; }
	.byb-nav__actions .byb-btn { padding:11px 16px; font-size:13px; }
	.byb-head__brand .byb-logo-link img { max-height:44px; }
}

/* ---------- Mobile toggle (hidden on desktop) ---------- */
.byb-head__toggle { display:none; flex:none; flex-direction:column; justify-content:center; gap:0; width:44px; height:44px; padding:0; background:none; border:0; cursor:pointer; }
.byb-head__toggle-bar { display:block; width:24px; height:2px; margin:3px auto; background:var(--text); border-radius:2px; transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
.byb-head.is-open .byb-head__toggle-bar:nth-child(1) { transform:translateY(5px) rotate(45deg); }
.byb-head.is-open .byb-head__toggle-bar:nth-child(2) { opacity:0; }
.byb-head.is-open .byb-head__toggle-bar:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.byb-foot { background:var(--foot-bg); color:rgba(255,255,255,0.7); padding:72px 0 30px; }
.byb-foot__top { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:48px; }
/* Footer mark runs larger than the header's (56px): the footer is the brand
   sign-off block, it sits on a dark ground with plenty of room, and at 40px
   the wordmark read as an afterthought. `height:auto` is set alongside the
   cap so the intrinsic width/height attributes on the <img> (220x48, written
   by byb_the_logo()) cannot force a squashed aspect ratio on a file with
   different proportions. */
.byb-foot__logo img, .byb-foot__logo .custom-logo { max-height:64px; width:auto; height:auto; max-width:100%; }
.byb-foot__logo .byb-logo-text { color:var(--gold); }
.byb-foot__blurb { margin:18px 0 0; max-width:430px; font-size:14px; line-height:1.85; color:rgba(255,255,255,0.66); }
.byb-foot__head { font-family:var(--sans); font-size:16px; font-weight:600; color:#fff; margin:0 0 18px; }
.byb-foot__col ul { list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.byb-foot__col a { font-size:14px; color:rgba(255,255,255,0.7); transition:color .2s ease; }
.byb-foot__col a:hover { color:var(--gold-light); }
.byb-foot__bottom { margin-top:46px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.12); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.byb-foot__copy { font-size:13px; color:rgba(255,255,255,0.45); }
.byb-foot__legal { display:flex; flex-wrap:wrap; gap:18px; }
.byb-foot__legal a { font-size:13px; color:rgba(255,255,255,0.45); text-decoration:none; }
.byb-foot__legal a:hover { color:rgba(255,255,255,0.8); }

/* ==========================================================================
   DEFAULT PAGE (page.php / index.php) — for non-custom-template content
   ========================================================================== */
.byb-page { background:#fff; padding:64px 0 88px; }
.byb-page__container { max-width:820px; margin:0 auto; padding:0 48px; }
.byb-page__title { font-family:var(--serif); font-weight:300; font-size:clamp(30px,4.5vw,46px); line-height:1.1; color:var(--ink); margin:0 0 24px; }
.byb-page__content { font-size:16px; line-height:1.85; color:var(--text); }
.byb-page__content h2 { font-family:var(--serif); font-weight:400; font-size:28px; color:var(--ink); margin:36px 0 12px; }
.byb-page__content h3 { font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink); margin:28px 0 10px; }
.byb-page__content a { color:var(--gold-dark); text-decoration:underline; }
.byb-page__content ul, .byb-page__content ol { padding-left:22px; }
.byb-page__content li { margin:6px 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
	.byb-container { padding:0 24px; }
	.byb-head__toggle { display:flex; }

	/* The bar is space-between with a 40px gap; a wide logo used to push the
	   toggle past the container padding and clip it. Shrink the gap, cap the
	   logo, and let the brand (not the toggle) give up the space. */
	.byb-head__bar { gap:16px; min-height:76px; }
	.byb-head__brand { flex:1 1 auto; min-width:0; overflow:hidden; }
	.byb-head__brand img,
	.byb-head__brand .custom-logo,
	.byb-head__brand .byb-logo-link img { max-height:46px; max-width:100%; width:auto; }
	.byb-logo-text { font-size:22px; }

	.byb-nav {
		position:absolute; left:0; right:0; top:100%;
		flex-direction:column; align-items:stretch; gap:0;
		background:#fff; padding:8px 24px 26px;
		box-shadow:0 24px 40px -22px rgba(0,0,0,0.28);
		opacity:0; visibility:hidden; transform:translateY(-8px);
		transition:opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1), visibility .25s ease;
		max-height:calc(100vh - 92px); overflow:auto; -webkit-overflow-scrolling:touch;
	}
	.byb-head.is-open .byb-nav { opacity:1; visibility:visible; transform:none; }

	.byb-nav__list { flex-direction:column; align-items:stretch; gap:0; }
	.byb-nav__item { border-bottom:1px solid rgba(0,0,0,0.07); }
	.byb-nav__item--mega { flex-wrap:wrap; }
	.byb-nav__link { flex:1; padding:16px 0; }
	.byb-nav__link::after { display:none; }              /* no underline in the stacked drawer */
	.byb-head .byb-nav__caret { width:auto; height:auto; padding:16px 4px !important; }

	.byb-mega {
		position:static; padding-top:0; width:100%;
		opacity:1; visibility:visible; transform:none;
		display:none; transition:none;
	}
	.byb-nav__item--mega.is-open .byb-mega { display:block; }
	.byb-mega__inner { min-width:0; background:none; box-shadow:none; grid-template-columns:1fr; column-gap:0; padding:4px 0 16px; border-radius:0; }
	.byb-mega__col:first-child { background:none; margin:0; padding:0; border-radius:0; }
	.byb-mega__col { padding:10px 0; }
	.byb-mega__label { margin-bottom:10px; }
	.byb-mega--center { pointer-events:auto; display:none; }
	.byb-mega--center::before { display:none; }
	.byb-nav__item--mega-center.is-open .byb-mega--center { display:block; }
	.byb-mega--center .byb-mega__inner { width:auto; }

	.byb-nav__actions { margin-top:18px; gap:12px; }
	.byb-btn { flex:1; }

	.byb-foot__top { grid-template-columns:1fr 1fr; gap:36px; }
	.byb-foot__brand { grid-column:1 / -1; }
	/* Footer mark sits below the header's (46px here), as is standard: the
	   header carries the brand, the footer only signs off. */
	.byb-foot__logo img, .byb-foot__logo .custom-logo { max-height:44px; }
}
@media (max-width: 600px) {
	/* Phone header at the standard size: 64px bar, 36px mark (was 76 / 46,
	   which put a 250px-wide wordmark across two thirds of the screen). */
	.byb-head__bar { min-height:64px; }
	.byb-head__brand img,
	.byb-head__brand .custom-logo,
	.byb-head__brand .byb-logo-link img { max-height:36px; }

	/* Compact phone footer: small mark, links in two columns, legal row stacked.
	   The brand blurb is a desktop sign-off; on a phone it doubled the footer's
	   height and repeated the homepage intro, so it is hidden here. */
	.byb-page__container { padding:0 24px; }
	.byb-foot { padding:44px 0 24px; }
	.byb-foot__top { grid-template-columns:1fr 1fr; grid-template-areas:"brand brand" "regions resources" "regions company"; gap:30px 20px; }
	.byb-foot__brand { grid-area:brand; }
	.byb-foot__top > .byb-foot__col:nth-child(2) { grid-area:regions; }
	.byb-foot__top > .byb-foot__col:nth-child(3) { grid-area:resources; }
	.byb-foot__top > .byb-foot__col:nth-child(4) { grid-area:company; }
	.byb-foot__logo img, .byb-foot__logo .custom-logo { max-height:32px; }
	.byb-foot__blurb { display:none; }
	.byb-foot__head { font-size:15px; margin-bottom:14px; }
	.byb-foot__col ul { gap:12px; }
	.byb-foot__bottom { margin-top:32px; padding-top:18px; flex-direction:column; align-items:flex-start; gap:10px; }
	.byb-foot__legal { gap:8px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.byb-nav, .byb-mega, .byb-btn, .byb-btn__label, .byb-btn--outline .byb-btn__arrow,
	.byb-btn--solid::after, .byb-nav__link, .byb-nav__link::after, .byb-nav__caret,
	.byb-mega__list a, .byb-head__toggle-bar, .byb-foot__col a { transition:none !important; }
	.byb-btn:hover, .byb-btn--outline:hover .byb-btn__label,
	.byb-btn--outline:hover .byb-btn__arrow, .byb-mega__list a:hover { transform:none !important; }
}