/* =====================================================================
   THEME — the site's design system, loaded last on every page.

   HOW TO USE THIS FILE
   --------------------
   Everything you are likely to want to change is a variable in the
   :root block just below. Change a value there and it updates on every
   page (home, services, cases, 404, cookie banner).

   The defaults reproduce the current design exactly, so nothing changes
   visually until you edit a value.

   The :root block is split into sections:
     A. Colours            (palette + what each colour is used for)
     B. Typography         (fonts, sizes, headline style)
     C. Shape & layout     (radius, content width, animation easing)
     D. Buttons            (size, text, primary / secondary / on-dark)
     E. Header             (scrolled background + shadow)
     F. Hero               (gradient pill, badges)
     G. Dark sections      (cases, pre-footer, footer)
     H. Social icons
     I. Cookie banner

   Below :root are the rules that APPLY those variables. You normally
   don't need to touch them.

   TIP: colours accept any CSS colour: #hex, rgb(), hsl(), or
   var(--other-variable) to point at another token.
   ===================================================================== */

:root {

  /* ===================================================================
     A. COLOURS
     ===================================================================
     Base palette. Change these first; most of the site follows them. */
  --ink:   #181818;   /* Main text, dark sections, secondary buttons      */
  --bg:    #f6f2f7;   /* Page background (soft paper)                     */
  --white: #fff;      /* Cards, text on dark backgrounds                  */
  --blue:  #4b7dfe;   /* Primary accent: primary buttons, focus rings     */
  --pink:  #e285ac;   /* Secondary accent: end of the hero gradient       */

  /* Semantic colours: what the palette is USED for.
     Point these at a different palette colour (or any colour) to restyle
     one thing without changing the whole palette. */
  --text-color:       var(--ink);    /* Body text on light backgrounds     */
  --text-on-dark:     var(--white);  /* Text on dark sections              */
  --eyebrow-opacity:  .6;            /* Fade of small "eyebrow" labels (0–1) */


  /* ===================================================================
     B. TYPOGRAPHY
     =================================================================== */

  /* Typefaces: the first name is used, the rest are fallbacks. */
  --display: 'Clash Display', 'Sora', system-ui, sans-serif;  /* Headlines    */
  --body:    'Sora', system-ui, sans-serif;                   /* All other text */

  /* Sizes: the whole site uses just these two. */
  --fs-body: 16px;                             /* ALL text that isn't a headline */
  --fs-head: clamp(24px, 1.6vw + 17px, 40px);  /* ALL headlines (fluid: 24px phone -> 40px PC) */

  /* Headline style */
  --ls-head:   .03em;       /* Letter-spacing of headlines                  */
  --fw-head:   700;         /* Weight of headlines (400 normal … 900 black) */
  --lh-head:   1.2;         /* Line-height of headlines                     */
  --tt-head:   uppercase;   /* uppercase | none | capitalize                */

  /* Body text */
  --fw-body:   500;         /* Weight of normal text (400 normal, 500 medium, 600 semibold) */
  --lh-body:   1.6;         /* Line-height of normal text (1.4 tight … 1.8 airy)            */


  /* ===================================================================
     C. SHAPE & LAYOUT
     =================================================================== */
  --radius: 4px;          /* Shared corner radius (buttons, social icons).
                             0 = sharp corners, 999px = fully round pills  */

  --content:      1200px; /* Max content width on normal screens           */
  --content-wide: 1680px; /* Max content width on screens ≥ 1920px         */

  --ease: cubic-bezier(.16, 1, .3, 1);   /* Easing curve for most animations (hover, header, reveals) */


  /* ===================================================================
     D. BUTTONS
     ===================================================================
     Two kinds, one shared shape:
       Primary   – solid colour (the main action)
       Secondary – outline      (everything else)                         */

  /* --- Shared shape & text (both kinds) --- */
  --btn-height:           48px;           /* Minimum height                 */
  --btn-pad-x:            52px;           /* Left/right padding (desktop)   */
  --btn-pad-x-mobile:     20px;           /* Left/right padding (≤ 600px)   */
  --btn-gap:              10px;           /* Space between text and icon    */
  --btn-border-width:     2px;            /* Outline thickness              */
  --btn-radius:           var(--radius);  /* Corner radius (own token so buttons can differ from the rest) */
  --btn-font:             var(--body);    /* Typeface                       */
  --btn-font-size:        var(--fs-body); /* Text size                      */
  --btn-font-weight:      700;            /* Text weight                    */
  --btn-letter-spacing:   .06em;          /* Space between letters          */
  --btn-text-transform:   capitalize;     /* capitalize | uppercase | none  */

  /* --- Keyboard focus ring (shown when tabbing to a button) --- */
  --focus-color:          var(--blue);
  --focus-width:          2px;
  --focus-offset:         3px;

  /* --- Primary button --- */
  --btn-primary-bg:          var(--blue);   /* Fill                         */
  --btn-primary-border:      var(--blue);   /* Outline                      */
  --btn-primary-text:        #fff;          /* Text                         */
  --btn-primary-hover-bg:    var(--ink);    /* Fill + outline on hover      */
  --btn-primary-hover-text:  #fff;          /* Text on hover                */

  /* --- Secondary button (outline) --- */
  --btn-secondary-bg:          transparent; /* Fill                         */
  --btn-secondary-border:      var(--ink);  /* Outline                      */
  --btn-secondary-text:        var(--ink);  /* Text                         */
  --btn-secondary-hover-bg:    var(--ink);  /* Fill on hover                */
  --btn-secondary-hover-text:  var(--bg);   /* Text on hover                */

  /* --- Buttons placed on dark sections (cases, pre-footer, footer) --- */
  --btn-dark-secondary-border:      #fff;         /* Outline of secondary   */
  --btn-dark-secondary-text:        #fff;         /* Text of secondary      */
  --btn-dark-hover-bg:              #fff;         /* Fill on hover (both kinds) */
  --btn-dark-hover-text:            var(--ink);   /* Text on hover (both kinds) */

  /* --- Floating "view case" label that follows the cursor on case cards --- */
  --case-cta-bg:    var(--blue);
  --case-cta-text:  #fff;


  /* ===================================================================
     E. HEADER (the fixed top bar)
     =================================================================== */
  --header-stuck-bg:      rgba(246, 242, 247, .96);        /* Background once you've scrolled */
  --header-stuck-shadow:  0 1px 0 rgba(32, 32, 32, .08);   /* Thin line under it              */


  /* ===================================================================
     F. HERO
     =================================================================== */

  /* Animated gradient in the hero "pill". Four stops, left to right. */
  --grad-1: #416ff0;
  --grad-2: #6675f2;
  --grad-3: #9a68df;
  --grad-4: var(--pink);

  /* Small outlined badges in the hero */
  --badge-radius:  25px;         /* 999px = pill, 0 = square               */
  --badge-border:  1px solid var(--ink);


  /* ===================================================================
     G. DARK SECTIONS (cases, pre-footer, footer)
     =================================================================== */
  --dark-bg: var(--ink);   /* Background colour of the dark sections       */


  /* ===================================================================
     H. SOCIAL ICONS
     =================================================================== */
  --soc-radius:       var(--radius);  /* 50% = circles, matching the old look */
  --soc-hover-bg:     var(--blue);    /* Fill when hovered                */
  --soc-hover-border: var(--blue);    /* Outline when hovered             */
  --soc-hover-icon:   #fff;           /* Icon colour when hovered         */


  /* ===================================================================
     I. COOKIE BANNER
     =================================================================== */
  --ck-bg:      #fff;   /* Banner background                              */
  --ck-radius:  18px;   /* Banner corner radius                           */
}


/* =====================================================================
   BELOW THIS LINE: the rules that apply the variables above.
   You normally don't need to edit anything from here on.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BUTTONS — shared base
   --------------------------------------------------------------------- */
html body :is(
  .btn, .btn-o, .btn-b, .btn-l, .sv-cta, .menu-cv, .menu-btn, .menu-close,
  .ck-btn, .lg-reset
) {
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x) !important;
  border-width: var(--btn-border-width) !important;
  border-style: solid !important;
  border-radius: var(--btn-radius) !important;
  font-family: var(--btn-font) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--btn-letter-spacing) !important;
  text-transform: var(--btn-text-transform) !important;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

html body :is(.btn, .btn-o, .btn-b, .btn-l, .sv-cta) {
  display: inline-flex;
  position: relative !important;   /* keeps the hover fill inside the button */
  overflow: hidden !important;
  isolation: isolate;
}

html body :is(.btn, .btn-o, .btn-b, .btn-l, .sv-cta).hv::before {
  border-radius: inherit;
}

html body :is(.btn, .btn-o, .btn-b, .btn-l, .sv-cta, .menu-cv, .menu-btn, .menu-close, .ck-btn, .lg-reset):focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

@media (max-width: 600px) {
  html body :is(.btn, .btn-o, .btn-b, .btn-l, .sv-cta, .menu-cv, .menu-btn, .menu-close, .ck-btn, .lg-reset) {
    padding: 0 var(--btn-pad-x-mobile) !important;
  }
}

/* ---------------------------------------------------------------------
   1a. PRIMARY button
   --hv / --hc are the colours of the hover "fill" animation.
   --------------------------------------------------------------------- */
html body :is(.btn.f, .btn-b, .btn-l, .sv-cta, .menu-cv, .ck-btn:not(.ck-alt)) {
  background: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-border) !important;
  color: var(--btn-primary-text) !important;
  --hv: var(--btn-primary-hover-bg);
  --hc: var(--btn-primary-hover-text);
}

/* hover without the fill animation (cookie banner, mobile menu) */
@media (hover: hover) {
  html body :is(.menu-cv, .ck-btn:not(.ck-alt)):hover {
    background: var(--btn-primary-hover-bg) !important;
    border-color: var(--btn-primary-hover-bg) !important;
    color: var(--btn-primary-hover-text) !important;
  }
  html body :is(.btn.f, .btn-b, .btn-l, .sv-cta).hv:hover {
    background: var(--hv) !important;
    border-color: var(--hv) !important;
    color: var(--hc) !important;
  }
}

/* ---------------------------------------------------------------------
   1b. SECONDARY button (outline)
   --------------------------------------------------------------------- */
html body :is(.btn:not(.f), .btn-o:not(.sv-cta), .menu-btn, .menu-close, .ck-btn.ck-alt, .lg-reset) {
  background: var(--btn-secondary-bg) !important;
  border-color: var(--btn-secondary-border) !important;
  color: var(--btn-secondary-text) !important;
  --hv: var(--btn-secondary-hover-bg);
  --hc: var(--btn-secondary-hover-text);
}

@media (hover: hover) {
  html body :is(.btn:not(.f), .btn-o:not(.sv-cta)).hv:hover {
    background: var(--hv) !important;
    color: var(--hc) !important;
  }
  html body :is(.ck-btn.ck-alt, .lg-reset):hover {
    background: var(--btn-secondary-hover-bg) !important;
    color: var(--btn-secondary-hover-text) !important;
  }
}

html body :is(.menu-btn, .menu-close):active {
  background: var(--btn-secondary-hover-bg) !important;
  color: var(--btn-secondary-hover-text) !important;
}

/* ---------------------------------------------------------------------
   1c. Buttons on dark sections (cases, pre-footer, footer)
   --------------------------------------------------------------------- */
html body :is(.work, .prefooter, footer) :is(.btn:not(.f), .btn-o:not(.sv-cta)) {
  border-color: var(--btn-dark-secondary-border) !important;
  color: var(--btn-dark-secondary-text) !important;
  --hv: var(--btn-dark-hover-bg);
  --hc: var(--btn-dark-hover-text);
}

html body :is(.work, .prefooter, footer) :is(.btn.f, .btn-b, .btn-l) {
  --hv: var(--btn-dark-hover-bg);
  --hc: var(--btn-dark-hover-text);
}

/* The cursor label on case cards follows the primary style */
html body .case-cta {
  background: var(--case-cta-bg);
  color: var(--case-cta-text);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
}

/* the mobile-menu close button is icon-only: square, same radius */
html body .menu-close {
  width: var(--btn-height);
  padding: 0 !important;
}

/* ---------------------------------------------------------------------
   1d. Icon buttons (social links)
   --------------------------------------------------------------------- */
html body .soc a,
html body header nav .nav-soc a {
  border-radius: var(--soc-radius) !important;
}

@media (hover: hover) {
  html body .soc a:hover,
  html body header nav .nav-soc a:hover {
    background: var(--soc-hover-bg) !important;
    border-color: var(--soc-hover-border) !important;
    color: var(--soc-hover-icon) !important;
  }
}

/* ---------------------------------------------------------------------
   2. TYPOGRAPHY
   --------------------------------------------------------------------- */
body {
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-color);
}

h1, h2, h3, h4, .d, .cta-h, .prefooter-h, .menu-links .ml {
  font-family: var(--display);
  font-size: var(--fs-head);
}

/* everything else is body size, so nothing falls back to browser defaults */
p, li, a, span, small, strong, em, b, label, input, textarea, select, button, td, th, dt, dd, figcaption, blockquote {
  font-size: inherit;
}

/* every section heading uses the same size, weight, spacing and case */
.d, .prefooter-h, .c-row > .d {
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-transform: var(--tt-head);
}

/* text is only ever the text colour (on light) or the on-dark colour (on dark) */
.work, .prefooter, footer, .det .t h3 { color: var(--text-on-dark); }
.bio p, .lead, .process-head p, .step p, .eyebrow { color: var(--text-color); }
.eyebrow { opacity: var(--eyebrow-opacity); }

/* case-card titles in the Cases section use the body size */
html body .det .t h3 { font-size: var(--fs-body); }

/* footer column titles (Kontakt, Sider, Services) use the body size */
html body .fd h4 { font-size: var(--fs-body); }

/* ---------------------------------------------------------------------
   3. HEADER
   --------------------------------------------------------------------- */
header.is-stuck {
  background: var(--header-stuck-bg);
  box-shadow: var(--header-stuck-shadow);
}

/* ---------------------------------------------------------------------
   4. HERO — gradient pill and badges (badge padding stays responsive in style.css)
   --------------------------------------------------------------------- */
.phrase .pill {
  background-image: linear-gradient(115deg, var(--grad-1) 0%, var(--grad-2) 32%, var(--grad-3) 63%, var(--grad-4) 100%);
}

.badge {
  border: var(--badge-border);
  border-radius: var(--badge-radius);
}

/* ---------------------------------------------------------------------
   5. DARK SECTIONS
   background-color (not the shorthand) so the pre-footer photo is kept.
   --------------------------------------------------------------------- */
.work, footer, .prefooter {
  background-color: var(--dark-bg);
}

/* ---------------------------------------------------------------------
   6. COOKIE BANNER
   --------------------------------------------------------------------- */
.ck {
  background: var(--ck-bg);
  border-radius: var(--ck-radius);
}