/* shell.css — Old Town Wine & Spirits: additive multi-page components (Cass 2026-07-18).
   Scarlet/charcoal/tan tokens; Oswald headings; Inter body; placeholder boxes; red seams. */

/* active-page nav state */
.nav__links a.is-active, .mnav__panel a.is-active { color: var(--scarlet); }

/* page-hero (inner pages) */
.page-hero { position: relative; overflow: hidden; background: var(--charcoal); border-bottom: 3px solid var(--scarlet); }
.page-hero__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding: clamp(2.6rem, 7vw, 4.4rem) var(--gut) clamp(1.8rem, 4vw, 2.8rem); }
.page-hero__eyebrow { font-family: var(--f-body); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--tan); }
.page-hero__title { font-family: var(--f-disp); font-weight: 700; font-size: clamp(2.3rem, 1.4rem + 4.2vw, 4.2rem); line-height: 1.04; text-transform: uppercase; letter-spacing: .02em; margin-top: .4rem; color: #fff; }
.page-hero__sub { font-size: clamp(1rem, .96rem + .4vw, 1.2rem); color: rgba(250, 247, 242, .8); margin-top: .9rem; max-width: 44rem; }

/* mobile nav (details/summary) */
.mnav { position: relative; }
.mnav__summary { display: flex; align-items: center; gap: .55rem; list-style: none; cursor: pointer; padding: .5rem .2rem; font-family: var(--f-body); font-size: .78rem; font-weight: 700; color: var(--ink2); }
.mnav__summary::-webkit-details-marker { display: none; }
.mnav__bars { position: relative; width: 1.3rem; height: 2px; background: var(--scarlet); display: inline-block; }
.mnav__bars::before, .mnav__bars::after { content: ""; position: absolute; left: 0; width: 1.3rem; height: 2px; background: var(--scarlet); }
.mnav__bars::before { top: -.42rem; }
.mnav__bars::after { top: .42rem; }
.mnav[open] .mnav__bars { background: transparent; }
.mnav[open] .mnav__bars::before { top: 0; transform: rotate(45deg); }
.mnav[open] .mnav__bars::after { top: 0; transform: rotate(-45deg); }
.mnav__panel { position: absolute; right: 0; top: calc(100% + .6rem); z-index: 70; list-style: none; min-width: 15rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--rad); box-shadow: 0 12px 30px rgba(33, 28, 26, .14); padding: .5rem; }
.mnav__panel li a { display: block; padding: .7rem .85rem; font-family: var(--f-body); font-size: .85rem; font-weight: 500; color: var(--ink2); border-radius: 3px; }
.mnav__panel li a:hover, .mnav__panel li a.is-active { color: var(--scarlet); background: var(--paper); }

/* FAQ accordion */
.faq-list { margin-top: clamp(1.6rem, 4vw, 2.4rem); border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.05rem, .9rem + .6vw, 1.3rem); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); padding: 1.1rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: none; border: none; cursor: pointer; }
.faq-q:hover { color: var(--scarlet); }
.faq-q .faq-icon { flex-shrink: 0; width: 1.4rem; height: 1.4rem; border: 2px solid var(--scarlet); border-radius: 50%; display: grid; place-items: center; font-size: 1rem; line-height: 1; color: var(--scarlet); transition: transform .25s; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-a { padding-bottom: 1.2rem; font-size: 1.02rem; color: var(--ink2); line-height: 1.65; }

/* contact/visit info list */
.info-list { list-style: none; margin-top: 1rem; }
.info-list li { padding-block: .5rem; border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--ink2); display: flex; gap: .6rem; align-items: baseline; }
.info-list strong { color: var(--ink); min-width: 5.5rem; flex-shrink: 0; }

/* staff picks page */
.picks-cards { margin-top: clamp(1.6rem, 4vw, 2.4rem); display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
.pick-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--rad); padding: 1.5rem; }
.pick-card__eyebrow { font-family: var(--f-body); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--scarlet); }
.pick-card__title { font-family: var(--f-disp); font-weight: 700; font-size: 1.55rem; text-transform: uppercase; margin-top: .3rem; color: var(--ink); }
.pick-card__text { margin-top: .55rem; font-size: .98rem; color: var(--ink2); }

@media (min-width: 700px) {
  .picks-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 700px) { .contact__grid { grid-template-columns: 1.15fr 1fr; gap: 3rem; } }
@media (max-width: 849px) { .nav__cta { display: none; } }
@media (min-width: 850px) { .mnav { display: none; } }