/* =========================================================
   Design tokens + dark theme
   Light palette is the default. Dark follows the OS
   (prefers-color-scheme) automatically, or is forced via
   <html data-theme="dark|light"> (used by the optional toggle
   and by tests). Every sheet references these vars — edit them
   here to retheme the whole site. Values: see BRAND.md.
   ========================================================= */

/* Light palette (default) */
:root {
  color-scheme: light dark;
  --page:        #ffffff; /* page/body background */
  --white:       #ffffff; /* surface: cards, vcards, panels */
  --panel:       #f6f6f6; /* site strip, title chips, slider overlay */
  --navy:        #002D55; /* primary: links, selected states */
  --slate:       #65788B; /* muted text, link hover */
  --ink:         #222222; /* body/text */
  --border-rule: #BBBDB0; /* link underline, dots, rules */
  --border-card: #ddd;    /* component borders */
  --code-bg:     #eee;    /* inline code */
  --well:        #e9e9e9; /* toolbox demo well */
  --rule-faint:  rgba(187, 189, 192, 0.44); /* hr.type2 44% rule */
}

/* Dark palette — auto, follows the OS setting */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page:        #141517;
    --white:       #1a1c1f;
    --panel:       #212428;
    --navy:        #7fb0d8;
    --slate:       #9db0c4;
    --ink:         #e9ecef;
    --border-rule: #4a4f56;
    --border-card: #3a3f45;
    --code-bg:     #2d3035;
    --well:        #2b2e33;
  }
}

/* Dark palette — forced override (beats the OS setting) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:        #141517;
  --white:       #1a1c1f;
  --panel:       #212428;
  --navy:        #7fb0d8;
  --slate:       #9db0c4;
  --ink:         #e9ecef;
  --border-rule: #4a4f56;
  --border-card: #3a3f45;
  --code-bg:     #2d3035;
  --well:        #2b2e33;
}

/* Forced light (beats OS dark) */
:root[data-theme="light"] {
  color-scheme: light;
  --page:        #ffffff;
  --white:       #ffffff;
  --panel:       #f6f6f6;
  --navy:        #002D55;
  --slate:       #65788B;
  --ink:         #222222;
  --border-rule: #BBBDB0;
  --border-card: #ddd;
  --code-bg:     #eee;
  --well:        #e9e9e9;
}

/* Dim bright day-scene photography in dark mode */
@media (prefers-color-scheme: dark) {
  .slider img, .card__image, .home-sub-image img { filter: brightness(0.85) saturate(0.9); }
  /* :root here — equal specificity to the base navy rule would let the later one win; bump it so OS-dark beats the navy base */
  :root #smallLogoImage img { content: url(../img/CIS-London-Logo-Light.png); /* white glyphs -> dark theme */ }
}
:root[data-theme="dark"] .slider img,
:root[data-theme="dark"] .card__image,
:root[data-theme="dark"] .home-sub-image img { filter: brightness(0.85) saturate(0.9); }
:root[data-theme="dark"] #smallLogoImage img { content: url(../img/CIS-London-Logo-Light.png); }
/* Forced-light guard: symmetric with the dark rule so the navy base can't win when light is forced while OS is dark */
:root[data-theme="light"] #smallLogoImage img { content: url(../img/CIS-London-Logo-Dark.png); /* navy glyphs -> light theme */ }

/* =========================================================
   CIS LONDON — Layout stylesheet (structure, grid, spacing)
   Text styling (fonts, sizes, colours) lives in typography.css
   ========================================================= */

/* ---------- Base ---------- */
* {
  box-sizing: border-box;
}

body {
  background: var(--page);
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

/* ---------- Containing structure ---------- */
.row {
  max-width: 62.5rem; /* ≈1000px */
  margin: 0 auto;
  width: 100%;
  /* border:1px dotted red; */
  background-color: var(--panel);
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.container {
  max-width: 62.5rem;
  margin: 0 auto;
  padding: 0.5rem 1rem;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* ---------- Grid (mobile-first) ---------- */
.columns {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  float: left;
  width: 100%;
}

.small-12 { width: 100%; }

@media (min-width: 40.0625em) { /* ≈641px */
  .medium-4 { width: 33.33333%; }
  .medium-6 { width: 50%; }
  .medium-8 { width: 66.66667%; }
}

@media (min-width: 64.0625em) { /* ≈1025px */
  .large-4 { width: 33.33333%; }
  .large-6 { width: 50%; }
  .large-8 { width: 66.66667%; }
}

/* ---------- Responsive visibility utilities ---------- */
.show-for-small     { display: block; }
.show-for-medium-up { display: none; }
.show-for-medium-only { display: none; }
.show-for-large-up    { display: none; }
.hide-for-small     { display: none; }

@media (min-width: 40.0625em) {
  .show-for-small     { display: none !important; }
  .show-for-medium-up { display: block !important; }
  .hide-for-small     { display: block !important; }
}

/* medium-only = 641px up to (but not including) the large breakpoint 64.0625em */
@media (min-width: 40.0625em) and (max-width: 64.06125em) {
  .show-for-medium-only { display: block !important; }
}

@media (min-width: 64.0625em) {
  .show-for-large-up    { display: block !important; }
  .hide-for-large-up { display: none !important; }
}

@media print {
  .noprint { display: none !important; }
}


/* ---------- Dividers ---------- */
hr.type2 {
  border: solid var(--rule-faint);
  border-width: 2px 0 0;
  height: 0;
  /* margin: 1.25rem 0 1.1875rem; */
  margin-left:auto;
  margin-right:auto;
  margin-top: 0;
  margin-bottom:1.25rem;
  width:970px;
  max-width:100%;
}

/* ---------- Section panel background ---------- */
header .container,
#navcontainer,
.home-sub-image-overlay,
footer .row {
  background: var(--panel);
}

/* subtitle bars in the layout strip (e.g. contact page city titles) */
h2.mapTitle {
  border-bottom: 1px solid var(--border-rule);
  display: block;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 970px;
  max-width: 100%;
}

/* ---------- Header / navigation ---------- */
header .container {
  position: relative; /* anchors the debug .theme-toggle button (debug.css) */
  padding-top: 22px;
  padding-bottom: 16px;
}

/* Site logo — shared layout; the glyph colour swaps (navy/white) live in the
   theme block near the top of this file and are intentionally not repeated here. */
#smallLogoImage {
  padding: 0.75rem 0;
}
#smallLogoImage a {
  display: inline-block;
  text-decoration: none;
  border: none;
}
#smallLogoImage img {
  content: url(../img/CIS-London-Logo-Dark.png); /* navy glyphs -> light theme */
  width: auto;
  height: 44px;
}

#navcontainer {
  max-width: 970px; /* align with slider (970px) */
  margin: 0 auto;
  border-bottom: 1px solid var(--border-card);
}

#navlist {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

#navlist li {
  display: inline-block;
}

#navlist li a {
  display: block;
  padding: 0.75rem 1.1rem;
}


/* ---------- Slider ---------- */
.slider {
  position: relative;
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  aspect-ratio: 970 / 314;
  overflow: hidden;
}

/* "Welcome" label — same overlay technique as .card__title, but bottom-left */
.slider__title {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 33.3333%; /* one third of slider width */
  margin: 0;
  background: var(--panel);
  padding: 0.25em 0.625em 0.25em 5px;
  white-space: nowrap;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slider breakpoints: desktop + mobile 3:2 sets (partials/slider.php).
   Promoted from the retired slider-mobile-test.css (was toolbox-only). */
.slider-set--mobile .slider {
  aspect-ratio: 3 / 2;            /* matches the 471x314 *-m.jpg set */
}

.slider-set--mobile .slider__title {
  width: auto;
  max-width: 100%;
}

/* ---------- Vanilla fade carousel (about.html comparison page) ---------- */
.slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
}

.slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.slider__pagination .slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border-rule);
  opacity: 1;
  margin: 0 9px;
  cursor: pointer;
}

.slider__pagination .slider__dot.is-active {
  background: var(--navy);
}

/* Pagination lives OUTSIDE .slider (which clips via overflow:hidden) */
.slider__pagination {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  padding: 10px 0 0;
  text-align: center;
  line-height: 0; /* neutralise inline-block gaps */
}

/* ---------- Bullet lists (areas page intro) ---------- */
/* Values from cislondon.com css/cislondon.css */
.above-the-fold-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.above-the-fold-list li {
  padding-left: 1.5em;
  padding-top: 0;
  padding-bottom: 0;
}

.bullet {
  width: 13px;
  height: 8px;
  padding-right: 5px;
  margin-right: 5px;
  margin-bottom: 2px;
  vertical-align: middle;
}

/* ---------- Hero block ---------- */
.hero-block {
  padding: 10px 0 0.5rem;
}

.hero-block h2 {
  margin: 0 0 0.75rem;
}

.hero-block p {
  margin-top: 0;
}

/* ---------- Featured section ---------- */
.featured {
  padding-bottom: 1rem;
}

.home-sub-image {
  position: relative;
}

.home-sub-image a {
  display: block;
}

.home-sub-image img {
  width: 100%;
  height: auto;
  display: block;
}

.home-sub-image-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.5rem 0.75rem;
}

.home-sub-image-overlay h3.overlay {
  margin: 0;
}

.featured h4 {
  margin: 0.75rem 0 0.25rem;
}

.featured p {
  margin: 0 0 0.5rem;
}

/* ---------- Footer ---------- */
footer .row {
  /* max-width: 970px; align with slider */
  padding: 1.25rem 0 2rem;
}

footer .columns {
  padding-left: 0;
  padding-right: 0;
}

.social-icons img {
  height: 32px;
  margin: 0 0.125rem;
  vertical-align: middle;
}

footer p {
  margin: 0.5rem 0 0;
}

footer p a:last-child {
  display: inline-block;
  margin-top: 24px;
}

/* body-list (ported from original cislondon.css) */
.body-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.body-list li {
  padding-left: 1.4em;
  padding-top: 0;
  padding-bottom: 4px;
}