/*
 * CumbriaGuru — global.css
 * Shared styles for header, footer, and site-wide tokens.
 * Each page's own stylesheet handles layout below the header.
 */

/* ============================================================
   RESET & ROOT TOKENS
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #f7f5f0;
  --white:      #ffffff;
  --ink:        #1e1e1e;
  --mid:        #4a4a4a;
  --quiet:      #8a8680;
  --rule:       #e4e0d8;
  --moss:       #3b5240;
  --copper:     #a85c28;
  --amber:      #c8842a;
  --verdict-bg: #eef3ee;
  --serif:      'Lora', Georgia, serif;
  --sans:       'Instrument Sans', sans-serif;
  --nav-h:      60px;
}

html  { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background:  var(--bg);
  color:        var(--ink);
  line-height:  1.6;
  font-size:    16px;
}

/* prevent body scroll when mobile nav is open */
body.nav-open { overflow: hidden; }

img  { display: block; max-width: 100%; }
a    { color: inherit; }
ul   { list-style: none; }

/* ============================================================
   NAV — SHARED
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav {
  height:           var(--nav-h);
  background:       rgba(247,245,240,0.94);
  backdrop-filter:  blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:    1px solid var(--rule);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 2.5rem;
  gap:              1.5rem;
}

/* Logo */
.nav-logo {
  font-family:     var(--serif);
  font-size:       1.25rem;
  font-weight:     700;
  color:           var(--ink);
  text-decoration: none;
  letter-spacing:  -0.01em;
  flex-shrink:     0;
}
.nav-logo span { color: var(--moss); }

/* Primary links (default context) */
.nav-links {
  display:     flex;
  align-items: center;
  gap:         2rem;
  flex:        1;
  justify-content: center;
}

.nav-link {
  font-size:       0.875rem;
  font-weight:     500;
  color:           var(--quiet);
  text-decoration: none;
  letter-spacing:  0.01em;
  transition:      color 0.18s;
  white-space:     nowrap;
}
.nav-link:hover,
.nav-link--active { color: var(--ink); }

/* Back link (listing context) */
.nav-back {
  font-size:       0.8rem;
  color:           var(--quiet);
  text-decoration: none;
  display:         flex;
  align-items:     center;
  gap:             0.4rem;
  flex:            1;
  transition:      color 0.18s;
}
.nav-back::before { content: '←'; }
.nav-back:hover   { color: var(--ink); }

/* Right-side slot */
.nav-right {
  display:     flex;
  align-items: center;
  gap:         0.85rem;
  flex-shrink: 0;
}

.nav-signin {
  font-size:       0.8rem;
  font-weight:     500;
  color:           var(--ink);
  text-decoration: none;
  padding:         0.4rem 1.1rem;
  border:          1.5px solid var(--rule);
  border-radius:   100px;
  transition:      border-color 0.18s, background 0.18s;
}
.nav-signin:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }

.nav-account { font-size: 0.8rem; font-weight: 500; color: var(--ink); text-decoration: none; }

.nav-save {
  background:   none;
  border:       1.5px solid var(--rule);
  border-radius: 100px;
  padding:      0.4rem 1rem;
  font-family:  var(--sans);
  font-size:    0.78rem;
  font-weight:  500;
  color:        var(--mid);
  cursor:       pointer;
  display:      flex;
  align-items:  center;
  gap:          0.4rem;
  transition:   border-color 0.18s, color 0.18s;
}
.nav-save:hover { border-color: var(--ink); color: var(--ink); }
.nav-save.is-saved { border-color: var(--moss); color: var(--moss); background: var(--verdict-bg); }

/* Hamburger */
.nav-hamburger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        4px;
  flex-shrink:    0;
}
.nav-hamburger span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--ink);
  border-radius: 2px;
  transition:    transform 0.22s, opacity 0.22s;
}

/* Mobile drawer */
.nav-drawer {
  display:    none;
  position:   fixed;
  inset:      var(--nav-h) 0 0 0;
  background: var(--bg);
  overflow-y: auto;
  padding:    1.5rem 2rem 3rem;
  z-index:    90;
  transform:  translateY(-8px);
  opacity:    0;
  transition: transform 0.22s ease, opacity 0.22s ease;
  pointer-events: none;
}
.nav-drawer.is-open {
  transform:      translateY(0);
  opacity:        1;
  pointer-events: auto;
}

.nav-drawer__links {
  display:        flex;
  flex-direction: column;
  gap:            0;
}
.nav-drawer__links li a {
  display:         block;
  padding:         0.85rem 0;
  font-size:       1rem;
  font-weight:     500;
  color:           var(--ink);
  text-decoration: none;
  border-bottom:   1px solid var(--rule);
  transition:      color 0.15s;
}
.nav-drawer__links li a:hover { color: var(--moss); }
.nav-drawer__divider {
  height:        1px;
  background:    transparent;
  margin:        0.5rem 0;
}

/* ============================================================
   SUGGEST BAR
   ============================================================ */

.suggest-bar {
  background: var(--ink);
  padding:    3.5rem 2.5rem;
}

.suggest-bar__inner {
  max-width:       1120px;
  margin:          0 auto;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             2rem;
}

.suggest-bar__title {
  font-family:    var(--serif);
  font-size:      1.6rem;
  font-weight:    700;
  color:          var(--white);
  letter-spacing: -0.015em;
  margin-bottom:  0.3rem;
}

.suggest-bar__sub {
  font-size: 0.88rem;
  color:     rgba(255,255,255,0.5);
}

/* ============================================================
   BUTTONS (shared)
   ============================================================ */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
  font-family:     var(--sans);
  font-size:       0.875rem;
  font-weight:     500;
  text-decoration: none;
  border-radius:   100px;
  padding:         0.8rem 1.8rem;
  cursor:          pointer;
  border:          none;
  transition:      background 0.18s, color 0.18s, transform 0.18s, border-color 0.18s;
  white-space:     nowrap;
  flex-shrink:     0;
}

.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: var(--moss); transform: translateY(-1px); }

.btn--outline-white {
  background:   transparent;
  color:        var(--white);
  border:       1.5px solid rgba(255,255,255,0.35);
}
.btn--outline-white:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.65); }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: #1a1c1e;
  color:      rgba(255,255,255,0.45);
}

.site-footer__inner {
  max-width:  1120px;
  margin:     0 auto;
  padding:    4rem 2.5rem 3rem;
  display:    grid;
  grid-template-columns: 240px 1fr;
  gap:        3rem;
}

/* Brand column */
.footer-brand {}

.footer-logo {
  font-family:     var(--serif);
  font-size:       1.3rem;
  font-weight:     700;
  color:           var(--white);
  text-decoration: none;
  display:         inline-block;
  margin-bottom:   0.75rem;
}
.footer-logo span { color: var(--moss); }

.footer-strapline {
  font-size:   0.82rem;
  line-height: 1.6;
  color:       rgba(255,255,255,0.38);
}

/* Nav columns */
.footer-nav {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1.5rem;
}

.footer-nav__heading {
  font-size:      0.65rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.35);
  margin-bottom:  0.9rem;
}

.footer-nav ul { display: flex; flex-direction: column; gap: 0.55rem; }

.footer-nav a {
  font-size:       0.82rem;
  color:           rgba(255,255,255,0.42);
  text-decoration: none;
  transition:      color 0.18s;
}
.footer-nav a:hover { color: rgba(255,255,255,0.85); }

/* Bottom bar */
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding:    1.25rem 2.5rem;
  display:    flex;
  align-items: center;
  justify-content: space-between;
  font-size:  0.75rem;
  color:      rgba(255,255,255,0.28);
  max-width:  100%;
  gap:        1rem;
  flex-wrap:  wrap;
}

.footer-disclaimer { font-style: italic; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  /* Nav */
  .nav { padding: 0 1.5rem; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-drawer { display: block; }

  /* Footer */
  .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem 2rem; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .site-footer__bottom { padding: 1.25rem 1.5rem; flex-direction: column; align-items: flex-start; gap: 0.4rem; }

  /* Suggest bar */
  .suggest-bar { padding: 3rem 1.5rem; }
  .suggest-bar__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--quiet, #696969);
}

.card-meta-likes {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #c0392b;
  font-weight: 600;
}

.card-meta-likes svg {
  flex-shrink: 0;
  margin-bottom: 1px;
}

.card-meta-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.stars-filled { color: #e8a317; letter-spacing: -0.02em; }
.stars-empty  { color: #d8d8d8; letter-spacing: -0.02em; }

.card-meta-rating-num {
  font-weight: 700;
  color: var(--ink, #1d1d1d);
  font-size: 0.8rem;
}

.card-meta-review-count {
  color: var(--quiet, #888);
  font-size: 0.75rem;
}

.card-meta-sep {
  color: #ccc;
  font-size: 0.7rem;
}