/* =================================================================
   TaxNoticeAdvisor — inner-page components
   Loaded after style.css. Adds shared pieces for sub-pages:
   breadcrumb, page hero, accordion, info/checklist cards, related
   desk links, contact form. Reuses all base tokens + components.
   ================================================================= */

/* ---- Breadcrumb ------------------------------------------------- */
.crumb { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.crumb__inner { display: flex; align-items: center; gap: 8px; padding-block: 12px; font-size: var(--fs-13); color: var(--ink-faint); }
.crumb a { color: var(--teal-mid); font-weight: 500; }
.crumb a:hover { color: var(--gold-dark); }
.crumb span { color: var(--ink-faint); }

/* ---- Page hero -------------------------------------------------- */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4rem); }
.page-hero__bloom { position:absolute; top:-30%; right:-10%; width:50vw; height:50vw; max-width:600px; max-height:600px;
  background: radial-gradient(circle, rgba(20,116,107,.12), transparent 62%); pointer-events:none; }
.page-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-8); align-items: center; }
.page-hero__badge { display:inline-flex; align-items:center; gap:10px; }
.page-hero__badge .desk-card__icon { width:56px; height:56px; font-size:1.6rem; }
.page-hero h1 { font-family: var(--font-serif); font-weight:500; letter-spacing:-.02em; line-height:1.06;
  font-size: clamp(2.1rem, 4.6vw, 3.2rem); color: var(--teal-dark); margin: var(--sp-4) 0 var(--sp-4); }
.page-hero h1 em { font-style: italic; color: inherit; }
.page-hero__lead { font-size: var(--fs-18); color: var(--ink-soft); }
.page-hero__cta { display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.page-hero__aside { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-md); }
.page-hero__aside h4 { font-family: var(--font-serif); font-size: var(--fs-20); color: var(--teal-dark); margin-bottom: var(--sp-4); }
.mini-stats { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.mini-stats div strong { display:block; font-family: var(--font-serif); font-size: var(--fs-24); color: var(--teal-dark); }
.mini-stats div span { font-size: var(--fs-13); color: var(--ink-faint); }

/* ---- Checklist / capability cards ------------------------------ */
.cap-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.cap-card { display:flex; gap: var(--sp-4); background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--sh-sm); transition: transform .2s ease, box-shadow .2s ease; }
.cap-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.cap-card__mark { flex:none; width:40px; height:40px; border-radius: var(--r-sm); background: var(--tint-teal-bg); color: var(--tint-teal-fg);
  display:grid; place-items:center; font-weight:700; font-family: var(--font-serif); font-size: var(--fs-20); }
.cap-card__mark .icn { width: 20px; height: 20px; }
.page-hero__badge .desk-card__icon .icn { width: 26px; height: 26px; }
.cap-card h4 { font-size: var(--fs-16); color: var(--teal-dark); margin-bottom:4px; }
.cap-card p { font-size: var(--fs-14); color: var(--ink-soft); }
.cap-card .tag { display:inline-block; margin-top:8px; font-size: var(--fs-13); font-weight:600; color: var(--gold-dark); background: var(--tint-gold-bg); padding:2px 10px; border-radius: var(--r-pill); }

/* ---- Accordion (FAQ / notice explainers) ----------------------- */
.accordion { max-width: 820px; margin: 0 auto; display:grid; gap: var(--sp-3); }
.acc { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden; }
.acc__q { width:100%; text-align:left; background:none; border:none; padding: var(--sp-4) var(--sp-5); display:flex;
  justify-content:space-between; align-items:center; gap: var(--sp-4); font-family: var(--font-sans); font-size: var(--fs-16);
  font-weight:600; color: var(--teal-dark); }
.acc__q:hover { background: var(--paper); }
.acc__icon { flex:none; width:24px; height:24px; border-radius:50%; background: var(--tint-teal-bg); color: var(--teal-dark);
  display:grid; place-items:center; font-size: 1.1rem; transition: transform .25s ease, background .2s ease; }
.acc.is-open .acc__icon { transform: rotate(45deg); background: var(--gold); color:#fff; }
.acc__a { max-height:0; overflow:hidden; transition: max-height .3s ease; }
.acc__a-inner { padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-soft); font-size: var(--fs-15); }
.acc.is-open .acc__a { max-height: 400px; }

/* ---- Related desks --------------------------------------------- */
.related { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.related a { display:flex; align-items:center; gap: var(--sp-3); background:#fff; border:1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4); font-weight:600; color: var(--teal-dark); font-size: var(--fs-14); transition: all .18s ease; }
.related a:hover { border-color: var(--teal-mid); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.related .ico { font-size: 1.3rem; }

/* ---- Contact form ---------------------------------------------- */
.contact-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-8); align-items:start; }
.contact-grid > * { min-width: 0; }   /* grid items default to min-width:auto and pushed phones sideways */
.form-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem,3vw,var(--sp-7)); box-shadow: var(--sh-md); }
.form-card h2 { font-family: var(--font-serif); font-weight:500; font-size: var(--fs-30); color: var(--teal-dark); }
.form-card > p { color: var(--ink-soft); font-size: var(--fs-15); margin: var(--sp-2) 0 var(--sp-5); }
.map-embed .icn { width: 18px; height: 18px; vertical-align: -3px; }

.info-card { background: linear-gradient(160deg, var(--teal), var(--teal-dark)); color:#fff; border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-md); }
.info-card h3 { font-family: var(--font-serif); font-weight:500; font-size: var(--fs-24); margin-bottom: var(--sp-4); }
.info-row { display:flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom:1px solid rgba(255,255,255,.12); }
.info-row:last-child{border-bottom:none;}
.info-row .ico { flex:none; width:38px; height:38px; border-radius: var(--r-sm); background: rgba(255,255,255,.12); display:grid; place-items:center; font-size:1.1rem; }
.info-row b { display:block; font-size: var(--fs-14); }
.info-row a, .info-row span { color:#d5e6e2; font-size: var(--fs-14); }
.info-row a:hover { color: var(--gold); }
/* "Open in Google Maps" link inside the dark contact card (a link, not an embed: no third-party tracking) */
.map-embed { margin-top: var(--sp-4); display:flex; align-items:center; justify-content:center; gap:8px; padding: 12px 16px;
  border-radius: var(--r-md); border:1px solid rgba(255,255,255,.28); color:#fff; font-size: var(--fs-14); font-weight:600; transition: background .18s ease; }
.map-embed:hover { background: rgba(255,255,255,.08); }

/* section intro left-aligned variant */
.section-head--left { text-align:left; margin-inline:0; max-width:640px; }

/* ---- "Recent change / good to know" callout ------------------- */
.lawnote { display:flex; gap: var(--sp-4); align-items:flex-start; max-width: 900px; margin: var(--sp-6) auto 0;
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--gold); border-radius: var(--r-md);
  padding: var(--sp-5); box-shadow: var(--sh-sm); }
.lawnote .icn { flex:none; width:22px; height:22px; color: var(--gold-dark); margin-top:2px; }
.lawnote h4 { font-size: var(--fs-15); color: var(--ink); margin-bottom:4px; }
.lawnote p { font-size: var(--fs-14); color: var(--ink-soft); }
.lawnote span { display:inline-block; font-size: var(--fs-13); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--gold-dark); }

/* ---- "What to prepare" checklist card ------------------------- */
.prep { background: var(--paper-2); }
.prep-card { max-width: 840px; margin: 0 auto; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem,3vw,var(--sp-7)); box-shadow: var(--sh-sm); }
.prep-list { display:grid; grid-template-columns: 1fr 1fr; gap: 12px var(--sp-6); }
.prep-list li { position:relative; padding-left: 30px; font-size: var(--fs-15); color: var(--ink); }
.prep-list li::before { content:"✓"; position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:50%; background: var(--tint-teal-bg); color: var(--tint-teal-fg); font-size: var(--fs-13); font-weight:700; display:grid; place-items:center; }
.prep-note { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top:1px solid var(--line-soft); font-size: var(--fs-14); color: var(--ink-soft); }
@media (max-width:560px){ .prep-list { grid-template-columns: 1fr; } }

/* ---- Prose (legal / FAQ intro text pages) --------------------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose > p, .prose > ul, .prose > ol { color: var(--ink-soft); font-size: var(--fs-16); line-height: 1.7; margin-bottom: var(--sp-4); }
.prose h2 { font-family: var(--font-serif); font-weight:600; font-size: var(--fs-24); color: var(--teal-dark); margin: var(--sp-7) 0 var(--sp-3); }
.prose h3 { font-size: var(--fs-18); color: var(--teal-dark); margin: var(--sp-5) 0 var(--sp-2); }
.prose ul, .prose ol { padding-left: var(--sp-5); }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--teal-mid); font-weight: 500; }
.prose a:hover { color: var(--gold-dark); }
.prose__updated { font-size: var(--fs-13); color: var(--ink-faint); margin-bottom: var(--sp-6); }
.prose__note { background: var(--tint-teal-bg); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-14); color: var(--teal-dark); margin: var(--sp-5) 0; }

/* desk pages: "What happens next" steps (desk pages do not load variants.css) */
.hstrip { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-5); }

@media (max-width: 900px){
  .page-hero__inner, .contact-grid { grid-template-columns: 1fr; }
  .cap-grid, .related, .hstrip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .cap-grid, .related, .mini-stats, .hstrip { grid-template-columns: 1fr; }
}