/* =============================================================
   theme.css — Lytton Studio
   LyttonLMS brand palette — summer-happy, sensory-safe
   Core: Sage Mint · Dusty Pink · Teaberry · Chalky Lavender · Muted Lemon
   updated 13-Aug-2026 — alternating section backgrounds removed (see
   'Sections'); .case-row added for section + quote side by side;
   pill padding and pill-row spacing increased
   ============================================================= */

:root {
  /* ── Core pastels — backgrounds, cards, soft accents ── */
  --ls-sage:            #BFD8C1;  /* Sage Mint — calm, fresh */
  --ls-dustypink:       #E7C4C4;  /* Dusty Pink — warm, welcoming */
  --ls-teaberry:        #C9A3A3;  /* Teaberry — grounding */
  --ls-lavender:        #CFC7E8;  /* Chalky Lavender — soothing */
  --ls-lemon:           #F6EFB2;  /* Muted Lemon — optimistic */

  /* ── Extra-light tints ── */
  --ls-sage-tint:       #E9F2EA;
  --ls-dustypink-tint:  #F7ECEC;
  --ls-lavender-tint:   #EFECF8;
  --ls-lemon-tint:      #FCF9E4;

  /* ── Deep anchors — WCAG-safe text, buttons, links ── */
  --ls-sage-deep:       #3F6B4C;  /* headings, buttons — 6.1:1 on white */
  --ls-sage-deeper:     #345A40;  /* hover */
  --ls-sage-mid:        #4E7A5B;  /* small labels — 4.9:1 */
  --ls-teaberry-deep:   #8C5A5A;  /* warm accent — 5.4:1 */
  --ls-lavender-deep:   #6B5E93;  /* links — 5.7:1 */
  --ls-lavender-deeper: #554A78;  /* link hover */

  /* ── Accent pops (minimal use) ── */
  --ls-mint-pop:        #A7DCC4;  /* Mint Pop — CTA highlights (use charcoal text on it) */
  --ls-berry-pop:       #B98989;  /* Berry Pop — emphasis, decorative only (not text) */

  /* ── Neutrals (support palette) ── */
  --ls-ink:             #4A4A4A;  /* Soft Charcoal — text, never pure black */
  --ls-grey:            #D9D9D9;  /* Gentle Grey */
  --ls-navy-deep:       #232833;  /* charcoal-navy — footer grounding */
  --ls-bg:              #FAF9F7;  /* Powder White */
  --ls-bg-tint:         #F1F6EF;  /* sage-tinted cream — alternating sections */
  --ls-text:            var(--ls-ink);
  --ls-text-muted:      #4F4F4F;  /* keeps body copy AAA (7.8:1) */
  --ls-border:          #D9D9D9;

  /* ── Legacy aliases — keep old names working everywhere ── */
  --ls-teal:            var(--ls-sage-deep);
  --ls-forest:          var(--ls-sage-deeper);
  --ls-teal-mid:        var(--ls-sage-mid);
  --ls-bg-green:        var(--ls-sage-tint);
  --ls-blue:            var(--ls-lavender-deep);
  --ls-sky:             var(--ls-lemon);
  --ls-yellow:          var(--ls-lemon);
  --ls-navy:            var(--ls-navy-deep);

  --ls-link:            var(--ls-lavender-deep);
  --ls-link-hover:      var(--ls-lavender-deeper);
  --ls-focus:           var(--ls-lemon);
  --ls-shadow:          0 0.5rem 1.25rem rgba(63, 107, 76, 0.10);
  --ls-radius:          0.75rem;
  --ls-radius-pill:     999rem;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ls-text);
  background-color: var(--ls-bg);
  line-height: 1.6;
}

h1, h2, h3, h4, h5 {
  font-family: "Poppins", "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  color: var(--ls-text);
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

h1 { font-size: clamp(1.6rem, 3vw + 1rem,  2.6rem); }    /* Masthead — constrained by layout  */
h2 { font-size: clamp(1.8rem, 2.5vw + 1rem, 2.5rem); }  /* Page titles */
h3 { font-size: clamp(1.4rem,   1.4vw  + 0.8rem, 1.4rem); }  /* Section headers */
h4 { font-size: clamp(0.95rem, 0.6vw + 0.85rem, 1.1rem);}/* Card titles                       */
h5 { font-size: clamp(0.82rem, 0.3vw + 0.78rem, 0.9rem); color: var(--ls-text-muted); }/* Client/context subtitles          */

/* Option C — clear hierarchy on tablet+
   h1 (Lytton Studio) visibly larger than h2 (page titles) */
@media (min-width: 40rem) {
  h1 { font-size: clamp(2rem, 3vw + 1.2rem, 3.2rem); }
h2 { font-size: clamp(2rem, 2.5vw + 1.2rem, 3rem); }
}


p {
  margin-top: 0;
  margin-bottom: 0.9rem;
  color: var(--ls-text-muted);
  font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.05rem);
}

a { color: var(--ls-link); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover, a:focus { color: var(--ls-link-hover); }
:focus-visible {
  outline: 2px solid var(--ls-teal);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ls-focus);
}

/* ── Masthead ── */
/* site-header wrapper gets the bg/shadow so sticky block looks solid */
#site-header {
  background: var(--ls-bg);
  box-shadow: 0 2px 6px rgba(47, 50, 55, 0.10);
}

#masthead {
  border-bottom: 1px solid var(--ls-border);
}
#masthead .brand-name {
  color: var(--ls-teal);
  font-family: "Poppins", "Montserrat", system-ui, sans-serif;
  font-weight: 700;
}
#masthead .brand-tagline { color: var(--ls-text-muted); font-size: 0.72rem; letter-spacing: 0.01em; }
#nav-toggle span { background-color: var(--ls-teal); }
#nav-toggle:hover span, #nav-toggle:focus span { background-color: var(--ls-forest); }

/* ── Nav ── */
.global-nav {
  background: linear-gradient(90deg, var(--ls-sage), var(--ls-lavender) 55%, var(--ls-lemon));
}
.global-nav a { color: var(--ls-ink); font-weight: 500; font-size: clamp(0.88rem, 0.3vw + 0.85rem, 1rem); }
.global-nav a:hover, .global-nav a:focus { background-color: rgba(255,255,255,0.45); }
.global-nav .current-page { background-color: rgba(255,255,255,0.60); font-weight: 700; }

/* ── Hero ── */
.tagline {
    font-family: "Poppins", "Montserrat", system-ui, sans-serif;
  font-size: clamp(1.3rem, 1.8vw + 1rem, 1.8rem);
 font-size: clamp(2.2rem, 3vw + 1.6rem, 3.2rem);    /* Site name — Lytton Studio         */

  font-weight: 600;
  color: var(--ls-teal);
  margin-bottom: 0.4rem;
}
.subtagline { font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem); color: var(--ls-text-muted); }

/* ── Quote ── */
.quote {
  background: linear-gradient(135deg, rgba(191,216,193,0.35), rgba(207,199,232,0.30));
  border: 1px solid var(--ls-border);
  box-shadow: var(--ls-shadow);
  border-radius: var(--ls-radius);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.quote p { font-style: italic; color: var(--ls-text); margin-bottom: 0; }
.quote .author { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--ls-text-muted); }

/* ── Quote blocks — the APPROVED quote look (about.php, index.php) ──
   13-Aug-2026: aside.case-study-note now shares these rules so a
   case-study quote is identical to every other quote on the site.
   Add a class here rather than writing a second quote style. */
.quote-block,
aside.case-study-note {
  background: var(--ls-bg);
  border: 1px solid var(--ls-border);
  border-left: 3px solid var(--ls-teal);
  border-radius: var(--ls-radius);
  padding: 1.5rem 1.25rem 3.5rem;
  box-shadow: var(--ls-shadow);
  position: relative;
  z-index: 0;
  min-height: 8rem;
}

.quote-block::before,
aside.case-study-note::before {
  content: "\201C";
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7rem;
  line-height: 1;
  color: var(--ls-teal);
  opacity: 0.18;
  position: absolute;
  top: 0.25rem;
  left: 0.75rem;
  pointer-events: none;
}

.quote-block::after,
aside.case-study-note::after {
  content: "\201D";
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7rem;
  line-height: 1;
  color: var(--ls-teal);
  opacity: 0.18;
  position: absolute;
  bottom: 0.1rem;
  right: 0.75rem;
  pointer-events: none;
}

.quote-block p,
aside.case-study-note p {
  font-style: italic;
  color: var(--ls-text);
  margin-bottom: 0.5rem;
  font-size: clamp(0.9rem, 0.3vw + 0.85rem, 1rem);
  line-height: 1.6;
  padding-top: 1.5rem;
}

.quote-block .author,
.quote-block cite,
aside.case-study-note .author,
aside.case-study-note cite {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  font-style: normal;
  color: var(--ls-text-muted);
  letter-spacing: 0.02em;
}

/* Optional <h4> label inside a case-study quote — clears the giant mark */
aside.case-study-note h4 {
  padding-top: 1.5rem;
  margin-bottom: 0.25rem;
  color: var(--ls-teaberry-deep);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
aside.case-study-note h4 + p { padding-top: 0; }

/* ── .case-row — a section and a quote, side by side ──
   Added 13-Aug-2026, replacing a width:calc(30% - 2.5rem) rule that
   broke whenever the quote sat inside another grid: a percentage of a
   percentage collapsed it to ~9% of the row. The grid now owns the
   width, so there is no nested percentage to go wrong.

   The quote sits OUTSIDE the section box, on the page background,
   tops aligned with it. Two direct children, in this order:

     <div class="case-row">
       <section>
         ...heading and intro...
       </section>

       <aside class="case-study-note">
         <h4>Context</h4>        optional label
         <p>Quote text.</p>
         <cite>Name, role</cite> optional attribution
       </aside>
     </div>

   Below 60rem they stack, quote underneath.                          */
@media (min-width: 60rem) {
  .case-row {
    display: grid;
    grid-template-columns: 70% 1fr;
    column-gap: 2.5rem;
    align-items: start;
  }
}

/* ── Sections ── */
/* display:flow-root establishes a block formatting context so floated
   callouts (aside.highlight-outcome / .case-study-note) are contained
   within their section instead of overflowing and being covered by the
   next section's background. Fixed 13-Aug-2026. */
/* 13-Aug-2026 — sections are now UNIFORM. The old nth-of-type alternation
   meant a callout could never have one reliable contrast colour: on odd
   sections the sage tint matched the callout exactly and it disappeared.
   One section colour = one callout colour that always works.
   To restore the stripe, delete the rule below and re-add:
     section:nth-of-type(odd)  { background-color: var(--ls-bg-tint); }
     section:nth-of-type(even) { background-color: var(--ls-bg); border-color: var(--ls-border); }  */
section {
  padding: 1.25rem 1rem;
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-border);
  background-color: var(--ls-bg);
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 0;
  display: flow-root;
}

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: 0.55rem 1.25rem;
  border-radius: var(--ls-radius-pill);
  background-color: var(--ls-teal);
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(0.9rem, 0.3vw + 0.85rem, 1rem);
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn:hover, .btn:focus { background-color: var(--ls-forest); transform: translateY(-1px); }
.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--ls-teal);
  color: var(--ls-teal) !important;
}
.btn-secondary:hover, .btn-secondary:focus { background-color: var(--ls-teal); color: #ffffff !important; }

/* ── Pill tags ──
   13-Aug-2026 — pills were cramped. Two separate problems:
     1. 0.15rem vertical padding INSIDE each pill (text touching the border)
     2. no breathing space AROUND the row, so it jammed against the
        heading above and the body copy below

   The wrapper rule uses :has() so it applies to ANY div that directly
   contains pills. Most portfolio pages wrap them in a bare <div> with no
   class, so this fixes all of them without editing eight page files.
   Adding class="pill-group" gives exactly the same result.

   Per the spacing principle, the row keeps a little space above (it
   belongs with the heading it describes) and more below, before the
   body copy starts.                                                   */
.pill {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: var(--ls-radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  background: var(--ls-bg-tint);
  border: 1px solid var(--ls-border);
  color: var(--ls-teal);
  margin: 0;
}

div:has(> .pill),
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.75rem 0 1.25rem;
}

/* ── Service cards ── */
.service-card {
  background: var(--ls-bg);
  border: 1px solid var(--ls-border);
  border-left: 4px solid var(--ls-teal);
  border-radius: var(--ls-radius);
  padding: 1.25rem;
  box-shadow: var(--ls-shadow);
  margin-bottom: 1rem;
}
.service-card h3 { color: var(--ls-teal); margin-bottom: 0.5rem; }
.service-card .icon { font-size: 1.75rem; margin-bottom: 0.5rem; display: block; }

/* ── Exclusions box ── */
.exclusions {
  background: #fff8f0;
  border: 1px solid #f0d5b0;
  border-radius: var(--ls-radius);
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
}
.exclusions h4 { color: #7a4f00; margin-bottom: 0.5rem; }

/* ── Footer ── */
footer { background: var(--ls-navy-deep); color: #D8DBE2; }
footer p { color: #B9BEC9; font-size: 0.875rem; }
footer a { color: var(--ls-sky); }
footer a:hover, footer a:focus { color: #ffffff; }
footer ul { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
footer ul a { font-size: 0.875rem; }