/* ============================================
   COMMON.CSS — Edit this file to retheme the entire site
   ============================================ */

/* ── BRAND COLORS (change these to match client) ── */
:root {
  --brand-primary:    #C8963E;   /* Main accent — gold/amber */
  --brand-secondary:  #8B4513;   /* Secondary — warm brown */
  --brand-dark:       #1A1208;   /* Rich dark */
  --brand-light:      #FDF8F0;   /* Warm off-white */

  /* ── FONT FAMILIES ── */
  --font-display:     'Playfair Display', Georgia, serif;
  --font-body:        'Lato', 'Helvetica Neue', sans-serif;

  /* ── SITE LABEL DEFAULTS (override per page or via JS) ── */
  --site-name:        "MsgFirst Restaurant";   /* not used in CSS, for reference */

  /* ── LIGHT THEME (default) ── */
  --bg-body:          #FDF8F0;
  --bg-surface:       #FFFFFF;
  --bg-surface-alt:   #F5EFE4;
  --text-primary:     #1A1208;
  --text-secondary:   #5C4A2A;
  --text-muted:       #9A8060;
  --border-color:     #E2D4BB;
  --nav-bg:           rgba(253, 248, 240, 0.95);
  --footer-bg:        #1A1208;
  --footer-text:      #C8963E;
  --card-shadow:      0 4px 24px rgba(26,18,8,0.08);
  --overlay-dark:     rgba(26,18,8,0.55);
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg-body:          #120D04;
  --bg-surface:       #1E1509;
  --bg-surface-alt:   #2A1E0E;
  --text-primary:     #F5EFE4;
  --text-secondary:   #D4B896;
  --text-muted:       #8A7060;
  --border-color:     #3A2E1E;
  --nav-bg:           rgba(18,13,4,0.96);
  --footer-bg:        #0A0804;
  --footer-text:      #C8963E;
  --card-shadow:      0 4px 24px rgba(0,0,0,0.4);
  --overlay-dark:     rgba(0,0,0,0.7);
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg-body);
  color: var(--text-primary);
  transition: background 0.3s, color 0.3s;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a  { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.2;
}

/* ── UTILITY ── */
.container        { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }
.section-pad      { padding: 5rem 0; }
.text-center      { text-align: center; }
.text-accent      { color: var(--brand-primary); }
.btn              { display: inline-block; padding: 0.75rem 2rem; border-radius: 2px; font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 0.25s; border: 2px solid transparent; }
.btn-primary      { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.btn-primary:hover{ background: var(--brand-secondary); border-color: var(--brand-secondary); text-decoration: none; }
.btn-outline      { background: transparent; color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline:hover{ background: var(--brand-primary); color: #fff; text-decoration: none; }
.divider-ornament { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 2rem; }
.divider-ornament::before,
.divider-ornament::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.divider-ornament span { color: var(--brand-primary); font-size: 1.1rem; }
.section-title    { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 0.5rem; }
.section-sub      { color: var(--text-muted); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; }

/* ── NAVBAR ── */
.navbar {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  transition: background 0.3s;
}
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 1.5rem;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--brand-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.nav-logo span { color: var(--text-primary); }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a {
  font-size: 0.88rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary); text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--brand-primary); }
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Theme toggle */
.theme-toggle {
  background: none; border: 1px solid var(--border-color);
  border-radius: 50%; width: 36px; height: 36px;
  cursor: pointer; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: all 0.2s;
}
.theme-toggle:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text-primary); transition: all 0.3s; border-radius: 2px; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  display: none; position: fixed; top: 68px; left: 0; width: 100%;
  background: var(--bg-surface); border-bottom: 1px solid var(--border-color);
  padding: 1.5rem; z-index: 999;
  flex-direction: column; gap: 1.25rem;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { font-size: 1.1rem; color: var(--text-primary); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; }
.mobile-nav a:hover { color: var(--brand-primary); }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-cta   { display: none; }
}

/* ── FOOTER ── */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem; margin-bottom: 3rem;
}
.footer-brand { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 1rem; }
.footer-brand span { opacity: 0.6; }
.footer-col h4 { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-primary); margin-bottom: 1rem; }
.footer-col p, .footer-col a { font-size: 0.92rem; color: rgba(200,150,62,0.7); line-height: 2; text-decoration: none; display: block; }
.footer-col a:hover { color: var(--brand-primary); }
.footer-bottom { border-top: 1px solid rgba(200,150,62,0.2); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { font-size: 0.82rem; color: rgba(200,150,62,0.5); }
.social-links { display: flex; gap: 1rem; }
.social-links a { color: rgba(200,150,62,0.6); font-size: 1.1rem; text-decoration: none; transition: color 0.2s; }
.social-links a:hover { color: var(--brand-primary); }

/* ── TOAST NOTIFICATION ── */
.toast {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
  background: var(--brand-primary); color: #fff;
  padding: 1rem 1.5rem; border-radius: 4px;
  font-size: 0.92rem; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  transform: translateY(6rem); opacity: 0;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.7s ease both; }

/* ── PAGE HERO BASE ── */
.page-hero {
  min-height: 52vh; display: flex; align-items: center;
  background: var(--bg-surface-alt);
  padding-top: 68px; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(200,150,62,0.12) 0%, transparent 60%);
}