/* Home page enhancements for CapSpace (builds on base.css) */

/* Accessibility: skip link */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:0.5rem 0.75rem; background:var(--color-primary); color:#fff; border-radius:var(--radius-md); z-index:10000; }

/* Header */
.site-header { position:sticky; top:0; z-index:1000; background:var(--color-surface); border-bottom:1px solid var(--gray-200); backdrop-filter:saturate(180%) blur(6px); }
.header-inner { display:grid; grid-template-columns:auto 40px 1fr auto; gap:var(--space-4); align-items:center; padding-block:12px; }
.brand a { font-family:var(--ff-heading); font-weight:700; font-size:1.25rem; color:var(--color-text); }
.mobile-toggle { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--gray-300); background:var(--color-surface); color:var(--color-text); padding:8px; border-radius:var(--radius-md); }

.site-nav { order:4; }
.nav__list { display:flex; gap:var(--space-4); }
.nav__list a { color:var(--color-text); font-weight:600; }

.header-actions { display:flex; align-items:center; gap:var(--space-3); }
.header-search { display:flex; gap:var(--space-2); align-items:center; min-width:280px; }
.header-search input { min-width:0; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--gray-300); border-radius:var(--radius-md); color:var(--color-text); background:var(--color-surface); }
.icon-btn:hover { background:var(--gray-100); }

/* Mobile nav behavior */
@media (max-width: 960px) {
  .header-inner { grid-template-columns:auto 40px auto; grid-template-areas:"brand toggle actions" "nav nav nav"; }
  .brand { grid-area: brand; }
  .mobile-toggle { grid-area: toggle; }
  .header-actions { grid-area: actions; }
  .site-nav { grid-area: nav; width:100%; }
  .nav__list { display:none; flex-direction:column; gap:0; padding:8px; border:1px solid var(--gray-200); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); margin-top:8px; }
  .nav__list li { border-top:1px solid var(--gray-200); }
  .nav__list li:first-child { border-top:none; }
  .nav__list a { display:block; padding:12px 10px; }
  .site-nav.is-open .nav__list { display:flex; }
  .header-search { display:none; }
}

/* Hero */
.hero-grid { align-items:stretch; }
.hero-media { overflow:hidden; }
.hero-copy { display:flex; flex-direction:column; justify-content:center; gap:var(--space-4); }
.hero-highlights { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }

/* Feature blocks */
.feature { align-items:center; gap:var(--space-6); }
.feature-media { overflow:hidden; }
.feature-copy p { max-width:60ch; }

/* Recommendations */
.reco-grid { margin-top:var(--space-6); }
.reco-card { display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--gray-200); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-xs); }
.reco-card h4 { margin:0; font-size:var(--fs-xl); }
.reco-meta { display:flex; gap:12px; align-items:center; color:var(--gray-600); font-size:var(--fs-sm); }
.reco-actions { display:flex; gap:8px; }

/* Promo / newsletter */
.promo { background:linear-gradient(180deg, var(--color-surface), var(--color-primary-50)); }
.promo-inner { display:grid; grid-template-columns:1.2fr 1fr; gap:var(--space-6); align-items:center; }
.newsletter { display:flex; gap:8px; flex-wrap:wrap; }
.newsletter input { flex:1 1 260px; }

@media (max-width: 900px) {
  .promo-inner { grid-template-columns:1fr; }
}

/* Community section */
.community .social { flex-wrap:wrap; }

/* Testimonials */
.testimonials .card blockquote { font-style:italic; }
.stars { color:#F59E0B; font-weight:700; letter-spacing:2px; }

/* Guarantees */
.guarantees .card { min-height:160px; }

/* Footer */
.site-footer { background:#0f1113; color:#fff; margin-top:var(--space-20); padding-top:var(--space-12); }
.site-footer a { color:#fff; }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-8); }
.footer-logo { font-weight:700; font-size:1.25rem; color:#fff; }
.footer-links { display:grid; gap:8px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-block:16px; margin-top:16px; text-align:center; }

@media (max-width: 900px) {
  .footer-inner { grid-template-columns:1fr; }
}

/* Chat widget */
.chat { position:fixed; right:16px; bottom:96px; width:min(100% - 32px, 360px); max-height:60vh; display:flex; flex-direction:column; border:1px solid var(--gray-300); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-lg); overflow:hidden; transform:translateY(12px); opacity:0; pointer-events:none; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); z-index:999; }
.chat[aria-hidden="false"] { transform:translateY(0); opacity:1; pointer-events:auto; }
.chat__header { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--gray-200); }
.chat__close { background:transparent; border:none; color:var(--color-text); }
.chat__body { padding:12px; display:grid; gap:8px; overflow:auto; }
.chat__form { display:flex; gap:8px; padding:10px; border-top:1px solid var(--gray-200); }
.chat__form input { flex:1; }

/* Cookie banner */
.cookie-banner { position:fixed; inset-inline:0; bottom:0; background:var(--gray-900); color:#fff; z-index:10000; box-shadow:0 -8px 16px rgb(0 0 0 / 0.2); }
.cookie-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding-block:12px; }
.cookie-inner p { margin:0; max-width:72ch; }
.cookie-inner a { color:#fff; text-decoration:underline; }
@media (max-width: 900px) {
  .cookie-inner { flex-direction:column; align-items:flex-start; }
}