/* =========================================================
   HARBOR COFFEE HOUSE — Vintage metallic gold & black
   Loads after style.css. Palette, type and trim only.
   ========================================================= */

/* ---------- Palette ---------- */
:root, .dark, html.dark {

  /* Metallic gold ramp — deep shadow through highlight */
  --gold-shadow: #3f3018;
  --gold-deep:   #6b5328;
  --gold:        #8e723a;
  --gold-true:   #b08d4a;
  --gold-lit:    #dfca9b;
  --gold-text:   #d3b478;   /* small text on black — high contrast */

  --gold-sheen: linear-gradient(152deg,
      #e4d0a2 0%,
      #b08d4a 22%,
      #7d6330 44%,
      #d5bd86 62%,
      #8e723a 80%,
      #4a3a1c 100%);

  --gold-edge: linear-gradient(180deg, #dfca9b, #8e723a 45%, #4a3a1c);

  /* Neutrals: light values are TEXT, dark values are SURFACES */
  --paper:  #ece1cb;
  --ash:    #b9ad94;

  --black:  #12100c;
  --dark:   #17140f;
  --mid:    #b9ad94;   /* used as body text in style.css — must stay light */
  --light:  #1a1610;   /* used as a section background — must stay dark */
  --cream:  #1a1610;   /* used as a section background — must stay dark */
  --white:  #ece1cb;   /* used mostly as text — stays light */

  --background: #12100c;
  --foreground: #ece1cb;
  --card:       #1a1610;
  --popover:    #1a1610;
  --muted:      #1b1712;
  --accent:     #221d16;
  --border:     rgba(176, 141, 74, 0.24);
  --input:      rgba(176, 141, 74, 0.34);
  --ring:       #b08d4a;

  --primary: #d3b478;
  --primary-foreground: #12100c;
  --secondary: #dfca9b;
  --secondary-foreground: #12100c;

  --card-foreground:    #ece1cb;
  --popover-foreground: #ece1cb;
  --muted-foreground:   #ada291;
  --accent-foreground:  #ece1cb;

  --radius: 2px;

  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:   'Jost', 'Futura', system-ui, sans-serif;
  --font-script: 'Pinyon Script', 'Playfair Display', cursive;
}

html, body {
  background: var(--black) !important;
  color: var(--paper) !important;
  font-family: var(--font-sans) !important;
  font-weight: 300;
}

/* Warm paper grain across the whole site */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.82  0 0 0 0 0.70  0 0 0 0 0.48  0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

/* ---------- Metallic helpers ---------- */
.gold-metal {
  background: var(--gold-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75));
}

/* ---------- Type ---------- */
h1, h2, h3, h4, h5,
.section-title, .page-hero__title,
.menu-section__header h2, .menu-subsection__title,
.about-content h3, .location-info h3, .instagram .section-title a {
  font-family: var(--font-serif) !important;
  color: var(--paper) !important;
  letter-spacing: 0.01em;
}

.section-eyebrow, .page-hero__eyebrow, .menu-section__header span,
.about-founders-label {
  font-family: var(--font-sans) !important;
  color: var(--gold-text) !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  font-size: 0.7rem !important;
  font-weight: 400;
}

p, li, td, span, a, label { font-family: var(--font-sans); }

/* Body copy that style.css draws in near-black — force it light */
.about-teaser__text p,
.about-content p,
.catering-intro p,
.location-detail__item p,
.hours-table td,
.story-section__text p,
.feature-card p,
.footer__brand p {
  color: var(--ash) !important;
}

.location-detail__item h4,
.hours-table th {
  color: var(--gold-text) !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hours-table tr { border-color: rgba(176, 141, 74, 0.16) !important; }
.location-detail__item a { color: var(--gold-lit) !important; }

/* ---------- Gold rule ornament ---------- */
.rule-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px auto;
  max-width: 260px;
  color: var(--gold-true);
}
.rule-gold::before, .rule-gold::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-true), transparent);
}
.rule-gold span { font-size: 0.72rem; letter-spacing: 0.3em; }

/* ---------- Navigation ---------- */
.nav {
  background: rgba(18, 16, 12, 0.93) !important;
  border-bottom: 1px solid rgba(176, 141, 74, 0.3);
  box-shadow: 0 1px 0 rgba(228, 208, 162, 0.07);
  backdrop-filter: blur(6px);
}
.nav.scrolled { box-shadow: 0 1px 0 rgba(176,141,74,0.4), 0 10px 30px rgba(0,0,0,0.65) !important; }

.nav__logo {
  font-family: var(--font-script) !important;
  font-size: 1.8rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  background: var(--gold-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8));
}

.nav__links a {
  color: #c8bda4 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  font-size: 0.73rem !important;
}
.nav__links a:hover, .nav__links a.active { color: var(--gold-lit) !important; }

.nav__cta {
  border: 1px solid var(--gold-true) !important;
  color: var(--gold-lit) !important;
  border-radius: 2px !important;
  background: transparent !important;
}
.nav__cta:hover {
  background-image: var(--gold-sheen) !important;
  color: #17120a !important;
  border-color: var(--gold-lit) !important;
}

.nav__toggle span { background: var(--gold-lit) !important; }

/* ---------- Buttons — metallic, never invisible ---------- */
.btn, .btn--primary, .btn--outline, .btn--dark-outline {
  border-radius: 2px !important;
  font-family: var(--font-sans) !important;
  text-transform: uppercase;
  letter-spacing: 0.18em !important;
  font-size: 0.74rem !important;
  font-weight: 400 !important;
  padding: 16px 34px !important;
  transition: filter 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.btn--primary,
.btn--dark-outline:hover,
.btn--outline:hover {
  background-image: var(--gold-sheen) !important;
  background-color: #9c8040 !important;
  color: #17120a !important;
  border: 1px solid var(--gold-lit) !important;
  box-shadow:
    inset 0 1px 0 rgba(244, 233, 204, 0.75),
    inset 0 -1px 0 rgba(45, 34, 14, 0.6),
    0 2px 10px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 0 rgba(240, 228, 198, 0.35);
}
.btn--primary:hover { filter: brightness(1.12); }

/* Outline buttons: gold edge + gold text, readable on black */
.btn--outline, .btn--dark-outline {
  background: transparent !important;
  color: var(--gold-lit) !important;
  border: 1px solid var(--gold-true) !important;
  box-shadow: inset 0 0 22px rgba(176, 141, 74, 0.08);
}

/* ---------- Page hero ---------- */
.page-hero { border-bottom: 1px solid rgba(176, 141, 74, 0.32); }
.page-hero::before {
  background: linear-gradient(to bottom, rgba(18,16,12,0.74), rgba(18,16,12,0.92)) !important;
}
.page-hero__title {
  background: var(--gold-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.85));
}

/* ---------- Sections ---------- */
section, .menu-section, .home-locations, .gallery-grid,
.instagram, .catering-intro, .about-content, .location-section {
  background: transparent !important;
}

.menu-item, .home-location, .menu-subsection, .feature-card, .about-values li {
  border-color: rgba(176, 141, 74, 0.2) !important;
}
.menu-item:nth-child(even) { border-left-color: rgba(176, 141, 74, 0.2) !important; }
.menu-item__info h3, .menu-item__info h4 { color: var(--paper) !important; }
.menu-item__info p { color: var(--ash) !important; }
.menu-item__price {
  color: var(--gold-text) !important;
  font-family: var(--font-serif) !important;
}

.menu-filter-bar { border-color: rgba(176, 141, 74, 0.24) !important; }
.menu-filter__tab {
  border-radius: 2px !important;
  border: 1px solid rgba(176, 141, 74, 0.32) !important;
  background: transparent !important;
  color: #c8bda4 !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem !important;
}
.menu-filter__tab:hover { color: var(--gold-lit) !important; border-color: var(--gold-true) !important; }
.menu-filter__tab.active {
  background-image: var(--gold-sheen) !important;
  background-color: #9c8040 !important;
  color: #17120a !important;
  border-color: var(--gold-lit) !important;
  box-shadow: inset 0 1px 0 rgba(244,233,204,0.7), inset 0 -1px 0 rgba(45,34,14,0.55);
}

.menu-addons {
  border: 1px solid rgba(176, 141, 74, 0.22) !important;
  background: rgba(176, 141, 74, 0.05) !important;
  border-radius: 2px !important;
}
.menu-addons h4 {
  color: var(--gold-text) !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.72rem !important;
}
.menu-addons__list span { color: var(--paper) !important; }
.menu-note { color: var(--ash) !important; font-style: italic; }

.home-location { background: rgba(176, 141, 74, 0.045) !important; }
.home-location__badge {
  background: transparent !important;
  border: 1px solid var(--gold-true) !important;
  color: var(--gold-lit) !important;
  border-radius: 2px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.66rem !important;
}
.home-location h3 { color: var(--gold-lit) !important; }
.home-location__phone a, .menu-photo-note a { color: var(--gold-lit) !important; }

/* ---------- Forms ---------- */
.form-field label { color: var(--gold-text) !important; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.7rem !important; }
.form-field input, .form-field select, .form-field textarea {
  background: #1a1610 !important;
  color: var(--paper) !important;
  border: 1px solid rgba(176, 141, 74, 0.3) !important;
  border-radius: 2px !important;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #8f8672 !important; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--gold-true) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(176, 141, 74, 0.18);
}

/* ---------- Gallery ---------- */
.gallery-item {
  border: 1px solid rgba(176, 141, 74, 0.28);
  border-radius: 2px !important;
  overflow: hidden;
}
.gallery-item img {
  filter: sepia(0.16) saturate(0.94) contrast(1.04);
  transition: filter 0.4s ease, transform 0.6s ease;
}
.gallery-item:hover img { filter: none; transform: scale(1.03); }
.gallery-item__overlay { background: linear-gradient(to top, rgba(18,16,12,0.94), transparent) !important; }
.gallery-item__overlay span {
  font-family: var(--font-serif) !important;
  color: var(--gold-lit) !important;
  letter-spacing: 0.08em;
}

/* ---------- Footer ---------- */
.footer {
  background: #0d0b08 !important;
  border-top: 1px solid rgba(176, 141, 74, 0.32);
  box-shadow: inset 0 1px 0 rgba(228, 208, 162, 0.06);
}
.footer__logo {
  font-family: var(--font-script) !important;
  font-size: 1.85rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: var(--gold-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
.footer__brand p, .footer__hours p { color: var(--ash) !important; }
.footer__links a { color: #b3a88f !important; }
.footer__links a:hover, .footer__social { color: var(--gold-lit) !important; }
.footer__hours h4, .footer__links h4 {
  color: var(--gold-text) !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.7rem !important;
}
.footer__bottom { border-top: 1px solid rgba(176, 141, 74, 0.18) !important; }
.footer__bottom p { color: #8f8672 !important; }

/* ---------- Photo strip ---------- */
.strip-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 46px auto 0;
}
.strip-photos figure {
  position: relative;
  margin: 0;
  border: 1px solid rgba(176, 141, 74, 0.3);
  overflow: hidden;
}
.strip-photos img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  filter: sepia(0.18) saturate(0.92) contrast(1.05);
}
.strip-photos figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 12px 11px;
  background: linear-gradient(to top, rgba(18,16,12,0.94), transparent);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lit);
}

/* ---------- Menu board pages ---------- */
.board-head h1 {
  background: var(--gold-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8));
}
.board-head p { color: var(--ash) !important; }

.board-loc a {
  border: 1px solid rgba(176, 141, 74, 0.35) !important;
  color: var(--gold-lit) !important;
  border-radius: 2px !important;
}
.board-loc a:hover { background: rgba(176, 141, 74, 0.14) !important; border-color: var(--gold-true) !important; }
.board-loc a.is-current {
  background-image: var(--gold-sheen) !important;
  background-color: #9c8040 !important;
  color: #17120a !important;
  border-color: var(--gold-lit) !important;
  box-shadow: inset 0 1px 0 rgba(244,233,204,0.7), inset 0 -1px 0 rgba(45,34,14,0.55);
}
.board-loc a.is-current small { opacity: 0.8; }

.board-tab {
  border: 1px solid rgba(176, 141, 74, 0.3) !important;
  color: #c8bda4 !important;
  border-radius: 2px !important;
}
.board-tab:hover { color: var(--gold-lit) !important; border-color: var(--gold-true) !important; }
.board-tab.is-active {
  background-image: var(--gold-sheen) !important;
  background-color: #9c8040 !important;
  color: #17120a !important;
  border-color: var(--gold-lit) !important;
  box-shadow: inset 0 1px 0 rgba(244,233,204,0.7), inset 0 -1px 0 rgba(45,34,14,0.55);
}

.board__caption { color: var(--gold-text) !important; }
.board__hint { color: #8f8672 !important; }
.board__frame {
  border: 1px solid rgba(176, 141, 74, 0.35) !important;
  box-shadow: 0 0 0 1px rgba(228, 208, 162, 0.08), 0 14px 34px rgba(0, 0, 0, 0.6);
}

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 3px;
}

/* ---------- Anything still drawn in near-black text ---------- */
[style*="color: var(--black)"], [style*="color:#141414"] { color: var(--paper) !important; }