/* Shari's Home Cooking flyer hero + full-page gingham frame.
   This is the canonical source implementation, not an override layer. */

:root{
  --shari-frame-size:clamp(10px,1.55vw,16px);
  --shari-frame-a:#df2b6f;
  --shari-frame-b:#f89abc;
  --shari-frame-c:#fff4f8;
}

/* One continuous gingham border around the active page content. */
.page-shell{
  width:min(var(--shari-content-max,1120px),100%);
  min-height:100%;
  margin:0 auto;
  padding:clamp(.85rem,2.2vw,1.35rem) var(--shari-gutter) calc(var(--shari-gutter) + .75rem);
  border:var(--shari-frame-size) solid transparent;
  border-radius:clamp(24px,4.5vw,38px);
  background:
    linear-gradient(rgba(255,249,251,.86),rgba(255,247,250,.86)) padding-box,
    conic-gradient(
      from 90deg,
      var(--shari-frame-a) 0 25%,
      var(--shari-frame-c) 0 50%,
      var(--shari-frame-b) 0 75%,
      var(--shari-frame-c) 0 100%
    ) 0 0/32px 32px border-box;
  box-shadow:0 12px 36px rgba(120,25,64,.08);
}

/* Hero shell. The gingham is no longer local to the hero. */
.flyer-hero{
  overflow:hidden;
  border:1px solid rgba(217,31,104,.18);
  border-radius:clamp(22px,4vw,34px);
  background:#fff8fb;
  box-shadow:0 16px 42px rgba(103,18,54,.10);
}

.flyer-art{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(205px,.86fr);
  align-items:center;
  min-height:clamp(275px,35vw,410px);
  overflow:hidden;
  background:
    radial-gradient(circle at 22% 42%,rgba(255,255,255,.98),rgba(255,249,251,.90) 48%,transparent 74%),
    linear-gradient(90deg,#fff9fb 0%,#fff8fb 63%,#fff7fa 63%,#fff7fa 100%);
}

.flyer-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 82% 38%,rgba(217,31,104,.07),transparent 33%),
    linear-gradient(180deg,rgba(255,255,255,.15),transparent 50%);
}

.flyer-copy{
  position:relative;
  z-index:2;
  align-self:center;
  padding:clamp(26px,4.7vw,54px) 0 clamp(24px,3.5vw,38px) clamp(28px,5vw,62px);
  text-align:center;
}

.flyer-name-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(74px,9.5vw,120px);
}

.flyer-name{
  display:inline-block;
  color:#de1767;
  font-family:"Snell Roundhand","Brush Script MT","Segoe Script",cursive;
  font-size:clamp(4.2rem,10vw,7.7rem);
  font-weight:500;
  line-height:.73;
  letter-spacing:-.045em;
  white-space:nowrap;
  transform:rotate(-2deg);
  transform-origin:center;
  text-shadow:0 2px 0 #fff,0 7px 18px rgba(176,17,82,.08);
}

.flyer-heart-outline{
  position:absolute;
  right:clamp(.7rem,2.4vw,2.4rem);
  top:52%;
  color:#c91a5f;
  font-family:Georgia,serif;
  font-size:clamp(1.55rem,3vw,2.6rem);
  transform:rotate(8deg);
}

.flyer-spark{
  position:absolute;
  width:30px;
  height:28px;
  opacity:.92;
}
.flyer-spark::before,.flyer-spark::after{
  content:"";
  position:absolute;
  width:15px;
  height:3px;
  border-radius:99px;
  background:#c91a5f;
  box-shadow:0 -10px 0 #c91a5f,0 10px 0 #c91a5f;
}
.flyer-spark-left{left:2%;top:58%;transform:rotate(-14deg)}
.flyer-spark-right{right:7%;top:15%;transform:rotate(-58deg) scale(.8)}

.flyer-home{
  margin-top:clamp(.2rem,.7vw,.55rem);
  color:#0a090a;
  font-family:Impact,"Arial Narrow","Franklin Gothic Condensed",sans-serif;
  font-size:clamp(1.95rem,4.3vw,3.8rem);
  line-height:.92;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.flyer-ribbon{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.65rem;
  width:88%;
  min-height:clamp(48px,5.2vw,64px);
  margin:clamp(1rem,1.8vw,1.6rem) auto 0;
  padding:.48rem clamp(1.1rem,2.8vw,2.4rem);
  background:#dd1766;
  color:#ffd8e6;
  font-family:"Snell Roundhand","Brush Script MT","Segoe Script",cursive;
  font-size:clamp(1.28rem,2.7vw,2.25rem);
  line-height:1;
  box-shadow:0 4px 0 rgba(135,11,61,.07);
}
.flyer-ribbon::before,.flyer-ribbon::after{
  content:"";
  position:absolute;
  top:48%;
  width:clamp(46px,5.7vw,72px);
  height:72%;
  background:#c90e59;
  transform:translateY(-20%);
  z-index:-1;
}
.flyer-ribbon::before{right:100%;clip-path:polygon(0 0,100% 20%,100% 100%,0 78%,24% 42%)}
.flyer-ribbon::after{left:100%;clip-path:polygon(0 20%,100% 0,76% 42%,100% 78%,0 100%)}
.flyer-ribbon>span:first-child,.flyer-ribbon>span:last-child{
  color:#fff;
  font-family:Georgia,serif;
  font-size:.82em;
}

.flyer-love{
  position:relative;
  z-index:2;
  display:grid;
  justify-items:center;
  gap:.08rem;
  margin:clamp(.75rem,1.6vw,1.25rem) auto 0;
  color:#bd2b67;
}
.flyer-love-script{
  font-family:"Snell Roundhand","Brush Script MT","Segoe Script",cursive;
  font-size:clamp(1.4rem,2.6vw,2.2rem);
  line-height:1;
}
.flyer-love-heart{
  position:absolute;
  top:-.72em;
  left:50%;
  font-family:Georgia,serif;
  font-size:1.5rem;
  transform:translateX(-50%);
}
.flyer-love strong{
  color:#141014;
  font-family:Impact,"Arial Narrow","Franklin Gothic Condensed",sans-serif;
  font-size:clamp(.92rem,1.7vw,1.38rem);
  letter-spacing:.055em;
}
.flyer-love-rule{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#dd1766;
  font-size:.82rem;
}
.flyer-love-rule i{
  display:block;
  width:clamp(40px,6.5vw,84px);
  height:2px;
  background:linear-gradient(90deg,transparent,#dd1766);
}
.flyer-love-rule i:last-child{background:linear-gradient(90deg,#dd1766,transparent)}

/* High-resolution badge asset. Its flat background matches the right hero field exactly. */
.flyer-chef-badge{
  position:relative;
  z-index:3;
  justify-self:center;
  align-self:center;
  width:min(90%,300px);
  height:auto;
  margin:clamp(14px,2.3vw,28px) clamp(18px,3vw,38px) clamp(10px,1.6vw,18px) 0;
  object-fit:contain;
  image-rendering:auto;
}

.flyer-controls{
  display:grid;
  gap:clamp(.72rem,1.8vw,.95rem);
  padding:clamp(.82rem,2.2vw,1.2rem);
  border-top:1px solid rgba(217,31,104,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,241,247,.98));
}

.flyer-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.55rem,1.5vw,.8rem);
}
.flyer-actions .button{
  width:100%;
  min-width:0;
  min-height:clamp(48px,6.5vw,60px);
  padding:.72rem 1rem;
  border-radius:999px;
  font-size:clamp(.98rem,2.6vw,1.22rem);
  font-weight:950;
}

.flyer-hero .flyer-hours{
  display:grid;
  grid-template-columns:auto auto auto;
  align-items:center;
  justify-content:center;
  column-gap:clamp(.55rem,1.8vw,.95rem);
  row-gap:.12rem;
  width:100%;
  max-width:none;
  min-height:clamp(78px,12vw,104px);
  aspect-ratio:auto;
  margin:0;
  padding:.75rem 1rem;
  border:5px solid var(--pink);
  border-radius:22px;
  background:#171317;
  color:#fff;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.09),0 10px 24px rgba(49,12,27,.12);
  transform:none;
  text-align:center;
}
.flyer-hero .flyer-hours strong{
  color:#ff6fa8;
  font-size:clamp(.78rem,2vw,.98rem);
  letter-spacing:.2em;
}
.flyer-hero .flyer-hours span{
  color:#fff;
  font-family:var(--display);
  font-size:clamp(1.06rem,3.1vw,1.5rem);
  letter-spacing:.05em;
}
.flyer-hero .flyer-hours small{
  color:#fff;
  font-size:clamp(.9rem,2.5vw,1.14rem);
  font-weight:950;
}
.flyer-hero .flyer-hours em{
  grid-column:1/-1;
  margin:.15rem 0 0;
  color:#f5c4d7;
  font-family:var(--script);
  font-size:clamp(.88rem,2.3vw,1.05rem);
  line-height:1;
}

.menu-status[hidden]{display:none!important}

/* Portrait: preserve the flyer identity without crushing the copy.
   Name + title share the top with the badge, while ribbon and love line span full width. */
@media (orientation:portrait) and (max-width:760px){
  :root{--shari-frame-size:10px}

  .page-shell{
    padding:.72rem .68rem calc(var(--shari-gutter) + .75rem);
    border-radius:28px;
    background:
      linear-gradient(rgba(255,249,251,.90),rgba(255,247,250,.90)) padding-box,
      conic-gradient(
        from 90deg,
        var(--shari-frame-a) 0 25%,
        var(--shari-frame-c) 0 50%,
        var(--shari-frame-b) 0 75%,
        var(--shari-frame-c) 0 100%
      ) 0 0/28px 28px border-box;
  }

  .flyer-hero{border-radius:22px}

  .flyer-art{
    grid-template-columns:minmax(0,1.15fr) minmax(128px,.85fr);
    grid-template-areas:
      "name badge"
      "home badge"
      "ribbon ribbon"
      "love love";
    gap:.25rem .6rem;
    min-height:0;
    padding:1.05rem .85rem .95rem;
    background:
      radial-gradient(circle at 26% 26%,rgba(255,255,255,.99),rgba(255,249,251,.92) 47%,transparent 76%),
      linear-gradient(90deg,#fff9fb 0%,#fff8fb 58%,#fff7fa 58%,#fff7fa 100%);
  }

  .flyer-copy{display:contents}

  .flyer-name-row{
    grid-area:name;
    min-height:70px;
    align-self:end;
  }
  .flyer-name{
    font-size:clamp(3.05rem,13.2vw,4.55rem);
    line-height:.78;
  }
  .flyer-home{
    grid-area:home;
    align-self:start;
    margin-top:.2rem;
    font-size:clamp(1.42rem,6.3vw,2.12rem);
    line-height:.94;
  }
  .flyer-heart-outline{
    right:.15rem;
    top:48%;
    font-size:1.5rem;
  }
  .flyer-spark-left{left:-.1rem;top:57%;transform:rotate(-14deg) scale(.82)}
  .flyer-spark-right{right:.2rem;top:8%;transform:rotate(-58deg) scale(.68)}

  .flyer-chef-badge{
    grid-area:badge;
    width:min(100%,205px);
    max-height:250px;
    margin:0;
    align-self:center;
    justify-self:center;
    object-fit:contain;
  }

  .flyer-ribbon{
    grid-area:ribbon;
    width:min(88%,340px);
    min-height:48px;
    margin:.72rem auto 0;
    padding:.42rem .8rem;
    font-size:clamp(1.04rem,4.6vw,1.45rem);
    gap:.4rem;
  }
  .flyer-ribbon::before,.flyer-ribbon::after{width:34px}

  .flyer-love{
    grid-area:love;
    width:100%;
    margin:.62rem auto 0;
  }
  .flyer-love-script{font-size:clamp(1.12rem,4.9vw,1.58rem)}
  .flyer-love strong{font-size:clamp(.76rem,3.15vw,.96rem)}
  .flyer-love-heart{font-size:1.15rem}
  .flyer-love-rule i{width:34px}

  .flyer-controls{padding:.82rem}
  .flyer-actions{gap:.58rem}
  .flyer-actions .button{
    min-height:54px;
    padding:.7rem .62rem;
    font-size:clamp(.96rem,4vw,1.08rem);
  }

  .flyer-hero .flyer-hours{
    min-height:92px;
    padding:.74rem .62rem;
    border-width:4px;
    border-radius:18px;
  }
}

/* Narrow phones: stack the badge rather than squeezing it. */
@media (orientation:portrait) and (max-width:390px){
  .flyer-art{
    grid-template-columns:1fr;
    grid-template-areas:
      "name"
      "home"
      "badge"
      "ribbon"
      "love";
    gap:.28rem;
    padding:1rem .8rem .9rem;
    background:#fff8fb;
  }
  .flyer-name-row{min-height:64px}
  .flyer-name{font-size:3.1rem}
  .flyer-home{font-size:1.5rem}
  .flyer-chef-badge{
    width:185px;
    max-height:238px;
    margin:.35rem auto .1rem;
  }
  .flyer-ribbon{width:min(86%,300px);font-size:1rem}
  .flyer-love-script{font-size:1.06rem}
  .flyer-love strong{font-size:.72rem}
}

/* Landscape remains compact and keeps the full brand composition visible. */
@media (orientation:landscape) and (max-height:560px){
  :root{--shari-frame-size:10px}
  .page-shell{padding:.58rem .72rem .8rem}
  .flyer-art{
    min-height:220px;
    grid-template-columns:minmax(0,1.64fr) minmax(175px,.72fr);
  }
  .flyer-copy{padding-top:26px;padding-bottom:20px}
  .flyer-name{font-size:clamp(3.7rem,7.8vw,5.8rem)}
  .flyer-home{font-size:clamp(1.72rem,3.3vw,2.7rem)}
  .flyer-ribbon{
    margin-top:.65rem;
    min-height:42px;
    font-size:clamp(1.1rem,2.3vw,1.68rem);
  }
  .flyer-love{margin-top:.42rem}
  .flyer-chef-badge{
    width:min(84%,220px);
    margin-top:10px;
    margin-right:16px;
  }
  .flyer-controls{
    grid-template-columns:minmax(0,1fr) minmax(300px,.86fr);
    align-items:stretch;
    padding:.65rem;
    gap:.65rem;
  }
  .flyer-actions{align-self:stretch}
  .flyer-actions .button{min-height:46px}
  .flyer-hero .flyer-hours{
    min-height:0;
    height:100%;
    padding:.5rem .7rem;
    border-width:4px;
  }
}