/* ===========================================================================
   HiFive Chicken — shared brand system
   ---------------------------------------------------------------------------
   Every value below was read off the computed styles of hifivechicken.com,
   not eyeballed from a screenshot. Reusable across the store site and any
   campaign landing page: this file carries no store specific content.

   Verified against the live corporate site:
     pink        #E5004D   headings, primary CTA border and text
     pink alt    #EB0045   logo artwork, Instagram button
     maroon      #7F2629   dark bands, footer
     rose        #FDBBCA   headline on pink, light band
     peach       #FED5B0   gift card headline accent
     orange      #FFAD5F   logo flame
     body copy   #666666   Open Sans, the dominant text colour sitewide
     shell       #EEEEEE
   Type: Anton (display, italic, uppercase), Oswald (UI/buttons/nav),
         Open Sans (body). Corporate uses Open Sans, NOT Poppins.
   Buttons: transparent fill, 3px solid border, zero radius, Oswald 700,
         uppercase. Corporate has no filled-red button anywhere.
   =========================================================================== */

:root{
  --hf-pink:#E5004D;
  --hf-pink-alt:#EB0045;
  --hf-maroon:#7F2629;
  --hf-maroon-dk:#791214;
  --hf-rose:#FDBBCA;
  --hf-peach:#FED5B0;
  --hf-orange:#FFAD5F;

  --hf-ink:#1A1A1A;
  --hf-body:#666666;
  --hf-muted:#999999;
  --hf-line:#E4DEDB;
  --hf-paper:#FFFFFF;
  --hf-shell:#EEEEEE;

  --hf-display:'Anton',Impact,'Arial Narrow',sans-serif;
  --hf-ui:'Oswald','Arial Narrow',Arial,sans-serif;
  --hf-text:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  /* Diagonal band cut. Expressed in vw so the angle stays constant across
     screen sizes instead of shifting with section height. */
  --hf-cut:clamp(28px,5vw,86px);

  --hf-shadow:0 2px 4px rgba(0,0,0,.05),0 12px 34px rgba(0,0,0,.08);
  --hf-wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--hf-text);color:var(--hf-body);background:var(--hf-paper);
  line-height:1.7;-webkit-font-smoothing:antialiased;font-size:16px}
/* height:auto keeps the width/height attributes as aspect-ratio hints for
   layout stability without letting them fix the rendered height. Without it,
   any CSS that sets only width stretches the image. */
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}

/* Visible focus for keyboard users, suppressed for mouse. */
:focus-visible{outline:3px solid var(--hf-pink);outline-offset:3px}
.hf-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--hf-pink);
  color:#fff;padding:12px 20px;font-family:var(--hf-ui);text-transform:uppercase}
.hf-skip:focus{left:0}

/* ---------- layout ---------- */
.hf-wrap{max-width:var(--hf-wrap);margin:0 auto;padding:0 clamp(18px,5vw,40px);width:100%}
.hf-section{padding:clamp(48px,8vw,104px) 0;position:relative}

/* ---------- diagonal bands ----------
   Corporate's defining structural motif: full bleed colour blocks separated by
   angled cuts that alternate direction. --hf-cut controls the slice; the extra
   padding keeps text clear of the angle on narrow screens. */
.hf-band{position:relative}

/* The diagonal lives on the TOP edge of the following band, never the bottom
   edge of the preceding one. A band with an angled bottom is simply painted
   over by whatever comes next, so the angle never shows. Clipping the top and
   tucking the band upward makes the preceding colour show through the removed
   triangle, which is what produces the visible diagonal.
   Always pair --top-l or --top-r with --tuck. Alternate them down the page. */
.hf-band--top-l{clip-path:polygon(0 var(--hf-cut),100% 0,100% 100%,0 100%)}
.hf-band--top-r{clip-path:polygon(0 0,100% var(--hf-cut),100% 100%,0 100%)}
.hf-band--tuck{margin-top:calc(var(--hf-cut) * -1);
  padding-top:calc(clamp(48px,8vw,104px) + var(--hf-cut))}

.hf-band--pink{background:var(--hf-pink);color:#fff}
.hf-band--maroon{background:var(--hf-maroon);color:#fff}
.hf-band--rose{background:var(--hf-rose);color:var(--hf-maroon)}
.hf-band--shell{background:var(--hf-shell)}
.hf-band--paper{background:var(--hf-paper)}
.hf-band--warm{background:linear-gradient(160deg,var(--hf-rose) 0%,var(--hf-orange) 100%)}

/* ---------- type ---------- */
.hf-display{font-family:var(--hf-display);font-style:italic;text-transform:uppercase;
  font-weight:400;line-height:.96;letter-spacing:.005em}
h1.hf-display{font-size:clamp(38px,8.2vw,86px)}
h2.hf-display{font-size:clamp(30px,5.6vw,60px)}
h3.hf-display{font-size:clamp(24px,4vw,44px)}
/* Two tone headline: corporate splits a single heading across white and pink. */
.hf-display .alt{color:var(--hf-pink);display:block}
.hf-band--pink .hf-display .alt,
.hf-band--maroon .hf-display .alt{color:var(--hf-rose)}

.hf-eyebrow{font-family:var(--hf-ui);text-transform:uppercase;font-weight:600;
  letter-spacing:.14em;font-size:clamp(11px,1.4vw,13px);line-height:1.4}
.hf-lede{font-size:clamp(15px,1.9vw,18px);max-width:52ch}
.hf-center{text-align:center}
.hf-center .hf-lede{margin-left:auto;margin-right:auto}
.hf-band--pink .hf-lede,.hf-band--maroon .hf-lede{color:rgba(255,255,255,.9)}
.hf-band--rose .hf-lede{color:var(--hf-maroon)}

/* ---------- buttons ----------
   Corporate spec, measured: transparent fill, 3px solid, radius 0,
   Oswald 700, uppercase, padding 6.6px 22px at 22px type. Padding is opened
   up slightly here to clear the 44px touch target minimum. */
.hf-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:10px clamp(18px,3vw,26px);
  font-family:var(--hf-ui);font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.9vw,19px);letter-spacing:.02em;line-height:1.2;
  border:3px solid var(--hf-pink);color:var(--hf-pink);background:transparent;
  border-radius:0;text-align:center;
  transition:background .22s ease,color .22s ease,border-color .22s ease}
.hf-btn:hover{background:var(--hf-pink);color:#fff}
.hf-btn--light{border-color:#fff;color:#fff}
.hf-btn--light:hover{background:#fff;color:var(--hf-pink)}
.hf-btn--maroon{border-color:var(--hf-maroon);color:var(--hf-maroon)}
.hf-btn--maroon:hover{background:var(--hf-maroon);color:#fff}
.hf-btn--solid{background:var(--hf-pink);color:#fff}
.hf-btn--solid:hover{background:var(--hf-maroon);border-color:var(--hf-maroon)}
.hf-btns{display:flex;flex-wrap:wrap;gap:12px}
.hf-center .hf-btns{justify-content:center}

/* ---------- open / closed pill ---------- */
.hf-status{display:inline-flex;align-items:center;gap:9px;font-family:var(--hf-ui);
  font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(11px,1.5vw,13px);padding:8px 16px;
  background:rgba(255,255,255,.82);color:var(--hf-maroon);border-radius:999px}
.hf-status .dot{width:9px;height:9px;border-radius:50%;background:var(--hf-muted);flex:0 0 auto}
.hf-status.is-open .dot{background:#12813F;box-shadow:0 0 0 4px rgba(18,129,63,.18)}
.hf-status.is-shut .dot{background:#9A9A9A}

/* ---------- cards / panels ---------- */
.hf-card{background:var(--hf-paper);border:1px solid var(--hf-line);
  padding:clamp(22px,3.4vw,34px);box-shadow:var(--hf-shadow)}

/* ---------- coupon ticket ----------
   Shared by every campaign page. Two zones split by a perforation, with a
   notch punched into each edge on the tear line.

   Two things that will bite if changed carelessly:

   1. box-shadow does NOT work on a masked element — the mask clips the shadow
      away entirely. The shadow must be a filter:drop-shadow on .hf-ticket,
      which wraps the masked .hf-ticket__body. Verified in Chrome, not assumed.
   2. The notch centre and the perforation line must both derive from
      --hf-notch-y, or they drift apart as content reflows.
   --------------------------------------------------------------------------- */
.hf-ticket{--hf-notch:14px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.28));
  width:100%;max-width:400px;margin:0 auto}
.hf-ticket__body{--hf-notch-y:50%;background:var(--hf-paper);
  -webkit-mask-image:radial-gradient(circle at left var(--hf-notch-y),transparent var(--hf-notch),#000 calc(var(--hf-notch) + .5px)),
                     radial-gradient(circle at right var(--hf-notch-y),transparent var(--hf-notch),#000 calc(var(--hf-notch) + .5px));
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle at left var(--hf-notch-y),transparent var(--hf-notch),#000 calc(var(--hf-notch) + .5px)),
             radial-gradient(circle at right var(--hf-notch-y),transparent var(--hf-notch),#000 calc(var(--hf-notch) + .5px));
  mask-composite:intersect}
.hf-ticket__head{background:var(--hf-pink);color:#fff;text-align:center;
  padding:18px 22px 16px;position:relative;overflow:hidden}
.hf-ticket__head .who{font-family:var(--hf-ui);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.hf-ticket__offer{font-family:var(--hf-display);font-style:italic;
  text-transform:uppercase;font-weight:400;line-height:1;margin-top:9px;
  font-size:clamp(27px,7.4vw,38px)}
.hf-ticket__sub{font-size:13px;color:rgba(255,255,255,.9);margin-top:7px}
/* The perforation sits exactly on the notch centre line. */
.hf-ticket__perf{height:0;border-top:2px dashed var(--hf-line);
  margin:0 calc(var(--hf-notch) + 8px)}
.hf-ticket__stub{padding:16px 22px 18px;text-align:center;background:var(--hf-paper)}
.hf-ticket__label{font-family:var(--hf-ui);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--hf-muted)}
.hf-ticket__code{font-family:var(--hf-ui);font-weight:700;
  font-size:clamp(38px,10vw,50px);letter-spacing:.08em;line-height:1.05;
  color:var(--hf-pink);margin:6px 0 4px;word-break:break-all}
.hf-ticket__valid{font-size:12.5px;color:var(--hf-body)}
.hf-ticket__qr{width:140px;margin:14px auto 0}
.hf-ticket__qr svg{width:100%;height:auto;display:block}
.hf-ticket__qrlabel{font-family:var(--hf-ui);font-weight:600;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--hf-muted);margin-top:7px}
.hf-ticket__staff{margin-top:14px;padding-top:12px;border-top:1px solid var(--hf-line);
  font-size:10.5px;line-height:1.6;color:var(--hf-muted)}

/* ---------- hours table ---------- */
.hf-hours{font-family:var(--hf-ui);font-size:clamp(13px,1.7vw,15px);width:100%}
.hf-hours div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--hf-line)}
.hf-hours div:last-child{border-bottom:0}
.hf-hours .d{text-transform:uppercase;letter-spacing:.05em;color:var(--hf-body)}
.hf-hours .t{font-weight:600;font-variant-numeric:tabular-nums;color:var(--hf-ink);
  white-space:nowrap}
.hf-hours div.is-today .d,.hf-hours div.is-today .t{color:var(--hf-pink);font-weight:700}

/* ---------- footer ---------- */
.hf-footer{background:var(--hf-maroon);color:rgba(255,255,255,.72);
  padding:clamp(44px,7vw,76px) 0 34px;font-size:14px}
.hf-footer a:hover{color:#fff;text-decoration:underline}
.hf-footer h3,.hf-footer h4{font-family:var(--hf-ui);text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;font-weight:600;color:#fff;margin-bottom:14px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}