/* ===========================
   Components – CA TAX HUB
   Depends on variables from base.css (light-only)
   =========================== */

/* ---------- Header micro-interactions ---------- */
html.scrolled .site-header{
  box-shadow: var(--shadow-sm);
}

/* ---------- Mega menu: stability + open state ---------- */
.has-mega{ position:relative; }
.has-mega .mega-trigger{
  position:relative;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.5rem .7rem; border-radius:10px; border:1px solid transparent; background:transparent;
}
/* Invisible “bridge” so pointer can travel from trigger to panel */
.has-mega .mega-trigger::after{
  content:""; position:absolute; left:-6px; right:-6px; bottom:-14px; height:16px;
}
/* Panel defaults; the base.css sets geometry, we enforce layering + smoothness */
.has-mega .mega{
  position:absolute; left:50%; top:calc(100% + 12px);
  transform:translateX(-50%) translateY(-6px);
  opacity:0; pointer-events:none; z-index:1200;
  transition:opacity var(--trans-fast), transform var(--trans-fast);
}
.has-mega.is-open .mega,
.has-mega:focus-within .mega,
.has-mega:hover .mega{
  opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
}

/* ---------- Navigation: active state + simple variant ---------- */
.nav a.is-active{
  background:rgba(10,56,113,.08);
  color:var(--brand);
  font-weight:700;
  border-radius:10px;
}
.nav.-simple a{
  padding:.45rem .6rem; border-radius:10px;
}

/* ---------- Callback form (header) ---------- */
.callback-form{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:.25rem; box-shadow:var(--shadow-sm);
}
.callback-form input{
  border:0; background:transparent; padding:.55rem .7rem;
}
.callback-form .btn{
  border-radius:10px; padding:.55rem .8rem;
}
/* Honeypot field (spam trap) */
.hp{ position:absolute !important; left:-999rem !important; opacity:0 !important; }

/* ---------- Drawer (mobile) + overlay ---------- */
body.drawer-open{ overflow:hidden; }
.drawer-overlay{
  position:fixed; inset:0; background:rgba(2,6,23,.36);
  opacity:0; pointer-events:none; transition:opacity var(--trans-slow); z-index:1100;
}
.drawer-overlay.is-open{ opacity:1; pointer-events:auto; }

/* ---------- Cards, tiles, hover polish ---------- */
.cards > .card,
.service-card{
  transition: transform var(--trans-fast), box-shadow var(--trans-fast), border-color var(--trans-fast);
}
.cards > .card:hover,
.service-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(10,56,113,.25);
}

/* Service tile “learn more” chevron */
.service-card .link{
  display:inline-flex; align-items:center; gap:.35rem;
}
.service-card .link::after{
  content:"›"; font-weight:700; transform: translateX(2px);
  transition: transform var(--trans-fast);
}
.service-card:hover .link::after{ transform: translateX(5px); }

/* ---------- Filter chips / tag bar ---------- */
.filters, .tag-bar{
  display:flex; flex-wrap:wrap; gap:.45rem;
  margin:.4rem 0 1rem;
}
.tag-bar .chip[aria-pressed="true"],
.tag-bar .chip.is-active{
  background:var(--brand); color:#fff; border-color:var(--brand);
}

/* ---------- CTA section ---------- */
.cta{
  background:
    radial-gradient(900px 320px at 10% 10%, rgba(10,56,113,.08), transparent 60%),
    radial-gradient(700px 280px at 90% -10%, rgba(244,124,38,.10), transparent 60%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cta .cta-inner{ text-align:center; max-width:860px; margin-inline:auto; }
.cta .btn{ margin-top:.6rem; }

/* ---------- Slider (Testimonials / generic) ---------- */
.slider{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:16px; background:var(--card);
}
.slider .track{
  display:flex; gap:0; will-change: transform;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.slider .slide{ flex:0 0 100%; padding: clamp(16px, 3vw, 28px); }
.slider .slide blockquote{
  font-size: clamp(16px, 2.1vw, 20px); margin:0 0 .5rem; font-weight:600;
}
.slider .slide figcaption{ color:var(--muted); }

.slider .prev, .slider .next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:12px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.slider .prev{ left:10px; }
.slider .next{ right:10px; }
.slider .prev:hover, .slider .next:hover{ box-shadow:var(--shadow); }
.slider .dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:.35rem; justify-content:center;
}
.slider .dots button{
  width:9px; height:9px; border-radius:999px; border:1px solid var(--muted);
  background:transparent; padding:0;
  transition: background var(--trans-fast), transform var(--trans-fast), border-color var(--trans-fast);
}
.slider .dots button[aria-current="true"]{
  background:var(--brand); border-color:var(--brand); transform:scale(1.1);
}
/* Pause-on-hover visual hint (JS toggles .is-paused) */
.slider.is-paused{ opacity:.98; }

/* ---------- Accordion (ARIA-driven) ---------- */
.accordion{
  border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card);
}
.accordion-item + .accordion-item{ border-top:1px solid var(--line); }
.accordion-header{ margin:0; }
.accordion-header button{
  width:100%; text-align:left; background:transparent; border:0; padding:1rem 1rem;
  font:600 1rem Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
}
.accordion-header button .chev{ transition: transform var(--trans-fast); }
.accordion-header button[aria-expanded="true"] .chev{ transform: rotate(180deg); }
.accordion-panel{
  overflow:hidden; max-height:0; opacity:.95;
  transition: max-height .35s ease, opacity .25s ease;
}
.accordion-panel-inner{ padding:0 1rem 1rem; }
/* JS toggles .is-open */
.accordion-item.is-open .accordion-panel{ max-height:480px; }
@media (min-width:900px){ .accordion-item.is-open .accordion-panel{ max-height:640px; } }

/* ---------- Blog list cards ---------- */
.post-card{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:16px; background:var(--card);
  transition: box-shadow var(--trans-fast), transform var(--trans-fast), border-color var(--trans-fast);
}
.post-card:hover{ box-shadow:var(--shadow); transform: translateY(-2px); border-color: rgba(10,56,113,.25); }
.post-card .cover{ position:relative; aspect-ratio: 16 / 9; overflow:hidden; background:linear-gradient(180deg, rgba(2,6,23,.06), transparent); }
.post-card .cover img{ width:100%; height:100%; object-fit:cover; }
.post-card .body{ padding: .9rem .95rem 1rem; display:flex; flex-direction:column; gap:.35rem; }
.post-card .meta{ color:var(--muted); font-size:.875rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.post-card .title{ font-size:1.05rem; margin:.15rem 0; }
.post-card .tags{ display:flex; gap:.35rem; flex-wrap:wrap; }
.post-card .tag{ font-size:.78rem; padding:.2rem .5rem; border-radius:999px; border:1px solid var(--line); color:var(--muted); }

/* ---------- Post template ---------- */
.post-head{ max-width:880px; margin-inline:auto; padding-inline:1rem; }
.post-cover{ max-width:900px; margin: .6rem auto; border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.post-body{ max-width:880px; margin: .7rem auto 0; padding-inline:1rem; }
.post-body h2{ margin-top:1rem; }
.post-body ul{ margin-left:1.1rem; }

/* ---------- Forms feedback ---------- */
.form-msg{ margin-top:.5rem; font-size:.9rem; }
.form-msg.success{ color:#1e9e57; }
.form-msg.error{ color:#c62828; }

/* ---------- Toasts (extra hooks) ---------- */
.toast .title{ font-weight:700; margin-right:.4rem; }
.toast .actions{ margin-left:.6rem; display:inline-flex; gap:.35rem; }

/* ---------- Due Dates widget ---------- */
.due-dates{ display:grid; gap:.6rem; }
.due-date-item{
  display:grid; grid-template-columns: 110px 1fr; gap:.6rem;
  border:1px dashed var(--line); border-radius:12px;
  padding:.6rem .7rem; background:linear-gradient(180deg, rgba(2,6,23,.02), transparent);
}
.due-date-item .date{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.due-date-item .date strong{ font-size:1.1rem; }
.due-date-item .info .title{ font-weight:700; }
.due-date-item .info .desc{ color:var(--muted); }

/* ---------- Map card ---------- */
.map.card{ padding:.6rem; }
.map + .muted.small{ margin-top:.35rem; }

/* ---------- Newsletter (footer) ---------- */
.newsletter .btn{ white-space:nowrap; }

/* ---------- Logos strip (placeholders) ---------- */
.logos{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
  filter: grayscale(100%) contrast(1.1);
}
.logos img{ height:28px; opacity:.85; }

/* ---------- Utility: glass accent ---------- */
.glass{
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px) saturate(160%);
  border:1px solid var(--line);
  border-radius:12px;
}

/* ---------- Magnetic hover for primary CTAs ---------- */
.btn.btn-primary{ position:relative; will-change: transform; }
.btn.btn-primary:hover{ transform: translateY(-1px) scale(1.01); }

/* ---------- Section reveal (IO-driven) ---------- */
.reveal-on-scroll{ opacity:0; transform: translateY(8px); transition: opacity .4s var(--trans-fast), transform .4s var(--trans-fast); }
.reveal-on-scroll.is-visible{ opacity:1; transform: translateY(0); }

/* ---------- Simple ToC (legal pages) ---------- */
.toc{
  border:1px solid var(--line); border-radius:12px; padding:.8rem;
  background:var(--card); margin:0 0 1rem; max-width:360px;
}
.toc ol{ margin:.4rem 0 0 1.2rem; }

/* ---------- Small helpers ---------- */
.badge{ display:inline-block; padding:.2rem .5rem; border-radius:999px; background:rgba(10,56,113,.08); color:var(--brand); font-weight:700; font-size:.78rem; }
.link-arrow{ display:inline-flex; align-items:center; gap:.35rem; font-weight:700; }
.link-arrow::after{ content:"→"; transition: transform var(--trans-fast); }
.link-arrow:hover::after{ transform: translateX(3px); }

/* ---------- Footer v2 spacing (if used) ---------- */
.footer-cta{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; }
.footer-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-body{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:1rem; padding:20px 0; }
@media (max-width:900px){
  .footer-body{ grid-template-columns:1fr; }
  .footer-cta-inner{ flex-direction:column; text-align:center; }
}

/* End of components.css */