/* =========================================================
   BSA1930s – site.css (Integral, clean & stable)
   - Full-width header + nav
   - Title as full-width bar (dark green)
   - Banner: dark green background + centered image (contain)
   - One-line horizontal menu buttons
   - Cream strip under the menu bar (14px)  ✅ FIXED
   - Tagline: red on cream
   - Bullet lists: marker + text SAME BSA red + NOT bold
   ========================================================= */

/* =========================
   Palette / Vars
   ========================= */
:root{
  --bsa-light-green: #2a4c3a;
  --bsa-mid-green:   #33533b;
  --bsa-dark-green:  #1b4d3e;
  --bsa-olive-deep:  #2f4a0f;

  --bsa-red:         #b00000;
  --bsa-red-dark:    #990000;

  --bsa-cream:       #ffffcc;
  --bsa-white:       #ffffff;
  --bsa-offwhite:    #fbfaf5;

  --bsa-black:       #2a2a2a;
  --bsa-border-soft: #cfc7ad;

  --link-blue:       #0000cc;
  --link-visited:    #660099;

  --container:       1100px;

  /* Banner image (theme file) */
  --bsa-banner-url:  url("/wp-content/themes/bsa1930s/BSABackground.jpg");

  /* Cream strip height under menu */
  --menu-cream-strip: 14px;
}

/* =========================
   Base
   ========================= */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bsa-cream);
  color: var(--bsa-red);
  font-family: "Limelight", cursive;
  line-height: 1.6;
}

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

/* Default container used in content areas */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 1rem;
}

/* =========================
   Typography
   ========================= */
h1, h2, h3{
  font-family: "Limelight", cursive;
  color: var(--bsa-red-dark);
  font-weight: normal;
  margin: 10px 0;
}

h1{ font-size: 2.2rem; }
h2{ font-size: 1.6rem; }
h3{ font-size: 1.2rem; }

p{ margin: 0 0 1rem; }
.intro{ max-width: 70ch; }

/* Links */
a{ color: var(--link-blue); text-decoration: underline; }
a:visited{ color: var(--link-visited); }
a:hover{ color: var(--bsa-red); }

/* =========================
   LISTS – bullet + text ALWAYS same red + NOT bold
   (Fixes Gutenberg strong/size classes affecting bullets)
   ========================= */
ul, ol,
.wp-block-list,
.wp-block-list li{
  color: var(--bsa-red) !important;
}

ul li::marker,
ol li::marker,
.wp-block-list li::marker{
  color: var(--bsa-red) !important;
}

/* Force ALL elements inside list items to inherit same red */
.wp-block-list li *,
ul li *,
ol li *{
  color: inherit !important;
}

/* Remove bold inside bullets (including <strong>) */
.wp-block-list li,
ul li,
ol li{
  font-weight: normal !important;
}

.wp-block-list li strong,
.wp-block-list li b,
ul li strong,
ul li b,
ol li strong,
ol li b{
  font-weight: normal !important;
}

/* Links inside lists: keep standard link colours but hover returns to red */
.wp-block-list a,
ul a,
ol a{
  color: var(--link-blue) !important;
}
.wp-block-list a:hover,
ul a:hover,
ol a:hover{
  color: var(--bsa-red) !important;
}

/* =========================================================
   HEADER (full width) + TITLE BAR (full width)
   ========================================================= */
.site-header{
  background: var(--bsa-dark-green);
  border-bottom: 2px solid var(--bsa-black);
  color: #fff;
}

/* Make header content full-width */
.site-header .container{
  max-width: none;
  width: 100%;
  padding: 0; /* padding per element */
}

/* Title = full-width bar */
.site-header .site-title{
  display: block;
  width: 100%;
  margin: 0;

  background: var(--bsa-dark-green);
  color: #fff;

  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.site-header .site-title a{
  color: #fff;
  text-decoration: none;
}

/* Tagline: red on cream background */
.site-header .site-description{
  display: inline-block;
  background: var(--bsa-cream);
  color: var(--bsa-red);

  padding: 6px 10px;
  margin: 10px 18px 12px;

  border: 1px solid var(--bsa-border-soft);
  border-radius: 4px;
}

/* =========================================================
   BANNER (dark green background, image centered, contain)
   ========================================================= */
.site-header .page-banner{
  display: block;
  height: 200px;
  width: 100%;

  background-color: var(--bsa-dark-green);
  background-image: var(--bsa-banner-url);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;

  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 2px solid var(--bsa-black);
}

/* =========================================================
   NAVIGATION – dark green bar for buttons + cream strip below
   (This guarantees the strip is cream, not green)
   ========================================================= */

/* NAV itself is cream so the area under the button bar is cream */
.site-nav{
  background: var(--bsa-cream);
  position: relative;
  border-bottom: 0;
}

/* Dark green "button bar" lives on the container */
.site-nav .container{
  max-width: none;
  width: 100%;
  padding: 10px 18px;

  background: var(--bsa-dark-green);
  border-bottom: 2px solid var(--bsa-black);
}

/* Cream strip under the buttons bar */
.site-nav::after{
  content: "";
  display: block;
  height: var(--menu-cream-strip);
  background: var(--bsa-cream);
}

/* Support both outputs: ul.nav-list and ul.menu */
.site-nav .nav-list,
.site-nav ul.menu{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: nowrap;           /* one line */
  gap: 10px;

  overflow-x: auto;            /* scroll instead of wrapping */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* prevent shrinking */
.site-nav .nav-list > li,
.site-nav ul.menu > li{
  margin: 0;
  flex: 0 0 auto;
}

/* Buttons */
.site-nav .nav-list > li > a,
.site-nav ul.menu > li > a{
  display: inline-block;
  padding: 10px 14px;
  min-width: 150px;
  white-space: nowrap;

  background: var(--bsa-dark-green);
  color: #ffffff;

  font-weight: bold;
  text-decoration: none;

  border: 2px solid var(--bsa-black);
  border-radius: 8px;
}

.site-nav .nav-list > li > a:hover,
.site-nav ul.menu > li > a:hover{
  background: var(--bsa-light-green);
  color: #ffffff;
}

.site-nav .current-menu-item > a,
.site-nav .current_page_item > a{
  outline: 2px solid var(--link-blue);
  outline-offset: 2px;
}

/* =========================================================
   MAIN / CONTENT
   ========================================================= */
.site-content{
  padding: 1.25rem 0 2rem;
}

/* If a template accidentally nests <main> inside <main> */
.site-content main{ margin: 0; padding: 0; }

/* =========================================================
   TABLES (classic)
   ========================================================= */
.table-wrap{
  overflow-x: auto;
  margin-top: 1rem;
}

table{
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
  background: var(--bsa-white);
  border: 4px solid var(--bsa-black);
}

caption{
  padding: 10px;
  font-size: 1.4rem;
  border: 4px solid var(--bsa-black);
}

th, td{
  padding: 10px;
  border: 2px solid var(--bsa-black);
  color: var(--bsa-red);
}

thead th{
  background: var(--bsa-dark-green);
  color: #fff;
}

tbody tr:nth-child(even) td{
  background: var(--bsa-offwhite);
}

/* =========================================================
   MY OTHER PROJECTS (cards)
   ========================================================= */
.my-projects-nav__list{
  list-style: none;
  padding: 0;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.my-projects-nav__link{
  display: inline-block;
  padding: 10px 12px;
  background: var(--bsa-dark-green);
  color: #fff !important;
  text-decoration: none;
  border: 2px solid var(--bsa-black);
  border-radius: 8px;
}

.my-projects-grid__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.my-project{
  background: var(--bsa-white);
  border: 4px solid var(--bsa-black);
  padding: 12px;
}

.my-project__head{
  border-bottom: 2px solid var(--bsa-border-soft);
  margin-bottom: 10px;
  padding-bottom: 8px;
}

.my-badge{
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid var(--bsa-black);
  background: var(--bsa-offwhite);
  border-radius: 6px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer,
footer{
  margin-top: 20px;
  border-top: 2px solid var(--bsa-border-soft);
  padding: 1rem 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 700px){

  .site-header .page-banner{
    height: 160px;
  }

  .site-header .site-description{
    margin-left: 12px;
    margin-right: 12px;
  }

  .my-projects-grid__inner{
    grid-template-columns: 1fr;
  }

  /* Table -> stacked cards */
  .table-wrap table,
  .table-wrap thead,
  .table-wrap tbody,
  .table-wrap th,
  .table-wrap td,
  .table-wrap tr{
    display: block;
  }

  .table-wrap thead{ display: none; }

  .table-wrap tr{
    margin-bottom: 18px;
    padding: 12px;
    border: 2px solid var(--bsa-black);
    background: var(--bsa-white);
  }

  .table-wrap td::before{
    content: attr(data-label);
    font-weight: bold;
    display: block;
  }
}

/* =========================================================
   Accessibility: Skip link
   ========================================================= */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;

  background: var(--bsa-dark-green);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  z-index: 99999;
}

.skip-link:focus,
.skip-link:focus-visible{
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  overflow: visible;
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
/* =========================================================
   MENU BUTTON TEXT COLOR FIX – force white text on buttons
   ========================================================= */

.site-nav .nav-list > li > a,
.site-nav ul.menu > li > a{
  color: #fff !important;
  text-decoration: none !important;
}

/* voorkom "visited = blauw/paars" */
.site-nav .nav-list > li > a:visited,
.site-nav ul.menu > li > a:visited{
  color: #fff !important;
}

/* hover/focus ook wit houden */
.site-nav .nav-list > li > a:hover,
.site-nav .nav-list > li > a:focus,
.site-nav .nav-list > li > a:focus-visible,
.site-nav ul.menu > li > a:hover,
.site-nav ul.menu > li > a:focus,
.site-nav ul.menu > li > a:focus-visible{
  color: #fff !important;
  text-decoration: none !important;
}
/* =========================================================
   NAV BAR (ondergrond) = CREAM
   Buttons = DARK GREEN with WHITE text
   ========================================================= */

/* Ondergrond van de hele nav-zone */
.site-nav{
  background: var(--bsa-cream) !important;
}

/* Ondergrond van de "bar" waar de knoppen in zitten */
.site-nav .container{
  background: var(--bsa-cream) !important;
  border-bottom: 0 !important; /* optioneel: als je geen zwarte lijn direct onder de knoppen wilt */
}

/* Knoppen zelf */
.site-nav .nav-list > li > a,
.site-nav ul.menu > li > a{
  background: var(--bsa-dark-green) !important;
  color: #ffffff !important;

  border: 2px solid var(--bsa-black) !important;
  text-decoration: none !important;
}

/* Voorkom blauw/paars bij visited */
.site-nav .nav-list > li > a:visited,
.site-nav ul.menu > li > a:visited{
  color: #ffffff !important;
}

/* Hover: iets lichter groen, tekst wit */
.site-nav .nav-list > li > a:hover,
.site-nav ul.menu > li > a:hover{
  background: var(--bsa-light-green) !important;
  color: #ffffff !important;
}

/* Actief item outline (laat dit staan zoals je wil) */
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a{
  outline: 2px solid var(--link-blue) !important;
  outline-offset: 2px !important;
}

/* Cream strip onder de knoppen (14px) – blijft cream */
.site-nav::after{
  background: var(--bsa-cream) !important;
  height: var(--menu-cream-strip) !important; /* bij jou 14px */
}
/* =========================================================
   PARTS FOR SALE (page-id-31, tablepress-id-9)
   Sticky header + scroll + lightbox
   ========================================================= */

.page-id-31 #tablepress-9_wrapper .dataTables_scrollBody{
  max-height: 65vh;
  overflow: auto !important;
  border: 2px solid var(--bsa-black);
}

.page-id-31 #tablepress-9 thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bsa-dark-green);
  color: #fff;
}

/* thumbs */
.page-id-31 #tablepress-9 img{
  width: 80px;
  height: auto;
  border: 2px solid var(--bsa-black);
  border-radius: 6px;
  cursor: zoom-in;
}
.page-id-31 #tablepress-9 img:hover{
  outline: 2px solid var(--link-blue);
  outline-offset: 2px;
}

/* search box */
.page-id-31 .dataTables_filter input{
  border: 2px solid var(--bsa-black);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--bsa-white);
  color: var(--bsa-red);
}

/* lightbox */
.bsa-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 24px;
}
.bsa-lightbox.is-open{ display: flex; }

.bsa-lightbox img{
  max-width: min(1920px, 96vw);
  max-height: 90vh;
  border: 4px solid #fff;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
}

/* close button */
.bsa-lightbox-close{
  position: absolute;
  top: 12px;
  right: 12px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 700;
}