/* ============================================================
   Vorster Consulting — design tokens + base
   "Warm studio" look: cream paper, editorial Fraunces serif
   headlines, brand royal blue + sand/terracotta warmth.
   Loaded as a direct <link> AFTER the Odoo bundle, so bare-element
   resets use :where() to keep specificity low (monika lesson #10).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/theme_vorster/static/src/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/theme_vorster/static/src/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/theme_vorster/static/src/fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/theme_vorster/static/src/fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/theme_vorster/static/src/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/theme_vorster/static/src/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* brand blue (from the logo) */
  --v-blue:       #1B3FDB;
  --v-blue-deep:  #122CA8;
  --v-blue-bright:#3D66FF;
  --v-blue-soft:  #E9EDFC;   /* pale blue tint for chips/hover */

  /* warm studio palette */
  --v-bg:         #F8F4EC;   /* warm cream paper */
  --v-surface:    #FFFDF8;   /* card surface */
  --v-sand:       #F0E9DB;   /* soft sand band */
  --v-sand-deep:  #E6DCC8;   /* sand borders on sand */
  --v-line:       #E7DFCE;   /* warm hairline */
  --v-warm:       #D2955C;   /* terracotta accent */
  --v-warm-soft:  #F5E4D2;   /* peach tint */

  --v-ink:        #232A52;   /* deep indigo headings */
  --v-body:       #5D5F6E;   /* warm grey-blue body text */
  --v-mist:       #969185;   /* warm muted */

  --v-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --v-serif:      'Fraunces', Georgia, 'Times New Roman', serif;

  --v-radius:     20px;
  --v-radius-sm:  14px;
  --v-shadow:     0 3px 18px rgba(84, 62, 32, .06);
  --v-shadow-lift:0 18px 44px rgba(84, 62, 32, .13);
  --v-wrap:       1180px;
  --v-header-h:   78px;

  --v-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- base ---------------------------------------------------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* the off-canvas mobile nav (fixed + translateX(105%)) creates 335px of
   horizontal scroll on phones — clip it. `clip` (not `hidden`) so the
   sticky header keeps working; hidden fallback for old browsers. */
body { overflow-x: hidden; overflow-x: clip; }

#wrapwrap.o-vorster {
  background: var(--v-bg);
  color: var(--v-body);
  font-family: var(--v-font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* headings: clean professional sans (customer feedback: serif too playful) —
   --v-serif stays defined but is currently unused */
:where(#wrapwrap.o-vorster) h1,
:where(#wrapwrap.o-vorster) h2,
:where(#wrapwrap.o-vorster) h3,
:where(#wrapwrap.o-vorster) h4 {
  color: var(--v-ink);
  font-family: var(--v-font);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
}

:where(#wrapwrap.o-vorster) p { margin: 0 0 1em; }
:where(#wrapwrap.o-vorster) img { max-width: 100%; height: auto; }
:where(#wrapwrap.o-vorster) a { color: var(--v-blue); text-decoration: none; }
/* hover color ONLY at :where() specificity — buttons/nav (colored text on
   colored bg) must keep their own color, else white button text turns
   blue-on-blue and "vanishes" */
:where(#wrapwrap.o-vorster) a:hover { color: var(--v-blue-deep); }
/* no hover underlines anywhere (kills the Bootstrap/Odoo default) */
#wrapwrap.o-vorster a:hover,
#wrapwrap.o-vorster a:focus { text-decoration: none; }

.o-vorster .wrap {
  max-width: var(--v-wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link:focus {
  clip-path: none; width: auto; height: auto;
  position: fixed; top: 10px; left: 10px; z-index: 9999;
  background: var(--v-ink); color: #fff; padding: 10px 16px; border-radius: 8px;
}

/* ---- type helpers -------------------------------------------- */

/* friendly lowercase kicker, like the reference's small spaced labels */
.v-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: .3em; text-transform: lowercase;
  color: var(--v-warm);
  margin-bottom: 18px;
}
.v-kicker::before,
.v-kicker::after {
  content: ""; width: 26px; height: 1px; background: var(--v-warm);
  opacity: .7;
}

.v-h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); }
.v-h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
.v-lead {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  color: var(--v-body); max-width: 60ch;
}
.v-accent { color: var(--v-blue); }

/* ---- buttons -------------------------------------------------- */

.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px; border-radius: 999px;
  font-weight: 600; font-size: 15.5px; line-height: 1;
  letter-spacing: .02em;
  border: 1.5px solid transparent;
  transition: transform .25s var(--v-ease), box-shadow .25s var(--v-ease),
              background .25s var(--v-ease), color .25s var(--v-ease),
              border-color .25s var(--v-ease);
  cursor: pointer;
}
.v-btn--sm { padding: 10px 20px; font-size: 14px; }
.v-btn--lg { padding: 17px 38px; font-size: 16.5px; }

.v-btn--primary { background: var(--v-blue); color: #fff; box-shadow: 0 8px 20px rgba(27, 63, 219, .18); }
#wrapwrap.o-vorster .v-btn--primary,
#wrapwrap.o-vorster .v-btn--primary:hover { color: #fff; }
.v-btn--primary:hover { background: var(--v-blue-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(27, 63, 219, .26); }

/* warm outline button on cream */
.v-btn--ghost { border-color: var(--v-sand-deep); color: var(--v-ink); background: var(--v-surface); }
#wrapwrap.o-vorster .v-btn--ghost { color: var(--v-ink); }
#wrapwrap.o-vorster .v-btn--ghost:hover { color: var(--v-warm); }
.v-btn--ghost:hover { border-color: var(--v-warm); transform: translateY(-2px); background: #fff; }

.v-btn--ondark { background: var(--v-surface); color: var(--v-ink); }
#wrapwrap.o-vorster .v-btn--ondark,
#wrapwrap.o-vorster .v-btn--ondark:hover { color: var(--v-ink); }
.v-btn--ondark:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }

/* ---- reveal-on-scroll ---------------------------------------- */

[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--v-ease), transform .7s var(--v-ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}