/* ===========================
   Components – CA TAX HUB
   Depends on variables from base.css
   =========================== */

/* ---------- Header extras: shrink & shadow on scroll ---------- */
html.scrolled .site-header{
  box-shadow: var(--shadow-sm);
}

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

/* ---------- 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 overlay (mobile) ---------- */
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 ---------- */
.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 link indicator */
.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); }

/* ---------- Filters bar (chips group) ---------- */
.filters, .tag-bar{
  display:flex; flex-wrap:wrap; gap:.45rem;
  margin:.4rem 0 1rem;
}

/* ---------- Hero CTA block ---------- */
.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; }

/* ---------- Testimonials slider / generic slider ---------- */
.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 hint (used by JS) */
.slider.is-paused{ opacity:.98; }

/* ---------- Accordions (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;
  transition: max-height .35s ease, opacity .25s ease;
  opacity:.95;
}
.accordion-panel-inner{
  padding:0 1rem 1rem;
}

/* When JS toggles open class */
.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: success/error messages ---------- */
.form-msg{
  margin-top:.5rem; font-size:.9rem;
}
.form-msg.success{ color:#1e9e57; }
.form-msg.error{ color:#c62828; }

/* ---------- Toasts (extra variations) ---------- */
.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; }

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

/* ---------- Logos strip (placeholder) ---------- */
.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;
}

/* ---------- Tag bar selection ---------- */
.tag-bar .chip[aria-pressed="true"],
.tag-bar .chip.is-active{
  background:var(--brand); color:#fff; border-color:var(--brand);
}

/* ---------- Utility: glassmorphism 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 class (used by IntersectionObserver) ---------- */
.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 table of contents (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; }

/* ---------- Map privacy note ---------- */
.map + .muted.small{ margin-top:.35rem; }

/* ---------- Misc 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); }

/* ---------- Dark mode fine-tuning ---------- */
html[data-theme="dark"] .cta{
  background:
    radial-gradient(900px 320px at 10% 10%, rgba(10,56,113,.18), transparent 60%),
    radial-gradient(700px 280px at 90% -10%, rgba(244,124,38,.18), transparent 60%);
}
html[data-theme="dark"] .post-card .cover{ background:linear-gradient(180deg, rgba(255,255,255,.05), transparent); }

/* End of components.css */