/* Eastern Shore Mediation — shared production stylesheet
   Design tokens, motion, hover states, sticky nav, responsive, reduced-motion.
   Page content keeps the design's inline styling for pixel fidelity; this file
   supplies the keyframes those inline `animation:` declarations reference, the
   real hover behaviour (the design used non-functional `style-hover` attrs),
   and the responsive + accessibility layers. */

:root{
  --navy:#0b1526;        /* page background */
  --navy-raised:#0e1a2e; /* hover / raised panels */
  --hairline:#1d2b42;    /* borders on navy */
  --border-2:#2c3a50;
  --border-3:#3a4a64;    /* button outlines */
  --cream:#f0ecdf;
  --body:#a7b3c6;
  --hero-sub:#b6c2cf;
  --muted:#8fa0b8;
  --faint:#5c6d87;
  --gold:#d1ab52;
  --gold-bright:#d5a95c;
  --green:#124048;   /* practice-cell hover fill — deep teal, matches the sheen */
  --green-text:#e9efe6;
  --green-text-2:#c3d0bf;
  --sage:#9cb096;
}

*{box-sizing:border-box}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--navy);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-family:'Libre Franklin',sans-serif;
}
img{max-width:100%}

/* Center each 1280px page as a stately column on wide screens */
.es-page{width:1280px;max-width:100%;margin:0 auto;background:var(--navy)}

/* ---------- Bay sheen = two-color sweep (solid navy <-> solid teal, diagonal edge passes between) ---------- */
.es-sheen{position:relative;
  background:linear-gradient(115deg,#0b1526 0%,#0b1526 38%,#134650 62%,#134650 100%);
  background-size:300% 300%;
  animation:esDrift 28s ease-in-out infinite}

/* ---------- Full-bleed home hero (photo + navy gradient; headline on the left) ---------- */
.es-hero-fb{position:relative;min-height:600px;display:flex;align-items:center;overflow:hidden}
.es-hero-fb .fb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;filter:brightness(1.02) contrast(1.02)}
.es-hero-fb .fb-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,21,38,.90) 0%,rgba(11,21,38,.72) 24%,rgba(11,21,38,.34) 44%,rgba(11,21,38,.07) 58%,transparent 70%)}
.es-hero-fb .fb-inner{position:relative;z-index:1;padding:76px 64px;max-width:660px}
@media(max-width:760px){
  .es-hero-fb{min-height:520px}
  .es-hero-fb .fb-inner{padding:48px 24px 56px;max-width:100%}
  .es-hero-fb .fb-veil{background:linear-gradient(180deg,rgba(11,21,38,.58) 0%,rgba(11,21,38,.80) 68%,rgba(11,21,38,.90) 100%)}
}

/* ---------- Keyframes ---------- */
@keyframes esDrift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes esShimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes esDrawIn{ to{transform:scaleX(1)} }
@keyframes esRiseIn{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ---------- Sticky translucent nav ---------- */
.es-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(11,21,38,.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.nav-link{transition:color .25s ease}
.nav-link:hover{color:var(--cream)}

/* ---------- Buttons (subtle, quiet polish) ---------- */
/* Buttons set their colors inline, so hover states need !important to win. */
.btn-gold{transition:background .25s ease}
.btn-gold:hover{background:#e4c47c !important}
.btn-outline{transition:border-color .25s ease,color .25s ease,background .25s ease}
.btn-outline:hover{border-color:var(--gold) !important;color:var(--cream);background:rgba(209,171,82,.22)}
.link-gold{transition:opacity .25s ease}
.link-gold:hover{opacity:.72}

/* ---------- Practice-cell hover fill ---------- */
/* One calm color for all three: deep teal (matches the header sheen). */
.practice-cell{transition:background .35s ease}
.practice-cell:hover{background:var(--green)}

/* ---------- Date-card hover ---------- */
.date-card{transition:border-color .3s ease,background .3s ease}
.date-card:hover{border-color:var(--gold);background:var(--navy-raised)}

/* ---------- Dual-pathway hover ---------- */
.dual-cell{transition:background .35s ease}
.dual-cell:hover{background:var(--navy-raised)}

/* ---------- "Also in practice" / matter rows ---------- */
.row-link{transition:color .25s ease}
.row-link:hover{color:var(--gold)}

/* ---------- Credentials draw-in (scroll-triggered) ---------- */
.reveal-rule{
  height:2px;
  background:linear-gradient(90deg,#d1ab52,#d5a95c);
  transform-origin:left;transform:scaleX(0);
  margin-bottom:26px;
}
.reveal-body{opacity:0}
.reveal.in .reveal-rule{animation:esDrawIn 1.1s ease forwards}
.reveal.in .reveal-body{animation:esRiseIn .9s ease forwards}
.reveal.in .cell:nth-child(1) .reveal-rule{animation-delay:.2s}
.reveal.in .cell:nth-child(2) .reveal-rule{animation-delay:.55s}
.reveal.in .cell:nth-child(3) .reveal-rule{animation-delay:.9s}
.reveal.in .cell:nth-child(1) .reveal-body{animation-delay:.5s}
.reveal.in .cell:nth-child(2) .reveal-body{animation-delay:.85s}
.reveal.in .cell:nth-child(3) .reveal-body{animation-delay:1.2s}

/* ---------- Contact form fields ---------- */
.es-field{
  width:100%;
  background:transparent;
  border:none;border-bottom:1px solid var(--border-2);
  padding:12px 2px;
  font-family:'Libre Franklin',sans-serif;font-size:14px;font-weight:300;
  color:var(--cream);
  transition:border-color .25s ease;
}
.es-field::placeholder{color:var(--faint)}
.es-field:focus{outline:none;border-bottom-color:var(--gold)}
textarea.es-field{resize:vertical;min-height:44px}
.es-field.err{border-bottom-color:#c0703f}
.form-error{display:none;color:#d08a5c;font-family:'Libre Franklin',sans-serif;font-size:12px;letter-spacing:.04em}
.form-error.show{display:block}

/* From-the-Bench bleed image */
.es-fb-media{min-height:100%}

/* FAQ accordion (design screen 9b) */
.faq{border-top:1px solid var(--hairline)}
.faq:last-child{border-bottom:1px solid var(--hairline)}
.faq > summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 4px;cursor:pointer;list-style:none;font-family:'Cormorant Garamond',serif;font-size:23px;color:var(--cream);transition:color .25s ease}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary:hover{color:var(--gold-bright)}
.faq-sign{color:var(--gold);font-family:'Libre Franklin',sans-serif;font-size:18px;flex:none}
.faq-sign::after{content:"+"}
.faq[open] .faq-sign::after{content:"\2212"}
.faq-a{padding:0 4px 24px;font-family:'Libre Franklin',sans-serif;font-size:15px;line-height:1.8;color:var(--body);font-weight:300;max-width:640px}

/* ---------- Responsive ---------- */
/* Narrow desktops/laptops: drop the wordmark tagline and tighten the nav so
   the single-row header never collides before the mobile wrap kicks in. */
@media (max-width:1240px){
  .es-tagline{display:none}
  .es-navlinks{gap:12px !important;font-size:11px !important;letter-spacing:.06em !important}
}
@media (max-width:1000px){
  .es-fb-media{min-height:360px}
  .es-grid-2,.es-grid-3,.es-grid-4,.es-hero{
    grid-template-columns:1fr !important;
  }
  .es-hero{gap:48px !important}
  .es-hero .es-hero-media{max-width:420px}
  .es-grid-3{gap:40px !important}
  .es-grid-4{gap:16px !important}
  .es-flex-2{flex-direction:column !important}
  .es-flex-2 > *{border-left:none !important;padding-left:0 !important;padding-right:0 !important}
  .es-dual{grid-template-columns:1fr !important}
  .es-dual > *{border-right:none !important;border-top:1px solid var(--hairline)}
  .es-how > *{border-left:none !important;padding:0 !important;margin-bottom:8px}
  .es-how{grid-template-columns:1fr !important;gap:40px !important}
}
@media (max-width:760px){
  .es-nav{padding:14px 20px !important;flex-wrap:wrap;gap:14px !important}
  .es-navlinks{gap:12px !important;flex-wrap:wrap;font-size:11px !important}
  .es-pad{padding-left:24px !important;padding-right:24px !important}
  .es-pad-y{padding-top:56px !important;padding-bottom:56px !important}
  .es-mx{margin-left:24px !important;margin-right:24px !important}
  .es-hero{padding:48px 24px !important}
  .es-h1{font-size:36px !important}
  .es-h2{font-size:30px !important}
  .es-panel{padding:36px 26px !important}
  .es-tagline{display:none}       /* nav sub-tagline hides on very small screens */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto !important}
  .reveal-rule{transform:scaleX(1)}
  .reveal-body{opacity:1}
  .es-sheen{animation:none !important;background:#12303a !important}
}