/* ==========================================================================
   STRATO MELBOURNE — September 2026 client review pass
   Loaded last. Everything here answers a specific point in the review:
   the "AI-generated" design signals, readability, and the new components
   (clickable occasions, room panels, booking overlay, contact page).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTTONS
   Review: "Reduce oversized headings, widely spaced capitals, pill-shaped
   buttons and faint outlines. These are the main elements making the design
   feel artificial and generic." + "use one consistent style".
   One primary, one secondary, one quiet. No pills, no metal sweep, no
   letterspaced capitals.
   -------------------------------------------------------------------------- */
.btn {
  --btn-py: 0.85rem;
  --btn-px: 1.6rem;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: none;
  background-image: none;
  box-shadow: none;
  transition: color var(--t-fast), background-color var(--t-fast),
              border-color var(--t-fast);
}
.btn--sm { --btn-py: 0.6rem; --btn-px: 1.1rem; font-size: 0.875rem; }
.btn--lg { --btn-py: 1rem; --btn-px: 2rem; font-size: 1rem; }
.btn:active { transform: none; }

/* Primary — solid brand gold, readable at any size */
.btn--metal,
.btn--primary {
  color: #12192A;
  background-color: var(--color-gold);
  background-image: none;
  border-color: var(--color-gold);
  box-shadow: none;
}
.btn--metal:hover,
.btn--metal:focus-visible,
.btn--primary:hover,
.btn--primary:focus-visible {
  color: #12192A;
  background-color: var(--color-gold-light);
  border-color: var(--color-gold-light);
  background-position: 0 0;
  box-shadow: none;
}
.btn--metal:active { box-shadow: none; }

/* Secondary — a border you can actually see */
.btn--outline,
.btn--ghost {
  color: var(--color-cream);
  background-color: transparent;
  border-color: rgba(244, 239, 232, 0.55);
  backdrop-filter: none;
}
.btn--outline:hover,
.btn--outline:focus-visible,
.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: #12192A;
  background-color: var(--color-cream);
  border-color: var(--color-cream);
}

/* Over photography, the secondary button needs a touch more weight */
.hero .btn--ghost,
.finale .btn--ghost,
.band .btn--ghost {
  border-color: rgba(255, 255, 255, 0.75);
  background-color: rgba(16, 24, 39, 0.35);
}

.btn__ripple { display: none; }

.btn-row { gap: var(--space-sm); margin-top: var(--space-md); }

/* --------------------------------------------------------------------------
   2. SECTION LABELS & HEADINGS
   Review: "Remove numbered section labels such as 01 and 02" (done in the
   templates) and pull the type back so it stops shouting.
   -------------------------------------------------------------------------- */
.eyebrow {
  margin-bottom: var(--space-xs);
  font-family: var(--font-accent);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-gold);
}

.section-head { margin-bottom: var(--space-lg); }
.section-title { text-wrap: balance; }

.accent-caps {
  font-family: var(--font-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Navigation — same de-spaced capitals as the rest of the site */
.nav__link {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   3. LOGO — approved artwork
   Review: "Replace the footer logo with the correct approved Strato logo
   artwork. The current logo looks wrong."
   -------------------------------------------------------------------------- */
.logo--img {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.logo--img img {
  display: block;
  width: auto;
  height: clamp(2.1rem, 1.7rem + 1vw, 2.6rem);
}
.logo--footer.logo--img img {
  height: clamp(2.4rem, 2rem + 1.2vw, 3rem);
}

/* --------------------------------------------------------------------------
   4. HERO
   Review: "Replace the writing over the opening video. The current type
   treatment and wording look cheap and disconnected from the Strato brand."
   The white bar down the left of the headline is gone; the scrim is lighter
   so the footage reads; the headline sits left with the brand's caps label.
   -------------------------------------------------------------------------- */
.hero { min-height: 88svh; }
.hero--page { min-height: 62svh; }

.hero__inner {
  align-items: flex-start;
  text-align: left;
  max-width: 44rem;
  margin-right: auto;
}

.hero__title {
  margin: 0 0 var(--space-sm);
  border-left: 0;
  margin-left: 0;
  font-size: var(--fs-hero);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.hero--page .hero__title { font-size: var(--fs-h1); }

.hero__line { display: block; }

.hero__eyebrow {
  margin-bottom: var(--space-sm);
  color: var(--color-gold-light);
  text-shadow: none;
}

.hero__sub {
  max-width: 38ch;
  margin: 0 0 var(--space-md);
  font-size: var(--fs-lead);
  color: rgba(244, 239, 232, 0.94);
}

.hero__scrim {
  background:
    linear-gradient(to bottom, rgba(11, 18, 32, 0.55) 0%, rgba(11, 18, 32, 0.18) 45%, rgba(11, 18, 32, 0.82) 100%),
    linear-gradient(to right, rgba(11, 18, 32, 0.62) 0%, rgba(11, 18, 32, 0.12) 62%);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Headline and buttons must be readable the moment the page paints —
   review: "Make essential headings and buttons visible immediately." */
.hero__title,
.hero__sub,
.hero__cta,
.hero__eyebrow { opacity: 1 !important; visibility: visible !important; }

/* --------------------------------------------------------------------------
   5. SUPPORTING DETAIL — opening times, terrace, walk-ins, Good to Know
   Review: "The Good to Know section is unreadable. Increase the font size and
   contrast" and "Increase the size and contrast of the smaller information."
   -------------------------------------------------------------------------- */
.factlist li { font-size: var(--fs-body); line-height: 1.5; color: var(--color-text); }
.factlist li span:first-child,
.factlist span:first-child {
  color: var(--color-gold);
  font-family: var(--font-accent);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 1;
}

.knowbefore {
  padding: var(--space-lg);
  background: var(--color-navy-soft);
  border: 1px solid var(--color-navy-line);
  border-radius: var(--radius-lg);
}
.knowbefore__title {
  margin-bottom: var(--space-md);
  font-size: var(--fs-h3);
  color: var(--color-cream);
  letter-spacing: 0;
  text-transform: none;
}
/* First in its section (no menu list above it any more): no gap on top. */
.knowbefore:first-child { margin-top: 0; }
.knowbefore .factlist li { font-size: var(--fs-body); }
.knowbefore .factlist li span:first-child { min-width: 6.5rem; }

/* --------------------------------------------------------------------------
   6. OCCASIONS — now clickable
   Review: "The occasion categories look like buttons, but they are not
   clickable. Either make each category open useful information or restyle the
   section" + "Each occasion should be clickable or lead to relevant imagery
   and information."
   -------------------------------------------------------------------------- */
.occasion-picker { margin-top: var(--space-lg); }

.occasion-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
}
.occasion-tab {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--color-navy-line);
  border-radius: var(--radius-md);
  background: var(--color-navy-soft);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}
.occasion-tab:hover { border-color: var(--color-gold-deep); color: var(--color-cream); }
.occasion-tab[aria-selected="true"] {
  color: #12192A;
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.occasion-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.occasion-panel[hidden] { display: none; }
.occasion-panel__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
}
.occasion-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.occasion-panel__title { margin-bottom: var(--space-xs); }
.occasion-panel__facts { margin-top: var(--space-md); }

@media (min-width: 48rem) {
  .occasion-panel { grid-template-columns: 1.1fr 1fr; gap: var(--space-xl); }
}

/* --------------------------------------------------------------------------
   7. ROOM CARDS — clickable, with the name revealed on hover
   Review: "Present the Yarra Room and Port Phillip Room as clickable image
   cards with a short description" and "when hovering over the image, the
   picture flips or reads Yarra Room, or Port Phillip Room."
   -------------------------------------------------------------------------- */
.roomcards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 46rem) {
  .roomcards { grid-template-columns: repeat(2, 1fr); }
}

.roomcard {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-navy-line);
  border-radius: var(--radius-lg);
  background: var(--color-navy-soft);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.roomcard:hover,
.roomcard:focus-visible { border-color: var(--color-gold-deep); }

.roomcard__media { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.roomcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-mid);
}
.roomcard:hover .roomcard__media img { transform: scale(1.04); }

/* The hover/focus reveal the client asked for */
.roomcard__reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(11, 18, 32, 0.72);
  color: var(--color-cream);
  font-family: var(--font-accent);
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transition: opacity var(--t-mid);
}
.roomcard:hover .roomcard__reveal,
.roomcard:focus-visible .roomcard__reveal,
.roomcard[aria-expanded="true"] .roomcard__reveal { opacity: 1; }

.roomcard__body { padding: var(--space-md) var(--space-md) var(--space-lg); }
.roomcard__title { margin-bottom: var(--space-2xs); }
.roomcard__body p { color: var(--color-text); }
.roomcard__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-sm);
  color: var(--color-gold);
  font-size: var(--fs-small);
}
.roomcard__more::after { content: "\2193"; transition: transform var(--t-fast); }
.roomcard[aria-expanded="true"] .roomcard__more::after { transform: rotate(180deg); }

/* Expanded room detail — capacity, layouts, inclusions, gallery, package */
.roomdetail {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-navy-line);
  border-radius: var(--radius-lg);
  background: var(--color-navy-soft);
}
.roomdetail[hidden] { display: none; }
.roomdetail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 56rem) {
  .roomdetail__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}
.roomdetail__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.roomdetail__gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.roomdetail__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
}
.roomdetail__specs div {
  padding: var(--space-sm);
  border: 1px solid var(--color-navy-line);
  border-radius: var(--radius-md);
  background: rgba(11, 18, 32, 0.5);
}
.roomdetail__specs dt {
  color: var(--color-gold);
  font-family: var(--font-accent);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.roomdetail__specs dd {
  margin: 0.25rem 0 0;
  font-size: var(--fs-body);
  color: var(--color-cream);
}
.roomdetail__list { margin: 0 0 var(--space-md); padding-left: 1.1rem; }
.roomdetail__list li { margin-bottom: 0.35rem; color: var(--color-text); font-size: var(--fs-body); }
.roomdetail__note { font-size: var(--fs-small); color: var(--color-muted); }

/* --------------------------------------------------------------------------
   8. BOOKING OVERLAY
   Review (worth keeping): "The Book a Table button is prominent and links
   directly to OpenTable (should open in overlay though, not new window)."
   -------------------------------------------------------------------------- */
.bookmodal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
}
.bookmodal[hidden] { display: none; }
.bookmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 20, 0.86);
  backdrop-filter: blur(3px);
}
.bookmodal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(46rem, 100%);
  max-height: min(46rem, 92svh);
  overflow: hidden;
  background: var(--color-navy);
  border: 1px solid var(--color-navy-line);
  border-radius: var(--radius-lg);
}
.bookmodal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-navy-line);
}
.bookmodal__title { margin: 0; font-size: var(--fs-h4); }
.bookmodal__close {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-navy-line);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-cream);
  font-size: 1.25rem;
  line-height: 1.2;
  cursor: pointer;
}
.bookmodal__close:hover { border-color: var(--color-gold); color: var(--color-gold); }
.bookmodal__body { flex: 1 1 auto; min-height: 26rem; background: #fff; }
.bookmodal__body iframe { display: block; max-width: 100%; border: 0; }
.bookmodal__foot {
  padding: var(--space-xs) var(--space-md);
  border-top: 1px solid var(--color-navy-line);
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.bookmodal__foot a { color: var(--color-gold); text-decoration: underline; }

/* --------------------------------------------------------------------------
   9. FOOTER
   Review: "The footer is currently difficult to read. Increase contrast and
   text size, improve spacing and simplify the number of items."
   -------------------------------------------------------------------------- */
.footer { padding-top: var(--space-2xl); }
.footer__grid { gap: var(--space-lg) var(--space-xl); padding-bottom: var(--space-xl); }

.footer__address,
.footer__contact { font-size: var(--fs-body); line-height: 1.6; color: var(--color-text); }
.footer__contact a { color: var(--color-cream); }
.footer__contact a:hover { color: var(--color-gold); }

.footer__heading {
  margin-bottom: var(--space-sm);
  font-family: var(--font-accent);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-gold);
}
.footer__col li + li { margin-top: var(--space-2xs); }
.footer__col a { font-size: var(--fs-body); color: var(--color-text); }
.footer__col a:hover { color: var(--color-gold); }

.hours { font-size: var(--fs-body); }
.hours dt { color: var(--color-muted); }
.hours dd { color: var(--color-cream); }

.footer__ack p { font-size: var(--fs-small); color: var(--color-muted); }
.footer__bar { font-size: var(--fs-small); color: var(--color-muted); }
.footer__social a { color: var(--color-text); }
.footer__social a:hover { color: var(--color-gold); }

@media (min-width: 62rem) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
}

/* --------------------------------------------------------------------------
   10. CONTACT PAGE — arrival information
   Review: "Add useful arrival information on the Contact page, including the
   venue entrance, transport, parking, lift access and accessibility details."
   -------------------------------------------------------------------------- */
.contact-section { padding-block: var(--space-3xl); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 52rem) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
  .contact-grid--three { grid-template-columns: repeat(3, 1fr); }
}
.contact-card {
  padding: var(--space-lg);
  border: 1px solid var(--color-navy-line);
  border-radius: var(--radius-lg);
  background: var(--color-navy-soft);
}
.contact-card h3 { margin-bottom: var(--space-xs); }
.contact-card p { color: var(--color-text); }
.contact-card a { color: var(--color-gold); }
.contact-card a:hover { color: var(--color-gold-light); }
.contact-card ul { margin: 0; padding-left: 1.1rem; }
.contact-card li { margin-bottom: 0.4rem; color: var(--color-text); font-size: var(--fs-body); line-height: 1.55; }

.contact-map {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-navy-line);
  border-radius: var(--radius-lg);
}

/* Generic WP page (Privacy, FAQ, Careers) */
.page-shell { padding-block: var(--space-3xl); }
.page-shell .entry-content { max-width: var(--container-narrow); }
.page-shell .entry-content h2 { margin-top: var(--space-lg); }
.page-shell .entry-content ul,
.page-shell .entry-content ol { padding-left: 1.2rem; color: var(--color-text); }
.page-shell .entry-content li { margin-bottom: 0.4rem; line-height: 1.6; }
.page-shell .entry-content a { color: var(--color-gold); text-decoration: underline; }

/* --------------------------------------------------------------------------
   11. WHAT'S ON — one consistent card
   Review: "Use one consistent card layout. Apply the End of Year Celebrations
   style to Discover Macallan at Strato and the other listings."
   -------------------------------------------------------------------------- */
.wo-item__when,
.wo-feature__when { font-size: var(--fs-small); color: var(--color-gold); }
.wo-item__desc,
.wo-feature__desc { font-size: var(--fs-body); color: var(--color-text); }
.wo-item__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(244, 239, 232, 0.55);
  border-radius: var(--radius-md);
  color: var(--color-cream);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: none;
  transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}
.wo-item__cta:hover {
  color: #12192A;
  background: var(--color-cream);
  border-color: var(--color-cream);
}

/* --------------------------------------------------------------------------
   12. ACCESSIBILITY
   Review: "Test colour contrast, text size, keyboard navigation, focus states
   and reduced-motion settings before approval."
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
  .hero__video,
  .pillar__video { display: none; }
}

/* Nothing that carries meaning should wait on an animation to become
   readable — the review flagged headings appearing in fragments. */
[data-aos] { transition-duration: 450ms; }