/* ==========================================================
   Kerala Ayurvedic Center - Karama page specific styles
   Loads AFTER style.css
   ========================================================== */

/* ---- Uniform content width across every section ---- */
  :root{ --content-w: 920px; }

  .sec-copy{
    max-width: var(--content-w);
    margin: 0 auto;
    text-align: center;
  }
  .sec-copy p{ max-width:none; margin-left:0; margin-right:0; }

  /* headings + body share the same measure everywhere */
  .hero .lede{ max-width: var(--content-w); margin-left:auto; margin-right:auto; }
  .sec-head{ max-width: var(--content-w); }
  .approach-head{ max-width: var(--content-w); }
  .final h2{ max-width: var(--content-w); }
  .final p { max-width: var(--content-w); }

  /* grids fill the same wrap width */
  .feat-grid{ max-width: var(--content-w); margin-left:auto; margin-right:auto; }

  /* team image below hero */
  .team-img{ padding:0 0 64px; }
  .timg{ max-width: var(--content-w); margin:0 auto; }
  .timg img{
    width:100%; height:auto; display:block;
    aspect-ratio:16/9; object-fit:cover;
    border-radius:18px;
    box-shadow:0 2px 4px rgba(20,50,30,.04),0 24px 50px -26px rgba(20,50,30,.35);
  }
  @media(max-width:640px){
    .team-img{ padding-bottom:44px; }
    .timg img{ border-radius:12px; }
  }

  @media(max-width:640px){
      }
  .feat-card .feat-cap{ display:flex; flex-direction:column; flex:1; }
  .feat-card .feat-cap p{ margin-bottom:0; }
  #book .map-grid{ max-width: var(--content-w); margin-left:auto; margin-right:auto; }

  /* form + map: equal halves, equal height */
  #book .map-grid{ grid-template-columns:1fr 1fr; align-items:stretch; gap:32px; }
  #book .hero-card{ margin:0; display:flex; flex-direction:column; }
  #book .map-frame{ height:auto; min-height:340px; flex:1; }

  @media(max-width:900px){
    #book .map-grid{ grid-template-columns:1fr !important; gap:30px; }
    #book .map-frame{ min-height:280px; }
    .feat-grid{ max-width:none; }
  }

  /* --- animations must run on mobile too --- */
  @media (max-width:900px){
    .reveal,.reveal-left,.reveal-right,.reveal-zoom,
    .flip3d,.swing3d,.swing3d-r{
      opacity:0;
      transform:translateY(20px);
      transition:opacity .6s ease, transform .6s ease;
      transition-delay:var(--d,0s);
      will-change:opacity,transform;
    }
    .reveal.in,.reveal-left.in,.reveal-right.in,.reveal-zoom.in,
    .flip3d.in,.swing3d.in,.swing3d-r.in{
      opacity:1;
      transform:none;
    }
    /* no 3D tilt on touch - keep a soft press feedback instead */
    .tilt3d{ transform:none !important; }
    .feat-card:active{ transform:scale(.99); }
  }
  @media (prefers-reduced-motion:reduce){
    .reveal,.reveal-left,.reveal-right,.reveal-zoom,
    .flip3d,.swing3d,.swing3d-r{
      opacity:1 !important; transform:none !important; transition:none !important;
    }
  }

  /* ---------------- FAQ ---------------- */
  .faqsec{ padding:76px 0; background:var(--green-tint); }
  .faq-list{ max-width: var(--content-w); margin:0 auto; }
  .faq-item{
    background:var(--white);
    border:1px solid rgba(20,50,30,.08);
    border-radius:14px;
    margin-bottom:12px;
    overflow:hidden;
    transition:box-shadow .2s ease, border-color .2s ease;
  }
  .faq-item[open]{
    border-color:rgba(27,101,51,.35);
    box-shadow:0 2px 4px rgba(20,50,30,.04),0 16px 34px -22px rgba(20,50,30,.3);
  }
  .faq-item summary{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:20px 22px;
    cursor:pointer; list-style:none;
    font-family:'Fraunces',serif; font-size:17.5px; font-weight:500;
    color:var(--green-dark); line-height:1.35;
    min-height:56px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary:hover{ color:var(--green); }
  .faq-x{ width:20px; height:20px; color:var(--green); flex-shrink:0; transition:transform .25s ease; }
  .faq-item[open] .faq-x{ transform:rotate(180deg); }
  .faq-a{ padding:0 22px 20px; }
  .faq-a p{ margin:0; font-size:15.5px; line-height:1.75; color:var(--muted); }
  @media(max-width:640px){
    .faqsec{ padding:56px 0; }
    .faq-item summary{ font-size:16px; padding:17px 18px; }
    .faq-a{ padding:0 18px 18px; }
  }

  /* inline links: brand green, no underline, no bold */
  a.plink,
  a.plink:link,
  a.plink:visited,
  a.plink:active{
    color: var(--green);            /* brand green - clearly clickable */
    font-weight: inherit;           /* never bold */
    font-style: inherit;
    text-decoration: none;          /* no underline */
    border: 0;
    background: none;
    cursor: pointer;
    transition: color .18s ease;
  }
  a.plink:hover,
  a.plink:focus{
    color: var(--green-dark);       /* darkens slightly on hover */
    font-weight: inherit;
    text-decoration: none;
  }
  a.plink:focus-visible{ outline:2px solid var(--green); outline-offset:2px; border-radius:3px; }

/* ==========================================================
   Links on DARK GREEN backgrounds (.final CTA, dark bands)
   Green-on-green is invisible -> force white + underline
   ========================================================== */
.final a.plink,
.final a.plink:link,
.final a.plink:visited,
.final a.plink:active,
.cta a.plink,
.cta a.plink:link,
.cta a.plink:visited,
.band a.plink,
.reassure-strip a.plink{
  color: #ffffff;                                   /* white - visible on green */
  font-weight: inherit;                             /* still not bold */
  text-decoration: underline;                       /* underlined so it reads as a link */
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,.55);
  transition: text-decoration-color .18s ease, opacity .18s ease;
}
.final a.plink:hover,
.final a.plink:focus,
.cta a.plink:hover,
.band a.plink:hover,
.reassure-strip a.plink:hover{
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: #ffffff;                   /* underline brightens on hover */
  opacity: .92;
}
.final a.plink:focus-visible,
.cta a.plink:focus-visible{
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-radius: 3px;
}