/* ============================================================================
   IRONWOOD BREWING CO + KITCHEN — v2
   assets/css/pages/legal.css
   Shared Legal Document Styles (Privacy, Terms, Cookies)
   ============================================================================
   Depends on: assets/css/main.css
   HC Web Labs — hcweblabs.com — April 2026
   ============================================================================ */


/* ============================================================================
   HERO — compact, text-only (no background image)
   ============================================================================ */

.hero--legal {
  min-block-size:   clamp(220px, 28vh, 340px);
  background-color: var(--color-barrel-char);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 3px,
      oklch(0 0 0 / 0.025) 3px,
      oklch(0 0 0 / 0.025) 6px
    );

}

.hero--legal .hero__title {
  font-size: var(--text-4xl);

}

.hero--legal .hero__subtitle {
  font-size:   var(--text-base);
  opacity:     0.65;
  font-weight: 400;
}


/* ============================================================================
   PAGE LAYOUT
   ============================================================================ */

.legal-page {
  padding-block: var(--section-pad);
  background:    var(--color-surface);
}

.legal-layout {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   clamp(2.5rem, 4vw, 5rem);
  max-inline-size:       var(--container-max);
  margin-inline:         auto;
  padding-inline:        var(--container-pad);
  align-items:           start;
}

@media (min-width: 1024px) {
  .legal-layout {
    grid-template-columns: 220px 1fr;
  }
}


/* ============================================================================
   SIDEBAR NAV
   ============================================================================ */

.legal-nav__title {
  font-family:       var(--font-heading);
  font-size:         var(--text-xs);
  font-weight:       700;
  color:             var(--color-text-muted);
  letter-spacing:    var(--tracking-widest);
  text-transform:    uppercase;
  margin-block-end:  var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end:  var(--border-1) solid var(--color-border);
  display:           block;
}

.legal-nav__links {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  list-style:     none;
}

.legal-nav__link {
  display:         block;
  font-family:     var(--font-heading);
  font-size:       var(--text-xs);
  font-weight:     500;
  color:           var(--color-text-muted);
  letter-spacing:  var(--tracking-wider);
  text-transform:  uppercase;
  padding-block:   var(--space-2);
  padding-inline:  var(--space-3);
  border-radius:   var(--radius-sm);
  text-decoration: none;
  border-inline-start: var(--border-2) solid transparent;
  transition:
    color        var(--duration-150) var(--ease-smooth),
    background   var(--duration-150) var(--ease-smooth),
    border-color var(--duration-150) var(--ease-smooth);
}

.legal-nav__link:hover {
  color:        var(--color-copper);
  background:   oklch(0.55 0.12 45 / 0.05);
  border-color: var(--color-copper);
}

.legal-nav__link.is-active {
  color:        var(--color-copper);
  background:   oklch(0.55 0.12 45 / 0.06);
  border-color: var(--color-copper);
}

/* Other legal pages links */
.legal-nav__other {
  margin-block-start: var(--space-6);
  padding-block-start:var(--space-4);
  border-block-start: var(--border-1) solid var(--color-border);
}

.legal-nav__other-title {
  font-family:       var(--font-heading);
  font-size:         var(--text-2xs);
  font-weight:       700;
  color:             var(--color-text-subtle);
  letter-spacing:    var(--tracking-widest);
  text-transform:    uppercase;
  margin-block-end:  var(--space-2);
  display:           block;
}

.legal-nav__other-link {
  display:         block;
  font-size:       var(--text-xs);
  color:           var(--color-text-muted);
  text-decoration: none;
  padding-block:   var(--space-1);
  transition:      color var(--duration-150) var(--ease-smooth);
}

.legal-nav__other-link:hover {
  color: var(--color-copper);
}

/* Mobile sidebar — horizontal scroll strip */
.legal-nav {
  position:                    static;
  overflow-x:                  auto;
  scrollbar-width:             none;
  -webkit-overflow-scrolling:  touch;
  touch-action:                pan-x;
}

.legal-nav::-webkit-scrollbar { display: none; }

.legal-nav__title { display: none; }

.legal-nav__links {
  flex-direction: row;
  gap:            var(--space-2);
}

.legal-nav__link {
  white-space:         nowrap;
  border-inline-start: none;
  border-block-end:    var(--border-2) solid transparent;
  border-radius:       0;
}

.legal-nav__link.is-active {
  border-block-end-color: var(--color-copper);
  background:             transparent;
}

.legal-nav__other { display: none; }

/* 1024px+ — restore sticky sidebar layout */
@media (min-width: 1024px) {
  .legal-nav {
    position:     sticky;
    overflow-x:   visible;
  }

  .legal-nav__title { display: block; }

  .legal-nav__links {
    flex-direction: column;
    gap:            var(--space-1);
  }

  .legal-nav__link {
    white-space:         normal;
    border-inline-start: var(--border-2) solid transparent;
    border-block-end:    none;
    border-radius:       var(--radius-sm);
  }

  .legal-nav__link.is-active {
    border-inline-start-color: var(--color-copper);
    border-block-end-color:    transparent;
    background:                oklch(0.55 0.12 45 / 0.06);
  }

  .legal-nav__other { display: block; }
}


/* ============================================================================
   LEGAL DOCUMENT BODY
   ============================================================================ */

.legal-doc {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* Last updated / meta bar */
.legal-meta {
  display:          flex;
  flex-wrap:        wrap;
  align-items:      center;
  gap:              var(--space-4);
  padding-block:    var(--space-4);
  margin-block-end: var(--space-8);
  border-block:     var(--border-1) solid var(--color-border);
}

.legal-meta__item {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
}

.legal-meta__item i {
  color:     var(--color-amber);
  font-size: 0.75rem;
}

.legal-meta__item strong {
  color:      var(--color-dark);
  font-weight:600;
}

/* Intro lead paragraph */
.legal-lead {
  font-size:        var(--text-lg);
  color:            var(--color-text-muted);
  line-height:      var(--leading-relaxed);
  margin-block-end: var(--space-8);
  padding-block-end:var(--space-8);
  border-block-end: var(--border-1) solid var(--color-border);
}

/* Section */
.legal-section {
  margin-block-end: clamp(2rem, 3vw, 3.5rem);
  padding-block-end:clamp(2rem, 3vw, 3.5rem);
  border-block-end: var(--border-1) solid var(--color-border);
  scroll-margin-block-start: calc(var(--header-height) + 80px);
}

.legal-section:last-child {
  border-block-end: none;
  margin-block-end: 0;
  padding-block-end: 0;
}

.legal-section__title {
  font-family:      var(--font-heading);
  font-size:        var(--text-xl);
  font-weight:      700;
  color:            var(--color-dark);
  letter-spacing:   var(--tracking-wide);
  text-transform:   uppercase;
  margin-block-end: var(--space-4);
  display:          flex;
  align-items:      center;
  gap:              var(--space-3);
}

/* Amber left-accent on section title */
.legal-section__title::before {
  content:      '';
  inline-size:  4px;
  block-size:   1.2em;
  background:   var(--gradient-copper-amber);
  border-radius:var(--radius-full);
  flex-shrink:  0;
}

.legal-section__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.legal-section__body p {
  font-size:   var(--text-base);
  color:       var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin:      0;
}

.legal-section__body p + p {
  margin-block-start: 0;
}

/* Subsection heading */
.legal-subsection {
  margin-block-start: var(--space-5);
}

.legal-subsection__title {
  font-family:      var(--font-heading);
  font-size:        var(--text-base);
  font-weight:      700;
  color:            var(--color-dark);
  letter-spacing:   var(--tracking-wide);
  text-transform:   uppercase;
  margin-block-end: var(--space-2);
}

/* Legal list */
.legal-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  padding-inline-start: var(--space-6);
}

.legal-list li {
  font-size:   var(--text-base);
  color:       var(--color-text-muted);
  line-height: var(--leading-relaxed);
  position:    relative;
}

.legal-list li::before {
  content:          '—';
  position:         absolute;
  inset-inline-start: calc(-1 * var(--space-6));
  color:            var(--color-amber);
  font-weight:      700;
}

/* Highlight box */
.legal-highlight {
  background:    var(--color-surface-alt);
  border:        var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-5);
  display:       flex;
  flex-direction:column;
  gap:           var(--space-3);
}

.legal-highlight p {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin:      0;
}

.legal-highlight strong {
  font-weight:600;
  color:       var(--color-dark);
}

/* Contact info box */
.legal-contact-box {
  background:    var(--color-barrel-char);
  border-radius: var(--radius-md);
  padding:       var(--space-5) var(--space-6);
  display:       flex;
  flex-direction:column;
  gap:           var(--space-3);
}

.legal-contact-box__title {
  font-family:    var(--font-heading);
  font-size:      var(--text-sm);
  font-weight:    700;
  color:          var(--color-amber);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.legal-contact-box p {
  font-size:   var(--text-sm);
  color:       var(--color-cream);
  opacity:     0.75;
  line-height: var(--leading-relaxed);
  margin:      0;
}

.legal-contact-box a {
  color:      var(--color-amber);
  text-decoration: none;
  transition: opacity var(--duration-150) var(--ease-smooth);
}

.legal-contact-box a:hover { opacity: 0.75; }

/* Disclaimer notice */
.legal-disclaimer {
  background:    var(--color-warning-bg);
  border:        var(--border-1) solid var(--color-warning);
  border-radius: var(--radius-md);
  padding:       var(--space-4) var(--space-5);
  font-size:     var(--text-sm);
  color:         var(--color-dark);
  line-height:   var(--leading-relaxed);
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-3);
}

.legal-disclaimer i {
  color:      var(--color-warning);
  flex-shrink:0;
  margin-block-start: 2px;
}

/* Table for cookies */
.legal-table-wrapper {
  overflow-x:                  auto;
  -webkit-overflow-scrolling:  touch;
  touch-action:                pan-x;
  border-radius:               var(--radius-md);
  border:                      var(--border-1) solid var(--color-border);
}

.legal-table {
  inline-size:      100%;
  border-collapse:  collapse;
  font-size:        var(--text-sm);
}

.legal-table th {
  background:   var(--color-surface-alt);
  padding:      var(--space-3) var(--space-4);
  text-align:   start;
  font-family:  var(--font-heading);
  font-size:    var(--text-xs);
  font-weight:  700;
  color:        var(--color-dark);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-block-end: var(--border-2) solid var(--color-border);
  white-space:  nowrap;
}

.legal-table td {
  padding:      var(--space-3) var(--space-4);
  color:        var(--color-text-muted);
  line-height:  var(--leading-snug);
  border-block-end: var(--border-1) solid var(--color-border);
  vertical-align: top;
}

.legal-table tr:last-child td {
  border-block-end: none;
}

.legal-table tr:hover td {
  background: var(--color-surface-alt);
}

.cookie-type {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding-block:  2px;
  padding-inline: var(--space-2);
  border-radius:  var(--radius-full);
  white-space:    nowrap;
}

.cookie-type--essential  { background: oklch(0.55 0.14 148 / 0.12); color: var(--color-success); }
.cookie-type--analytics  { background: oklch(0.68 0.15 75 / 0.12);  color: var(--color-amber-dark); }
.cookie-type--functional { background: oklch(0.54 0.13 232 / 0.12); color: var(--color-info); }


/* ── 768px+: comfortable reading measure before sidebar appears ────────── */
@media (min-width: 768px) {
  .legal-doc { max-inline-size: 72ch; margin-inline: auto; }
}

/* ── 1024px+: content width resets when sidebar layout takes over ──────── */
@media (min-width: 1024px) {
  .legal-doc { max-inline-size: none; margin-inline: 0; }
}

/* ── 1440px+: roomier sidebar rail ─────────────────────────────────────── */
@media (min-width: 1440px) {
  .legal-layout { grid-template-columns: 248px 1fr; gap: clamp(3rem, 4vw, 5rem); }
}

/* ── 480px+: large phones — meta items separate clearly ────────────────── */
@media (min-width: 480px) {
  .legal-meta { column-gap: var(--space-8); }
}

/* ── 640px+: phablets — lead paragraph steps up ────────────────────────── */
@media (min-width: 640px) {
  .legal-lead { font-size: var(--text-lg); }
}

/* ── 1280px+: desktop — rail widens ahead of the 1440 step ─────────────── */
@media (min-width: 1280px) {
  .legal-layout { grid-template-columns: 236px 1fr; }
}

/* In-content links (were inline per-anchor) */
.legal-doc a:not(.btn) { color: var(--color-copper); }