/*
Theme Name: Pyro Theme
Theme URI: https://pyropies.com
Author: Built for Pyro Pies Wood Fired Pizza
Description: Custom theme for pyropies.com. Dark, firelit, photo-forward. Built to preserve the five original URLs exactly, carry LocalBusiness schema with a stated service area, and beat the page weight of the Hostinger builder site it replaces.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: pyro
*/

/* ==========================================================================
   Tokens. Direction A, sampled from the logo PNG:
   black, brick #A86024, deep red #B41818, gold #D8903C, flame #F0CC48.
   Committed single-theme on purpose. This is a night-and-firelight design;
   a light variant would be a different design, not the same one inverted.
   ========================================================================== */
:root{
  --ground:#0C0A09;
  --panel:#100D0B;
  --panel-2:#151110;
  --line:#241C17;
  --line-soft:#1B1512;

  --ink:#EDE3D6;
  --ink-bright:#FCF7EF;
  --ink-muted:#C6B7A3;
  --ink-dim:#9C8B78;
  --ink-faint:#8A7358;

  --gold:#E0A33E;
  --gold-deep:#6E5426;
  --red:#C4211C;
  --red-bright:#E0342B;

  --display:Anton,"Arial Narrow",Impact,sans-serif;
  --body:Barlow,"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --wrap:1120px;
  --gut:clamp(18px,4vw,44px);
  --sec-y:clamp(32px,5vw,60px);
}

/* ==========================================================================
   Reset and base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink-bright)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:var(--red);color:#fff}

h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ==========================================================================
   The ember layer: a real photograph of the oven fire, fixed behind
   everything at low opacity. Kept under 0.16 because every piece of body text
   on this site sits over it, and legibility beats atmosphere.
   ========================================================================== */
.ember{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:#0C0A09 url("assets/img/ember-1600.jpg") center 22% / cover no-repeat;
  opacity:.15;
}
/* Everything real sits above it. */
.orderbar,.site-header,#main,.site-footer,#contact{position:relative;z-index:1}

/* On a small screen the fixed layer costs more than it gives, and it fights
   text at the sizes phones use. */
@media(max-width:700px){ .ember{opacity:.10} }

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--gold);color:#000;padding:12px 18px;font-weight:700;
}
.skip:focus{left:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   Shared type
   ========================================================================== */
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px;
}
.sec-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;color:var(--ink-bright);
  font-size:clamp(22px,3.2vw,30px);line-height:1.06;
}
.lede{color:var(--ink-muted);max-width:58ch}
.note{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);
}

.btn{
  display:inline-block;font-family:var(--body);font-weight:700;
  font-size:15px;letter-spacing:.01em;padding:14px 24px;
  text-decoration:none;border:0;cursor:pointer;transition:background .15s,color .15s;
}
.btn-primary{background:var(--red);color:#FFF4E9}
.btn-primary:hover{background:var(--red-bright);color:#fff}
.btn-ghost{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold-deep)}
.btn-ghost:hover{color:var(--ink-bright);box-shadow:inset 0 0 0 1.5px var(--gold)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ==========================================================================
   Order bar. Rulebook SITE STRUCTURE: the only element above the logo.
   ========================================================================== */
.orderbar{background:var(--red);text-align:center}
.orderbar a{
  display:block;padding:12px 16px;color:#FFF4E9;text-decoration:none;
  font-family:var(--mono);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
}
.orderbar a:hover{background:var(--red-bright);color:#fff}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{background:var(--panel);border-bottom:1px solid var(--line)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding-block:14px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:48px;height:48px;object-fit:contain}
.brand-name{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(15px,2.4vw,20px);
  letter-spacing:.03em;color:var(--ink-bright);line-height:1.05;
  display:block;max-width:19ch;
}
.brand-sub{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--ink-faint);margin-top:4px;
}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{
  color:var(--ink-muted);text-decoration:none;font-size:14px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
}
.nav a:hover,.nav .current-menu-item>a{color:var(--gold)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;isolation:isolate}
.hero-media{position:relative;height:clamp(280px,44vw,460px);overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,10,9,.28) 0%,rgba(12,10,9,.50) 45%,var(--ground) 99%);
}
/* The arch is the mouth of the oven, and it is in the logo too. */
.hero-arch{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;
  width:min(90%,600px);height:78%;
  border:2px solid var(--gold);border-bottom:0;
  border-radius:50% 50% 0 0 / 62% 62% 0 0;
  opacity:.5;z-index:2;pointer-events:none;
}
.hero-copy{
  position:absolute;inset:auto 0 0 0;z-index:3;text-align:center;
  padding:0 var(--gut) clamp(18px,3vw,32px);
}
.hero h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,6.2vw,60px);line-height:.97;color:var(--ink-bright);
  text-shadow:0 2px 30px rgba(0,0,0,.85);
}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-sub{
  text-align:center;color:var(--ink-muted);max-width:56ch;
  margin:clamp(18px,3vw,26px) auto 0;
}
.hero-ctas{justify-content:center;margin-top:22px}

/* ==========================================================================
   Sections
   ========================================================================== */
.sec{padding-block:var(--sec-y);border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;flex-wrap:wrap;margin-bottom:18px;
}

.cols{display:grid;gap:clamp(22px,3.5vw,38px);grid-template-columns:1fr;align-items:start}
@media(min-width:820px){.cols{grid-template-columns:1.1fr .9fr}}
.shot{overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover}

/* Numbered asks. The numbers encode order of a real form, not decoration. */
.asks{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.asks li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
  color:var(--ink);font-size:15.5px;
}
.asks b{font-family:var(--mono);font-size:11px;color:var(--gold);font-weight:700}

/* ==========================================================================
   Schedule
   ========================================================================== */
.sched{margin:0}
.sched-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:4px 20px;
  align-items:baseline;padding-block:13px;border-bottom:1px solid var(--line-soft);
}
.sched-row:last-child{border-bottom:0}
.sched-when{
  font-family:var(--mono);font-size:12.5px;color:var(--gold);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.sched-where{font-weight:600;color:var(--ink-bright)}
.sched-where a{color:var(--ink-bright);text-decoration:none}
.sched-where a:hover{color:var(--gold);text-decoration:underline}
.sched-hours{
  font-family:var(--mono);font-size:12px;color:var(--ink-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* The zone is spelled out, so it needs to sit quietly next to the numbers
   rather than competing with them. */
.sched-zone{display:block;font-size:9.5px;letter-spacing:.16em;color:var(--ink-faint);margin-top:3px}
@media(max-width:560px){.sched-zone{display:inline;margin-left:8px}}
@media(max-width:560px){
  .sched-row{grid-template-columns:1fr}
  .sched-hours{grid-column:1}
}
.sched-empty{color:var(--ink-muted);max-width:56ch}
.sched-open{margin-top:18px;color:var(--ink-muted);max-width:62ch}

/* ==========================================================================
   Story grid
   ========================================================================== */
.storygrid{display:grid;gap:2px;grid-template-columns:repeat(3,1fr);margin-top:24px}
@media(max-width:620px){.storygrid{grid-template-columns:1fr}}
.storygrid figure{margin:0;overflow:hidden;aspect-ratio:1/1}
.storygrid img{width:100%;height:100%;object-fit:cover}
.storycap{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding-top:10px;
}

/* ==========================================================================
   Editor content, for pages written in WordPress
   ========================================================================== */
.entry{max-width:70ch}
.entry h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;color:var(--ink-bright);
  font-size:clamp(21px,2.9vw,27px);line-height:1.1;margin:1.9em 0 .55em;
}
.entry h3{
  font-family:var(--body);font-weight:700;color:var(--ink-bright);
  font-size:clamp(18px,2.2vw,20px);margin:1.6em 0 .45em;
}
.entry p,.entry li{color:var(--ink-muted)}
.entry ul,.entry ol{padding-left:1.25em;margin:0 0 1em}
.entry li{margin-bottom:.4em}
.entry img{margin-block:1.6em;border:1px solid var(--line)}
.entry blockquote{
  margin:1.6em 0;padding-left:18px;border-left:3px solid var(--gold-deep);
  color:var(--ink);font-size:1.06em;
}
.entry strong{color:var(--ink)}
.entry hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}

.page-head{padding-block:clamp(28px,4.5vw,52px) 0}
.page-head h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(27px,4.6vw,44px);line-height:1.02;color:var(--ink-bright);
}

/* ==========================================================================
   Post list
   ========================================================================== */
.postlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.postlist li{border-bottom:1px solid var(--line);padding-block:22px}
.postlist li:first-child{border-top:1px solid var(--line)}
.postlist h2{
  font-family:var(--body);font-weight:700;font-size:clamp(19px,2.5vw,23px);
  line-height:1.22;margin-bottom:7px;
}
.postlist h2 a{color:var(--ink-bright);text-decoration:none}
.postlist h2 a:hover{color:var(--gold)}
.postlist p{color:var(--ink-muted);margin:0;max-width:64ch}
.postmeta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}

/* ==========================================================================
   Contact and footer
   ========================================================================== */
.contact-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cbox b{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;font-weight:400;
}
.cbox a,.cbox span{color:var(--ink-bright);font-size:18px;font-weight:600;text-decoration:none}
.cbox a:hover{color:var(--gold)}

.site-footer{
  background:#0A0807;border-top:1px solid var(--line);
  padding-block:22px;color:var(--ink-faint);font-size:13px;
}
.footer-inner{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.site-footer a{color:var(--ink-dim)}

/* ==========================================================================
   Reviews. The builder rendered these as loose paragraphs with the names
   floating away from the quotes; boxing each one keeps the quote and the
   person who said it visibly attached.
   ========================================================================== */
.reviews{
  display:grid;gap:14px;margin-top:6px;
  grid-template-columns:1fr;
}
/* Two across at desktop while there are four reviews, so the last one does not
   sit alone on its own row. Move to three columns when there are six. */
@media(min-width:620px){ .reviews{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .reviews{grid-template-columns:repeat(3,1fr)} }
.review{
  border:1.5px solid var(--red);background:var(--panel-2);
  padding:20px 20px 18px;display:flex;flex-direction:column;gap:12px;
}
.review blockquote{margin:0;color:var(--ink);font-size:15.5px;line-height:1.58}
.review-foot{display:flex;align-items:center;gap:10px;margin-top:auto}
.stars{color:var(--gold);letter-spacing:.12em;font-size:13px;line-height:1}
.review-name{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);
}

/* Catering gallery. Two across on a phone so it reads as a set rather than a
   column of separate photographs, three when there is room. */
.gallery{display:grid;gap:6px;grid-template-columns:repeat(2,1fr);margin:1.8em 0}
@media(min-width:820px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line)}
.gallery img{width:100%;height:100%;object-fit:cover;margin:0;border:0}

/* Full-bleed texture band between sections. One image, no text over it, so
   it breaks the rhythm without adding anything to read. */
.band{height:clamp(120px,18vw,220px);overflow:hidden;border-top:1px solid var(--line)}
.band img{width:100%;height:100%;object-fit:cover}

/* Images inside editor content, sized so a post does not become a slideshow. */
.entry figure{margin:1.8em 0}
.entry figure img{width:100%;border:1px solid var(--line)}
.entry figcaption{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding-top:8px;
}

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