/*!
 * Oyolloo Elements — J10 Hero widget.
 *
 * Every rule is scoped to .oo-hero. There is no element selector and no :root
 * block, so nothing here can reach the theme or any other widget. The tokens
 * below belong to this widget alone.
 */

.oo-hero{
  --ooe-maxw:1220px;
  --ooe-pad:clamp(18px,4.5vw,44px);
  --ooe-r:6px;
  /* the header widget is fixed and transparent, so the banner reclaims its
     height. JS measures the real bar and writes over this. */
  --ooe-head-h:80px;

  --ooe-yellow:#F7BE27;
  --ooe-yellow-dk:#E0A812;
  --ooe-red:#E3000E;
  --ooe-green:#66C15A;
  --ooe-dark:#17150F;
  --ooe-line:#2A2620;
  --ooe-on-dark:#F4F1E9;
  --ooe-on-dark-mut:#A9A296;

  --ooe-f-display:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --ooe-f-head:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --ooe-f-body:'Roboto','Roboto Fallback','Segoe UI',Helvetica,Arial,sans-serif;

  --ooe-ease:cubic-bezier(.22,.61,.36,1);

  position:relative; overflow:hidden;
  background:var(--ooe-dark); color:var(--ooe-on-dark);
  font-family:var(--ooe-f-body); font-size:16px; line-height:1.7; font-weight:400;
  min-height:clamp(560px,88vh,860px);
  display:flex; flex-direction:column;
  padding:calc(var(--ooe-head-h) + clamp(24px,3.5vh,50px)) 0 0;
}

/* box-sizing is set on the widget's own subtree, never globally */
.oo-hero,.oo-hero *,.oo-hero *::before,.oo-hero *::after{ box-sizing:border-box; }

/* ================= media ================= */
.oo-hero__media{ position:absolute; inset:0; }
.oo-hero__media img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:62% 50%;
  border:0; border-radius:0; box-shadow:none;
  transform:scale(1.06);
  animation:ooHeroDrift 22s var(--ooe-ease) forwards;
}
@keyframes ooHeroDrift{ to{ transform:none; } }

/* darkened from the left so the copy stays readable over any photo */
.oo-hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, #17150F 0%, rgba(23,21,15,.93) 34%, rgba(23,21,15,.56) 58%, rgba(23,21,15,.32) 100%),
    linear-gradient(to top, #17150F 2%, rgba(23,21,15,0) 34%);
}

/* two soft light shafts, the way a plated dish is lit */
.oo-hero__beams{ position:absolute; inset:0; overflow:hidden; opacity:.55; }
.oo-hero__beams::before,.oo-hero__beams::after{
  content:""; position:absolute; top:-36%; height:172%; width:clamp(80px,11vw,180px);
  background:linear-gradient(180deg, rgba(255,246,220,.17), rgba(255,246,220,0) 74%);
  filter:blur(28px);
}
.oo-hero__beams::before{ left:52%; transform:rotate(15deg); }
.oo-hero__beams::after{ left:73%; transform:rotate(-12deg); opacity:.7; }

.oo-hero__waves{
  position:absolute; inset:0 auto 0 0;
  width:44%; height:100%; color:var(--ooe-yellow); opacity:.045;
}

/* ================= copy ================= */
.oo-hero__inner{
  position:relative; flex:1; width:100%;
  display:flex; align-items:center;
  max-width:var(--ooe-maxw); margin-inline:auto;
  padding-inline:var(--ooe-pad);
  padding-block:clamp(24px,5vh,60px);
}
.oo-hero__copy{ max-width:min(100%,640px); }

.oo-hero__place{
  margin:0;
  font-family:var(--ooe-f-head); font-weight:500; font-size:.74rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ooe-yellow);
}
.oo-hero__name{
  margin:16px 0 0;
  font-family:var(--ooe-f-display); font-weight:700;
  font-size:clamp(3rem,8.4vw,6.4rem); line-height:.94;
  letter-spacing:.004em; text-wrap:balance; color:var(--ooe-on-dark);
  text-shadow:0 8px 34px rgba(0,0,0,.65);
}
.oo-hero__line{ display:block; }
.oo-hero__line--accent{ color:var(--ooe-yellow); }

.oo-hero__lede{
  margin:20px 0 0; max-width:44ch;
  color:#D8D2C5; font-size:clamp(.94rem,1.25vw,1.05rem); line-height:1.72;
}

/* ================= calls to action ================= */
.oo-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.oo-hero__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ooe-f-head); font-weight:600; font-size:.86rem;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:14px 30px; border-radius:var(--ooe-r); border:2px solid transparent;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .12s ease;
}
.oo-hero__btn--yellow{
  background:var(--ooe-yellow); color:#211A05;
  box-shadow:0 6px 18px -9px rgba(247,190,39,.85);
}
.oo-hero__btn--yellow:hover{ background:var(--ooe-yellow-dk); color:#211A05; transform:translateY(-1px); }
.oo-hero__btn--ghost{
  background:transparent; color:var(--ooe-on-dark);
  border-color:rgba(244,241,233,.34);
}
.oo-hero__btn--ghost:hover{ border-color:var(--ooe-yellow); color:var(--ooe-yellow); }
.oo-hero__btn:active{ transform:translateY(1px); }

/* ================= note and status ================= */
.oo-hero__note{
  display:flex; align-items:center; gap:11px; margin:24px 0 0;
  font-family:var(--ooe-f-head); font-weight:500; font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ooe-on-dark-mut);
}
.oo-hero__dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--ooe-yellow); box-shadow:0 0 0 4px rgba(247,190,39,.18);
}

.oo-hero__meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.oo-hero__status,
.oo-hero__addr{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ooe-f-head); font-weight:500; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--ooe-line); border-radius:100px;
  background:rgba(10,9,8,.45);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  padding:8px 15px; color:var(--ooe-on-dark-mut);
}
.oo-hero__status[hidden]{ display:none; }
.oo-hero__addr:hover{ border-color:var(--ooe-yellow); color:var(--ooe-yellow); }
.oo-hero__status-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--ooe-green); box-shadow:0 0 0 3px rgba(102,193,90,.22);
}
.oo-hero__status.oo-is-closed .oo-hero__status-dot{
  background:var(--ooe-red); box-shadow:0 0 0 3px rgba(227,0,14,.22);
}

/* ================= facts strip ================= */
/* practical facts pinned to the foot of the banner */
.oo-hero__strip{
  position:relative; margin-top:auto;
  border-top:1px solid var(--ooe-line);
  background:rgba(10,9,8,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.oo-hero__strip-in{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px 0;
  max-width:var(--ooe-maxw); margin-inline:auto;
  padding-inline:var(--ooe-pad);
  padding-block:clamp(16px,2.6vh,26px);
}
.oo-hero__fact{
  display:flex; flex-direction:column; gap:6px; min-width:0;
  padding-inline:clamp(14px,2vw,30px);
}
.oo-hero__fact:first-child{ padding-left:0; }
.oo-hero__fact + .oo-hero__fact{ border-left:1px solid rgba(244,241,233,.13); }
.oo-hero__fact-k{
  font-family:var(--ooe-f-head); font-weight:500; font-size:.6rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ooe-yellow);
}
.oo-hero__fact-v{ font-size:.9rem; line-height:1.45; color:#DCD6CA; }
.oo-hero__fact-v a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid var(--ooe-line); padding-bottom:2px;
  transition:color .25s ease, border-color .25s ease;
}
.oo-hero__fact-v a:hover{ color:var(--ooe-yellow); border-color:var(--ooe-yellow); }

.oo-hero :focus-visible{
  outline:3px solid var(--ooe-yellow); outline-offset:2px; border-radius:2px;
}

/* ================= responsive ================= */
@media (max-width:940px){
  .oo-hero{ min-height:0; padding-bottom:0; }
  .oo-hero__media img{ object-position:68% 50%; }
  .oo-hero__scrim{
    background:
      linear-gradient(90deg, #17150F 0%, rgba(23,21,15,.88) 52%, rgba(23,21,15,.5) 100%),
      linear-gradient(to top, #17150F 5%, rgba(23,21,15,0) 46%);
  }
  .oo-hero__waves{ width:100%; }
  .oo-hero__copy{ max-width:none; }
  .oo-hero__cta .oo-hero__btn{ flex:1 1 auto; }
  .oo-hero__strip-in{ grid-template-columns:repeat(2,1fr); gap:14px 30px; }
  .oo-hero__fact{ padding-inline:0; }
  .oo-hero__fact + .oo-hero__fact{ border-left:0; }
}
@media (max-width:560px){
  .oo-hero__strip-in{ grid-template-columns:1fr; gap:12px; }
  .oo-hero__fact{ flex-direction:row; align-items:baseline; gap:12px; }
  .oo-hero__fact-k{ flex:0 0 5.6rem; }
}

/* ================= entrance ================= */
@keyframes ooHeroRise{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:none; }
}
.oo-hero__copy > *{ animation:ooHeroRise .68s cubic-bezier(.22,.7,.3,1) backwards; }
.oo-hero__copy > *:nth-child(1){ animation-delay:.05s; }
.oo-hero__copy > *:nth-child(2){ animation-delay:.12s; }
.oo-hero__copy > *:nth-child(3){ animation-delay:.19s; }
.oo-hero__copy > *:nth-child(4){ animation-delay:.26s; }
.oo-hero__copy > *:nth-child(5){ animation-delay:.33s; }
.oo-hero__copy > *:nth-child(6){ animation-delay:.40s; }
.oo-hero__strip{ animation:ooHeroRise .8s cubic-bezier(.22,.7,.3,1) .5s backwards; }

@media (prefers-reduced-motion:reduce){
  .oo-hero__copy > *,.oo-hero__strip{ animation:none; }
  .oo-hero__media img{ animation:none; transform:none; }
}

/* ================= theme hardening =================
   A WordPress theme styles bare elements — a, h1, p, img. Those rules beat
   inheritance however low their specificity, so anything a theme is likely to
   set is declared here rather than left to inherit. */
.oo-hero__place,
.oo-hero__name,
.oo-hero__lede,
.oo-hero__note{ margin-block-end:0; }
.oo-hero__fact-v a,
.oo-hero__addr{ box-shadow:none; }

/* In the editor the banner keeps a workable height even before a fixed header
   exists to measure. */
body.elementor-editor-active .oo-hero{ min-height:clamp(480px,70vh,760px); }