/* -----------------------------------------------------------
   VRCL THEME — Strongly Typed overrides
   ----------------------------------------------------------- */

/* 1. Global background + text */
body {
    background: #F5F5F2;   /* off‑white like auschess */
    color: #222222;        /* dark grey text */
}

/* 2. Title/logo area (NAVY) */
#header,
#header-wrapper {
    background: #0A1A4F;   /* Victorian navy */
    padding: 0.25em 0;
}

/* 3. Navigation bar (BLACK) */
#nav {
    background: #000000;   /* black nav bar */
}
#nav {
    margin-top: 0 !important;
}

/* Navigation links */
#nav ul li a {
    color: #FFFFFF;        /* white text */
}

/* Hover state */
#nav ul li:hover > a {
    background: #0A1A4F;   /* navy hover */
    color: #FFFFFF;
}

/* Dropdown menus */
#nav ul ul {
    background: #000000;   /* dropdown stays black */
}

#nav ul ul li a {
    color: #FFFFFF;
}

/* 4. Logo image styling */
#logo img {
    max-width: 240px;
    height: auto;
    display: block;
    margin: 0 auto;

    /* Navy panel behind the logo */
    background: #0A1A4F;
    padding: 12px 24px;
    border-radius: 6px;
}

/* 5. Header subtitle */
#header p {
    color: #E0E0E0;        /* soft grey on navy */
}

/* 6. Section headers */
section header h2 {
    color: #0A1A4F;        /* Victorian navy */
}

/* 7. Highlight colour (gold from crown/chess pieces) */
a,
strong,
.button {
    color: #D4A017;        /* warm gold */
}

.button {
    background: #0A1A4F;   /* navy button */
    border-color: #0A1A4F;
}

.button:hover {
    background: #D4A017;   /* gold hover */
    border-color: #D4A017;
    color: #000000;        /* readable on gold */
}

/* 8. Main content area (optional white card) */
#main {
    background: #FFFFFF;
    padding: 2em 0;
}

/* 9. Footer */
#footer {
    background: #000000;
    color: #E0E0E0;
}

/* -----------------------------------------------------------
   VRCL NAV — CLEAN FINAL VERSION
   Gold icon + gold text, black background, no orange
   ----------------------------------------------------------- */

/* Layout for nav bar */
#nav ul {
    display: flex;
    align-items: center;
    gap: 1.2em;
    margin: 0;
    padding: 0;
}

/* Logo inside nav bar */
#nav .nav-logo img {
    height: 85px;   /* adjust to taste */
    width: auto;
    display: block;
}

#nav ul li.nav-logo {
    padding: em;
}

/* Remove Strongly Typed's orange icon circle */
#nav ul li a.icon:before {
    background: none !important;
    box-shadow: none !important;
}

/* Hover — gold text + gold icon, black background */
#nav ul li:hover > a {
    background: #000000 !important;
    color: #D4A017 !important;
}

#nav ul li:hover > a:before {
    color: #D4A017 !important;
}

/* Dropdown hover */
#nav ul ul li:hover > a {
    background: #000000 !important;
    color: #D4A017 !important;
}

#nav ul ul li:hover > a:before {
    color: #D4A017 !important;
}

/* Active/current page */
#nav ul li.current > a {
    background: #000000 !important;
    color: #D4A017 !important;
}

#nav ul li.current > a:before {
    color: #D4A017 !important;
}
/* Fix Strongly Typed span text override */
#nav ul li:hover > a span {
    color: #D4A017 !important;   /* gold text */
}
/* Lighter gold circle on hover */
#nav ul li:hover > a.icon:before {
    background: #FDF4BB !important;      /* lighter gold circle */
    box-shadow: 0 0 0 2px #F2D37A !important;
    color: #F1B823 !important;           /* keep glyph gold */
}
/* VRCL — Header title colour override */
#logo a {
    color: #D4A017 !important;   /* or #D4A017 for gold */
}

/* Tighten H2 + byline spacing */
section header h2 {
    margin-bottom: 0.25em !important;   /* default is huge */
}

/* VRCL byline — visible, close to H2 */
.byline {
    display: block;
    font-size: 1.05em;
    font-weight: 400;
    color: #4F575B !important;
    margin-top: 0.01em !important;      /* VERY tight to the H2 */
    margin-bottom: 0.1em !important;    /* small gap before paragraph */
    letter-spacing: 0.2px;
}
#content.col-8 {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* ============================
   VRCL Search Bar (Begonia Engine)
   ============================ */

/* Keep the year search bar on one line */
#searchContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5em;
}

/* Prevent Safari from forcing form elements to stack */
#searchContainer button,
#searchContainer input {
  flex: 0 0 auto;
  display: inline-flex;
  white-space: nowrap;
  min-width: 0;
}

/* Safari fix: allow flexbox inside HTML5UP grid */
#searchContainer {
  width: auto !important;
  max-width: 100% !important;
}

#searchContainer button,
#searchContainer input {
  flex-shrink: 1;
}

#dynamicHeader {
  margin-top: 3em !important;
}

#yearInput {
  min-width: 5em !important;
  width: 6em !important;
  text-align: center;
}

/* Base arrow button style */
.arrow-btn {
  width: 2.2em;
  height: 2.2em;
  border: 2px solid #444;        /* VRCL dark grey */
  border-radius: 6px;
  background: white;
  position: relative;
  cursor: pointer;
}

/* Left arrow */
.arrow-btn.left::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  border-top: 3px solid #444;
  border-left: 3px solid #444;
  transform: translate(-30%, -50%) rotate(-45deg);
}

/* Right arrow */
.arrow-btn.right::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  border-top: 3px solid #444;
  border-right: 3px solid #444;
  transform: translate(-70%, -50%) rotate(45deg);
}

/* VRCL hover (dark grey → navy) */
.arrow-btn:hover {
  background: #1b2a44 !important;   /* VRCL navy */
  border-color: #1b2a44 !important;
}

.arrow-btn:hover::before {
  border-color: white !important;
}
/* VRCL Go button hover override */
#searchContainer button:not(.arrow-btn):hover {
    background: #1b2a44 !important;   /* VRCL navy */
    border-color: #1b2a44 !important;
    color: #fff !important;
}
#searchContainer button:not(.arrow-btn) {
    background: #1b2a44 !important;   /* VRCL navy */
}
/* VRCL Go button — final override */
#searchContainer button:not(.arrow-btn) {
    background: #1b2a44 !important;   /* VRCL navy default */
    color: #fff !important;
    border: none !important;
    padding: 0.4em 0.8em;
    border-radius: 4px;
    cursor: pointer;
}

/* Hover state — MUST beat .button:hover */
#searchContainer button:not(.arrow-btn):hover {
    background: #444 !important;      /* VRCL dark grey hover */
    color: #fff !important;
    border-color: #444 !important;
}
/* VRCL Go button — final size + color override */
#searchContainer button:not(.arrow-btn) {
    background: #1b2a44 !important;   /* VRCL navy */
    color: #fff !important;
    border: none !important;

    /* SIZE FIX — these stop Strongly Typed from shrinking it */
    padding: 0.45em 0.9em !important;
    font-size: 1em !important;
    line-height: 1.2em !important;
    border-radius: 6px !important;

    cursor: pointer;
}

/* Hover */
#searchContainer button:not(.arrow-btn):hover {
    background: #444 !important;      /* VRCL dark grey */
    color: #fff !important;
}
/* Fix header title overlap on iPad/tablet widths */
@media (max-width: 1024px) {

    /* Allow the header to expand vertically */
    #header,
    #header-wrapper {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 0.6em !important;
        padding-bottom: 0.6em !important;
    }

    /* Allow the logo container to grow too */
    #logo {
        height: auto !important;
    }

    /* Title text fixes */
    #logo a {
        white-space: normal !important;
        display: block !important;
        line-height: 1.25em !important;
        text-align: center !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        font-size: 0.8em !important;
        letter-spacing: 0 !important;
    }
}
/* Make nav bar sit flush at the very top */
#header {
    padding-top: 0em !important;
}
/* Flatten gap between navy header panel and first content block */
#main .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#main .row {
    margin-top: 0 !important;
}

#content {
    margin-top: 0 !important;
}

/* First VRCL block starts tight under the header */
#content > section.vrcl-block {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Tighten the H2 + byline stack only */
#content > section.vrcl-block > header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#content > section.vrcl-block > header h2 {
    margin-top: 0 !important;
    margin-bottom: 0.15em !important;
}

.byline {
    margin-top: 0.1em !important;
    margin-bottom: 0.3em !important;
}
#main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* ============================================================
   VRCL — FIX ALL HEADER + CONTENT SPACING ISSUES
   ============================================================ */

/* 1. NAV BAR FLUSH TO TOP (remove Strongly Typed top padding) */
#header {
    padding-top: 0 !important;
}

/* 2. COMPACT NAVY TITLE PANEL (tight spacing around title + subtitle) */
#header > .container {
    padding-top: 0.6em !important;     /* small gap under nav */
    padding-bottom: 0.4em !important;  /* small gap above content */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. REMOVE WHITE BAR ABOVE CONTENT (Strongly Typed main container padding) */
#main .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 4. REMOVE STRONGLY TYPED'S HUGE FIRST-H2 SPACING */
#content > section.vrcl-block > header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#content > section.vrcl-block > header h2 {
    margin-top: 0 !important;
    margin-bottom: 0.15em !important;
}

.byline {
    margin-top: 0.1em !important;
    margin-bottom: 0.3em !important;
}
/* Add space ABOVE the white content area */
#main {
    margin-top: 2.5em !important;   /* adjust to taste */
}
/* Center any iframe inside #content */
#content iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* VRCL — shrink the main site heading */
#header #logo a {
    font-size: 0.5em !important;   /* adjust to taste */
    line-height: 1.1em !important;
}