/* ----------------------------------------------------------------
  Custom CSS (Consolidated)
  - Color tokens
  - Base typography & links
  - Buttons (primary + variants)
  - Header / menu colors
  - Hero slider tweaks (focus & spacing)
  - Heading scale (H1/H2/H3)
  - Section theming (light sections, Shy Facts)
  - Utilities
-----------------------------------------------------------------*/

/* =====================
   Color Tokens
   ===================== */
:root{
  /* Core */
  --bg-dark: #1e232a;
  --bg-darker: #121519;
  --bg-light: #f4f4f4;
  --ink: #121519;
  --ink-inverse: #ffffff;
  --muted-600: #666666;
  --muted-500: #888888;


  /* Accents */
  --accent-blue: #418fcc;           /* brand blue (shirt) */
  --accent-blue-light: #8dbce0;
  --accent-blue-dark: #27567a;
  --accent-blue-title: #0026fc;

  --accent-teal: #006b84;           /* dark green/teal shirt */
  --accent-teal-light: #66a6b5;
  --accent-teal-dark: #00404f;

  --accent-red: #990033;            /* reddish shirt */
  --accent-red-light: #c26685;
  --accent-red-dark: #5c001f;

  /* Type scale */
  --h1-size: clamp(2.2rem, 3.5vw + 1rem, 4rem);
  --h2-size: clamp(1.75rem, 2.2vw + 1rem, 2.75rem);
  --h3-size: clamp(1.25rem, 1.2vw + 0.8rem, 1.75rem);
  --cnvs-section-margin: 0px;     /* global default between sections */
  --cnvs-section-padding: 60px;    /* optional: unify padding too */

  /* Tunable, centered horizontal crop for card-top images */
  --img-cover-scale: 1.5;  /* global default: 150% width */
}

/* =====================
   Base / Global
   ===================== */
body { background-color: var(--bg-dark); }

/* Links */
a { color: var(--accent-blue); }
a:hover { color: var(--accent-blue-light); }

/* Selection color */
::selection { background: var(--accent-blue); color: #fff; }
::-moz-selection { background: var(--accent-blue); color: #fff; }

/* =====================
   Buttons
   ===================== */
.button, .btn, .btn-primary {
  background: var(--accent-blue);
  color: var(--ink-inverse);
  border-color: transparent;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
}
.button:hover, .btn:hover, .btn-primary:hover { background: var(--accent-blue-dark); }

/* Button variants */
.button--teal { background: var(--accent-teal) !important; color: var(--ink-inverse) !important; border-color: transparent !important; }
.button--teal:hover { background: var(--accent-teal-dark) !important; }

.button--red { background: var(--accent-red) !important; color: var(--ink-inverse) !important; border-color: transparent !important; }
.button--red:hover { background: var(--accent-red-dark) !important; }

/* =====================
   Header / Navigation
   ===================== */
/* Menu font */
#header .primary-menu .menu-link { font-family: 'Oswald', sans-serif !important; color: #1f3b53; }

/* Menu colors on dark/semi-transparent header states */
/* #header.transparent-header.dark .primary-menu .menu-link div, */
#header.semi-transparent .primary-menu .menu-link div { color: #fff; }
#header.semi-transparent .primary-menu .menu-link:hover div { color: var(--accent-blue); }

/* Optional: force specific items (Home/Book) white at all times
#header .primary-menu .menu-link[href="#welcome"] div,
#header .primary-menu .menu-link[href="#book"] div { color: #ffffff !important; } */

/* =====================
   Hero / Slider
   ===================== */
#slider { height: 800px; }
#slider .move-bg { background-position: center center; }

/* Hero headings (color + shadow kept from current design) */
.emphasis-title h1, #slider h1 { color: #0026fc; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); }
/* Emphasized tagline color */
.emphasis-title em { font-family: 'Anton', sans-serif !important; color: var(--accent-blue); }

/* Large tablets & down */
@media (max-width: 1199.98px) {
  #slider { height: 70vh; min-height: 520px; }
  #slider .emphasis-title h1 { margin-top: 40px; }
}

/* Phones */
@media (max-width: 768px) {
  #slider { height: 75vh; min-height: 520px; }
  #slider .move-bg { background-position: 85% 50% !important; }
  #slider .emphasis-title h1 { margin-top: 300px; }
    .card .card-img-top.img-cover {
    --img-cover-scale: 1.2; /* 120% width on phones */
  }
}

/* Extra narrow */
@media (max-width: 480px) {
  #slider { height: 80vh; min-height: 520px; }
  #slider .move-bg { background-position: 90% 50% !important; }
  #slider .emphasis-title h1 { margin-top: 300px; }
}

/* =====================
   Headings Scale
   ===================== */
   h2.color, h3.color {
  color: var(--accent-blue-title) !important;
}
/* H1 (Hero/primary titles) */
.emphasis-title h1, #slider h1, h1 {
  font-family: 'Anton', sans-serif;
  /* font-family: 'Oswald', sans-serif !important; */
  font-size: var(--h1-size);
  line-height: 1.1;
  letter-spacing: 0.5px;
  /* text-transform: uppercase; */
}

/* H2 (Section headers) */
.heading-block h2, h2 {
  font-family: 'Anton', sans-serif;
  /* font-family: 'Oswald', sans-serif !important; */
  font-size: var(--h2-size);
  line-height: 1.15;
  letter-spacing: 0.5px;
  /* text-transform: uppercase; */

}

/* H3 (Card/box titles) */
.section h3, h3 {
  font-family: 'Anton', sans-serif;
  font-size: var(--h3-size);
  line-height: 1.2;
  letter-spacing: 0.5px;
  /* text-transform: uppercase; */

}

/* Utility: opt-out of uppercase when needed */
.text-transform-none { text-transform: none !important; }

/* =====================
   Sections / Theming
   ===================== */
/* Default section heading color on dark backgrounds */
.section h3, .heading-block h2 { color: var(--ink-inverse); }

/* Light sections (e.g., Quiz, Shy Facts) */
.section[style*="background: var(--bg-light)"],
#shy-facts { color: var(--ink); }
#shy-facts a { color: var(--accent-teal); }
#shy-facts a:hover { color: var(--accent-teal-dark); }


/* Cropped banner-style image */
/* Cropped banner-style image (horizontal crop) */
.card .card-img-top.img-cover {
  
  display: block;
  width: calc(100% * var(--img-cover-scale));
  max-width: none;
  height: auto;
  /* equal left & right crop based on scale */
  margin-left: calc((1 - var(--img-cover-scale)) * 50%);
  margin-right: calc((1 - var(--img-cover-scale)) * 50%);
}