/* ============================================================
   Ye Olde Royal Oak — styles for the menu & contact pages,
   plus the etched-line event icons. Loads after styles.css.
   ============================================================ */

/* ---------- Active nav state ---------- */
.nav nav a.active::after{width:100%}

/* ---------- Inner page hero ---------- */
.page-hero{
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%,rgba(201,162,75,.16),transparent 70%),
    var(--oak-deep);
  color:var(--cream);text-align:center;
  padding:clamp(5rem,10vw,7.5rem) 1.5rem clamp(3.5rem,7vw,5rem);
}
.page-hero .kicker{color:var(--brass-bright)}
.page-hero-inner>*{animation:page-hero-rise .9s cubic-bezier(.2,.7,.2,1) both}
.page-hero-inner>*:nth-child(2){animation-delay:.12s}
.page-hero-inner>*:nth-child(3){animation-delay:.26s}
@keyframes page-hero-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page-hero-inner>*{animation:none}}
.page-hero h1{font-size:clamp(2.8rem,6vw,4.6rem);font-weight:600}
.page-hero h1 em{font-style:italic;color:var(--brass-bright)}
.page-hero-sub{max-width:42rem;margin:1.4rem auto 0;color:rgba(246,239,224,.85);font-size:1.08rem}
.page-hero-sub a{color:var(--brass-bright);text-decoration:none;font-weight:500}
.page-hero-sub a:hover{text-decoration:underline}

/* ---------- Menu pages ---------- */
.menu-section{background:var(--cream)}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:66rem;margin:0 auto}
.menu-page{
  background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  box-shadow:0 14px 40px rgba(21,43,33,.08);
  transition:transform .3s,box-shadow .3s;
}
.menu-page:hover{transform:translateY(-4px);box-shadow:0 22px 54px rgba(21,43,33,.14)}
.menu-page img{width:100%}
.menu-note{
  max-width:44rem;margin:2.8rem auto 0;text-align:center;
  font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--muted);
}

/* ---------- Enquiry / form placeholder ---------- */
.enquiry-panel{
  max-width:46rem;margin:3rem auto 0;
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:2.4rem 2.2rem;text-align:center;
}
.enquiry-panel h3{color:var(--oak);margin-bottom:1.4rem}
.form-placeholder{
  border:1.5px dashed rgba(36,31,23,.25);border-radius:3px;
  padding:2.4rem 1.6rem;
}
.form-placeholder p{color:var(--muted);margin-bottom:.7rem;font-size:.98rem}
.form-placeholder p:last-child{margin-bottom:0}
.form-placeholder a{color:var(--oak);font-weight:500}

/* ---------- Etched-line event icons ---------- */
.event-ico svg{
  width:42px;height:42px;display:block;
  fill:none;stroke:var(--oak);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.event-ico .ico-fill{fill:var(--oak);stroke:none}
.event:hover .event-ico svg{stroke:var(--brass)}
.event:hover .event-ico .ico-fill{fill:var(--brass)}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .menu-grid{grid-template-columns:1fr;gap:1.4rem}
  .enquiry-panel{padding:1.8rem 1.3rem}
}