/* ==========================================================================
   Kebab & Grill Corner — base: tokens, reset, navigation
   Reference design width: 1440px
   ========================================================================== */

:root {
  /* palette */
  --black:      #000000;
  --charcoal:   #2a2e30;
  --grey-dark:  #3d3d3d;
  --grey-light: #e8e8e8;
  --grey-text:  #6d6d6d;
  --cream:      #fbe698;
  --butter:     #f9f7dc;
  --linen:      #efe7dd;
  --tan:        #947f57;
  --brown:      #763c00;
  --red:        #c43c1e;
  --orange:     #ef8535;
  --teal:       #15b5b0;
  --white:      #ffffff;

  /* type */
  --f-sans:    'kgc-sans', -apple-system, system-ui, sans-serif;
  --f-display: 'kgc-display', Georgia, serif;
  --f-subhead: 'kgc-subhead', -apple-system, system-ui, sans-serif;
  --f-button:  'kgc-button', -apple-system, system-ui, sans-serif;
  --f-heading: 'kgc-heading', -apple-system, system-ui, sans-serif;
  --f-order:   'kgc-order', Georgia, serif;
  --f-poster:  'kgc-poster', -apple-system, system-ui, sans-serif;
  --f-script:  'kgc-script', cursive;
  --f-menu:    'kgc-menu', -apple-system, system-ui, sans-serif;
  --f-light:   'kgc-light', -apple-system, system-ui, sans-serif;
  --f-serif:   'kgc-serif', Georgia, serif;

  --nav-h: 50px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  font-family: var(--f-sans);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, p, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--black);
  display: flex; align-items: center;
  padding-left: 16px;
}

/* Logo sits left and pushes everything after it to the right edge, so the
   menu (desktop) and the hamburger (phone) both stay flush right. */
.nav-logo {
  display: flex; align-items: center;
  margin-right: auto;
  flex: none;
}
.nav-logo img {
  display: block;
  height: 32px; width: auto;
  transition: opacity .2s ease;
}
.nav-logo:hover img { opacity: .82; }

.nav-menu { display: flex; }

.nav-menu a {
  display: block;
  padding: 0 16px;
  line-height: 40px;
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  transition: color .2s ease;
}
.nav-menu a:hover { color: var(--cream); }

/* hamburger — hidden on desktop, right-hand side on phone */
.nav-toggle {
  display: none;
  flex: none;
  width: 34px; height: 26px;
  margin-right: 16px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; margin: 5px 0;
  background: var(--white);
  transition: transform .25s ease, opacity .25s ease;
}


/* ---------- navigation: phone ---------- */
@media (max-width: 760px) {
  .nav-toggle { display: block; }

  .nav-menu {
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    flex-direction: column;
    background: var(--black);
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav-menu.is-open { max-height: 320px; }
  .nav-menu a { padding: 12px 20px; line-height: 20px; }

  /* The panel is absolutely positioned, so <nav> collapses to zero width and
     the hamburger lands at the right edge on its own. */
  .nav-logo img { height: 28px; }

  .nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

}