/* Homepage-specific styles building on base.css */

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-surface); border-bottom: 1px solid var(--gray-200); }
.header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-7); }
.brand__link { font-weight: var(--weight-bold); font-size: 1.125rem; color: var(--gray-900); text-decoration: none; }
.brand__link:hover { color: var(--color-primary); }

/* Mobile nav toggle */
.nav-toggle { display: inline-flex; align-items: center; gap: var(--space-5); }
.nav-toggle__bars { width: 18px; height: 12px; position: relative; display: inline-block; }
.nav-toggle__bars::before, .nav-toggle__bars::after, .nav-toggle__bars { content: ""; display: block; position: absolute; left: 0; right: 0; height: 2px; background: var(--gray-800); border-radius: 2px; }
.nav-toggle__bars { top: 5px; }
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }

/* Primary nav */
.primary-nav { position: fixed; inset-inline: 0; top: 64px; background: var(--color-surface); border-top: 1px solid var(--gray-200); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform var(--transition-base), opacity var(--transition-base); box-shadow: var(--shadow-sm); }
.primary-nav .nav { padding: var(--space-7) var(--space-9); flex-direction: column; }
.primary-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .primary-nav { position: static; inset: auto; transform: none; opacity: 1; pointer-events: auto; background: transparent; border: 0; box-shadow: none; }
  .primary-nav .nav { flex-direction: row; padding: 0; }
}

/* Hero */
.hero .lead { font-size: clamp(1rem, 0.5vw + 1rem, 1.25rem); color: var(--gray-700); }
.hero__grid { display: flex; align-items: center; }
.hero__figure { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }

/* Cards within sections */
.card p strong { font-size: var(--text-2xl); }
.card ul { padding-left: 1rem; }
.card ul li { list-style: disc; }

/* Footer */
.site-footer { background: var(--gray-50); border-top: 1px solid var(--gray-200); padding-top: var(--space-14); }
.footer-brand { font-size: 1.125rem; }
.footer-heading { font-size: 1rem; margin-bottom: var(--space-5); }
.footer-links { display: grid; gap: var(--space-4); }
.footer-links a { color: var(--gray-700); text-decoration: none; }
.footer-links a:hover { color: var(--gray-900); text-decoration: underline; }
.footer-bottom { padding-block: var(--space-9); border-top: 1px solid var(--gray-200); margin-top: var(--space-12); display: flex; justify-content: space-between; align-items: center; }

/* Cookie banner */
.cookie-banner { position: sticky; bottom: 0; inset-inline: 0; background: var(--gray-900); color: #fff; padding-block: var(--space-7); box-shadow: var(--shadow-md); display: none; }
.cookie-banner a { color: #93c5fd; }
.cookie-banner__inner { display: flex; gap: var(--space-7); align-items: center; justify-content: space-between; }
.cookie-text { max-width: 70ch; }
@media (max-width: 767px) {
  .cookie-banner__inner { flex-direction: column; align-items: flex-start; }
}

/* Minor utilities */
.focusable:focus { box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
.w-100 { width: 100%; }
.order-1 { order: 1; }
.order-2 { order: 2; }
@media (min-width: 768px) { .order-1, .order-2 { order: initial; } }