/* =====================================================================
   The Illuminated Thread — styles.css (tidy build)
   ---------------------------------------------------------------------
   Structure
   1) Tokens (colours, spacing, radii, widths)
   2) Base (reset, type, blocks)
   3) Layout: header + nav, footer
   4) Components: buttons, hero, cards, price table, FAQ
   5) Page rules: coaching pages (headings, colours, hero)
   6) Utilities & responsive helpers
   ===================================================================== */


/* == 1) TOKENS ======================================================= */
:root{
  /* Brand + palette */
  --sand:        #F0D7B1;    /* page bg    */
  --header-bg:   #FFC56E;
  --ink:         #000;
  --ink-soft:    #1a1a1a;

  --brandBlue:   #00D1FF;    /* title outline hue */
  --brandYellow: #FFC700;
  --brandRed:    #FF0000;
  --stroke:      #d9a34f;    /* card/menu border */

  /* Accent headings inside cards */
  --ndPurple:    #6E3CBC;    /* ND card titles */
  --famOrange:   #FF7A00;    /* Family/Disability card titles */

  /* Layout */
  --container:      1100px;
  --containHero:    50%;
  --containSummary: 60%;
  --gutter:      16px;
  --radius:      16px;
  --radius-sm:   12px;
  --shadow:      0 8px 20px rgba(0,0,0,.07);

  /* Type + rhythm */
  --h2:          3rem;       /* global big H2 (home style) */
  --lead:        1.15rem;
  --lh:          1.6;
}


/* == 2) BASE ========================================================= */
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--sand); color: var(--ink);
}

.section{
  max-width: var(--container);
  margin: 0 auto 24px auto;
  padding: 20px;
}
.section h2{
  font-size: var(--h2);
  margin: 0 0 14px 0;
  text-align: center;
  /* site look (outlined headings) */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}
p, ul{ margin:0 0 14px 0; line-height: var(--lh); }
ul{ padding-left: 1.2rem; }

header{
  background: var(--header-bg);
  text-align: center;
  position: relative;
  padding: 12px var(--gutter);
}
.summary{
  max-width: var(--containSummary);
  margin: 0 auto 18px; 
  text-align:left;
  padding-top: 1.5rem; 
  padding-bottom: 1.5rem;
}
.about-thread{
  max-width: var(--containSummary);
  margin: 0 auto 24px auto;
  padding: 20px;
}
/* == 3) LAYOUT ======================================================= */
/* Header bar + brand */
.header-bar{
  max-width: var(--container);
  margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  text-align:left;
}
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.logo{ display:block; height:auto; object-fit:contain; }

/* quick dials: header and footer logos */
.logo--header{ width:130px; height:auto; }
.footer-logo { width:300px; height:auto; display:block; margin:.5rem auto 0; }
.icon-logo { width:40px; height:auto; }


/* Title (outlined, brand blue) */
.site-title{
  font-family:"Merriweather Sans", system-ui, sans-serif;
  font-size: 3rem;
  line-height: 1.0;
  margin:0;
  color: var(--brandBlue);
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

/* Hamburger + dropdown menu */
.nav-toggle{
  display:inline-flex; flex-direction:column; gap:5px;
  width:44px; height:36px; align-items:center; justify-content:center;
  background:transparent; border:2px solid #0003; border-radius:10px; cursor:pointer;
}
.nav-toggle .bar{ width:24px; height:2px; background:#1a1a1a; display:block; }

.site-nav{
  position:absolute; z-index:20;
  top: calc(100% + .5rem);
  right: calc((100vw - var(--container)) / 2 + var(--gutter));
  width: min(92vw, 340px);
  display: none;
  background: var(--sand);
  border:2px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding:.5rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}
header.is-open .site-nav{ display:block; }

.menu{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.site-nav .menu a,
.site-nav .menu .submenu-toggle{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:#fff3de; color:var(--ink);
  border:2px solid var(--stroke); border-radius: var(--radius-sm);
  padding:.7rem .9rem; text-decoration:none; font-weight:600;
}
.site-nav .menu a:hover,
.site-nav .menu .submenu-toggle:hover{ filter: brightness(.98); }

.has-submenu .submenu{ list-style:none; margin:.5rem 0 0; padding:0; display:none; gap:.4rem; }
.has-submenu.is-open .submenu{ display:grid; }
.menu > .has-submenu > .submenu-toggle{
  background:#f0fbff; border-color: var(--brandBlue);
  box-shadow: 0 0 0 2px rgba(0,209,255,.15) inset;
}

/* Footer grid */
footer{ background: var(--header-bg); text-align:center; padding:1rem; }
.footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  display:grid; gap: 1rem 1.5rem;
  grid-template-columns: 1.6fr 0.6fr 1.05fr 0.6fr 0.55fr; /* left | spacer | social | spacer | pages */
  text-align:left;
}
.footer-col.left   { grid-column:1; justify-self:start; text-align:center; }
.footer-col.center { grid-column:3; justify-self:center; }
.footer-col.right  { grid-column:5; justify-self:end; text-align:right; }
.footer-heading{ font-weight:700; margin-bottom:.4rem; }
.footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.footer-col a{ color:var(--ink); text-decoration:none; }
.footer-col a:hover{ text-decoration:underline; }


/* == 4) COMPONENTS =================================================== */
/* Buttons (sitewide) */
.btn{
  background: var(--brandYellow);
  border:2px solid var(--brandRed);
  color:var(--ink);
  padding:.75rem 1.25rem;
  border-radius: var(--radius);
  font-weight:700;
  text-decoration:none;
  display:inline-block;
  transition: transform .05s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(.98); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn.dark{ background:#008000; color:#fff; border:2px solid #000; }
.btn.firepit{ background:#ff0202; color:#fff; border:2px solid #000;}
.actions-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  gap: 1rem;
}

/* Secondary button (less visual weight) transparent; */
.btn.ghost{
  background: var(--brandYellow);
  border: 2px solid var(--brandRed);
  color: var(--ink);
  opacity: 0.65;
}

.btn.ghost:hover{
  opacity: 1;
  background: rgba(0,0,0,0.03);
}

/* Hero */
.hero{
  max-width: var(--containHero);
  margin: 0 auto 18px; 
  text-align:left;
  padding-top: 1.5rem; 
  padding-bottom: 1.5rem;
}
.hero h1{
  font-size: 2.2rem; 
  margin: 0 0 8px 0; 
  color: var(--brandBlue);
  text-align:center;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}
.hero p{
  max-width: var(--container);   /* aligns right edge with cards */
  margin: .65rem auto 1.0rem;
}
.hero-offer{
     text-align:left;
}
.purpletext{
    color: var(--ndPurple);
}



/* Cards */
.card{
  background:#fff3de;
  border:2px solid var(--stroke);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow);
  max-width: var(--container);
  margin: 1.25rem auto;
}
.card-nd{          /* soft yellow sand */
  background:#e3edea;
}
.card-disability{  /* soft peach/orange */
  background:#FFE6D6;
}
.card-comb{  /* soft bronze e2def5*/
  background:#f0effa;
}
.card-work{  /* darker yellow */
  background:#FFF3DE;
}
.card-wisdom{  /* #f99a55; light orange */
  background: #fda521;
}



.card h2{
  /* card headings are calmer than big site H2s */
  font-size: 1.6rem;
  letter-spacing: .02em;
  line-height: 1.25;
  font-weight: 800;
  margin: .2rem 0 .15rem 0;
  text-shadow: none;
  color: #111;
}
.subhead{
  margin:.1rem 0 .75rem 0; color:#444; font-weight:600; font-size:1.05rem;
}

/* Price table */
.price{
  background:#ffeac7; border:2px solid var(--stroke); border-radius:12px; padding:12px;
  display:grid; gap:6px; max-width:640px; margin:10px auto;
}
.price .rows{ display:grid; gap:6px; }
.price .row{ display:flex; justify-content:space-between; align-items:center; }
.price .note{ font-size:.95rem; opacity:.9; }
.note-small{ font-size: .80rem; opacity:.6;}

/* FAQ */
.faq{ max-width:900px; margin:0 auto; display:grid; gap:12px; }
.faq dt{ font-weight:700; }
.faq dd{ margin:0 0 10px 0; }

/* Forms (contact page) */
.form-wrap{ max-width:780px; margin:0 auto; }
.form-note{
  text-align:center; font-size: var(--lead); font-weight:600;
  margin:12px 0 0 0; opacity:.95;
}

/* Hide stray top-of-content link lists (WP leftovers) */
main > a[href]{ display:none !important; }


/* == 5) PAGE RULES — COACHING ======================================= */
/* Coaching pages use calmer section H2s (outside cards) */
.coaching .section > h2{
  color: var(--ink-soft);
  letter-spacing:.01em;
  line-height:1.22;
  font-size: 1.9rem;
}

/* Colour headings by card type */
.coaching .card-nd h2{ color: var(--ndPurple) !important; }
.coaching .card-disability h2{ color: var(--famOrange) !important; }

.offer .card-nd h2{ color: var(--ndPurple) !important; }
.offer .card-disability h2{ color: var(--famOrange) !important; }
.offer .card-comb h2{ color: var(--brandBlue) !important; }
.offer .card-work h2{ color: var(--brandYellow) !important; }


/* == 6) UTILITIES & RESPONSIVE ====================================== */
/* Align dropdown panel with header inner width on narrower screens */
@media (max-width: 1160px){
  .site-nav{ right: var(--gutter); }
}

/* Footer stacks nicely on mobile */
@media (max-width: 900px){
  .footer-inner{
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }
  .footer-col.left,
  .footer-col.center,
  .footer-col.right{
    grid-column:1 !important;
    justify-self:center !important;
    text-align:center !important;
  }
}

/* === Coaching section titles (non-card) — teal + spacing ============= */
:root{
  --sectionTeal: #0FA3B1; /* accessible on the sand background */
}

.coaching .section > h2{
  color: var(--sectionTeal) !important;
  text-shadow: none !important;     /* remove black outline */
  letter-spacing: .02em !important; /* add breathing room */
  line-height: 1.25 !important;
  font-size: 1.9rem;                 /* sits between card h2 (1.6) and hero */
}
/* Teal headings only for sections that are NOT cards */
.coaching .section:not(.card) > h2{
  color: var(--sectionTeal) !important;
  text-shadow: none !important;
  letter-spacing: .02em !important;
  line-height: 1.25 !important;
  font-size: 1.9rem;
}

/* Ensure card titles keep their accent colours */
.coaching .card-nd > h2{ color: var(--ndPurple) !important; text-shadow:none !important; }
.coaching .card-disability > h2{ color: var(--famOrange) !important; text-shadow:none !important; }
/* Normalize the submenu toggle button so it matches the links */
.site-nav .menu .submenu-toggle{
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 1.2;
  padding: .7rem .9rem;
  min-height: 44px;              /* same touch target as links */
  background: #f0fbff;           /* keep the subtle diff */
  border: 2px solid var(--stroke);
  border-radius: var(--radius-sm);
  color: var(--ink);
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

/* Submenu styling for clarity */
.site-nav .menu ul li ul {
  padding-left: 0; /* reset default */
}

.site-nav .menu ul li ul li {
  padding-left: 1rem;          /* indent sub-items */
  background: #f8f1e6;         /* light contrast against parent */
  border-left: 3px solid var(--sectionTeal); /* visual link to parent */
}

.site-nav .menu ul li ul li a,
.site-nav .menu ul li ul li button {
  display: block;
  padding: .6rem .9rem;
  font-size: 0.95rem;
  color: var(--ink);
}

/* Optional hover so it feels interactive */
.site-nav .menu ul li ul li:hover {
  background: #ece4da;
}
/* Submenu: indent + colour so it reads as children of “Services” */
.site-nav .submenu { padding-left: 0; margin-top: .4rem; }

.site-nav .submenu li { list-style: none; }

.site-nav .submenu a{
  background: #f8f1e6 !important;   /* light tint, distinct from parent items */
  border-color: var(--stroke);
  padding-left: 1.25rem !important;  /* indent */
  position: relative;
}

.site-nav .submenu a::before{
  content: "";
  position: absolute;
  left: 8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--sectionTeal);    /* teal accent line */
  border-radius: 2px;
}

.site-nav .submenu a:hover{ background: #ece4da !important; }

/* Two-up card grid for Services (stacks on mobile) */
.cards-row{
  max-width: var(--container);
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: 1fr;     /* mobile default */
  gap: 18px;
}
.cards-row .card{ margin: 0; }     /* use grid gap instead of card margins */

@media (min-width: 860px){
  .cards-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Services: ALWAYS 3-up on desktop width */
.cards-row{
  max-width: var(--container);
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: 1fr;      /* mobile */
  gap: 18px;
}
.cards-row .card{ margin: 0; }      /* use grid gap */

/* desktop: three columns */
@media (min-width: 860px){
  .cards-row{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  /* undo any previous “span both columns” rules */
  .cards-row > .card{
    grid-column: auto !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* Services grid: always three across on desktop */
.cards-row{
  max-width: var(--container);
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: 1fr;     /* mobile */
  gap: 10px;
  align-items: stretch;           /* equal heights */
}
.cards-row .card{ margin: 0; }

@media (min-width: 860px){
  .cards-row{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Service cards: tidy titles + bottom-aligned buttons */
.service-card{
  display: flex; flex-direction: column; gap: .6rem;
}
.service-card h2{
  font-weight: 900;
  letter-spacing: .01em;
  margin: .15rem 0 0;
  /* keep to one line on desktop; scale to fit */
  font-size: clamp(1.05rem, 1.1vw + 0.95rem, 1.35rem);
}
@media (min-width: 860px){
  .service-card h2{ white-space: nowrap; }
}
.service-card .subhead{
  margin: 0 0 .25rem; font-weight: 700; color: #222;
}
.service-card .actions{
  margin-top: auto;               /* pins buttons to the bottom */
  display: flex; gap: .6rem; flex-wrap: wrap;
}
/* Center the subhead ONLY on the first card (1:1 Coaching) */
.cards-row .service-card:first-child .subhead{
  text-align: center;
}

.closing-line{
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1.25rem;
    text-align: center;
  align-items: center;
}

/* Firepit page */
.firepit-page .firepit-hero{
  max-width: 900px;
  text-align: center;
  align-items: center;
}

.firepit-page .firepit-intro{
  max-width: 1100px;
  margin: 0 auto;
}

.firepit-page .firepit-card{
  background: #f99a55;
  border: 3px solid #d6a24a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.firepit-page .firepit-card h2,
.firepit-page .section h2, 
.firepit-page .firepit-intro h2{
  margin-top: 0;
    font-size: 1.7rem;
}

.firepit-page .section{
  max-width: 1100px;
}

.firepit-page .closing-line{
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1.25rem;
    text-align: center;
  align-items: center;
}
.firepit-page .firepit-closing{
    text-align: center;
}

.firepit-page ul{
  padding-left: 1.4rem;
}

.firepit-page li{
  margin-bottom: 0.6rem;
}

.firepit-page .firepit-cta{
  text-align: center;
  margin-top: 1rem;
}

.firepit-page .firepit-cta .btn{
  display: inline-block;
}
.firepit-page .firepit-card.space-card{
  background: #ffd76a;
}

.firepit-page .firepit-card.circle-card{
  background: #fda521;
}

.firepit-page .firepit-card.expect-card{
  background: #ff8a47;
}

.firepit-page .firepit-card.access-card{
  background: #ff583b; /*#fff0cf; */
}
.firepit-page .space-card h2{
  color: #ff6347;/*#8c4b00;*/
}

.firepit-page .circle-card h2{
  color: #9a3f00;
}

.firepit-page .expect-card h2{
  color: #a12c00;
}

.firepit-page .access-card h2{
  color: #ffd76a;
}
@media (max-width: 860px){
  .firepit-page .firepit-card{
    padding: 1.25rem;
  }

  .firepit-page .closing-line{
    font-size: 1.25rem;
  }
}






/* ====== Offer page specific =====*/
.discountedprice{
    text-decoration: line-through;

}
.discountprice{
    color: #f00;
    font-size: 1.4rem;
    letter-spacing: .02em;
    line-height: 1.2;
    font-weight: 750;}

.softbold{
  font-weight:700;
}
.indented-group {
  padding-left: 30px;
}

.coaching121:hover,
  .family:hover, 
  .card-wisdom:hover,
  .concessions:hover,
  .about:hover, 
  .testimonials:hover {
    filter: brightness(1.05);
  }

  /* Emotional literacy signal grid */
.signal-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}

.signal-col{
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

.signal-col h4{
  margin: 0 0 0.5rem 0;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink-soft);
}

.signal-note{
  margin-bottom: 0.6rem;
  font-size: 0.96rem;
}

.signal-list{
  margin: 0;
  padding-left: 1.15rem;
}

.signal-list li{
  margin-bottom: 0.28rem;
}

@media (min-width: 760px){
  .signal-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Emotion wheel inside card --- */
.emotion-content{
  display:grid;
  grid-template-columns: 1fr 190px;
  gap: 1rem;
  align-items:center;
}

.emotion-wheel-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}

.emotion-wheel{
  max-width: 170px;
  width: 100%;
  height: auto;
  display:block;
}

@media (max-width: 820px){
  .emotion-content{
    grid-template-columns: 1fr;
  }

  .emotion-wheel-wrap{
    margin-top: 0.5rem;
  }

  .emotion-wheel{
    max-width: 150px;
  }
}
.inline-link {
  font-weight: bold;
  text-decoration: none;   /* removes underline */
  cursor: pointer;
  color: inherit;
}

.inline-link:hover {
  opacity: 0.7;
}


/* Home page mobile layout fixes */
/* Mobile header fixes: logo/title/menu fit */
@media (max-width: 860px){
  header{ padding: .75rem 1rem; }
  .logo{ width: clamp(32px, 8vw, 44px); height:auto; }
  .site-title{
    font-size: clamp(1.05rem, 4.2vw, 1.45rem);
    line-height: 1.15;
    max-width: 62vw;
    white-space: normal;
  }
  .nav-toggle{ width:36px; height:32px; }
  .site-nav{ width: min(90vw, 300px); right: .75rem; }
}

/* tiny phones */
@media (max-width: 420px){
  .site-title{ max-width: 56vw; font-size: clamp(1rem, 4.6vw, 1.3rem); }
  .site-nav{ width: min(92vw, 280px); right: .5rem; }
}

@media (max-width: 860px){

  /* Summary: let it breathe full width on mobile */
  .home .summary{
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* 1:1 + Family cards: stack instead of side-by-side */
  .home .section > div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Access/About row: stop forcing chunky min widths */
  .home .section > div[style*="repeat(auto-fit,minmax(400px,1fr))"]{
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Make cards feel properly full-width on mobile */
  .home .service-card{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Buttons sit neatly in a vertical stack if needed */
  .home .service-card .actions{
    flex-direction: column;
    align-items: stretch;
  }

  .home .service-card .actions .btn{
    width: 100%;
    text-align: center;
  }

  .home .home-hero{
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .home .home-hero p,
  .home .home-hero .lead,
  .home .home-hero .indented-group{
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
   .coaching .summary{
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
     .coaching .hero{
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .actions-row{
    flex-direction: column;
    align-items: stretch;
  }

  .actions-row .btn{
    width: 100%;
    text-align: center;
  }

}