/* ============================================================
   H&H Outfitters — Design System v2 Components
   Implements: Proposed v2 - Luxury Refinement
   All rules are additive. Legacy .btn is preserved in base.css;
   use .btn-primary / .btn-secondary / .btn-secondary-on-dark.
   ============================================================ */

@layer base {

  /* ── Typography refinements ─────────────────────────────────
     Scoped to .v2-container to avoid breaking heading sizes
     on existing lodge/season/contact pages.
  ────────────────────────────────────────────────────────────── */

  .v2-container h1,
  .v2-container h2 {
    letter-spacing: var(--ls-heading, -0.01em);
    text-wrap: pretty;
  }

  /* Eyebrow label — uppercase confidence above section titles */
  .eyebrow {
    font-family: var(--font-body, "Open Sans", sans-serif);
    font-size: var(--fs-eyebrow, 0.8125rem);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow, 0.18em);
    text-transform: uppercase;
    color: var(--copper-500, #8a4f29);
  }


  /* ── Button system — 3 tiers ────────────────────────────────
     Tier 1 — Primary (gold filled): main booking CTA
     Tier 2 — Secondary (outlined): secondary actions
     Tier 3 — Ghost (text + animated underline): tertiary
  ────────────────────────────────────────────────────────────── */

  .btn-primary,
  .btn-secondary,
  .btn-secondary-on-dark {
    font-family: var(--font-body, "Open Sans", sans-serif);
    font-size: var(--fs-small, 0.875rem);
    font-weight: 600;
    letter-spacing: var(--ls-button, 0.12em);
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition:
      background-color var(--duration-fast, 250ms) var(--ease-silk, cubic-bezier(0.4,0,0.2,1)),
      color            var(--duration-fast, 250ms) var(--ease-silk, cubic-bezier(0.4,0,0.2,1)),
      border-color     var(--duration-fast, 250ms) var(--ease-silk, cubic-bezier(0.4,0,0.2,1)),
      transform        var(--duration-fast, 250ms) var(--ease-silk, cubic-bezier(0.4,0,0.2,1)),
      box-shadow       var(--duration-smooth, 400ms) var(--ease-luxury, cubic-bezier(0.25,0.1,0.1,1));
  }

  .btn-primary:focus-visible,
  .btn-secondary:focus-visible,
  .btn-secondary-on-dark:focus-visible {
    outline: 2px solid var(--gold-500, #c9a227);
    outline-offset: 3px;
  }

  .btn-primary[disabled],
  .btn-secondary[disabled],
  .btn-secondary-on-dark[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Tier 1 — gold filled */
  .btn-primary {
    background: var(--gold-500, #c9a227);
    color: var(--ink-900, #0f0d0a);
    border-color: var(--gold-500, #c9a227);
  }
  .btn-primary:hover {
    background: var(--gold-600, #a98517);
    border-color: var(--gold-600, #a98517);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(15,13,10,.08));
  }
  .btn-primary:active {
    background: var(--gold-700, #7e6207);
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,13,10,.06));
  }

  /* Tier 2 — outlined on light */
  .btn-secondary {
    background: transparent;
    color: var(--ink-900, #0f0d0a);
    border-color: var(--ink-900, #0f0d0a);
  }
  .btn-secondary:hover {
    background: var(--ink-900, #0f0d0a);
    color: var(--bone-50, #faf7f1);
  }

  /* Tier 2 — outlined on dark backgrounds */
  .btn-secondary-on-dark {
    background: transparent;
    color: var(--bone-50, #faf7f1);
    border-color: var(--bone-50, #faf7f1);
  }
  .btn-secondary-on-dark:hover {
    background: var(--bone-50, #faf7f1);
    color: var(--ink-900, #0f0d0a);
  }





  /* ── Motion utilities ───────────────────────────────────────
     CSS-only animation helpers. No JS required.
  ────────────────────────────────────────────────────────────── */


  /* Fade-up entrance — stagger with animation-delay */
  .anim-fadeup {
    opacity: 0;
    transform: translateY(20px);
    animation: anim-fadeup var(--duration-cinematic, 800ms) var(--ease-luxury, cubic-bezier(0.25,0.1,0.1,1)) forwards;
  }
  @keyframes anim-fadeup {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Stagger helpers */
  .anim-delay-1 { animation-delay: 120ms; }
  .anim-delay-2 { animation-delay: 240ms; }
  .anim-delay-3 { animation-delay: 360ms; }
  .anim-delay-4 { animation-delay: 480ms; }



  /* ── Dark mode — improved surfaces ─────────────────────────
     Scoped to .v2-container so existing [data-theme="dark"]
     wide-section photo backgrounds are not covered.
  ────────────────────────────────────────────────────────────── */

  /* Override the flat black overlay with a real gradient for photo sections */
  [data-theme="dark"][data-photo]::before {
    background: linear-gradient(
      180deg,
      rgba(15, 13, 10, 0.45) 0%,
      rgba(15, 13, 10, 0.85) 100%
    );
  }

  /* ── Lodge Staff / Host-byline — reutilizable en todos los lodges ──
     Ported back from the compiled style.css (2026-08-05) — this
     component existed only in the build output, never in a source
     file. See docs/V2_DECISION_SHEET.md C.1.
     Llegó usando --gold-400, un token que nunca existió: los 12 sitios
     que lo llamaban traían su propio fallback y no coincidían entre sí,
     así que había cuatro dorados distintos pintando la web. Resuelto el
     6/8/26 — todos apuntan a --gold-500, el dorado de la marca.
  ────────────────────────────────────────────────────────────── */

  .host-byline {
    display: flex; align-items: center; gap: 14px;
    margin: var(--space-5, 40px) 0;
    justify-content: center;
  }
  .host-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 1.5px solid var(--gold-500, #c9a227);
  }
  .host-info {
    display: flex; flex-direction: column; gap: 3px; text-align: left;
  }
  /* on dark backgrounds */
  .host-name {
    font-family: var(--font-heading, "Tenor Sans", serif);
    font-size: 1rem; font-weight: 400;
    color: var(--bone-50, #faf7f1);
    letter-spacing: 0.01em;
  }
  .host-title {
    font-size: var(--fs-eyebrow, 0.8125rem);
    letter-spacing: var(--ls-eyebrow, 0.12em);
    text-transform: uppercase;
    color: var(--gold-500, #c9a227);
  }
  /* on light backgrounds */
  [data-theme="light"] .host-name  { color: var(--ink-800, #1a1612); }
  [data-theme="light"] .host-title { color: var(--gold-700, #7e6207); }


  /* ── FAQ accordion — el unico del sistema ────────────────────
     Antes habia dos: uno plano (.faq-item, borde inferior y un + dorado,
     en 5 paginas) y el numerado de La Portenita (.lp-faq). Se decidio el
     6/8/26 quedarse con el numerado y aplicarlo en todo el sitio, asi que
     vive aca — en style.css, que cargan todas las paginas — y no duplicado
     en el CSS de cada una.

     Dos variantes de color y nada mas:
       .faq-list              clara  — sobre bone o cualquier fondo claro
       .faq-list--dark        oscura — sobre ink

     Es <details>/<summary> nativo: sin JavaScript, accesible por defecto y
     apto para rich results de FAQPage.
  ────────────────────────────────────────────────────────────── */

  .faq-list { max-width: 860px; margin: 0 auto; }

  .faq-item { border-top: 1px solid var(--border, #e3dccd); }
  .faq-item:last-child { border-bottom: 1px solid var(--border, #e3dccd); }

  .faq-item summary {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    align-items: center; gap: 1.25rem;
    padding: 19px 0;
    cursor: pointer; list-style: none; user-select: none;
  }
  .faq-item summary::-webkit-details-marker { display: none; }

  .faq-num {
    font-family: var(--font-heading, "Tenor Sans", serif);
    font-size: 0.75rem; font-weight: 400; letter-spacing: 0.1em;
    color: var(--gold-600, #a98517); align-self: start; padding-top: 0.35em;
  }
  .faq-q {
    font-family: var(--font-heading, "Tenor Sans", serif);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 400;
    color: var(--ink-900, #0f0d0a); line-height: 1.35; letter-spacing: -0.01em;
    transition: color 200ms;
  }
  .faq-item:hover .faq-q { color: var(--copper-500, #8a4f29); }

  .faq-toggle {
    width: 30px; height: 30px; flex-shrink: 0;
    border: 1px solid var(--border, #e3dccd); border-radius: 50%;
    display: grid; place-items: center; position: relative;
    transition: background 250ms, border-color 250ms;
  }
  .faq-toggle::before, .faq-toggle::after {
    content: ''; position: absolute;
    background: var(--gold-600, #a98517); border-radius: 1px;
    transition: transform 300ms cubic-bezier(0.4,0,0.2,1), opacity 300ms, background 250ms;
  }
  .faq-toggle::before { width: 11px; height: 1.5px; }
  .faq-toggle::after  { width: 1.5px; height: 11px; }

  .faq-item[open] .faq-toggle {
    background: var(--ink-900, #0f0d0a); border-color: var(--ink-900, #0f0d0a);
  }
  .faq-item[open] .faq-toggle::before,
  .faq-item[open] .faq-toggle::after { background: #fff; }
  .faq-item[open] .faq-toggle::after { transform: scaleY(0); opacity: 0; }

  /* La apertura anima grid-template-rows de 0fr a 1fr: es la unica forma
     de transicionar a altura automatica sin medir con JS. */
  .faq-body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 360ms cubic-bezier(0.4,0,0.2,1);
  }
  .faq-item[open] .faq-body { grid-template-rows: 1fr; }
  .faq-inner {
    overflow: hidden;
    padding: 0 0 24px calc(2.5rem + 1.25rem);
  }
  .faq-inner p {
    color: var(--bone-600, #4f4636); font-weight: 300;
    font-size: var(--fs-body-lg, 1.125rem); line-height: 1.7;
    max-width: 65ch; margin: 0;
  }

  /* ── Variante oscura ───────────────────────────────────────── */
  .faq-list--dark .faq-item { border-top-color: rgba(250,247,241,0.12); }
  .faq-list--dark .faq-item:last-child { border-bottom-color: rgba(250,247,241,0.12); }
  .faq-list--dark .faq-num { color: var(--gold-300, #e6c75c); }
  .faq-list--dark .faq-q { color: var(--bone-50, #faf7f1); }
  .faq-list--dark .faq-item:hover .faq-q { color: var(--gold-300, #e6c75c); }
  .faq-list--dark .faq-toggle { border-color: rgba(250,247,241,0.28); }
  .faq-list--dark .faq-toggle::before,
  .faq-list--dark .faq-toggle::after { background: rgba(250,247,241,0.7); }
  .faq-list--dark .faq-item[open] .faq-toggle {
    background: rgba(250,247,241,0.12); border-color: rgba(250,247,241,0.4);
  }
  .faq-list--dark .faq-item[open] .faq-toggle::before,
  .faq-list--dark .faq-item[open] .faq-toggle::after { background: var(--bone-50, #faf7f1); }
  .faq-list--dark .faq-inner p { color: var(--bone-200, #c8bfa8); }

  @media (max-width: 640px) {
    .faq-item summary { grid-template-columns: 1.75rem 1fr auto; gap: 0.75rem; }
    .faq-inner { padding-left: calc(1.75rem + 0.75rem); }
  }

}