/* ============================================================
   PRIME PLATE — DemocracyCraft restaurant business site
   Clean, standard fast-food branding: red / yellow / cream,
   bold rounded type, soft shadows, simple cards.
   ============================================================ */

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

:root{
  --red:        #E4002B;
  --red-dark:   #B4001F;
  --yellow:     #FFC72C;
  --yellow-dark:#E6AC00;
  --cream:      #FFF8ED;
  --dark:       #241C15;
  --gray:       #6B6459;
  --line:       #EDE3D0;
  --white:      #FFFFFF;

  --font-head: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 26px rgba(36, 28, 21, .10);
  --shadow-sm: 0 4px 12px rgba(36, 28, 21, .08);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--cream);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}

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

.wrap{
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 12px;
  display:block;
}

h1, h2, h3{
  font-family: var(--font-head);
  font-weight: 800;
  margin: 0 0 .4em;
  color: var(--dark);
  line-height: 1.15;
}

h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3{ font-size: 1.2rem; font-weight: 700; }

p{ margin: 0 0 1em; color: var(--gray); }

section{ padding: 88px 0; }

/* ---------- buttons ---------- */
.btn{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  color: var(--white);
  background: var(--red);
  border: none;
  border-radius: 999px;
  padding: 15px 30px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items:center;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ background: var(--red-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline: 3px solid var(--dark); outline-offset: 3px; }

.btn-yellow{ background: var(--yellow); color: var(--dark); }
.btn-yellow:hover{ background: var(--yellow-dark); }

.btn-outline{
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  box-shadow: none;
}
.btn-outline:hover{ background: rgba(255,255,255,.12); }

.btn-outline-dark{
  background: transparent;
  color: var(--dark);
  border: 2px solid var(--dark);
  box-shadow: none;
}
.btn-outline-dark:hover{ background: var(--dark); color: var(--white); }

/* ---------- nav ---------- */
.site-nav{
  position: sticky; top:0; z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
}
.logo{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--dark);
  text-decoration:none;
  display:flex; align-items:center; gap:10px;
}
.logo-mark{
  width:34px; height:34px;
  border-radius: 9px;
  background: var(--red);
  color: var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size: 1rem;
  flex-shrink:0;
}
.nav-links{ display:flex; gap: 30px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family: var(--font-head);
  font-weight:600;
  font-size:.95rem;
  color: var(--dark);
  text-decoration:none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  color: var(--red);
  border-bottom-color: var(--red);
}

/* ---------- hero ---------- */
.hero{
  position: relative;
  color: var(--white);
  padding: 96px 0 110px;
  background:
    linear-gradient(180deg, rgba(36,20,16,.72), rgba(36,20,16,.82)),
    url('https://primeplate.endworks.net/image.webp')
    center/cover no-repeat;
}
.hero .wrap{ position:relative; text-align:center; }
.hero-content{ max-width: 640px; margin: 0 auto; }
.hero .eyebrow{ color: var(--yellow); }
.hero h1{
  color: var(--white);
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
}
.hero h1 span{ color: var(--yellow); }
.hero p.lede{
  color: rgba(255,255,255,.9);
  font-size: 1.08rem;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}
.hero-actions{ display:flex; gap:16px; margin-top: 30px; flex-wrap:wrap; justify-content:center; }

/* ---------- about ---------- */
.about .wrap{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items:center;
}
.about-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.about-card dl{ margin:0; }
.about-card dt{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing:.05em;
  color: var(--red);
  margin-top: 18px;
}
.about-card dt:first-child{ margin-top:0; }
.about-card dd{ margin: 4px 0 0; font-weight:600; color: var(--dark); }

/* ---------- branches ---------- */
.branches{ background: var(--white); }
.branch-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.branch-card{
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.branch-card h3{ display:flex; align-items:center; gap:10px; margin-bottom: 4px;}
.branch-status{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 999px;
  background: #E8F5E9;
  color: #2E7D32;
}
.branch-card ul{ list-style:none; margin: 18px 0 0; padding:0; }
.branch-card li{
  font-size: .94rem;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  display:flex; justify-content:space-between; gap:12px;
}
.branch-card li:first-child{ border-top:none; }
.branch-card li b{ color: var(--dark); font-weight:700; }

.branch-card.locked{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color: var(--gray);
  border: 2px dashed var(--line);
  background: transparent;
  box-shadow:none;
}
.branch-card.locked .lock-icon{
  font-size:1.5rem; margin-bottom:12px;
  width: 52px; height:52px;
  border-radius:50%;
  background: var(--cream);
  color: var(--gray);
  display:flex; align-items:center; justify-content:center;
}
.branch-card.locked p{ color: var(--gray); font-size:.9rem; margin:0; }
.branch-card.locked .branch-status{ background: var(--line); color: var(--gray); margin-bottom:14px; }

/* ---------- vacancies ---------- */
.vacancies{ background: var(--cream); }
.vacancies .section-head{ max-width: 62ch; }
.job-board{ margin-top: 44px; }
.job-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 36px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.job-card .job-meta{ grid-column: 1 / -1; display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom: 4px;}
.job-card h3{ font-size:1.5rem; margin:0; }
.job-pill{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  background: var(--yellow);
  color: var(--dark);
  padding: 6px 12px;
  border-radius: 999px;
}
.job-card h4{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing:.04em;
  color: var(--red);
  margin: 0 0 12px;
}
.job-card ul{ margin:0; padding-left: 1.2em; }
.job-card li{ margin-bottom: 8px; color: var(--gray); }
.apply-box{
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 26px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.apply-box p{ margin:0; color: var(--gray); }

/* ---------- CTA footer band ---------- */
.cta-band{
  background: var(--dark);
  color: var(--white);
  text-align:center;
}
.cta-band h2{ color: var(--white); }
.cta-band p{ color: rgba(255,255,255,.75); max-width: 50ch; margin-inline:auto; }
.cta-band .hero-actions{ justify-content:center; }

/* ---------- footer ---------- */
footer{
  background: var(--white);
  color: var(--gray);
  padding: 32px 0;
  font-size: .9rem;
  border-top: 1px solid var(--line);
}
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer a{ color: var(--red); font-weight:600; text-decoration:none; }
footer a:hover{ text-decoration:underline; }

/* ---------- placeholder page ---------- */
.placeholder-page{
  min-height: 60vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: 80px 28px;
}

/* ---------- order page ---------- */
.order-hero{
  background:
    linear-gradient(180deg, rgba(36,20,16,.72), rgba(36,20,16,.82)),
    url('https://primeplate.endworks.net/image.webp')
    center/cover no-repeat;
  color: var(--white);
  padding: 84px 0;
  text-align:center;
}
.order-hero .wrap{ max-width: 720px; }

.menu-section{ background: var(--white); }
.food-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.food-card{
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align:center;
  box-shadow: var(--shadow-sm);
}
.food-card i{
  font-size: 1.8rem;
  color: var(--red);
  margin-bottom: 14px;
  display:block;
}
.food-card h3{ font-size: 1rem; margin-bottom: 8px; }
.food-card .price{
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--red);
  font-size: 1.1rem;
}

.order-form-section{ background: var(--cream); }
.embed-placeholder{
  margin-top: 32px;
  background: var(--white);
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  min-height: 320px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 14px;
  color: var(--gray);
}
.embed-placeholder i{ font-size: 2rem; color: var(--red); }
.embed-placeholder p{ margin:0; font-weight:600; }

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .about .wrap{ grid-template-columns: 1fr; }
  .job-card{ grid-template-columns: 1fr; padding: 28px; }
  .nav-links{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}