/* css/layout.css — Navigation, footer, page structure */

/* ── TOP ANNOUNCEMENT BAR ────────────────────────────── */
.announce-bar {
  background: var(--amber);
  color: var(--soil);
  font-size: 12px; font-weight: 600;
  text-align: center; padding: 9px 1rem;
  letter-spacing: .04em;
  position: relative; z-index: 200;
}
@media (max-width: 768px) {
  .announce-bar {
    /* Scrolls away on mobile — frees header space for content */
    font-size: 11px;
    padding: 7px .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.announce-bar a { color: var(--soil); text-decoration: underline; }

/* ── HEADER / NAV ───────────────────────────────────── */
.site-header {
  background: var(--bark);
  border-bottom: 1px solid rgba(200,131,42,.15);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(12px);
  /* iOS safe area for notch/Dynamic Island */
  padding-top: env(safe-area-inset-top, 0px);
}
.header-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 1.5rem; height: 68px;
}

.site-logo {
  display: flex; flex-direction: column; text-decoration: none;
  flex-shrink: 0;
}
.site-logo .logo-mark {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; letter-spacing: -.02em;
  color: var(--gold); line-height: 1;
}
.site-logo .logo-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: var(--stone);
  margin-top: 1px;
}

.site-nav {
  display: flex; align-items: center; gap: 0; margin-left: 1rem;
}
.site-nav a {
  color: var(--stone); text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  padding: 0 .875rem; height: 68px;
  display: flex; align-items: center;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.site-nav a:hover { color: var(--cream); }
.site-nav a.active { color: var(--gold); border-bottom-color: var(--gold); }

.header-actions {
  display: flex; align-items: center; gap: .75rem; margin-left: auto;
}

.btn-cart {
  display: flex; align-items: center; gap: 8px;
  background: var(--amber); color: var(--soil);
  padding: 9px 18px; border-radius: 4px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  border: none; cursor: pointer;
  transition: background .2s, transform .15s;
}
.btn-cart:hover { background: var(--gold); transform: translateY(-1px); }
.cart-badge {
  background: var(--soil); color: var(--gold);
  width: 19px; height: 19px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  transition: transform .2s;
}
.btn-cart:hover .cart-badge { transform: scale(1.15); }

.btn-header-cta {
  background: transparent; color: var(--cream);
  padding: 9px 16px; border-radius: 4px;
  font-size: 13px; font-weight: 500;
  border: 1px solid rgba(250,245,236,.2);
  text-decoration: none; transition: all .2s;
  white-space: nowrap;
}
.btn-header-cta:hover { border-color: var(--amber); color: var(--amber); }

/* Mobile hamburger */
.nav-toggle {
  display: none; background: none; border: none;
  color: var(--cream); font-size: 22px; padding: 4px; margin-left: auto;
}

/* Mobile menu overlay */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 98;
  background: var(--bark); padding: 100px 2rem 2rem;
  flex-direction: column; gap: .5rem;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  color: var(--cream); text-decoration: none;
  font-family: var(--font-display); font-size: 36px; font-weight: 600;
  padding: .5rem 0; border-bottom: 1px solid rgba(200,131,42,.1);
  transition: color .2s;
}
@media (max-width: 390px) {
  .mobile-nav a { font-size: 28px; padding: .375rem 0; }
  .mobile-nav   { padding-top: 80px; }
}
.mobile-nav a:hover { color: var(--gold); }
.mobile-nav-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: none; color: var(--stone);
  font-size: 28px; cursor: pointer;
}

/* ── BREADCRUMBS ─────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--gravel);
  padding: 1rem 0; flex-wrap: wrap;
}
.breadcrumb a { color: var(--gravel); text-decoration: none; }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb .sep { color: var(--clay); }
.breadcrumb .current { color: var(--stone); }

/* ── PAGE HERO (sub-pages) ───────────────────────────── */
.page-hero {
  background: var(--bark);
  padding: 4rem 1.5rem 3rem;
  border-bottom: 1px solid rgba(200,131,42,.1);
}
.page-hero-inner { max-width: var(--max-w); margin: 0 auto; }

/* ── FOOTER ─────────────────────────────────────────── */
.site-footer {
  background: var(--soil);
  border-top: 1px solid rgba(200,131,42,.1);
  padding: 3rem 1.5rem 1.75rem;
}
.footer-inner {
  max-width: var(--max-w); margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem; margin-bottom: 2rem;
}
.footer-brand .logo-mark {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; color: var(--gold);
  letter-spacing: -.02em; margin-bottom: .5rem;
}
.footer-brand p {
  font-size: 13px; color: var(--gravel); line-height: 1.7;
  margin-bottom: 1.25rem; max-width: 280px;
}
.footer-social {
  display: flex; gap: 10px;
}
.social-btn {
  width: 36px; height: 36px; border-radius: 4px;
  background: var(--humus); border: 1px solid rgba(200,131,42,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; text-decoration: none; color: var(--stone);
  transition: all .2s;
}
.social-btn:hover { background: var(--amber); color: var(--soil); border-color: var(--amber); }

.footer-col h5 {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--amber);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: .5rem; }
.footer-col ul a {
  font-size: 13px; color: var(--gravel); text-decoration: none;
  transition: color .2s;
}
.footer-col ul a:hover { color: var(--cream); }

.footer-hours p {
  font-size: 13px; color: var(--gravel); line-height: 1.8; margin-bottom: .5rem;
}
.footer-hours strong { color: var(--stone); }

.footer-bottom {
  border-top: 1px solid rgba(200,131,42,.08);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  font-size: 12px; color: var(--gravel);
}
.footer-bottom a { color: var(--gravel); text-decoration: none; }
.footer-bottom a:hover { color: var(--amber); }
.footer-legal { display: flex; gap: 1.5rem; }

/* ── GRID HELPERS ───────────────────────────────────── */
.two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.four-col  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

/* ── RESPONSIVE LAYOUT ──────────────────────────────── */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .four-col   { grid-template-columns: repeat(2, 1fr); }
  .three-col  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .site-nav, .header-actions .btn-header-cta { display: none; }
  .nav-toggle { display: flex; }
  .header-inner { gap: .75rem; padding: 0 1rem; height: 56px; }
  /* Keep the cart button visible */
  .btn-cart { padding: 8px 14px; font-size: 12px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .two-col   { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr 1fr; }
  .four-col  { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 1rem; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; gap: 1.25rem; }
  .three-col, .four-col { grid-template-columns: 1fr; }
}

/* ── IMAGE LOGO ──────────────────────────────────────────── */
.site-logo-img {
  display: flex; align-items: center;
  flex-shrink: 0; text-decoration: none;
  /* Override text-logo styles */
  flex-direction: row;
}

.header-logo-img {
  height: 52px;       /* fits within 64px header with padding */
  width: auto;
  display: block;
  /* Logo has white background — make it work on dark header */
  filter: drop-shadow(0 0 0px transparent);
  /* Transparent background shows correctly since PNG has RGBA */
}

.footer-logo-img {
  height: 80px;
  width: auto;
  display: block;
  margin-bottom: .75rem;
}

/* Mobile: slightly smaller */
@media (max-width: 480px) {
  .header-logo-img { height: 44px; }
}