/* ==========================================================================
   Gosprnjavor — design system
   Loso zinc tokens + client brand teal. Hairlines, zero shadows, no dark bands.
   Sizing is in rem so the text-size control scales the whole page.
   ========================================================================== */

:root {
  --zinc-50:#fafafa; --zinc-100:#f4f4f5; --zinc-200:#e4e4e7; --zinc-300:#d4d4d8;
  --zinc-400:#a1a1aa; --zinc-500:#71717a; --zinc-600:#52525b; --zinc-700:#3f3f46;
  --zinc-800:#27272a; --zinc-900:#18181b; --zinc-950:#09090b;

  --brand:#6aada6;
  --brand-hover:#5b9c95;
  /* Client's choice: white labels on the teal fill, as the mocks show.
     Note this measures 2.4:1. Darkening --brand to #4a8b84 would keep white
     text and reach 4.5:1 at nearly the same hue if that is ever revisited.
     High-contrast mode never ships white-on-teal: it swaps --brand to #000. */
  --on-brand:#ffffff;

  --fg-1:#09090b; --fg-2:#3f3f46; --fg-3:#71717a; --fg-4:#a1a1aa;
  --bg-app:#fafafa; --bg-surface:#ffffff; --bg-hover:#f1f5f9;
  --border:#e4e4e7; --border-strong:#d4d4d8;
  --red:#b91c1c;

  --font-sans:'Inter',Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:'Merriweather',Georgia,serif;
  --font-mono:'Fira Code',Menlo,monospace;

  --wrap:1120px;
  --gutter:2.5rem;
  /* Aligns full-bleed bands to the same column as boxed content. */
  --edge:max(var(--gutter), calc((100% - var(--wrap)) / 2));
  --ease:cubic-bezier(.2,0,0,1);
}

/* High contrast — reader choice, never page decoration. Teal leaves every
   text-bearing surface; it survives only as an icon colour and rule. */
html.gos-hc {
  --fg-1:#000; --fg-2:#000; --fg-3:#000; --fg-4:#1f1f1f;
  --bg-app:#fff; --bg-surface:#fff; --bg-hover:#dcdcdc;
  --border:#000; --border-strong:#000;
  --brand:#000; --brand-hover:#262626; --on-brand:#fff;
  --zinc-100:#fff; --zinc-200:#000; --zinc-300:#000;
  --red:#a00000;
}

html.gos-ts-0{font-size:100%}
html.gos-ts-1{font-size:112.5%}
html.gos-ts-2{font-size:125%}

/* ---------- Base ---------- */
.gos-scope, .gos-scope *, .gos-scope *::before, .gos-scope *::after { box-sizing:border-box; }

body.gos-site {
  background:var(--bg-surface);
  color:var(--fg-1);
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

body.gos-site h1, body.gos-site h2 {
  font-family:var(--font-serif); font-weight:700; color:var(--fg-1);
  line-height:1.15; letter-spacing:-.01em; margin:0; text-wrap:pretty;
}
body.gos-site h3, body.gos-site h4 {
  font-family:var(--font-sans); font-weight:600; color:var(--fg-1);
  line-height:1.35; margin:0; text-wrap:pretty;
}

.gos-scope :focus-visible { outline:2px solid var(--zinc-950); outline-offset:2px; border-radius:4px; }
.gos-sr { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.gos-wrap { max-width:var(--wrap); margin:0 auto; }
.gos-bleed { padding-left:var(--gutter); padding-right:var(--gutter); }

.gos-eyebrow {
  display:block; font:600 .6875rem var(--font-sans);
  text-transform:uppercase; letter-spacing:.04em; color:var(--fg-3);
}
.gos-mono { font-family:var(--font-mono); }

/* ---------- Buttons: one primary, one secondary ---------- */
.gos-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:3rem; padding:.625rem 1.375rem; border-radius:.75rem;
  border:1px solid transparent; font:600 .9375rem/1.3 var(--font-sans);
  text-decoration:none; cursor:pointer;
  transition:background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.gos-btn--primary { background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.gos-btn--primary:hover, .gos-btn--primary:focus { background:var(--brand-hover); border-color:var(--brand-hover); color:var(--on-brand); }
.gos-btn--secondary { background:var(--bg-surface); color:var(--fg-1); border-color:var(--border-strong); }
.gos-btn--secondary:hover, .gos-btn--secondary:focus { background:var(--bg-hover); color:var(--fg-1); }

/* Underlined ink link used at every section head and card foot. */
.gos-link {
  display:inline-flex; align-items:center; gap:.5rem; min-height:2.75rem;
  font:600 .9375rem var(--font-sans); color:var(--fg-1);
  text-decoration:underline; text-underline-offset:4px;
}
.gos-link:hover, .gos-link:focus { color:var(--fg-2); }

/* ---------- Accessibility bar ---------- */
.gos-abar {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  min-height:2.75rem; padding:.375rem var(--gutter);
  background:var(--zinc-100); color:var(--fg-1);
  border-bottom:1px solid var(--border);
  font-family:var(--font-sans);
}
.gos-abar__skip { color:var(--fg-1); font:500 .8125rem var(--font-sans); text-decoration:underline; text-underline-offset:3px; }
.gos-abar__div { width:1px; height:1.25rem; background:var(--border-strong); }
.gos-abar__grow { flex:1 1 auto; }
.gos-abar__lab { font:500 .8125rem var(--font-sans); color:var(--fg-3); }

/* Listen is filled and first: for this audience it is the most important
   control on the page. */
.gos-listen {
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:1.875rem; padding:.25rem .8125rem;
  background:var(--zinc-950); color:#fff; border:1px solid var(--zinc-950);
  border-radius:.5rem; font:600 .8125rem var(--font-sans); cursor:pointer;
  transition:background-color 160ms var(--ease);
}
.gos-listen:hover { background:var(--zinc-800); }
.gos-listen[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }

.gos-ts { display:flex; border:1px solid var(--border); border-radius:.5rem; overflow:hidden; background:var(--bg-surface); }
.gos-ts button {
  min-width:2.125rem; min-height:1.625rem; padding:.125rem .25rem;
  display:grid; place-items:center; background:transparent; border:0;
  color:var(--fg-1); font:500 .75rem var(--font-sans); cursor:pointer;
  transition:background-color 160ms var(--ease);
}
.gos-ts button:nth-child(2){font-size:.875rem}
.gos-ts button:nth-child(3){font-size:.9375rem}
.gos-ts button:hover { background:var(--bg-hover); }
.gos-ts button[aria-pressed="true"] { background:var(--zinc-950); color:#fff; font-weight:600; }

.gos-hcbtn {
  display:inline-flex; align-items:center; gap:.4375rem;
  min-height:1.75rem; padding:.25rem .6875rem;
  border:1px solid var(--border); border-radius:.5rem; background:var(--bg-surface);
  color:var(--fg-1); font:500 .8125rem var(--font-sans); cursor:pointer;
  transition:background-color 160ms var(--ease);
}
.gos-hcbtn:hover { background:var(--bg-hover); }
.gos-hcbtn[aria-pressed="true"] { background:var(--zinc-950); color:#fff; border-color:var(--zinc-950); }

/* ---------- Masthead ---------- */
.gos-masthead {
  display:flex; align-items:center; gap:2.5rem;
  min-height:6rem; padding:.5rem var(--gutter);
  background:#fff; border-bottom:1px solid var(--border);
}
.gos-masthead__logo { flex:none; display:block; line-height:0; }
.gos-masthead__logo img { height:3.75rem; width:auto; display:block; }

.gos-nav { display:flex; gap:2px; flex:1; flex-wrap:wrap; }
.gos-nav__head { display:none; }
.gos-nav__links { display:contents; }
.gos-nav a {
  min-height:2.75rem; display:flex; align-items:center; padding:.5rem .875rem;
  font:400 1rem var(--font-sans); color:var(--fg-2); text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color 160ms var(--ease), border-color 160ms var(--ease);
}
.gos-nav a:hover { color:var(--fg-1); border-bottom-color:var(--border-strong); }
.gos-nav a[aria-current="page"] { font-weight:600; color:var(--fg-1); border-bottom-color:var(--brand); }

/* Explicit resets and states: Astra styles bare <button> elements, and its
   `button:hover` rule (0,1,1) outranks a single class (0,1,0), so without an
   own hover this picked up Astra's button colour on tap. */
.gos-burger {
  display:none; position:relative;
  width:2.75rem; height:2.75rem; padding:0; margin:0;
  align-items:center; justify-content:center; line-height:1;
  -webkit-appearance:none; appearance:none;
  border:1px solid var(--border-strong); border-radius:.75rem;
  background:var(--bg-surface); color:var(--fg-1); cursor:pointer;
  transition:background-color 160ms var(--ease), color 160ms var(--ease);
}
.gos-burger i { font-size:1.125rem; line-height:1; display:block; }
.gos-burger:hover, .gos-burger:focus { background:var(--bg-hover); color:var(--fg-1); border-color:var(--border-strong); }
.gos-burger[aria-expanded="true"], .gos-burger[aria-expanded="true"]:hover { background:var(--zinc-950); color:#fff; border-color:var(--zinc-950); }

/* ---------- Breadcrumb ---------- */
.gos-crumb { background:#fff; border-bottom:1px solid var(--border); }
.gos-crumb__inner {
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  min-height:2.875rem; padding:.5rem 0; font-size:.8125rem; color:var(--fg-3);
}
.gos-crumb a { color:var(--fg-2); text-decoration:underline; text-underline-offset:3px; }
.gos-crumb a:hover { color:var(--fg-1); }
.gos-crumb__here { font-weight:500; color:var(--fg-1); }

/* ---------- Inner page title block ---------- */
.gos-title { background:var(--bg-app); border-bottom:1px solid var(--border); padding:3.75rem var(--gutter) 2.75rem; }
.gos-title h1 { font-size:2.5rem; margin:.625rem 0 0; }
.gos-title p { margin:1rem 0 0; max-width:70ch; font-size:1.0625rem; line-height:1.7; color:var(--fg-2); }

/* ---------- Section head ---------- */
.gos-sechead { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.gos-sechead h2 { font-size:2rem; margin:.625rem 0 0; }
.gos-sechead p { margin:.5rem 0 0; font-size:1.0625rem; line-height:1.7; color:var(--fg-2); }
.gos-sechead .gos-link { flex:none; }

/* ---------- Cards: one treatment, everywhere ---------- */
.gos-card { background:#fff; border:1px solid var(--border); border-radius:1rem; box-shadow:none; }
.gos-card--tint { background:var(--bg-app); border-color:var(--border-strong); }

.gos-ph {
  background:var(--zinc-100); display:grid; place-items:center;
  color:var(--fg-4); text-align:center; gap:.375rem;
}
.gos-ph i { font-size:1.125rem; }
.gos-ph span { font-size:.75rem; }

/* ---------- Support CTA + footer ---------- */
.gos-cta {
  display:flex; align-items:center; justify-content:space-between; gap:3rem; flex-wrap:wrap;
  padding:2.5rem; border:1px solid var(--border); border-radius:1rem; background:#fff;
}
.gos-cta h2 { font-size:1.75rem; line-height:1.25; margin:.625rem 0 0; }

.gos-footer { background:var(--bg-app); border-top:1px solid var(--border); }
.gos-footer__grid {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:3rem;
  padding-top:3.5rem; border-top:1px solid var(--border);
}
.gos-footer__brand { display:flex; flex-direction:column; gap:1rem; }
.gos-footer__brand img { height:3rem; width:auto; align-self:flex-start; display:block; }
.gos-footer__brand p { margin:0; font-size:1rem; line-height:1.7; color:var(--fg-2); }
.gos-footer__col { display:flex; flex-direction:column; gap:.75rem; }
.gos-footer__col a { font-size:1rem; color:var(--fg-2); text-decoration:none; }
.gos-footer__col a:hover { color:var(--fg-1); }
.gos-footer__col a.gos-ink { color:var(--fg-1); text-decoration:underline; text-underline-offset:3px; }
.gos-footer__col span { font-size:1rem; line-height:1.7; color:var(--fg-2); }
.gos-fact { display:flex; flex-direction:column; gap:3px; }
.gos-fact__k { font:500 .8125rem var(--font-sans); color:var(--fg-3); }
.gos-fact__v { font-size:1rem; color:var(--fg-2); }
.gos-copyright { padding:1.375rem var(--gutter); border-top:1px solid var(--border); text-align:center; font-size:.875rem; color:var(--fg-3); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .gos-footer__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.25rem; }
  .gos-cta { gap:1.5rem; }
  .gos-sechead { flex-direction:column; align-items:flex-start; gap:1rem; }
}
@media (max-width:760px){
  :root { --gutter:1rem; }
  .gos-title { padding:2.5rem var(--gutter) 2rem; }
  .gos-title h1 { font-size:1.875rem; }
  .gos-footer__grid { grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce){
  .gos-scope *, body.gos-site * { transition-duration:.001ms!important; animation-duration:.001ms!important; }
}

/* ---------- Column alignment ---------- */
/* These bands span the viewport for their background, but their contents
   line up with the 1120px column used by every page section. */
.gos-abar, .gos-masthead, .gos-crumb, .gos-copyright { padding-left:var(--edge); padding-right:var(--edge); }
.gos-crumb__inner { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; min-height:2.875rem; padding:.5rem 0; }


/* ---------- Astra archive container ----------
   Astra ships `.blog/.archive/.search .site-content > .ast-container { max-width:1200px }`.
   Its own page-builder override has identical specificity and loses on source
   order, so on the news list, category, events and search routes the whole
   Xpro layout was boxed at 1200px and the full-bleed bands could not reach the
   viewport edge. Single posts and pages were unaffected, which is why only the
   archives looked wrong. Scoped to our own template so nothing else shifts. */
body.gos-site.xpro-theme-builder-template .site-content > .ast-container,
body.gos-site.xpro-theme-builder-template #content > .ast-container {
  max-width:100%;
  padding-left:0;
  padding-right:0;
}

/* ---------- Mobile chrome ----------
   The bar and the nav both stack below 760px. Nothing is dropped: the contact
   button moves into the menu panel rather than disappearing, and the text-size
   label becomes screen-reader-only rather than display:none so the control
   keeps its accessible name. */
@media (max-width:760px){

  /* Accessibility bar: three deliberate rows.
     1. skip link   2. listen (full width, the primary control here)
     3. text size + contrast, side by side */
  .gos-abar { gap:.5rem .625rem; padding-top:.5rem; padding-bottom:.5rem; }
  .gos-abar__div, .gos-abar__grow { display:none; }
  .gos-abar__skip { flex:1 1 100%; }
  .gos-listen { flex:1 1 100%; justify-content:center; min-height:2.75rem; font-size:.875rem; }
  .gos-abar__lab { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .gos-ts { flex:1 1 0; }
  .gos-ts button { flex:1; min-height:2.75rem; }
  .gos-hcbtn { flex:1 1 0; justify-content:center; min-height:2.75rem; }

  /* Masthead: logo left, menu button right. */
  .gos-masthead { position:relative; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; min-height:0; padding-top:.75rem; padding-bottom:.75rem; }
  .gos-masthead__logo img { height:2.75rem; }
  .gos-masthead > .gos-btn { display:none; }
  .gos-burger { display:flex; order:2; }

  /* Menu: a full-screen dialog on mobile, not a dropdown. Kept in the DOM
     and hidden with visibility so the transition works and closed links stay
     out of the tab order. */
  .gos-nav {
    position:fixed; inset:0; z-index:200;
    display:flex; flex-direction:column; flex-wrap:nowrap; gap:0;
    background:var(--bg-surface); padding:0; overflow-y:auto;
    visibility:hidden; opacity:0;
    transition:opacity 180ms var(--ease), visibility 180ms var(--ease);
  }
  .gos-nav.is-open { visibility:visible; opacity:1; }

  /* gos-navclose sits lower than the masthead's menu button on purpose: if the
     two overlap, a tap that closes the dialog can land on the burger beneath
     and reopen it. */
  .gos-nav__head {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    position:sticky; top:0; z-index:2; min-height:5.5rem;
    padding:1.5rem var(--edge) .75rem;
    background:var(--bg-surface); border-bottom:1px solid var(--border);
  }
  .gos-nav__title { font:600 .6875rem var(--font-sans); text-transform:uppercase; letter-spacing:.04em; color:var(--fg-3); }
  .gos-navclose {
    display:flex; align-items:center; justify-content:center;
    width:2.75rem; height:2.75rem; padding:0; line-height:1;
    -webkit-appearance:none; appearance:none;
    border:1px solid var(--border-strong); border-radius:.75rem;
    background:var(--bg-surface); color:var(--fg-1); cursor:pointer;
  }
  .gos-navclose { position:relative; z-index:3; }
  .gos-navclose:hover, .gos-navclose:focus { background:var(--bg-hover); color:var(--fg-1); }
  .gos-navclose i { font-size:1.125rem; line-height:1; }

  .gos-nav__links { display:flex; flex-direction:column; padding:.5rem var(--edge) 2rem; }
  .gos-nav a {
    min-height:3.5rem; padding:.875rem .75rem; font-size:1.125rem;
    color:var(--fg-1);
    border-bottom:1px solid var(--border); border-left:3px solid transparent;
  }
  .gos-nav a:hover { background:var(--bg-hover); border-bottom-color:var(--border); }
  .gos-nav a[aria-current="page"] {
    border-left-color:var(--brand); border-bottom-color:var(--border);
    background:var(--bg-app); font-weight:600;
  }
}

/* Page must not scroll behind the open menu. */
body.gos-menu-open { overflow:hidden; }