/*
Theme Name: Sane Seven Studio
Theme URI: https://www.saneseven.com/
Author: Sane Seven Studio
Description: Custom WordPress theme with ACF blocks for film + stills portfolio.
Version: 1.0.0
License: GPLv2 or later
Text Domain: s7
*/

:root{
  --bg:#0b0b0c;
  --fg:#f3f3f4;
  --muted:#b9b9bd;
  --line:#2a2a2f;
  --card:#121216;
  --max:1120px;
}



/* Theme toggle (dark/light) */
html{ color-scheme: dark; }
html[data-theme="light"]{
  /* Apple‑grade light theme: off‑white, low contrast, calm */
  --bg:#f5f5f7;        /* primary canvas */
  --fg:#0a0a0c;        /* near‑black, not pure */
  --muted:#6b6b73;     /* secondary text */
  --line:#d2d2d7;      /* separators */
  --card:#ffffff;     /* surfaces */
}

html[data-theme="light"]{
  /* Apple‑grade light theme: off‑white, low contrast, calm */
  --bg:#f5f5f7;        /* primary canvas */
  --fg:#0a0a0c;        /* near‑black, not pure */
  --muted:#6b6b73;     /* secondary text */
  --line:#d2d2d7;      /* separators */
  --card:#ffffff;     /* surfaces */
}

.s7-theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:34px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--fg);
  font:inherit;
  font-size:13px;
  letter-spacing:.02em;
  cursor:pointer;
  user-select:none;
}

.s7-theme-toggle:focus{
  outline:2px solid var(--fg);
  outline-offset:2px;
}

@media (max-width: 720px){
  .s7-theme-toggle{
    height:32px;
    padding:0 10px;
    font-size:12px;
  }
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:"S7Text", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.5;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

a{color:inherit;text-decoration:none}

img,video,iframe{
  max-width:100%;
  display:block;
}

/* Layout wrapper */
.s7-wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px;
}

/* Header */
.s7-header{
  position:sticky;
  top:0;
  background:rgba(11,11,12,.85);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
  z-index:10;
}

.s7-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:12px;
}

.s7-brand{
  font-weight:600;
  letter-spacing:.5px;
}

.s7-menu{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}

.s7-menu a{
  font-weight:500;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:999px;
}

.s7-menu a:hover{
  border-color:var(--line);
  background:rgba(255,255,255,.03);
}

.s7-btn{
  font-weight:600;
  display:inline-block;
  padding:10px 14px;
  border:1px solid var(--fg);
  border-radius:999px;
}

.s7-btn:hover{
  background:rgba(255,255,255,.06);
}

.s7-main{min-height:60vh}

/* Sections */
.s7-section{
  padding:44px 0;
  border-bottom:1px solid var(--line);
}

.s7-section h2{
  margin:0;
  font-size:22px;
}

.s7-kicker{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
}

.s7-sub{
  margin:14px 0 0;
  max-width:70ch;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
}

.s7-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:16px;
}


.s7-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:16px;
}

.s7-grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:16px;
}

.s7-card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:18px;
  padding:18px;
}

.s7-card h3{
  margin:0 0 8px;
  font-size:16px;
}

.s7-card p{
  margin:0;
  color:var(--muted);
}

.s7-quote{
  border-left:3px solid var(--line);
  padding-left:14px;
  color:var(--muted);
  margin:14px 0 0;
}

/* HERO (two-column, like original placeholder) */
.s7-hero{
  padding:54px 0 24px;
  border-bottom:1px solid var(--line);
}

.s7-hero h1{
  font-weight:600;
  margin:.5rem 0 0;
  font-size:clamp(34px, 4.2vw, 52px);
  line-height:1.06;
  max-width:22ch;
}

.s7-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.s7-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:start;
  margin-top:28px;
}

/* Media card container */
.s7-media{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:18px;
  overflow:hidden;
}

.s7-media-meta{
  padding:14px 14px 16px;
  border-top:1px solid var(--line);
}

.s7-meta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}

/* ================================
   EMBED SIZING (Hero + Work pages)
   Requires wrapping media in: <div class="s7-embed"> ... </div>
   ================================ */
.s7-media .s7-embed{
  aspect-ratio:16 / 10;
  position:relative;
  width:100%;
  overflow:hidden;
}

.s7-media .s7-embed iframe,
.s7-media .s7-embed video,
.s7-media .s7-embed img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Click-to-play overlay */
.s7-clickplay{
  position:absolute;
  inset:0;
}

.s7-playbtn{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.55);
  color:var(--fg);
  cursor:pointer;
}

.s7-playbtn:hover{
  background:rgba(0,0,0,.7);
}


/* Work cards */
.s7-work{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:18px;
  overflow:hidden;
}

.s7-work-media{
  aspect-ratio:4/3;
  background:rgba(255,255,255,.02);
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--line);
}


.s7-work-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.s7-work-meta{padding:14px}

.s7-work-meta strong{
  display:block;
  margin-bottom:6px;
}

.s7-work-meta span{
  color:var(--muted);
  font-size:13px;
}

/* Logo strip */
.s7-logos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.s7-logo{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
}

/* Team */
.s7-team{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
}

.s7-person{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:18px;
  overflow:hidden;
}

.s7-face{
  aspect-ratio:4/3;
  background:rgba(255,255,255,.02);
  display:flex;
  align-items:center;
  justify-content:center;
}

.s7-bio{padding:14px}

.s7-bio strong{
  display:block;
  margin-bottom:6px;
}

.s7-fine{
  font-size:12px;
  color:#9a9aa0;
}

/* Footer */
.s7-footer{
  padding:24px 0;
  color:var(--muted);
}

.s7-foot-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
  align-items:start;
}

/* Responsive */
@media (max-width:900px){
  .s7-hero h1{font-size:34px}
  .s7-hero-grid{grid-template-columns:1fr}
  .s7-grid{grid-template-columns:1fr}
  .s7-team{grid-template-columns:1fr}
  .s7-foot-grid{grid-template-columns:1fr}
  .s7-two-col{grid-template-columns:1fr}
  .s7-grid-3{grid-template-columns:1fr}
}

/* Contact form */
.s7-form{margin-top:14px}
.s7-field{display:block;margin-top:12px}
.s7-label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.s7-input{width:100%;padding:12px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);color:var(--fg);font:inherit}
.s7-input:focus{outline:none;border-color:rgba(255,255,255,.35)}
.s7-form-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.s7-form-status{margin-top:10px;color:var(--muted);font-size:13px}
.s7-btn[disabled]{opacity:.6;cursor:not-allowed}
.s7-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Contact block layout */
.s7-contact-card .s7-contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
@media (max-width: 860px){
  .s7-contact-card .s7-contact-grid{grid-template-columns:1fr}
}
.s7-contact-card h3{margin-top:0}
.s7-contact-card .s7-contact-right{border-left:1px solid var(--line);padding-left:22px}
@media (max-width: 860px){
  .s7-contact-card .s7-contact-right{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px}
}
.s7-form-row .s7-field{flex:1;min-width:220px}

/* Contact block spacing + About panel tweaks */
.s7-contact-card{margin-top:22px}
.s7-contact-card .s7-contact-right{display:flex;flex-direction:column;gap:14px;justify-content:center;align-items:center;text-align:center}
.s7-contact-card .s7-contact-about-btn{margin:0 auto}
.s7-contact-card .s7-about-text{margin:0;color:var(--muted);font-size:16px;line-height:1.55;max-width:34ch}

/* Mobile: About section sits outside the enquiries card */
.s7-contact-about-mobile{display:none;margin-top: clamp(34px, 7vw, 64px);text-align:center}
.s7-contact-about-mobile .s7-contact-about-btn{margin:0 auto}
.s7-contact-about-mobile .s7-about-text{margin-top:12px;color:var(--muted);font-size:16px;line-height:1.55}
@media (max-width: 860px){
  .s7-contact-right--desktop{display:none}
  .s7-contact-about-mobile{display:block}
}




/* Mobile: hide the desktop About block to prevent duplicates */
@media (max-width: 860px){
  .s7-contact-about--desktop{display:none !important;}
}






/* Spacing polish: mobile About block breathing room */
@media (max-width: 860px){
  .s7-contact-about-mobile{
    margin-top: clamp(34px, 7vw, 64px) !important;
    padding-top: 6px;
  }
  .s7-contact-about-mobile .s7-about-text{
    margin-top: 14px;
  }
}


/* Anchor offset for sticky header */
[id]{scroll-margin-top:90px}


/* Footer legal row */
.s7-foot-legal{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.s7-foot-legal__right a{color:inherit;text-decoration:none}
.s7-foot-legal__right a:hover{text-decoration:underline}
.s7-sep{opacity:.6;margin:0 8px}
.s7-foot-menu{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.s7-foot-menu li{margin:0}
.s7-foot-menu a{color:inherit;text-decoration:none}
.s7-foot-menu a:hover{text-decoration:underline}
@media (max-width:900px){
  .s7-foot-menu{justify-content:flex-start}
}


/* Contact form status */
.s7-form-status.is-sending{opacity:.85}
.s7-form-status.is-success{color:var(--text)}
.s7-form-status.is-error{color:var(--text)}


/* Default page content */
.s7-content{max-width: 760px;}
.s7-content p{line-height: 1.6;}
.s7-content h2,.s7-content h3{margin-top: 24px;}
.s7-content ul,.s7-content ol{padding-left: 20px;}


/* Footer cookie notice */
.s7-foot-cookie{
  margin-top: 12px;
  opacity: 0.7;
  font-size: 12px;
  line-height: 1.4;
}
.s7-foot-cookie a{ text-decoration: underline; }


/* Contact form privacy note */
.s7-form-privacy{
  margin-top: 1rem !important;
  line-height: 1.4;
}

/* Footer cookie notice */
.s7-cookie-note{
  margin-top: 1.25rem;
  padding: 0 0 0.25rem 0;
  opacity: 0.75;
}
.s7-cookie-note a{ text-decoration: underline; }
/* Contact form privacy note spacing */
.form-privacy-note {
  margin-top: 1.25rem;
}

/* Footer cookie notice padding */
.footer-cookie-notice {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Subtle contact form privacy note */
.s7-form-privacy {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.4;
  opacity: 0.55;
}

/* Underline privacy link in contact form for consistency */
.s7-form-privacy a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Remove the dots (bullets) in the header menu */
.s7-menu li {
  list-style: none;
}

/* Optional: keep layout clean if li are being treated as list-items */
.s7-menu li {
  display: inline-block;
  margin: 0;
  padding: 0;
}


/* Footer: location and phone */
.s7-foot-loc {
  margin-left: 0.5rem;
  opacity: 0.65;
}
.s7-footer-phone {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Contact form: separator + urgent line */
.s7-form-sep {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 0.9rem 0 0.6rem;
}
.s7-form-urgent {
  margin: 0;
  opacity: 0.55;
}
.s7-form-urgent a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Image defaults */
img { max-width: 100%; height: auto; }


/* Force bold labels in work meta */
.s7-fine strong{font-weight:700;}



/* Force bold meta labels (some fonts ship only one weight) */
.s7-meta-label{
  font-weight:700 !important;
  font-synthesis: weight;
  text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor;
}


/* Global font lock */
html, body { font-family: "S7Text", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }


/* =========================================
   Core Embed Styling (YouTube / Vimeo)
   S7 theme consistency
========================================= */

.wp-block-embed,
.wp-block-embed-youtube,
.wp-block-embed-vimeo {
  max-width: 1600px;
  margin: clamp(32px, 6vw, 96px) auto;
}

.wp-block-embed.alignwide {
  max-width: 1800px;
}

.wp-block-embed.alignfull {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* =========================================
   Core Image Styling
   Consistent desktop width; centred; avoids portrait feeling oversized
========================================= */

.wp-block-image,
.wp-block-gallery,
.wp-block-media-text {
  margin-left: auto;
  margin-right: auto;
}

.wp-block-image {
  max-width: 840px;
  margin-top: clamp(28px, 5vw, 80px);
  margin-bottom: clamp(28px, 5vw, 80px);
}

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

/* Respect Gutenberg alignments */
.wp-block-image.alignwide { max-width: 1200px; }
.wp-block-image.alignfull {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* Ensure header/menu uses theme foreground colour */
.s7-header,
.s7-header a,
.s7-menu a{
  color: var(--fg);
}

/* Light theme header surface */
html[data-theme="light"] .s7-header{
  background: rgba(247,247,248,.88);
}

/* Light theme surface elevation */
html[data-theme="light"] .s7-card,
html[data-theme="light"] .wp-block-group,
html[data-theme="light"] .wp-block-image{
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}


/* =========================================
   Mobile legibility uplift (small, non-invasive)
========================================= */
@media (max-width: 720px){
  .s7-fine{
    font-size:13px;
    line-height:1.35;
  }

  .s7-menu a{
    font-size:15px;
    padding:10px 12px;
  }

  .s7-footer{
    font-size:15px;
  }

  .s7-theme-toggle{
    font-size:13px;
  }
}


/* =========================================
   Image captions: discreet, editorial
========================================= */
.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-block-embed figcaption{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  opacity: .78;
  max-width: 70ch;
}

@media (max-width: 720px){
  .wp-block-image figcaption,
  .wp-block-gallery figcaption,
  .wp-block-embed figcaption{
    font-size: 12.5px;
    opacity: .82;
  }
}


/* =========================================
   Authorial uplift — light theme only
   Moves from 'platform' to 'studio'
========================================= */

html[data-theme="light"] h2,
html[data-theme="light"] .s7-section-title{
  letter-spacing:-0.02em;
}

html[data-theme="light"] .s7-card,
html[data-theme="light"] .wp-block-group{
  border-radius:16px;
}

html[data-theme="light"] .s7-card h3{
  font-size:clamp(18px,2.4vw,22px);
  letter-spacing:-0.015em;
}

/* Selected Work: introduce tension */
html[data-theme="light"] .s7-work-grid{
  gap:clamp(24px,4vw,56px);
}

html[data-theme="light"] .s7-work-card:nth-child(odd){
  transform:translateY(12px);
}

/* Reduce 'UI feel' */
html[data-theme="light"] .s7-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8f8fa 100%);
}

/* Typography contrast */
html[data-theme="light"] .s7-sub,
html[data-theme="light"] figcaption{
  letter-spacing:0.01em;
}


/* =========================================
   Apple-style light theme polish
========================================= */

/* Soft transitions */
html[data-theme="light"] *{
  transition:
    background-color .35s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .35s ease;
}

/* Subtle section shading */
html[data-theme="light"] section{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.6) 0%,
    rgba(245,245,247,0.6) 100%
  );
}

/* Card depth refinement */
html[data-theme="light"] .s7-card,
html[data-theme="light"] .wp-block-group{
  box-shadow:
    0 1px 1px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.04);
}

/* Contact form fixes (light theme) */
html[data-theme="light"] .s7-contact,
html[data-theme="light"] .s7-contact *{
  color: var(--fg);
}

html[data-theme="light"] .s7-contact{
  background: var(--card);
}

html[data-theme="light"] .s7-contact input,
html[data-theme="light"] .s7-contact textarea{
  background: #fff;
  color: var(--fg);
  border-color: var(--line);
}

/* Mobile contact contrast fix */
@media (max-width: 720px){
  html[data-theme="light"] .s7-contact{
    background: #fff;
  }
}


/* =========================================
   Light theme premium surface refinement
   (authorial, Apple-style, light only)
========================================= */

/* 1. Remove UI borders where depth already exists */
html[data-theme="light"] .s7-card,
html[data-theme="light"] .wp-block-group,
html[data-theme="light"] .s7-work-card{
  border: none;
}

/* 2. Flat canvas, floating cards (no section gradients) */
html[data-theme="light"] section{
  background: transparent;
}

/* 3. Fewer but stronger depth cues */
html[data-theme="light"] .s7-card,
html[data-theme="light"] .wp-block-group,
html[data-theme="light"] .s7-work-card{
  background: #ffffff;
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 20px 40px rgba(0,0,0,.06);
}

/* 4. Editorial vertical rhythm (mobile first) */
@media (max-width: 720px){
  html[data-theme="light"] section{
    padding-top: clamp(48px,8vw,72px);
    padding-bottom: clamp(48px,8vw,72px);
  }

  html[data-theme="light"] .s7-work-grid{
    gap: 48px;
  }

  html[data-theme="light"] .s7-work-card:nth-child(odd){
    transform: translateY(16px);
  }
}

/* 5. Contact as destination, not component */
html[data-theme="light"] .s7-contact{
  background: #ffffff;
  border: none;
  box-shadow: none;
  padding-top: clamp(72px,10vw,120px);
  padding-bottom: clamp(72px,10vw,120px);
}

html[data-theme="light"] .s7-contact button{
  font-weight: 600;
  background: #0a0a0c;
  color: #ffffff;
}



/* =========================================
   FIX: Contact form submit button (desktop)
========================================= */

/* Explicitly target CF7 / generic buttons */
html[data-theme="light"] .s7-contact button,
html[data-theme="light"] .s7-contact input[type="submit"],
html[data-theme="light"] .s7-contact .wpcf7-submit{
  background-color:#0a0a0c !important;
  color:#ffffff !important;
  border-color:#0a0a0c !important;
}

/* Ensure hover/focus states don't invert */
html[data-theme="light"] .s7-contact button:hover,
html[data-theme="light"] .s7-contact input[type="submit"]:hover,
html[data-theme="light"] .s7-contact .wpcf7-submit:hover{
  background-color:#000000 !important;
  color:#ffffff !important;
}


/* =========================================
   FIX: Contact submit button + form text (light theme)
   Targets actual theme markup (.s7-contact-card, .s7-form, .s7-btn)
========================================= */
html[data-theme="light"] .s7-contact-card,
html[data-theme="light"] .s7-contact-card *{
  color: var(--fg);
}

html[data-theme="light"] .s7-contact-card .s7-btn{
  background-color:#0a0a0c !important;
  color:#ffffff !important;
  border-color:#0a0a0c !important;
}

html[data-theme="light"] .s7-contact-card .s7-btn:hover{
  background-color:#000000 !important;
  color:#ffffff !important;
}

html[data-theme="light"] .s7-contact-card .s7-input{
  background:#ffffff;
  color: var(--fg);
  border-color: var(--line);
}

html[data-theme="light"] .s7-contact-card .s7-input::placeholder{
  color: var(--muted);
  opacity: .75;
}



/* Dark theme: make theme toggle outline more visible (match 'Enquire' default) */
html:not([data-theme="light"]) .s7-theme-toggle{
  border-color: rgba(243,243,244,.38);
}
html:not([data-theme="light"]) .s7-theme-toggle:hover{
  border-color: rgba(243,243,244,.55);
}


/* =========================================
   Theme switch (vertical, iconless, studio)
========================================= */
.s7-theme-switch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:44px;
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
}

.s7-theme-switch__track{
  position:relative;
  width:14px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  background: transparent;
}

.s7-theme-switch__thumb{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--fg);
  top:3px;
  transition: top .25s ease, background-color .25s ease;
}

/* Light state: thumb down */
html[data-theme="light"] .s7-theme-switch__thumb{
  top:21px;
}

/* Improve visibility in dark theme */
html:not([data-theme="light"]) .s7-theme-switch__track{
  border-color: rgba(243,243,244,.38);
}
html:not([data-theme="light"]) .s7-theme-switch:hover .s7-theme-switch__track{
  border-color: rgba(243,243,244,.55);
}

/* Header placement: stick to far right without taking space */
@media (min-width: 721px){
  .s7-theme-switch{
    margin-left: 12px;
  }
}


/* Mobile header: single-line navigation (no wrapping) */
@media (max-width: 720px){
  .s7-nav{
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 0;
  }
  .s7-menu{
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
  }
  .s7-menu a{
    white-space: nowrap;
    padding: 8px 8px;
  }
  .s7-theme-switch{
    margin-left: 6px;
  }
}


/* Final fix: remove caption underline / divider */
.wp-block-image figcaption,
.wp-block-gallery figcaption,
figure figcaption{
  border: none !important;
}

.wp-block-image,
.wp-block-gallery,
figure{
  border-bottom: none !important;
}


/* FINAL FINAL: remove any divider under images with captions */
.wp-block-image.has-caption,
.wp-block-image.has-caption figure,
.wp-block-image.has-caption figcaption{
  border: none !important;
  box-shadow: none !important;
}

.wp-block-image.has-caption::after,
.wp-block-image.has-caption::before,
.wp-block-image figcaption::after,
.wp-block-image figcaption::before{
  content: none !important;
  display: none !important;
}

/* remove stray hr after images */
.wp-block-image + hr,
figure + hr{
  display: none !important;
}


/* ABSOLUTE OVERRIDE: Gutenberg caption divider line */
.wp-element-caption,
figcaption.wp-element-caption,
.wp-block-image .wp-element-caption,
.wp-block-gallery .wp-element-caption,
figure.wp-block-image figcaption,
figure.wp-block-image figcaption.wp-element-caption{
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* In case divider is drawn via inset shadow on figure when caption exists */
.wp-block-image.has-caption figure,
figure.wp-block-image{
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* Some WP styles use ::after on the caption element */
.wp-element-caption::after,
.wp-element-caption::before{
  content: none !important;
  display: none !important;
}