/* ==========================================================================
   Ask Kate Accordion v0.3.1 — Integrity-Checked Build
   From the School Gates — November 2025
   Author: SJ | Last verified: 2025-11-06 @ 22:00 UTC
   Notes: UTF-8 encoded; all curly quotes/dashes normalized;
          verified variables (--aka-*) and gradients.
   ========================================================================== */

/* ==========================================================================
DESIGN TOKENS - BRAND PALETTE & SURFACES
========================================================================== */

:root {
  /* Brand colours */
  --aka-teal:       #01616B;
  --aka-teal-600:   #2A7E85;
  --aka-teal-800:   #014E55;
  --aka-ink:        #143340;   /* primary text on light backgrounds */
  --aka-beige:      #F6E7CC;

  /* Generic surfaces */
  --aka-bg:         #FDFAFA;   /* page / hero text backdrop */
  --aka-card-bg:        #FCF7EF;
  --aka-card-bg-active: #FFFFFF;

  /* Shadows */
  --aka-shadow:        0 3px 8px rgba(0,0,0,.06);
  --aka-shadow-strong: 0 6px 18px rgba(0,0,0,.14);
}

/* ==========================================================================
HERO - FULL-BLEED INTRO PANEL
========================================================================== */

.aka-hero{
position:relative;
width:100%;
min-height:clamp(320px,55vh,520px);
overflow:hidden;
display:grid;
place-items:center;
isolation:isolate;
}
.aka-hero__image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.aka-hero__content{
position:relative;
z-index:2;
width:min(92vw,980px);
margin-inline:auto;
display:flex;
flex-direction:column;
gap:.75rem;
align-items:flex-end;
text-align:right;
padding:clamp(1.25rem,3vw,2rem);
}
.aka-hero__eyebrow{
font-family:'Playfair Display',serif;
font-size:clamp(.95rem,.9vw,1.05rem);
color:rgba(253,250,250,.85);
letter-spacing:.02em;
}
.aka-hero__title{
font-family:'Playfair Display',serif;
font-weight:500;
font-size:clamp(1.8rem,4.5vw,3.6rem);
line-height:1.15;
color:#FDFAFA;
}
.aka-hero__sub{
font-family:'Lusitana',serif;
font-size:clamp(1rem,1.2vw,1.25rem);
color:rgba(253,250,250,.88);
max-width:34ch;
}
.aka-hero__actions{
display:flex;
gap:.6rem;
margin-top:.8rem;
}

/* Gradient overlays */
.aka-hero--dark-right::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:1;
background:linear-gradient(to left,
rgba(20,51,64,.82) 0%,
rgba(20,51,64,.58) 35%,
rgba(20,51,64,.22) 60%,
rgba(20,51,64,0)   100%);
}
.aka-hero--dark-left::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:1;
background:linear-gradient(to right,
rgba(20,51,64,.90) 0%,
rgba(20,51,64,.78) 50%,
rgba(20,51,64,.32) 72%,
rgba(20,51,64,0)   100%);
}
.aka-hero--dark-left .aka-hero__content{
align-items:flex-start;
text-align:left;
max-width:560px;
margin-left:clamp(16px,6vw,96px);
}

/* Full-bleed on Ask Kate page */
.aka-hero--full{
width:100vw !important;
max-width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
position:relative;
}

/* Mobile overlay */
@media (max-width:768px){
.aka-hero__content{
align-items:center;
text-align:center;
}
.aka-hero::after{
background:linear-gradient(
to bottom,
rgba(20,51,64,.55),
rgba(20,51,64,.55)
) !important;
}
}

/* Remove global WP padding on Ask Kate page */
body.page-id-10780 .wp-site-blocks,
body.page-id-10780 .has-global-padding,
body.page-id-10780 .entry-content > .wp-block-group.is-layout-constrained{
padding-left:0 !important;
padding-right:0 !important;
}
body.page-id-10780 .aka-hero--full{
width:100vw !important;
max-width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
border-radius:0 !important;
}

/* Hero / CTA buttons */
.aka-button{
font-family:'Open Sans',sans-serif;
font-weight:600;
border-radius:9999px;
padding:0.6rem 1.4rem;
text-decoration:none;
transition:background-color .2s,box-shadow .2s;
}
.btn-beige.aka-button:hover{
background:#F6E7CC;
box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* Scroll offset for internal links to land below sticky header */
#ask-kate,
#submit-question{
scroll-margin-top:120px;
}

/* ==========================================================================
ACCORDION - TOOLBAR, CARDS & INTERACTIONS
========================================================================== */

/* === 1) WRAPPER & TOOLBAR =============================================== */

.ask-kate-accordion .aka-title{
font-family:'Playfair Display',serif;
color:var(--aka-teal);
font-weight:500;
font-size:clamp(2rem,5vw,3rem);
text-align:center;
margin:.3em 0 .5em;
line-height:1.2;
}

/* Toolbar layout */
.ask-kate-accordion .aka-toolbar{
display:flex;
flex-wrap:wrap;
gap:.6rem;
justify-content:center;
max-width:880px;
margin:0 auto 1rem;
}
.ask-kate-accordion .aka-toolbar__controls{
display:flex;
flex-wrap:wrap;
gap:.5rem;
justify-content:center;
max-width:880px;
margin:0 auto .6rem;
}
.ask-kate-accordion .aka-toolbar input[type="search"],
.ask-kate-accordion .aka-toolbar select,
.ask-kate-accordion .aka-toolbar .aka-reset{
border:1px solid #D1BFA3;
border-radius:12px;
padding:.55rem .75rem;
font-family:'Lusitana',serif;
font-size:.95rem;
background:#fff;
}
.ask-kate-accordion .aka-toolbar .aka-reset:hover{
background:#FCF7EF;
}

/* Count badge */
.ask-kate-accordion .aka-count-badge{
display:inline-flex;
align-items:center;
justify-content:center;
height:2rem;
margin-left:.65rem;
padding:.25rem .6rem;
border-radius:999px;
background:#F6E7CC;
color:#143340;
box-shadow:0 1px 2px rgba(0,0,0,.06);
transition:opacity .18s ease, transform .18s ease;
}
.ask-kate-accordion .aka-count-badge.is-updating{
opacity:0;
transform:translateY(-3px);
}

/* Active filter chips */
.ask-kate-accordion .aka-active-filters{
display:none;
max-width:880px;
margin:.25rem auto 0;
}
.ask-kate-accordion .aka-chip{
display:inline-flex;
align-items:center;
gap:.35rem;
cursor:pointer;
border:1px solid #DCCCAF;
border-radius:999px;
padding:.25rem .6rem;
margin:.25rem .25rem 0 0;
background:#fff;
color:#143340;
}
.ask-kate-accordion .aka-chip:hover{
background:#FCF7EF;
}

/* Month pills row */
.ask-kate-accordion .aka-month-pills{
display:flex;
flex-wrap:wrap;
gap:.5rem;
justify-content:center;
max-width:880px;
margin:.25rem auto .6rem;
}
.ask-kate-accordion .aka-pill{
border:2px solid #01616B;
background:#01616B;
color:#FDFAFA;
font-family:'Lusitana',serif;
font-weight:600;
padding:.45rem .85rem;
border-radius:9999px;
line-height:1;
box-shadow:0 3px 10px rgba(0,0,0,.08);
transition:background-color .2s,border-color .2s,color .2s,transform .1s,box-shadow .2s;
}
.ask-kate-accordion .aka-pill:hover,
.ask-kate-accordion .aka-pill:focus-visible{
background:#2A7E85;
border-color:#2A7E85;
outline:none;
transform:translateY(-1px);
box-shadow:0 5px 14px rgba(1,97,107,.25);
}
.ask-kate-accordion .aka-pill.is-active{
background:#F6E7CC;
border-color:#E2CFA9;
color:#143340;
box-shadow:0 4px 12px rgba(0,0,0,.10);
}

/* === 2) CONTAINER & FADE STATES ======================================== */

.ask-kate-accordion .aka-container{
max-width:880px;
margin:0 auto;
}

/* Match JS's .aka-list-updating on wrapper */
.ask-kate-accordion{
transition:opacity .18s ease;
}
.ask-kate-accordion.aka-list-updating{
opacity:.7;
}

/* Per-card fade */
.ask-kate-accordion details{
transition:opacity .18s ease;
}
.ask-kate-accordion details.aka-fade-out{
opacity:0;
}

/* === 3) CARD APPEARANCE ================================================= */

.ask-kate-accordion details{
background:var(--aka-card-bg);
border-left:3px solid transparent;
border-radius:16px;
padding:1.1rem 1.25rem;
box-shadow:var(--aka-shadow);
color:var(--aka-ink);
margin:1rem 0;
transition:background-color .18s ease,box-shadow .18s ease,transform .10s ease;
will-change:transform;
min-height:92px;
}
.ask-kate-accordion details:hover{
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(0,0,0,.08);
background:var(--aka-card-bg-active);
border-left-color:var(--aka-teal-600);
}
.ask-kate-accordion details[open]{
transform:none;
background:#fff;
box-shadow:0 6px 18px rgba(0,0,0,.12);
border-left-color:var(--aka-teal);
}

/* Active month highlight */
.ask-kate-accordion details[data-active="true"]{
border-left-color:#DA9F00;
box-shadow:0 6px 20px rgba(218,159,0,.18);
}
.ask-kate-accordion details[data-active="true"]:hover,
.ask-kate-accordion details[data-active="true"][open]{
border-left-color:#DA9F00;
}

/* === 4) SUMMARY (QUESTION LINE) ========================================= */

.ask-kate-accordion summary{
list-style:none;
cursor:pointer;
margin:0 0 .4rem 0;
font-family:'Playfair Display',serif;
font-weight:400;
line-height:1.45;
color:var(--aka-teal);
}
.ask-kate-accordion summary::-webkit-details-marker{
display:none;
}
.ask-kate-accordion summary::before{
content:"▸";
color:var(--aka-teal);
margin-right:.55rem;
transition:transform .2s ease;
position:relative;
top:-1px;
display:inline-block;
}
.ask-kate-accordion details[open] > summary::before{
transform:rotate(90deg);
}

.ask-kate-accordion summary:focus-visible{
outline:2px solid var(--aka-teal);
outline-offset:2px;
border-radius:8px;
}

/* === 5) PREVIEW TEASER (HOVER / FOCUS) ==================================
Show first teaser paragraph when card is hovered or keyboard-focused,
without fully expanding the answer.
======================================================================= */

/* 5.1 Default: teaser paragraphs hidden when the card is closed */
.ask-kate-accordion.aka-preview-hover details:not([open]) > .aka-teaser-src{
display:none !important;
}

/* 5.2 Teaser on HOVER (closed cards only) /
.ask-kate-accordion.aka-preview-hover details.is-hover:not([open]) > .aka-teaser-src{
display:-webkit-box !important; / Safari/iOS */
/* 5.2 Teaser on HOVER (closed cards only) */
.ask-kate-accordion.aka--preview-hover details.is-hover:not([open]) > .aka-teaser-src {
  display: -webkit-box !important; /* Safari/iOS */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;

  margin: .15rem 0 .35rem 1.15rem;
  line-height: 1.55;
  font-family: 'Lusitana', serif;
  color: #143340;
}

/* 5.3 Teaser on KEYBOARD FOCUS (closed cards only) */
.ask-kate-accordion.aka-preview-hover details:not([open]):focus-within > .aka-teaser-src{
display:-webkit-box !important;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
line-clamp:2;
overflow:hidden;
margin:.15rem 0 .35rem 1.15rem;
line-height:1.55;
}

/* 5.4 Inline teaser injected into  by JS */
.aka-teaser-inline{
display:inline-block;
max-width:100%;
white-space:normal;
overflow:hidden;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
line-clamp:2;
margin:.15rem 0 .35rem 1.15rem;
line-height:1.55;
font-family:'Lusitana',serif;
color:#143340;
}
.aka-teaser-inline.is-visible{
opacity:1;
visibility:visible;
pointer-events:auto;
}

/* Hide teaser paragraph when a post is opened */
details[open] > .aka-teaser-src{
display:none;
}

/* Optional: smooth teaser fade */
details:not([open]) > .aka-teaser-src{
transition:opacity .2s ease-in-out;
}
details[open] > .aka-teaser-src{
opacity:0;
}

/* === 6) META BADGES (NUMBER, LABELS) ==================================== */

.askk-meta{
display:flex;
flex-wrap:wrap;
gap:.5rem .6rem;
align-items:center;
margin:0 0 .45rem 1.15rem;
font-family:'Lusitana',serif;
font-size:.92rem;
}
.askk-badge{
display:inline-flex;
align-items:center;
gap:.35rem;
border-radius:999px;
padding:.28rem .65rem;
line-height:1;
border:1px solid #E2CFA9;
background:#F6E7CC;
color:#143340;
box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.askk-badge-num{
background:#01616B;
color:#fff;
border-color:#01616B;
font-weight:600;
}

/* === 7) INLINE BUTTONS (DISCUSS LINK) ================================== */

.ask-kate-accordion .ask-discuss{
text-align:right;
margin-top:.8rem;
}
.ask-kate-accordion .ask-discuss a{
display:inline-block;
background:#01616B;
color:#fff !important;
padding:.55rem 1rem;
border-radius:999px;
font-weight:600;
text-decoration:none;
line-height:1;
transition:transform .12s,box-shadow .2s,background-color .2s;
box-shadow:0 2px 7px rgba(1,97,107,.25);
}
.ask-kate-accordion .ask-discuss a:hover{
background:#2A7E85;
box-shadow:0 5px 14px rgba(1,97,107,.3);
transform:translateY(-1px);
}

/* === 8) MONTH HEADINGS (JS-INJECTED) =================================== */

.ask-kate-accordion .aka-month-heading{
margin:1.2rem 0 .4rem;
padding:.25rem 0 .2rem;
font-family:'Playfair Display',serif;
font-weight:500;
font-size:clamp(1.25rem,2.4vw,1.6rem);
color:var(--aka-teal);
border-bottom:1px solid rgba(1,97,107,.15);
transition:background .4s ease,box-shadow .4s ease;
scroll-margin-top:130px; /* adjust if header height changes */
}

/* Hidden when no visible items follow this month heading */
.ask-kate-accordion .aka-month-heading.is-hidden{
display:none !important;
}

/* Brief glow when auto-scrolled into view */
.ask-kate-accordion .aka-month-heading-glow{
background:#FFF8E6;
box-shadow:inset 0 -2px 0 rgba(1,97,107,.45);
}

/* === 9) REDUCED MOTION ================================================ */

@media (prefers-reduced-motion:reduce){
.ask-kate-accordion details,
.ask-kate-accordion,
.ask-kate-accordion .aka-count-badge{
transition:none !important;
transform:none !important;
}
}

/* === 10) KEYWORD HIGHLIGHT (SEARCH MATCHES) =========================== */

.ask-kate-accordion mark.aka-hit{
background:#F6E7CC;
color:#143340;
padding:0 .15em;
border-radius:.2em;
}

/* === 11) Show "Discuss this answer" only on live (active) posts =========  */
.ask-kate-accordion details .ask-discuss {
  display: none;
}

.ask-kate-accordion details[data-active="true"] .ask-discuss {
  display: block;
}

/* === 12) SMALL SCREENS ================================================ */

@media (max-width:600px){
.ask-kate-accordion details{
border-radius:12px;
padding:1rem;
min-height:82px;
}
.ask-kate-accordion .aka-toolbar{
padding:0 .4rem;
}
.ask-kate-accordion .aka-pill{
padding:.4rem .75rem;
}
}

/* ==========================================================================
HERO TITLING SAFETY (ENSURE LEGIBILITY ABOVE IMAGES)
========================================================================== */

.aka-hero .aka-hero__title{
color:#FDFAFA !important;
opacity:1 !important;
mix-blend-mode:normal !important;
filter:none !important;
position:relative;
z-index:2;
}

/* Slightly deepen left overlay on wide screens (so sub + button pop) */
@media (min-width:900px){
.aka-hero--dark-left::after{
background:linear-gradient(
to right,
rgba(20,51,64,.92) 0%,
rgba(20,51,64,.80) 52%,
rgba(20,51,64,.30) 74%,
rgba(20,51,64,0)   100%
) !important;
}
}

/* Subtle title hover cue (keeps layout stable) */
.ask-kate-accordion details:hover > summary{
color:var(--aka-teal-600);
}

/* ==========================================================================
COMMENTS & ASK KATE FORM SECTIONS
========================================================================== */

.ask-kate-section{
max-width:880px;
margin:2.5rem auto 0;
padding-top:1.5rem;
border-top:1px solid rgba(0,0,0,.06);
font-family:'Lusitana',serif;
}
.ask-kate-section h2{
font-family:'Playfair Display',serif;
color:var(--aka-teal);
font-size:clamp(1.4rem,2.2vw,1.7rem);
margin-bottom:.6rem;
}
a.ask-return{
  display:inline-flex;
  align-items:center;
  gap:.4rem;

  margin-bottom:1rem;
  font-size:.95rem;
  font-family:'Open Sans',sans-serif;
  font-weight:600;

  background:#01616B;            /* aka teal */
  color:#FFFFFF !important;      /* max contrast */
  padding:.55rem 1.2rem;
  border-radius:9999px;
  border:1px solid #014E55;

  text-decoration:none;
  box-shadow:0 2px 7px rgba(1,97,107,.25);
  transition:
    background-color .2s ease,
    box-shadow .2s ease,
    transform .1s ease;
}

/* Little “back” icon, CSS-only */
a.ask-return::before{
  content:"↩";
  display:inline-block;
  transform:translateY(1px);
}

/* Hover + keyboard focus */
a.ask-return:hover,
a.ask-return:focus-visible{
  background:#2A7E85;
  box-shadow:0 5px 14px rgba(1,97,107,.30);
  transform:translateY(-1px);
  outline:none;
}

/* Extra visible focus ring for keyboard users */
a.ask-return:focus-visible{
  outline:2px solid #143340;
  outline-offset:2px;
}

/* Ensure scrolling to #ask-kate-form lands below sticky header */
#ask-kate-form{
scroll-margin-top:120px;
}

/* ==========================================================================
GRAVITY FORMS - ASK KATE SUBMIT BUTTON (PAGE-SPECIFIC)
========================================================================== */

body.page-id-10780 .gform_wrapper form#gform_1 .gform_footer input[type="submit"],
body.page-id-10780 .gform_wrapper form#gform_1 .gform_page_footer input[type="submit"],
body.page-id-10780 .gform_wrapper form#gform_1 .gform_page_footer input[type="button"]{
background:#01616B;
color:#FFFFFF;
border:none;
border-radius:9999px;
padding:0.6rem 1.4rem;
font-family:'Open Sans',sans-serif;
font-weight:600;
cursor:pointer;
text-decoration:none;
box-shadow:0 2px 7px rgba(1,97,107,.25);
transition:background-color .2s ease,box-shadow .2s ease,transform .1s ease;
}
body.page-id-10780 .gform_wrapper form#gform_1 .gform_footer input[type="submit"]:hover,
body.page-id-10780 .gform_wrapper form#gform_1 .gform_page_footer input[type="button"]:hover{
background:#2A7E85;
box-shadow:0 5px 14px rgba(1,97,107,.30);
transform:translateY(-1px);
}