/* ============================================
   Origins Coffee — Dark Norse theme
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&family=Inter:wght@300;400;500;700&display=swap');

:root {
  --bg: #000000;            /* pure black — matches the logo's background */
  --bg-elev: #0f0f0f;
  --bg-card: #161616;
  --border: #2a2a2a;
  --text: #f0ebe2;
  --text-dim: #a89e8b;
  --accent: #c2a878;        /* warm brass */
  --accent-dim: #8a774e;
  --rust: #b34a2a;
  --maxw: 1200px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-weight: 300;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 1rem; }
h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; color: var(--text-dim); }

a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--text); }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ NAVIGATION ============ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s, opacity 0.5s;
}
/* On the homepage we want the nav to start transparent so the hero
   gets the full viewport (logo lands at viewport center, matching the
   intro video). It fills back in once the user scrolls past the hero. */
.nav.nav-transparent {
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  backdrop-filter: none;
  border-bottom: none;
}
.nav.nav-transparent.scrolled {
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
/* Hide nav while the intro overlay is showing */
body.intro-active .nav { opacity: 0; pointer-events: none; }
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  color: var(--text);
}
.nav-brand span { color: var(--accent); }
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}
.nav-links a.active,
.nav-links a:hover { color: var(--accent); }

@media (max-width: 700px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 0.72rem; letter-spacing: 0.12em; }
  .nav-brand { font-size: 0.95rem; }
}

/* ============ HERO ============ */
/* The hero displays the literal last frame of the intro video as a static
   image, sized exactly like the video overlay above it (16:9, object-fit:
   contain, viewport-anchored). Because the frame and the video render with
   identical geometry, the cross-fade between them is pixel-perfect on every
   browser and viewport size. No JS-measured math required. */
.hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.hero-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.hero-below {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4vh;
  padding: 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s ease-in 0.4s, transform 0.9s ease-out 0.4s;
  pointer-events: none;
}
.hero-below.revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hero-tagline {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-dim);
  max-width: 600px;
  margin: 0 auto 2.5rem;
}
.btn {
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: all .25s;
}
.btn:hover {
  background: var(--accent);
  color: var(--bg);
}
.btn + .btn { margin-left: 14px; }
.btn-solid {
  background: var(--accent);
  color: var(--bg);
}
.btn-solid:hover {
  background: var(--text);
  border-color: var(--text);
}

/* ============ SECTIONS ============ */
.section {
  padding: 100px 0;
  border-top: 1px solid var(--border);
}
.section-dark { background: var(--bg-elev); }

.section-heading {
  text-align: center;
  margin-bottom: 60px;
}
.section-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
.section-heading h2 { margin-bottom: 8px; }
.section-heading .divider {
  width: 60px;
  height: 1px;
  background: var(--accent);
  margin: 18px auto 0;
}

/* ============ PAGE HEADER ============ */
.page-header {
  padding: 110px 24px 60px;
  text-align: center;
  background:
    radial-gradient(ellipse at center top, #1a1a1a 0%, transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.page-header h1 { margin-bottom: 12px; }
.page-header p { color: var(--text-dim); max-width: 600px; margin: 0 auto; }

/* ============ FEATURE GRID ============ */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
@media (max-width: 800px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; gap: 30px; }
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 36px 28px;
  text-align: center;
  transition: border-color .25s, transform .25s;
}
.card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-4px);
}
.card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  color: var(--accent);
}

/* ============ MENU ============ */
.menu-category {
  margin-bottom: 60px;
}
.menu-category-title {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  color: var(--accent);
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}
.menu-items {
  max-width: 720px;
  margin: 0 auto;
}
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px dashed var(--border);
  gap: 20px;
}
.menu-item:last-child { border-bottom: none; }
.menu-item-info { flex: 1; }
.menu-item-name {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: var(--text);
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.menu-item-desc { color: var(--text-dim); font-size: 0.9rem; }
.menu-item-price {
  font-family: 'Cinzel', serif;
  color: var(--accent);
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
}

/* ============ CONTACT ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-info-block {
  margin-bottom: 28px;
}
.contact-info-block h4 {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.contact-info-block p { color: var(--text); margin-bottom: 0; }
.hours-list { list-style: none; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text-dim);
}
.hours-list li:last-child { border-bottom: none; }
.hours-list span:first-child { color: var(--text); }

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  margin-bottom: 14px;
  transition: border-color .2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-form textarea { min-height: 140px; resize: vertical; }

/* ============ ABOUT ============ */
.about-img-wrap {
  border: 1px solid var(--border);
  padding: 30px;
  background: var(--bg-elev);
}
.about-text p {
  font-size: 1.05rem;
  line-height: 1.8;
}
.values-list {
  list-style: none;
  margin-top: 24px;
}
.values-list li {
  padding: 10px 0 10px 28px;
  position: relative;
  color: var(--text);
}
.values-list li::before {
  content: "⚔";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* ============ RUNE DIVIDER ============ */
.rune-divider {
  text-align: center;
  margin: 30px 0;
  color: var(--accent);
  font-size: 1.4rem;
  letter-spacing: 1.2em;
  opacity: 0.6;
}

/* ============ HERO TAGLINE (replaces baked-in tagline on logo) ============ */
.hero-veteran {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: clamp(0.85rem, 1.6vw, 1.15rem);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--text);
  margin: 8px 0 36px;
  text-align: center;
}

/* ============ VIDEO INTRO OVERLAY ============ */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.2s ease-out;
}
.intro-overlay.fading { opacity: 0; }
.intro-overlay.hidden { display: none; }

.intro-video {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* keep aspect so logo position matches the page logo */
  background: #000;
}

.intro-skip {
  position: absolute;
  bottom: 30px;
  right: 30px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.intro-skip:hover {
  background: rgba(0,0,0,0.8);
  border-color: var(--accent);
  color: var(--accent);
}

/* Lock scroll while intro is playing */
body.intro-active { overflow: hidden; }

/* ============ FOOTER ============ */
.footer {
  background: #050505;
  border-top: 1px solid var(--border);
  padding: 50px 24px 30px;
  text-align: center;
}
.footer-brand {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.3em;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 8px;
}
.footer-tag {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.footer-nav {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.footer-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.footer-copy {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

/* ============ NEWSLETTER WIDGET (public footer) ============ */
.newsletter-widget {
  max-width: 480px;
  margin: 0 auto 40px;
}
.newsletter-widget h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.25em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.newsletter-widget p {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 14px;
}
.newsletter-widget form {
  display: flex;
  gap: 8px;
}
.newsletter-widget input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 14px;
  font-size: 0.92rem;
  font-family: inherit;
}
.newsletter-widget input:focus { outline: none; border-color: var(--accent); }
.newsletter-widget button {
  padding: 0 22px;
  background: var(--accent);
  color: var(--bg);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.newsletter-widget button:hover { background: var(--text); }
.newsletter-thanks {
  color: var(--accent);
  font-size: 0.9rem;
  text-align: center;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ============================================================
   MOBILE — phones (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {

  /* Nav */
  .nav-inner { padding: 12px 16px; }
  .nav-brand { font-size: 0.78rem; letter-spacing: 0.14em; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 0.65rem; letter-spacing: 0.10em; }

  /* Hero — stack the two CTAs vertically so they don't squish */
  .hero-below { bottom: 5vh; padding: 0 16px; }
  .hero-below > div { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 280px; }
  .btn { padding: 14px 20px; font-size: 0.78rem; letter-spacing: 0.18em; width: 100%; text-align: center; }
  .btn + .btn { margin-left: 0; }

  /* Sections — less vertical breathing room */
  .section { padding: 60px 0; }
  .section-heading { margin-bottom: 40px; }

  /* Page header (about/menu/contact) */
  .page-header { padding: 88px 16px 40px; }
  .page-header h1 { font-size: 1.7rem; }
  .page-header p { font-size: 0.92rem; }

  /* Cards */
  .grid-3 { gap: 18px; }
  .card { padding: 28px 22px; }

  /* About: about-img-wrap padding shrinks */
  .about-img-wrap { padding: 18px; }
  .about-text p { font-size: 0.95rem; line-height: 1.7; }

  /* Menu category */
  .menu-category-title { font-size: 1.15rem; letter-spacing: 0.06em; }
  .menu-item-name { font-size: 1rem; }
  .menu-item-desc { font-size: 0.85rem; }

  /* Contact form spacing */
  .contact-form input, .contact-form textarea { padding: 12px 14px; font-size: 0.92rem; }
  .contact-info-block h4 { font-size: 0.78rem; }
  .hours-list li { font-size: 0.88rem; }

  /* Newsletter — stack input + button on tight screens */
  .newsletter-widget form { flex-direction: column; gap: 10px; }
  .newsletter-widget button { padding: 14px; width: 100%; }

  /* Footer */
  .footer { padding: 40px 16px 24px; }
  .footer-nav { gap: 14px; }
  .footer-nav a { font-size: 0.7rem; letter-spacing: 0.12em; }
  .footer-brand { font-size: 0.85rem; letter-spacing: 0.25em; }
  .footer-tag { font-size: 0.62rem; letter-spacing: 0.3em; }

  /* Rune dividers — smaller on mobile */
  .rune-divider { font-size: 1rem; letter-spacing: 0.5em; }

  /* Container padding tighter */
  .container { padding: 0 16px; }
}

/* ============================================================
   MOBILE — very small phones (≤ 380px)
   ============================================================ */
@media (max-width: 380px) {
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 0.58rem; }
  .nav-brand { font-size: 0.7rem; }
  .page-header h1 { font-size: 1.45rem; }
}