/* Daybreak Corner Café: retro corner-diner design layered over the shared template.
   Loaded after site.css and theme.css. Colors come from site.json; this file adds the
   type (Archivo, one variable font with width + weight axes), the striped awning, the
   dark menu board and hard offset shadows. Light only, on purpose. */

@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../assets/fonts/archivo-latin-wdth.woff2") format("woff2");
}

:root {
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --cobalt: #1E3A8A;
  --mustard: #F2B632;
  --ink: var(--fg);
  --hard: 4px 4px 0 var(--ink);
  --radius-box: 6px;
  color-scheme: light;
}

body { font-stretch: 96%; }

/* Display type: condensed, black, all caps, like a painted sign */
h1, h2, h3, .wordmark, .tagline {
  font-family: var(--font-display); font-weight: 900; font-stretch: 68%;
  text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.92;
}
h2 { font-size: clamp(2.6rem, 7vw, 4.4rem); }
h3 { font-size: 1.7rem; }

/* Demo banner in cobalt */
.concept { background: var(--cobalt); color: #FFFFFF; letter-spacing: 0.04em; }

/* Header + awning */
.top { background: var(--bg); position: relative; }
.top .wrap { padding-block: 14px; }
.wordmark { font-size: 1.9rem; color: var(--accent); }
.wordmark small { font-stretch: 100%; font-weight: 700; letter-spacing: 0.22em; color: var(--ink); margin-top: 4px; line-height: 1.2; }
.nav a { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.86rem; }
.top::after {
  content: ""; display: block; height: 44px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 40px, #FFFFFF 40px 80px);
  border-top: 3px solid var(--ink);
  /* striped band, then a scalloped edge: one half-circle per stripe */
  -webkit-mask: radial-gradient(20px at 20px 24px, #000 98%, transparent) 0 0 / 40px 100% repeat-x,
                linear-gradient(#000 0 0) 0 0 / 100% 24px no-repeat;
          mask: radial-gradient(20px at 20px 24px, #000 98%, transparent) 0 0 / 40px 100% repeat-x,
                linear-gradient(#000 0 0) 0 0 / 100% 24px no-repeat;
  filter: drop-shadow(0 3px 0 rgba(28, 23, 20, 0.18));
}

/* Buttons: chunky with a hard shadow that presses in */
.btn {
  border: 2.5px solid var(--ink); box-shadow: var(--hard); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover { filter: none; }
.btn:active:not([disabled]) { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn-ghost { background: var(--bg); color: var(--ink); }
.btn-ghost:hover { background: var(--mustard); }
.btn-sm { box-shadow: 3px 3px 0 var(--ink); }
.callbar .btn { box-shadow: 3px 3px 0 var(--ink); }

/* Hero: giant stacked name, photo in a thick frame with a tilted price-tag sticker */
.hero .wrap { padding-block: 28px 64px; }
.hero h1 { font-size: clamp(3.6rem, 15vw, 7.4rem); color: var(--ink); }
.hero .lede { font-size: 1.15rem; font-weight: 500; }
.tagline {
  justify-self: start; font-size: 1.3rem; line-height: 1.1; color: var(--accent);
  background: var(--bg); padding: 0; letter-spacing: 0.02em;
}
.hero--split .photo {
  border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--cobalt);
  border-radius: 10px; overflow: visible;
}
.hero--split .photo img { border-radius: 7px; }
.hero--split .photo::before {
  content: "Pie by the slice"; position: absolute; z-index: 2; right: -12px; top: -18px;
  padding: 10px 14px; background: var(--mustard); color: var(--ink); border: 2.5px solid var(--ink);
  font: 900 1rem/1 var(--font-display); font-stretch: 70%; text-transform: uppercase; letter-spacing: 0.04em;
  transform: rotate(6deg); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink);
}
@media (min-width: 900px) { .hero--split .wrap { padding-block: 48px 96px; } }

/* Open sign: neon-ish lettering in a black box */
.sign {
  background: var(--ink); color: #FFFFFF; border: 0; outline: 0; border-radius: 6px;
  padding: 10px 14px; box-shadow: var(--hard); box-shadow: 4px 4px 0 var(--accent); margin: 4px 0 8px;
}
.sign-word { font-family: var(--font-display); font-stretch: 70%; font-weight: 900; font-size: 1.15rem; letter-spacing: 0.12em; color: var(--mustard); }
.sign[data-state="open"] .sign-word { color: #7CF0A0; text-shadow: 0 0 10px rgba(124, 240, 160, 0.55); }
.sign[data-state="closed"] .sign-word { color: #FF8A73; text-shadow: 0 0 10px rgba(255, 138, 115, 0.5); }
.sign .st { color: #FFFFFF; }

/* Heavy rule between the hero and hours */
#hours { border-top: 3px solid var(--ink); }

/* Hours: ticket stubs */
section.alt { background: var(--surface); }
.week li {
  border: 2px solid var(--ink); border-radius: 4px; background: var(--bg);
  font-family: var(--font-display); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: 1.05rem;
}
.week li small { font-family: var(--font-body); font-stretch: 100%; font-weight: 600; text-transform: none; }
.week li.today { background: var(--accent); border-color: var(--ink); color: #FFFFFF; box-shadow: 3px 3px 0 var(--ink); }
.hours-list dt { font-weight: 800; }
.hours-list .leader { border-bottom-color: var(--ink); border-bottom-style: dashed; opacity: 0.35; }
.week-card { background: var(--bg); border: 3px solid var(--ink); border-radius: 10px; padding: 20px; box-shadow: 8px 8px 0 var(--ink); }

/* Menu board: dark panel, cream letters, mustard prices */
#offerings { background: var(--ink); color: #FFF4E0; border-top: 3px solid var(--ink); }
#offerings .head { text-align: center; justify-items: center; }
#offerings h2 { color: #FFF4E0; font-size: clamp(3.4rem, 11vw, 6rem); }
#offerings h2::before, #offerings h2::after { content: "\2605"; color: var(--mustard); font-size: 0.4em; vertical-align: middle; margin: 0 0.5em; }
#offerings .head > p { color: #D9C9B4; }
#offerings .cards { gap: 28px; }
@media (min-width: 1000px) { #offerings .cards { grid-template-columns: 1fr 1fr; max-width: 920px; margin-inline: auto; width: 100%; } }
#offerings .card {
  border: 2px solid rgba(255, 244, 224, 0.28); border-radius: 8px; padding: 22px 20px 24px; gap: 14px;
  background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0));
}
#offerings .card h3 { color: var(--mustard); font-size: 1.9rem; border-bottom: 2px solid rgba(255, 244, 224, 0.28); padding-bottom: 10px; }
#offerings .card p { color: #D9C9B4; font-size: 0.92rem; }
#offerings .menu { gap: 10px; font-size: 1.05rem; }
#offerings .menu .dots { border-bottom: 2px dotted rgba(255, 244, 224, 0.35); }
#offerings .menu .pr { color: var(--mustard); font-weight: 800; }
#offerings .menu .note { color: #CDBBA4; }
#offerings .ph-tag { color: #D9C9B4; }

/* Photos: snapshots with thick frames, slightly askew */
#photos { background: var(--bg); }
.gallery { gap: 18px; }
.gallery .photo { border: 3px solid var(--ink); border-radius: 8px; box-shadow: 6px 6px 0 var(--accent); }
@media (min-width: 760px) {
  .gallery .photo:nth-child(odd) { transform: rotate(-1.4deg); }
  .gallery .photo:nth-child(even) { transform: rotate(1.2deg) translateY(10px); box-shadow: 6px 6px 0 var(--cobalt); }
}

/* Visit + contact: checkerboard border on top */
#visit { background: var(--surface); }
#visit, footer { position: relative; }
#visit::before, footer::before {
  content: ""; display: block; height: 22px;
  background: conic-gradient(var(--ink) 25%, var(--bg) 0 50%, var(--ink) 0 75%, var(--bg) 0) 0 0 / 22px 22px;
}
.fact .eyebrow { color: var(--accent); font-weight: 800; }
.fact .v { font-weight: 700; font-size: 1.2rem; }
#contact { background: var(--bg); border-top: 3px solid var(--ink); }
.contact-form input, .contact-form textarea { border: 2px solid var(--ink); border-radius: 6px; background: #FFFFFF; }
.contact-form input:focus, .contact-form textarea:focus { box-shadow: 4px 4px 0 var(--accent); }

/* Footer: ink with cream */
footer { background: var(--ink); color: #FFF4E0; border-top: 0; }
footer .wordmark { color: var(--mustard); }
footer .wordmark small { color: #FFF4E0; }
footer p { color: #D9C9B4; }
footer :focus-visible { outline-color: var(--mustard); }
#offerings :focus-visible { outline-color: var(--mustard); }

/* Phones: tighter ticket stubs, hours stacked instead of leadered */
@media (max-width: 559px) {
  .week-card { padding: 14px; box-shadow: 5px 5px 0 var(--ink); }
  .week { gap: 4px; }
  .week li { font-size: 0.82rem; border-width: 1.5px; padding-block: 8px 6px; }
  .week li small { font-size: 0.6rem; }
  .hours-list div { flex-direction: column; gap: 2px; }
  .hours-list .leader { display: none; }
  .hours-list dd { margin: 0; text-align: left; }
  .hero--split .photo::before { right: 8px; }
}