/**
 * base.css — HW Yachtcharter
 * Globale basis: variabelen, reset, typografie, knoppen, topbar, footer
 * Laad op ELKE pagina van het nieuwe theme.
 */

/* ══════════════════════════════════════════════
   1. DESIGN TOKENS — :root variabelen
   Samenvoegng van hwyc-dufoor-booking + front-v2 + fv2-additions
   ══════════════════════════════════════════════ */

:root {
  /* ── RAW COLORS (van hwyc-dufoor-booking) ── */
  --black:     rgb(0 0 0);
  --black-10:  rgb(0 0 0 / 10%);
  --black-20:  rgb(0 0 0 / 20%);
  --black-30:  rgb(0 0 0 / 30%);
  --black-40:  rgb(0 0 0 / 40%);
  --black-50:  rgb(0 0 0 / 50%);
  --black-60:  rgb(0 0 0 / 60%);
  --black-70:  rgb(0 0 0 / 70%);
  --black-80:  rgb(0 0 0 / 80%);
  --black-90:  rgb(0 0 0 / 90%);
  --black-100: rgb(0 0 0 / 100%);
  --white:     #ffffff;
  --light-10:  rgb(255 255 255 / 10%);
  --light-20:  rgb(255 255 255 / 20%);
  --light-30:  rgb(255 255 255 / 30%);
  --light-40:  rgb(255 255 255 / 40%);
  --light-50:  rgb(255 255 255 / 50%);
  --light-60:  rgb(255 255 255 / 60%);
  --light-70:  rgb(255 255 255 / 70%);
  --light-80:  rgb(255 255 255 / 80%);
  --light-90:  rgb(255 255 255 / 90%);
  --light-100: rgb(255 255 255 / 100%);
  --transparent: rgb(255 255 255 / 0%);

  /* ── GRIJZEN (van hwyc-dufoor-booking) ── */
  --gray-100: #f7f7f7;
  --gray-200: #f5f5f5;
  --gray-300: #f4f4f4;
  --gray-400: #f0f0f0;
  --gray-450: #acacac;
  --gray-500: #8a8a8a;
  --gray-600: #676767;
  --gray-700: #4f4f4f;
  --gray-800: #3a3a3a;
  --gray-900: #1a1a1a;

  /* ── BRAND COLORS (van hwyc-dufoor-booking) ── */
  --brand-red:           #b70c12;
  --brand-blue-dark:     #0f1b2a;
  --brand-blue:          #005586;
  --brand-gold:          #c5a56d;   /* champagne goud — fv2-additions wint van dufoor #d6b065 */
  --brand-gold-dark:     #9e7f43;
  --brand-natural:       #9a8d7a;
  --brand-natural-light: #ccba9f;
  --brand-light:         #f8f6f7;
  --brand-navy:          #1a2e4a;
  --brand-green:         #155f38;
  --accent-light-blue:   #0099cc;

  /* ── FV2 SPECIFIEKE TOKENS (van front-v2 + fv2-additions) ── */
  --fv2-navy:       #0f1b2a;
  --fv2-navy-mid:   #1a2e4a;
  --fv2-red:        #b70c12;
  --fv2-green:      #1a5c3a;        /* fv2-additions wint van front-v2 #0fc766 */
  --fv2-green-hov:  #0f3d26;        /* fv2-additions wint */
  --fv2-gold:       #c5a56d;        /* fv2-additions wint van front-v2 #d4af37 */
  --fv2-gold-light: #e8d5b7;
  --fv2-gold-dark:  #9e7c45;
  --fv2-white:      #ffffff;
  --fv2-off-white:  #f5f0e8;        /* fv2-additions wint van front-v2 #f8f9fb */
  --fv2-ivory:      #f5f0e8;
  --fv2-cream:      #faf7f2;
  --fv2-charcoal:   #1a1a2e;
  --fv2-text:       #2d2d3a;
  --fv2-text-muted: #3d3d4e;
  --fv2-gray:       rgba(15,27,42,.06);
  --fv2-border:     rgba(15,27,42,.10);
  --fv2-font:       'Raleway', sans-serif;
  --fv2-serif:      'Libre Baskerville', Georgia, serif;
  --fv2-radius:     0;
  --fv2-shadow:     0 4px 24px rgba(15,27,42,.12);

  /* ── BUTTON TOKENS (van hwyc-dufoor-booking) ── */
  --button-primary-color:       var(--brand-red);
  --button-primary-color-hover: #9a0a0f;

  /* ── EFFECTS (van hwyc-dufoor-booking) ── */
  --overlay-dark:       rgb(0 0 0 / 70%);
  --shadow-sticky-menu: 0 10px 20px rgb(0 0 0 / 10%);
  --shadow-card:        0 10px 30px rgba(0,0,0,.06);
  --shadow-hover:       0 18px 50px rgba(0,0,0,.12);

  /* ── FUNCTIONAL TOKENS (van hwyc-dufoor-booking) ── */
  --text-body:    #333333;
  --text-muted:   #3d3d4e;
  --text-heading: var(--brand-blue-dark);
  --text-inverse: var(--white);
  --bg-page:      var(--gray-200);
  --bg-surface:   var(--white);
  --bg-overlay:   var(--overlay-dark);
  --border-subtle:  var(--black-10);
  --border-default: var(--black-20);
  --link:       var(--brand-blue);
  --link-hover: var(--accent-light-blue);
  --cta:        var(--brand-natural-light);
  --cta-hover:  var(--brand-natural);

  /* ── TYPOGRAFIE (van hwyc-dufoor-booking) ── */
  --font-base:    "Raleway", sans-serif;
  --font-heading: "Libre Baskerville", serif;
  --font-accent:  "Raleway", sans-serif;
  --font-size-base:   1rem;
  --font-size-accent: 3.5rem;
  --font-size-h1: clamp(1.266rem, 2.25vw, 1.6875rem);
  --font-size-h2: clamp(1.055rem, 1.97vw, 1.406rem);
  --font-size-h3: clamp(0.844rem, 1.69vw, 1.125rem);
  --font-size-h4: clamp(0.739rem, 1.41vw, 0.984rem);
  --font-size-h5: clamp(0.633rem, 1.125vw, 0.844rem);
  --font-size-h6: clamp(0.527rem, 0.84vw, 0.703rem);
  --line-height-base:    1.6;
  --line-height-heading: 1.25;
  --letter-spacing-heading: 0.02em;
  --letter-spacing-accent:  0.04em;
}

/* ══════════════════════════════════════════════
   2. GLOBAL RESET / BASE
   ══════════════════════════════════════════════ */

*,*::before,*::after { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  font-family: var(--font-base);
  background: var(--bg-page);
  color: var(--text-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

a { color: var(--brand-blue); text-decoration: none; }
a:hover { color: #0099cc; }

img { max-width: 100%; display: block; }

/* ══════════════════════════════════════════════
   3. TYPOGRAFIE
   ══════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base);
  color: var(--text-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  font-weight: 700;
}
h1 {
  font-family: var(--font-heading);
  letter-spacing: -.015em;
  line-height: 1.2;
  font-size: var(--font-size-h1);
}
h2 { font-size: var(--font-size-h2); font-weight: 700; }
h3 { font-size: var(--font-size-h3); font-weight: 600; }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

/* Signature / accent */
.hwyc-signature {
  font-family: var(--font-accent);
  font-size: var(--font-size-accent);
  letter-spacing: var(--letter-spacing-accent);
  color: var(--brand-gold-dark);
  line-height: 1;
  opacity: .9;
}

/* Utility */
.hwyc-muted { color: var(--text-muted) !important; }

/* ══════════════════════════════════════════════
   4. KNOPPEN — gemeenschappelijke basis
   ══════════════════════════════════════════════ */

/* Primary CTA button — .hwyc-btn-primary */
.hwyc-btn-primary,
.hwyc-header .btn.btn-primary {
  background: var(--button-primary-color);
  border-color: var(--button-primary-color);
  color: var(--text-inverse);
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 0;
  box-shadow: 0 1px 10px var(--button-primary-color);
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.hwyc-btn-primary:hover,
.hwyc-header .btn.btn-primary:hover {
  background: var(--button-primary-color-hover);
  border-color: var(--button-primary-color-hover);
  box-shadow: 0 5px 24px var(--button-primary-color-hover);
  transform: translateY(-1px);
}
.hwyc-btn-primary:active,
.hwyc-header .btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 14px var(--cta-hover);
}

/* Nautica overrides voor knoppen */
.hwyc-btn-primary {
  border-radius: 0 !important;
  font-family: var(--font-base) !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  font-size: .75rem !important;
}

/* ══════════════════════════════════════════════
   5. HEADER / TOPBAR
   Definitieve versie — was dubbel in booking.css én front-v2.css
   ══════════════════════════════════════════════ */

.hwyc-header {
  position: sticky;
  top: 0;
  z-index: 400;
  border-top: 4px solid var(--brand-red) !important;
  background: var(--brand-blue-dark) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.18) !important;
  min-height: 92px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.hwyc-header .navbar { background: rgba(255,255,255,.98); }
.hwyc-header .navbar-brand { font-family: var(--font-heading); letter-spacing: .02em; }
.hwyc-header .nav-link { color: rgba(15,27,42,.78); font-weight: 600; }
.hwyc-header .nav-link:hover { color: rgba(15,27,42,1); }

.hwyc-topbar {
  background: var(--brand-blue-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  font-size: .875rem;
  padding: 10px 0;
}

/* Logo in topbar (img variant) */
.hwyc-logo-topbar img {
  height: 85px;
  width: auto;
  object-fit: contain;
}

/* Logo sprite — background-image staat inline per template (dynamische URL) */
.hwyc-logo-sprite {
  display: inline-block;
  flex-shrink: 0;
  margin: 6px 0;
  background-repeat: no-repeat;
  background-size: 78px 897px;
  background-position: 0 -623px;
  width: 78px;
  height: 52px;
}
@media(max-width:767px){
  .hwyc-logo-sprite {
    background-size: 60px 689px;
    background-position: 0 -479px;
    width: 60px;
    height: 40px;
    margin: 4px 0;
  }
}
@media(max-width:479px){
  .hwyc-logo-sprite {
    background-size: 52px 598px;
    background-position: 0 -414px;
    width: 52px;
    height: 35px;
    margin: 3px 0;
  }
}

/* Phone wrapper */
.hwyc-topbar-phone-wrapper,
.hwyc-topbar-phone-wrapper a,
.hwyc-topbar-phone-wrapper .bi-telephone-fill,
.hwyc-topbar-phone-wrapper svg { color: #fff !important; font-size: .9rem; }

/* Language toggle */
.hwyc-topbar-language-toggle {
  border: 1px solid rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: .375rem .75rem;
  font-size: .875rem;
  font-weight: 600;
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hwyc-topbar-language-toggle::after {
  display: inline-block;
  width: 0; height: 0;
  border-top: .3em solid #fff;
  border-right: .3em solid transparent;
  border-left: .3em solid transparent;
  border-bottom: 0;
  vertical-align: .2em;
  content: "";
  flex-shrink: 0;
  border-top-color: #fff !important;
}
.hwyc-topbar-language-toggle:hover,
.hwyc-topbar-language-toggle:focus {
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.5) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Language menu */
.hwyc-topbar-language-menu {
  background: var(--brand-blue-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  min-width: 80px;
  padding: 4px 0;
}
.hwyc-topbar-language-menu .dropdown-item {
  color: rgba(255,255,255,.75);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  padding: .45rem 1rem;
}
.hwyc-topbar-language-menu .dropdown-item.active,
.hwyc-topbar-language-menu .dropdown-item:active {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.hwyc-topbar-language-menu .dropdown-item:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* Topbar boek-knop */
.hwyc-topbar-book-button {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-size: .72rem !important;
  padding: .5rem 1.1rem !important;
}
.hwyc-topbar-book-button:hover {
  background: #9a0a0f !important;
  border-color: #9a0a0f !important;
  color: #fff !important;
}

/* Responsive topbar */
@media(max-width:479px) {
  .hwyc-topbar-phone-wrapper { display: none !important; }
  .hwyc-topbar-language-toggle { padding: .2rem .5rem !important; font-size: .75rem !important; min-width: 44px !important; }
  .hwyc-logo-topbar img { height: 38px !important; }
}

/* ══════════════════════════════════════════════
   6. FOOTER
   Volledige inhoud van footer-plugin.css + front-v2 footer partials
   ══════════════════════════════════════════════ */

/* ── Plugin footer (footer-plugin.css) ── */
.hwyc-plugin-footer {
  background: #0f1b2a;
  color: rgba(255,255,255,.65);
  font-family: 'Raleway', sans-serif;
  font-size: .9rem;
  margin-top: auto;
}

.hwyc-plugin-footer__heading {
  font-family: 'Raleway', sans-serif;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c5a56d;
  margin: 0 0 1.1rem;
}

.hwyc-plugin-footer__address {
  font-style: normal;
  color: rgba(255,255,255,.65);
  line-height: 1.75;
}
.hwyc-plugin-footer__address a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .15s;
}
.hwyc-plugin-footer__address a:hover { color: #fff; }

.hwyc-plugin-footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hwyc-plugin-footer__nav li { margin-bottom: .45rem; }
.hwyc-plugin-footer__nav a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .15s;
  font-size: .875rem;
}
.hwyc-plugin-footer__nav a:hover { color: #fff; }

.hwyc-plugin-footer__social {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.hwyc-plugin-footer__social a {
  color: rgba(255,255,255,.55);
  transition: color .15s, transform .15s;
  display: flex;
  align-items: center;
}
.hwyc-plugin-footer__social a:hover {
  color: #c5a56d;
  transform: translateY(-2px);
}

.hwyc-plugin-footer__bottom {
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: .85rem 0;
  font-size: .78rem;
  color: rgba(255,255,255,.4);
}

.hwyc-plugin-footer__legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  justify-content: flex-start;
}
@media(min-width:768px){
  .hwyc-plugin-footer__legal { justify-content: flex-end; }
}
.hwyc-plugin-footer__legal a {
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .15s;
}
.hwyc-plugin-footer__legal a:hover { color: rgba(255,255,255,.8); }

@media(max-width:575px){
  .hwyc-plugin-footer .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}

/* ── Main footer (van front-v2.css) ── */
.hwyc-footer-main {
  background: var(--brand-blue-dark);
  color: rgba(255,255,255,.55);
  padding: 60px 0 36px;
  font-size: .88rem;
  font-family: var(--font-base);
}
.hwyc-footer-main strong { color: rgba(255,255,255,.88); }
.hwyc-footer-main a      { color: rgba(255,255,255,.55); text-decoration: none; }
.hwyc-footer-main a:hover{ color: rgba(255,255,255,.9); }
.hwyc-footer-main .hwyc-muted { color: rgba(255,255,255,.4) !important; }

/* ── Booking flow footer (van front-v2.css) ── */
.hwyc-footer-booking {
  background: var(--brand-blue-dark);
  color: rgba(255,255,255,.4);
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .78rem;
  font-family: var(--font-base);
}
.hwyc-footer-booking a { color: rgba(255,255,255,.4); text-decoration: none; }
.hwyc-footer-booking a:hover { color: rgba(255,255,255,.75); }
.hwyc-footer-booking .hwyc-muted { color: rgba(255,255,255,.35) !important; }