/* Card1 — the marketing site's theme, in one place.
   =========================================================================
   Every public marketing page (index, teams, compare, solutions, builder,
   features/*, for/*) links this and no longer carries its own copy of these
   values. Change a colour here and it changes across all 18 pages.

   Scope: the MARKETING FRONT END ONLY. The logged-in app is themed separately
   in page_head() in app/functions.php and is deliberately untouched by this
   file — the product keeps its branding whatever we do out here.

   Loaded BEFORE each page's own <style>, so a page can still override any of
   these for something genuinely page-specific (builder.html does exactly that).

   Regional skins hook in at the bottom of this file. Nothing sets data-region
   yet — that's the next step, and it belongs in bootstrap.php (which already
   knows the country via visitor_country(), and already serves these pages) so
   the attribute is in the HTML on arrival rather than applied by JS, which
   would flash the wrong palette first. A skin is then a short block of variable
   overrides, not a second copy of the site. */

:root {
  /* ONE content width for the whole site (Dom, 4 Aug). The header, the page body
     and the footer must measure identically edge to edge. They previously did
     not: box-sizing:border-box subtracts the gutters from max-width on .wrap and
     .c1nav-in, while the footer puts its padding on the PARENT — so the footer
     came out 1140 and everything else 1084, i.e. 28px proud on each side.
     Anything full-width derives from these two values; nothing hard-codes a
     pixel figure, so the three can no longer drift apart. */
  --page-w:      1140px;   /* the content measure, edge to edge */
  --page-gutter: 28px;     /* space outside it, so nothing touches the viewport */

  /* Surfaces */
  --bg:      #ffffff;   /* page background */
  --surface: #f6f8fb;   /* cards, panels, quiet blocks */
  --border:  #e7eaef;   /* hairlines, dividers, input outlines */

  /* Brand */
  --blue:     #0060F8;  /* the Card1 blue — buttons, links, accents */
  --blue-dim: #0047c2;  /* pressed/hover state of the above */

  /* Text */
  --ink:  #0e1116;      /* headings and body copy */
  --grey: #5b6573;      /* secondary and supporting copy */

  /* Type */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Roboto', sans-serif;
}

/* =========================================================================
   NAV CURRENCY PICKER
   Rendered server-side by render_nav_currency(). Deliberately NOT built on the
   nav's .nvdd dropdown pattern: that's hidden below 1020px, and a phone is
   exactly where someone abroad notices the prices are in the wrong money.
   Opens on hover on desktop and on tap/keyboard focus everywhere.
   ====================================================================== */
.c1curnav { position: relative; display: inline-flex; }

.c1curnav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; margin: 0;
  background: none; border: 1px solid var(--border); border-radius: 20px;
  font-family: var(--font-body); font-size: 13px; line-height: 1;
  color: var(--grey); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.c1curnav-btn:hover { color: var(--ink); border-color: var(--grey); }
.c1curnav-flag  { font-size: 14px; line-height: 1; }
.c1curnav-code  { letter-spacing: .02em; }
.c1curnav-caret { font-size: 9px; opacity: .65; }

/* Anchor LEFT by default. In the stacked mobile menu the pill sits at the left
   edge, so a right-anchored menu hangs off the side of the screen and clips the
   flags. Only the desktop nav — where the pill is over at the right — wants the
   opposite. Capped to the viewport so it can never overflow either way. */
.c1curnav-menu {
  position: absolute; top: 100%; left: 0; right: auto;
  padding-top: 10px; display: none; z-index: 140;
  max-width: calc(100vw - 24px);
}
@media (min-width: 1021px) {
  .c1curnav-menu { left: auto; right: 0; }
}
.c1curnav:hover .c1curnav-menu,
.c1curnav:focus-within .c1curnav-menu { display: block; }

.c1curnav-inner {
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 24px 48px -20px rgba(14,17,22,.28);
  padding: 6px; min-width: 150px; display: flex; flex-direction: column;
}
.c1curnav-inner a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: 8px;
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  color: var(--grey); text-decoration: none; white-space: nowrap;
}
.c1curnav-inner a:hover { background: #f2f6ff; color: var(--blue); }
.c1curnav-inner a[aria-current="true"] { color: var(--ink); font-weight: 600; }

.c1curnav-label { display: none; }

/* The picker used inside a sentence (the /pricing intro) rather than in the nav.
   It is an unbreakable inline-flex box, so the line would break just before it
   and drop the pill onto a line of its own. Keep the phrase and the pill
   together, and sit the pill on the text baseline. */
.c1cur-inline { white-space: nowrap; }
.c1cur-inline .c1curnav { vertical-align: middle; margin: 0 1px; }
.c1cur-inline .c1curnav-btn { padding: 3px 9px; font-size: 12px; }

/* --- inside the burger menu ---------------------------------------------
   c1nav.js clones the desktop link row into .c1nav-mpanel, so this widget
   comes along for the ride. A floating hover-menu is wrong there: it hangs
   off the edge of a phone screen and there's nothing to hover with. The panel
   already flattens the Product/Solutions dropdowns into plain listed sections,
   so this follows suit — a heading and the four currencies laid out to tap. */
.c1nav-mpanel .c1curnav { display: block; width: 100%; border-top: 1px solid #eef1f5; }
.c1nav-mpanel .c1curnav-btn { display: none; }
.c1nav-mpanel .c1curnav-label {
  display: block; padding: 14px 2px 8px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: #8a94a3; font-weight: 500;
}
.c1nav-mpanel .c1curnav-menu {
  position: static; display: block; padding-top: 0; max-width: none;
}
.c1nav-mpanel .c1curnav-inner {
  background: none; border: none; box-shadow: none; padding: 0 0 6px;
  min-width: 0; flex-direction: row; flex-wrap: wrap; gap: 8px;
}
.c1nav-mpanel .c1curnav-inner a {
  flex: 0 0 auto; padding: 10px 14px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 999px;
}
.c1nav-mpanel .c1curnav-inner a[aria-current="true"] {
  border-color: var(--blue); color: var(--blue); background: #f2f6ff;
}

/* =========================================================================
   REGIONAL SKINS
   bootstrap.php stamps the visitor's country onto <html data-region="XX"> as
   the page is served, from the same X-Country header that picks the currency.
   Each skin overrides only what differs — layout, copy, spacing and behaviour
   are identical everywhere. The UK is the default above and needs no block.

   Every --blue here has been checked for white-button-text contrast: all are
   at or above 4.5:1 (WCAG AA for normal text). Don't swap one for a lighter
   tone without re-checking — the first gold tried for the UAE looked right but
   came in at 3.11:1, which would have failed on every call-to-action.
   ====================================================================== */

/* United Arab Emirates — warm gold on a soft sand-white. 5.03:1 */
:root[data-region="AE"] {
  --blue:     #8a6a28;
  --blue-dim: #6d5420;
  --surface:  #faf7f1;
  --border:   #ece3d4;
  --ink:      #1b1710;
}

/* United States — deeper corporate blue. 5.63:1 on white text, 3.43:1 on the
   dark sections. NOTE: `--blue` is used two ways — as a button background with
   white text, AND as an accent colour ON the near-black sections (#0b0e13, e.g.
   the price on the dark pricing band). Those pull in opposite directions, so it
   has to sit in a band: too light and buttons fail, too dark and the accents
   vanish. The first navy tried here (#1e40af) had lovely 8.72:1 buttons but
   dropped that accent to 2.22:1 — invisible. Keep any replacement inside
   white-on-blue >= 4.5 AND blue-on-#0b0e13 >= 3.0. */
:root[data-region="US"] {
  --blue:     #2f5ce0;
  --blue-dim: #2547b8;
  --surface:  #f5f7fc;
  --border:   #e3e8f3;
}

/* Australia & New Zealand — ocean teal. 5.79:1 */
:root[data-region="AU"],
:root[data-region="NZ"] {
  --blue:     #0f7268;
  --blue-dim: #0b574f;
  --surface:  #f2f7f6;
  --border:   #dbe8e5;
}


/* ---------------------------------------------------------------------------
   Touch targets (Dom, 4 Aug — most traffic is mobile).
   On a touch device every real CONTROL is at least 44px tall: the WCAG 2.5.8
   and Apple HIG minimum. Scoped to `pointer: coarse` so the desktop sizing is
   untouched. Inline links inside a sentence are deliberately NOT included —
   WCAG exempts them, and forcing 44px on prose would wreck the line spacing.
   The checkout button on /order measured 42px before this, which is exactly the
   kind of near-miss that never gets noticed on a desktop.
--------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn,
  .c1nav-cta,
  .c1nav-ghost,
  .c1curnav-btn,
  .c1cur a,
  button.btn,
  a.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-block { width: 100%; }
  /* the currency pills sit in a row, so give them room without stretching */
  .c1cur a { padding-top: 10px; padding-bottom: 10px; }
}

@media (pointer: coarse) {
  /* Each page carries its own inline <style> AFTER this file, so an equal-specificity
     rule there wins on source order — which is why the homepage footer stayed 32px
     while /news and /order went to 44. These are accessibility floors rather than
     styling preferences, so they are marked important deliberately. */
  .c1foot .c1foot-grid a { padding-top: 11px !important; padding-bottom: 11px !important; }
  .pcard a, .sectorlink, a.chip { min-height: 44px !important; display: inline-flex; align-items: center; }
  .btn, a.btn, button.btn, .c1nav-cta, .c1nav-ghost, .c1curnav-btn, .c1cur a { min-height: 44px !important; }
  /* Logged-in mobile header. When a session exists the nav swaps the CTA and the
     currency pill for these two, which had no floor at all — so the only two
     controls in the header measured 38px for every signed-in member on a phone,
     on marketing pages as well as the dashboard. The logo is the third control
     in that bar and was 40px. */
  .c1nav-mbtn, .c1nav-burger, .c1nav-mlogin, .c1nav-logo {
    min-height: 44px !important; display: inline-flex; align-items: center; justify-content: center;
  }
  /* The card editor's section tabs (You / Style / Links / Content / Pro tools).
     Real navigation, not prose, and they were 36px. */
  .ednav a { min-height: 44px !important; display: inline-flex; align-items: center; }
}