/* PSS School theme — custom overrides
   Colours, widths and line thickness come from Admin > Themes > PSS School and
   are injected as CSS variables in the page head, after the stylesheets.
   This file must NOT redeclare them in :root — it would win the cascade and
   silently ignore the admin settings. Fallbacks go inside each var() call. */

/* ── Reserve the scrollbar gutter ─────────────────────────────────────────
   A long page shows a vertical scrollbar and a short one does not, so the
   viewport changes width between pages. Everything centred - the column, the
   logo, the menu - then sits a few pixels differently, which reads as the
   layout narrowing on the shorter page. Reserving the gutter on every page
   keeps the width constant. `stable` only reserves space; it does not draw a
   scrollbar where none is needed. */
html {
  scrollbar-gutter: stable;
}

/* Older browsers without scrollbar-gutter fall back to always showing the
   scrollbar track, which achieves the same stability. */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* The header spans the full width in every state, and its inner container
   follows the same layout width as the content column — so the logo and the
   menu line up with the content on every page, hero or not. */
#header {
  width: 100%;
}

#header > .container {
  max-width: var(--pss-layout-width, 1200px);
  margin-inline: auto;
}

/* ── Hide light/dark toggle ── */
button.theme-toggle { display: none !important; }

/* ── Wide page background ── */
body,
#page-wrapper {
  background-color: var(--pss-page-bg, #f4f4f4) !important;
}

/* ── Content column ─────────────────────────────────────────────────────────
   The column is <main> itself, so the background and the side lines run
   unbroken from the header down to the footer. Putting them on the inner
   .container instead leaves the section's vertical padding showing the page
   background as bands above and below the content. #page-wrapper must not
   stretch, or the column would inherit its full width. */

#page-wrapper {
  display: flex;
  flex-direction: column;
}

/* .page-column wraps the hero AND <main>, so the background and the side lines
   run unbroken from the header to the footer. When only <main> carried them,
   the strip between the hero and <main> showed the page background and the
   lines restarted below it. */
.page-column {
  width: 100%;
  max-width: var(--pss-layout-width, 1200px);
  margin-inline: auto;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background-color: var(--pss-content-bg, #ffffff) !important;
  border-left:  var(--pss-border-width, 1px) solid var(--pss-content-border, #d9deea);
  border-right: var(--pss-border-width, 1px) solid var(--pss-content-border, #d9deea);
  box-sizing: border-box;
}

main#start {
  flex: 1 0 auto;
  width: 100%;
  background-color: transparent !important;
}

/* Sections inside the column must not paint their own background. Several
   modular templates set one of their own (.modular-features uses --q2-bg),
   which differs from the content background, so any vertical space between
   two sections showed the column colour through as a stripe. The column is
   the only thing that paints now — the hero is excluded because its
   background is the image. */
.page-column section:not(.hero),
.page-column .frame-box {
  background-color: transparent !important;
}

/* Inner wrappers stay transparent — the column already paints the background. */
#body-wrapper,
section#body-wrapper,
#body-wrapper > .container {
  background-color: transparent !important;
}

/* The column supplies the side gutters, so the inner container no longer needs
   its own max-width. */
#body-wrapper > .container {
  max-width: 100% !important;
}

/* ── Main body text ── */
body,
#body-wrapper,
#body-wrapper p,
#body-wrapper li,
#body-wrapper td,
#body-wrapper article {
  color: var(--pss-main-text, #222222) !important;
}

/* ── Top bar ── */
#header,
#header.section {
  background-color: var(--pss-topbar-bg, #ffffff) !important;
  border-bottom: var(--pss-border-width, 1px) solid var(--pss-header-border, #d9deea) !important;
}

/* Blur/fill the top bar the instant scrolling starts, not only past the shrink threshold */
body.header-transparent.pss-scrolled-any #header {
  background-color: var(--pss-topbar-bg, #ffffff) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--pss-header-border, #d9deea) !important;
}

#header .navigation a,
#header .navbar a,
#header .dropmenu a {
  color: var(--pss-topbar-text, #111111) !important;
}

#header .navigation a.active,
#header .dropmenu a.active {
  color: var(--pss-topbar-active, #c8102e) !important;
  border-bottom-color: var(--pss-topbar-active, #c8102e) !important;
}

/* Menu hover: dark-grey fill (not the theme's light muted default), text colour
   left unchanged from its resting value. The active page keeps its red. */
#header .navigation a:hover,
#header .dropmenu a:hover {
  background: var(--pss-nav-hover-bg, #4a4a4a) !important;
}
#header .navigation a:hover:not(.active),
#header .dropmenu a:hover:not(.active) {
  color: var(--pss-topbar-text, #111111) !important;
}

/* ── Language switch — a menu-item-style button that previews the other language on hover ── */
#header .navbar-section.actions { align-items: center; }
#header .actions .pss-lang { display: inline-flex; align-items: center; align-self: center; margin-left: .25rem; }
#header .actions .pss-lang-switch {
  display: inline-grid; place-items: center;
  padding: 0.5rem 0.6rem;
  font: inherit; line-height: 1;
  color: var(--pss-topbar-text, #111111) !important;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
  transition: border-color .12s ease;
}
/* stack the two codes in one grid cell so the width never shifts when they swap */
#header .actions .pss-lang-now,
#header .actions .pss-lang-alt { grid-area: 1 / 1; }
#header .actions .pss-lang-alt { visibility: hidden; }
/* hover / keyboard focus: preview the OTHER language in place, transparent bg, light-grey outline */
#header .actions .pss-lang-switch:hover .pss-lang-now,
#header .actions .pss-lang-switch:focus-visible .pss-lang-now { visibility: hidden; }
#header .actions .pss-lang-switch:hover .pss-lang-alt,
#header .actions .pss-lang-switch:focus-visible .pss-lang-alt { visibility: visible; }
#header .actions .pss-lang-switch:hover,
#header .actions .pss-lang-switch:focus-visible {
  background: transparent !important;
  border-color: var(--pss-header-border, #d9deea);
  color: var(--pss-topbar-text, #111111) !important;
}
/* never leave a pressed / focused look after a mouse click — go blank, show current only */
#header .actions .pss-lang-switch:focus:not(:focus-visible) { border-color: transparent; outline: none; }
#header .actions .pss-lang-switch:focus { outline: none; }

/* Mobile overlay — both languages inline, no dropdown */
.overlay .mobile-lang { margin-bottom: 1rem; }
.overlay .pss-lang-mobile { display: flex; gap: 1.25rem; }
.overlay .pss-lang-mobile .pss-lang-item {
  font-family: var(--pico-font-family-sans-serif); font-weight: 500; font-size: 1.15rem;
  text-decoration: none; background: transparent !important; border: 0 !important;
}
.overlay .pss-lang-mobile .pss-lang-item:hover { color: var(--pss-topbar-active, #c8102e) !important; }
.overlay .pss-lang-mobile .pss-lang-item.is-current { font-weight: 700; color: var(--pss-topbar-active, #c8102e) !important; }

/* ── Footer ── */
#footer,
#footer.section {
  background-color: var(--pss-footer-bg, #1f2a44) !important;
  color: var(--pss-footer-text, #ffffff) !important;
  border-top: var(--pss-border-width, 1px) solid var(--pss-footer-border, #d9deea) !important;
}

#footer p,
#footer a {
  color: var(--pss-footer-text, #ffffff) !important;
}

#footer a { opacity: .85; }
#footer a:hover { opacity: 1; text-decoration: underline; }

/* ── Hero: fills the column, which already sets the layout width ── */
.hero {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  /* Image focus setting — inline background-position must win, so no
     !important here. */
  background-position: var(--pss-hero-focus, center center);
  /* .page-column is a flex column; an auto inline margin would stop the hero
     stretching, so it uses a full width instead. */
  width: 100%;
  max-width: 100% !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

.modular-hero.hero {
  display: flex !important;
  flex-direction: column !important;
  /* .section adds large vertical padding; on the hero the height presets
     already govern the size, and the padding only pushed the next section
     away from it. */
  padding-block: 0 !important;
  margin-block: 0 !important;
}

/* No gap between the hero and whatever follows it. */
.hero + *,
.page-column > main > :first-child,
.page-column > main > .module-anchor:first-child + section {
  margin-top: 0 !important;
}

.hero .hero-text-wrap {
  width: 100%;
  /* Hero text inset setting — headline, body and button all line up on it. */
  padding-inline: var(--pss-hero-gutter, 4rem);
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .hero .hero-text-wrap {
    padding-inline: 1.25rem;
  }
}

/* The hero carries text over the graphic, in the site's own body font. Size,
   weight, colour and opacity come from the page's Hero tab. */
.hero .hero-text-wrap {
  font-family: var(--pico-font-family-sans-serif);
}

.hero .hero-text-wrap p,
.hero .hero-text-wrap ul,
.hero .hero-text-wrap li,
.hero .hero-text-wrap h1,
.hero .hero-text-wrap h2 {
  font-family: inherit !important;
  font-size: var(--pss-hero-body-size, 22px) !important;
  font-weight: inherit !important;
  text-align: inherit;
  color: inherit;
}

/* The button keeps its own colour and weight - the opacity applies to the
   text, not to the whole block. */
.hero .hero-text-wrap .btn {
  color: var(--q2-accent-contrast, #fff);
  font-weight: 600;
  font-size: 1rem;
}

/* theme.css gives .hero p a 48ch max-width with margin-inline:auto, which
   centres the paragraph block regardless of text-align — so the heading sat
   flush left while the text and button were pushed toward the middle. The
   wrapper owns alignment here, so the children must not re-centre themselves.
   Centre alignment puts the auto margins back. */
.hero .hero-text-wrap > * {
  margin-inline: 0 !important;
}

.hero .hero-text-wrap[style*="text-align:center"] > *,
.hero .hero-text-wrap[style*="text-align: center"] > * {
  margin-inline: auto !important;
}

/* The 48ch cap is narrow for a headline-width hero; the text column width
   setting governs instead. */
.hero .hero-text-wrap p,
.hero .hero-text-wrap .lead {
  max-width: none !important;
}

.hero .container { text-align: inherit !important; }

/* ── Below the layout width there is no gutter left, so drop the side lines ── */
@media (max-width: 1240px) {
  .page-column {
    border-left-color: transparent;
    border-right-color: transparent;
  }
}

/* ── Single-page home: columns driven by the page's "Number of columns" ────
   The theme's own .modular-features grid is a fixed 2 / 3 / 4 ladder, so the
   home template sets --pss-cols and these rules follow it instead. Below the
   chosen count the grid still steps down so nothing is squeezed on a phone. */
.pss-home-columns .columns {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 640px) {
  .pss-home-columns .columns {
    grid-template-columns: repeat(min(var(--pss-cols, 4), 2), minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .pss-home-columns .columns {
    grid-template-columns: repeat(var(--pss-cols, 4), minmax(0, 1fr)) !important;
  }
}

.pss-card-link {
  font-weight: 600;
  color: var(--q2-link);
}

/* home: lift the cards up — tighter top (closer to hero) and bottom (closer to the next block) */
.pss-home-columns { padding-block: clamp(1rem, 3vw, 2rem); }
/* per-card frame — colour chosen in the editor, light grey by default */
.pss-home-columns .column { border: 1px solid var(--pss-card-frame, var(--pss-header-border, #d9deea)); }
/* next-event block sits close beneath the cards, and near the footer below it */
.pss-home-next { padding-block: clamp(.25rem, 1.5vw, .9rem) clamp(.75rem, 2.5vw, 1.5rem); }
body.pss-home #body-wrapper { padding-bottom: clamp(1rem, 3vw, 2rem); }

/* home: next event(s) below the cards */
.pss-home-next .container { text-align: center; }
.pss-home-next-head { display: flex; flex-direction: column; align-items: center; gap: .15rem; margin-bottom: 1.1rem; }
.pss-home-next-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--pss-topbar-active, #c8102e); }
.pss-home-next-date { font-size: 1.2rem; font-weight: 600; }
.pss-home-next-list { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-direction: column; gap: .55rem; }
.pss-home-next-list li, .pss-home-next-item { list-style: none; }
.pss-home-next-item::marker { content: ""; }
.pss-home-next-item a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; padding: .5rem .95rem; border: 1px solid var(--pss-header-border, #d9deea); border-radius: 8px; transition: border-color .12s ease, background .12s ease; }
.pss-home-next-item a:hover { border-color: #c2c8d2; background: rgba(128,128,128,.05); }
.pss-home-next-dot { width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto; background: #9aa0aa; }
.pss-home-next-item.cat-class .pss-home-next-dot { background: #73CFFE; }
.pss-home-next-item.cat-holiday .pss-home-next-dot { background: #EA1A27; }
.pss-home-next-item.cat-event .pss-home-next-dot { background: #4AC55B; }
.pss-home-next-title { font-weight: 600; }
.pss-home-next-time { opacity: .7; font-size: .92rem; }
/* cancelled event: crossed out + label (event_cancelled in pssevents) */
.pss-home-next-item.is-cancelled .pss-home-next-title,
.pss-home-next-item.is-cancelled .pss-home-next-time { text-decoration: line-through; }
.pss-home-next-item.is-cancelled .pss-home-next-dot { opacity: .45; }
.pss-home-next-cancelled { padding: .05rem .45rem; border: 1px solid #b3261e; border-radius: 4px; color: #b3261e; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pss-card-link::after { content: " \203A"; }

/* ── Footer ───────────────────────────────────────────────────────────────
   The .section class it used to carry adds clamp(2rem, 5vw, 3.5rem) of
   vertical padding, which is why the bar was so tall. Height now comes from
   the Footer height setting instead. */
body #footer {
  padding-block: var(--pss-footer-padding, 0.75rem) !important;
  /* theme.css sets #footer { font-size: 0.875rem } at the same specificity,
     so this needs to outrank it rather than rely on file order. */
  font-size: var(--pss-footer-font-size, 0.9rem) !important;
}

/* Set it on the descendants too — theme.css styles #footer p directly, and
   an explicit rule there would otherwise beat inheritance. */
body #footer .container,
body #footer p,
body #footer li,
body #footer a {
  font-size: inherit !important;
}

#footer .container > *:first-child { margin-top: 0; }
#footer .container > *:last-child  { margin-bottom: 0; }
#footer p { margin-block: .25rem; }

/* ── Hero carousel ────────────────────────────────────────────────────────
   Slides sit behind the text, filling the hero. The overlay and .hero-text-wrap
   are raised above them. A single image stays on .hero's own background-image
   and none of this applies. */
.hero.has-carousel { position: relative; overflow: hidden; }

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: var(--pss-hero-focus, center center);
  background-repeat: no-repeat;
}

/* Horizontal slide: the inactive ones wait off to the right. */
.hero-slides--slide .hero-slide {
  transform: translateX(100%);
  transition: transform .8s cubic-bezier(.4, 0, .2, 1);
}
.hero-slides--slide .hero-slide.is-active { transform: translateX(0); }

/* Cross-fade. */
.hero-slides--fade .hero-slide {
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-slides--fade .hero-slide.is-active { opacity: 1; }

.hero.has-carousel .image-overlay,
.hero.has-carousel .hero-text-wrap { position: relative; z-index: 2; }

/* Arrows */
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s ease;
}
.hero-nav:hover  { background: rgba(0, 0, 0, .6); }
.hero-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-nav--prev { left: .75rem; }
.hero-nav--next { right: .75rem; }

/* Dots */
.hero-dots {
  position: absolute;
  z-index: 3;
  bottom: .9rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .45rem;
}
.hero-dot {
  width: .6rem;
  height: .6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hero-dot:hover      { background: rgba(255, 255, 255, .8); }
.hero-dot.is-active  { background: #fff; transform: scale(1.25); }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The scroll-down chevron would sit under the dots. */
.hero.has-carousel #to-start { display: none; }

@media (max-width: 640px) {
  .hero-nav { width: 2.25rem; height: 2.25rem; }
}

/* Visitors who ask for reduced motion get no movement; the script also
   disables autoplay for them. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none !important; }
}

/* ── Inner page text width ────────────────────────────────────────────────
   theme.css caps #body-wrapper > .container > .content-item at 960px inside a
   rounded card, while the Home page sections fill the whole column — which is
   why Home looked wider than everything else. Both are settings now: width
   under "Lines and layout", and the card look with it. */
#body-wrapper > .container > .content-item {
  max-width: var(--pss-content-max, 100%) !important;
}

/* Card look off (default): no panel, no shadow, no inner padding — the column
   already supplies the background and the section supplies the spacing. */
body:not(.pss-card-look) #body-wrapper > .container > .content-item {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Header height, logo size and the scroll shrink ───────────────────────
   theme.css caps .navbar-brand img at 28px and shrinks the navbar 72px -> 60px
   on scroll, both at specificities that beat a plain rule. Everything here is
   driven by settings instead.

   The shrink ratio is a unitless number, so calc() scales whatever length was
   typed in the height field — the theme never has to parse "60px" itself. At
   ratio 1 (shrink off) the scrolled values equal the resting ones, so nothing
   moves. */
.navbar-brand img,
.navbar-brand svg {
  height: var(--pss-logo-height, 60px) !important;
  width: auto !important;
  max-width: none;
  background: none !important;
  transition: height .2s ease;
}

.navbar-brand {
  gap: var(--pss-logo-gap, 1rem) !important;
}

#header .navbar,
body.header-animated.scrolled #header .navbar {
  min-height: calc(var(--pss-logo-height, 60px) + (var(--pss-header-pad, 1.25rem) * 2)) !important;
  transition: min-height .2s ease !important;
}

/* Scrolled: bar and logo scale down together. */
body.scrolled .navbar-brand img,
body.scrolled .navbar-brand svg {
  height: calc(var(--pss-logo-height, 60px) * var(--pss-shrink, 1)) !important;
}

body.scrolled #header .navbar,
body.header-animated.scrolled #header .navbar {
  min-height: calc(
    (var(--pss-logo-height, 60px) * var(--pss-shrink, 1)) +
    (var(--pss-header-pad, 1.25rem) * var(--pss-shrink, 1) * 2)
  ) !important;
}

@media (max-width: 640px) {
  .navbar-brand img,
  .navbar-brand svg {
    height: var(--pss-logo-height-m, 40px) !important;
  }
  #header .navbar,
  body.header-animated.scrolled #header .navbar {
    min-height: calc(var(--pss-logo-height-m, 40px) + (var(--pss-header-pad, 1.25rem) * 2)) !important;
  }
  body.scrolled .navbar-brand img,
  body.scrolled .navbar-brand svg {
    height: calc(var(--pss-logo-height-m, 40px) * var(--pss-shrink, 1)) !important;
  }
  body.scrolled #header .navbar,
  body.header-animated.scrolled #header .navbar {
    min-height: calc(
      (var(--pss-logo-height-m, 40px) * var(--pss-shrink, 1)) +
      (var(--pss-header-pad, 1.25rem) * var(--pss-shrink, 1) * 2)
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-brand img,
  .navbar-brand svg,
  #header .navbar {
    transition: none !important;
  }
}

/* ── Logo glow ────────────────────────────────────────────────────────────
   drop-shadow follows the alpha channel, so the halo traces the artwork
   itself. box-shadow would outline the image rectangle instead. A flattened
   image with no transparency therefore glows as a box - that is the file,
   not this rule. Applies to an uploaded logo only, never the built-in mark. */
.navbar-brand img {
  filter: var(--pss-logo-glow, none);
}

/* ── Site name beside the logo ────────────────────────────────────────────
   The glow filter is scoped to .navbar-brand img, so the text is never
   affected by it. */
.brand-name {
  font-family: var(--pss-sitename-font, var(--pico-font-family-display));
  font-size: var(--pss-sitename-size, 1.25rem);
  font-weight: var(--pss-sitename-weight, 600);
  color: var(--pss-sitename-color, #111111);
  line-height: 1.2;
  white-space: pre-line;
  letter-spacing: 0;
}

@media (max-width: 640px) {
  .brand-name--desktop { display: none; }
}

/* ── No header animation while the page is still loading ──────────────────
   Set by the pre-paint script and removed shortly after window.load. Stops
   the bar animating its height when a late-loading iframe (a map, an embed)
   shifts the layout and flips the scrolled state after first paint. */
html.pss-booting #header .navbar,
html.pss-booting .navbar-brand img,
html.pss-booting .navbar-brand svg {
  transition: none !important;
}