/* Welcome to the Gold Coast: site-wide basics. Page layout and styling live inline in each page.
   Colours and fonts follow the MAID design guide (19 Oct 2026): navy #2A3F5E pages, cream #FEFBDE headings and body
   copy, blue #7290B3 dividing lines, Montserrat + Bodoni Moda, and seashell strips down both page edges (inline in
   each page, as on the design canvas). */
sc-if { display: contents; }
sc-if[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: #2A3F5E; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #2A3F5E; color: #FEFBDE; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: #FEFBDE; color: #2A3F5E; }
img { max-width: 100%; }
[id] { scroll-margin-top: 16px; }
a:focus-visible, button:focus-visible, iframe:focus-visible { outline: 2px solid #FEFBDE; outline-offset: 3px; }

/* ---- Hover and focus: gentle ---- */
a, button { transition: color .3s ease, background-color .3s ease, border-color .3s ease, text-underline-offset .3s ease; }
a[style*="text-decoration: underline"]:hover { text-underline-offset: 2px !important; }
a[style*="background: #FEFBDE"]:hover, button[style*="background: #FEFBDE"]:hover { background-color: #E6D1B6 !important; }
a[style*="border: 1px solid #FEFBDE"]:not([style*="background: #FEFBDE"]):hover,
button[style*="border: 1px solid #FEFBDE"][aria-pressed="false"]:hover,
button[style*="border: 1px solid #FEFBDE"]:not([aria-pressed]):not([style*="background: #FEFBDE"]):hover { background-color: #FEFBDE !important; color: #2A3F5E !important; }
nav[aria-label="Guide sections"] a:hover { border-bottom-color: #7290B3 !important; }
footer a:hover { color: #E6D1B6 !important; }
a img { transition: transform 1.4s cubic-bezier(.2, .65, .25, 1); }
a:hover img { transform: scale(1.035); }

/* ---- Motion: only when site.js adds .gc-motion, which it never does if the visitor prefers reduced motion ---- */
.gc-motion .gc-reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s cubic-bezier(.2, .65, .25, 1), transform 1s cubic-bezier(.2, .65, .25, 1), color .3s ease, background-color .3s ease, border-color .3s ease, text-underline-offset .3s ease; }
.gc-motion .gc-reveal.gc-in { opacity: 1; transform: none; }
/* Photos open like a curtain over their navy box while the picture settles. (The clip sits on the picture, not the
   box: a fully clipped box would never count as being in view.) */
.gc-motion .gc-photo img { clip-path: inset(100% 0 0 0); transform: scale(1.14); transition: clip-path 1.3s cubic-bezier(.65, 0, .15, 1), transform 1.8s cubic-bezier(.2, .65, .25, 1); }
.gc-motion .gc-photo.gc-in img { clip-path: inset(0 0 0 0); transform: scale(1); }
.gc-motion a:hover .gc-photo.gc-in img { transform: scale(1.035); }
/* Page titles rise word by word. */
.gc-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.02em 0.16em; margin: -0.08em -0.02em -0.16em; }
.gc-w > span { display: inline-block; }
.gc-motion .gc-title .gc-w > span { transform: translateY(115%); transition: transform 1.1s cubic-bezier(.2, .65, .25, 1); }
.gc-motion .gc-title.gc-in .gc-w > span { transform: none; }
/* (V08: the home slideshow and the old headline's drawn arch are gone, and their motion rules with them.) */

/* ---- Print: dark ink on white paper (printers drop the navy), no shell strips or motion ---- */
@media print {
  html, body { background: #FFFFFF !important; color: #1B2A40 !important; }
  [data-dc-scope] *:not(img):not(svg):not(path):not(circle) { color: #1B2A40 !important; background-color: transparent !important; text-shadow: none !important; }
  div[aria-hidden="true"][style*="shell-border"] { display: none !important; }
  .gc-motion .gc-reveal, .gc-motion .gc-photo, .gc-motion .gc-photo img, .gc-motion .gc-title .gc-w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
}

/* ---- V08 (21 Oct 2026): the opening, after larsbarandgrill.com.au ---- */
/* Opening loader: shown only when the inline head script sets html.gc-loading (once per session, never for reduced
   motion); site.js runs it and fades it into the hero film. */
.gc-loader { display: none; position: fixed; inset: 0; z-index: 1000; background: #FEFBDE; color: #2A3F5E; overflow: hidden; cursor: default; transition: opacity 1.5s cubic-bezier(.25, .46, .45, .94); }
html.gc-loading .gc-loader, .gc-loader.gc-out { display: block; }
.gc-loader.gc-out { opacity: 0; pointer-events: none; }
html.gc-loading, html.gc-loading body { overflow: hidden; }
.gc-loader-tiles { position: absolute; inset: 0; width: 100%; height: 100%; }
.gc-loader-tiles use { fill: none; stroke: #7290B3; stroke-width: 1; }
/* The "GC" pairs fade in, step by step; the Acknowledgement fades in all at once, centred, in Montserrat. */
.gc-loader-tiles g { opacity: 0; transition: opacity 1.2s cubic-bezier(.25, .46, .45, .94); }
.gc-loader-tiles g.gc-on { opacity: 1; }
.gc-loader-text { position: absolute; left: 16px; top: 30%; width: calc(100% - 32px); margin: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-style: normal; font-size: 17px; line-height: 1.5; text-align: center; color: #2A3F5E; text-wrap: pretty; opacity: 0; transition: opacity 1.4s cubic-bezier(.25, .46, .45, .94); }
.gc-loader-text.gc-on { opacity: 1; }
/* Hero: the full screen under the work-in-progress banner (site.js measures it); the canvas uses a fixed ratio. */
.gc-hero { height: calc(100vh - var(--gc-wip, 0px)) !important; height: calc(100svh - var(--gc-wip, 0px)) !important; min-height: 520px !important; }
.gc-hero-links { scrollbar-width: none; }
.gc-hero-links::-webkit-scrollbar { display: none; }
.gc-hero-foot a:hover, .gc-hero-foot a:focus-visible { color: #E6D1B6 !important; }
/* The film's Emergency button: plain text that turns into a red button on hover (Genki, 21 Oct 2026). */
.gc-hero-emergency:hover, .gc-hero-emergency:focus-visible { background-color: #C4122F !important; }
@media (max-width: 640px) { .gc-hide-sm { display: none !important; } }
/* On narrow screens the hero menu scrolls sideways: its right edge fades to show there is more. */
@media (max-width: 1100px) { .gc-hero-links { padding-right: 40px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); } }
@media print { .gc-loader { display: none !important; } }
/* The film's bottom row on phones (and phones held sideways, up to 640px): three short links side by side, each allowed
   two lines, without the music note. */
@media (max-width: 640px) { .gc-hero-foot { font-size: 11.5px !important; column-gap: 14px !important; } .gc-hero-listen svg { display: none; } }

/* ---- Mini player (V08 round 4, 21 Oct 2026; round 5: shuffle, close, rolling text): "Listen to Australian Music" on
   the film opens a slim, see-through player that rises from the bottom of the screen: the song and artist (rolling
   over to "Modern Australian, Spotify playlist" and back while it plays), back, play/pause, skip, expand (the Listen
   page) and close. It drives Spotify's own embed, kept out of sight (site.js). On wide screens it takes the place of the
   Listen link; below 1120px it sits centred along the bottom and the film's bottom row moves up to make room. ---- */
.gc-player { position: fixed; z-index: 60; right: clamp(28px, 4.5vw, 72px); bottom: clamp(14px, 2.4vw, 32px); width: min(440px, calc(100vw - 32px)); height: 48px; box-sizing: border-box; display: flex; align-items: center; gap: 0; padding: 0 0 0 16px; background: rgba(27, 42, 64, 0.38); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(254, 251, 222, 0.28); color: #FEFBDE; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; transform: translateY(calc(100% + 48px)); opacity: 0; visibility: hidden; transition: transform .7s cubic-bezier(.2, .65, .25, 1), opacity .5s ease, visibility 0s linear .7s; }
.gc-player.gc-on { transform: none; opacity: 1; visibility: visible; transition: transform .7s cubic-bezier(.2, .65, .25, 1), opacity .5s ease, visibility 0s; }
/* The text: two faces that take turns, the one in front rolling up and away as the other rolls up from below. */
.gc-player-text { position: relative; flex: 1 1 auto; min-width: 0; height: 34px; overflow: hidden; perspective: 260px; }
.gc-player-face { position: absolute; left: 0; right: 4px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1.25; opacity: 0; transform: translateY(80%) rotateX(-80deg); transform-origin: 50% 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.gc-player-face.gc-cur { opacity: 1; transform: none; transition: transform .8s cubic-bezier(.2, .65, .25, 1), opacity .45s ease .12s; }
.gc-player-face.gc-gone { opacity: 0; transform: translateY(-80%) rotateX(80deg); transition: transform .8s cubic-bezier(.2, .65, .25, 1), opacity .35s ease; }
.gc-player-title { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-player-artist { font-size: 11px; font-weight: 500; color: rgba(254, 251, 222, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-player .gc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.gc-player button, .gc-player a { position: relative; flex: 0 0 auto; width: 40px; height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: transparent; color: #FEFBDE; cursor: pointer; text-decoration: none; }
.gc-player button:hover, .gc-player a:hover, .gc-player button:focus-visible, .gc-player a:focus-visible { color: #E6D1B6; }
.gc-player button:focus-visible, .gc-player a:focus-visible { outline-offset: -4px; }
.gc-player .gc-player-play svg { width: 18px; height: 18px; }
.gc-player.gc-wait .gc-player-play { opacity: .55; }
/* Close: a little apart from the controls, after a hairline. */
.gc-player .gc-player-close { width: 38px; margin-left: 2px; }
.gc-player .gc-player-close::before { content: ''; position: absolute; left: 0; top: 15px; bottom: 15px; width: 1px; background: rgba(254, 251, 222, 0.28); }
.gc-player-embed { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
html.gc-player-open .gc-hero-listen { opacity: 0; pointer-events: none; }
.gc-hero-foot { transition: transform .7s cubic-bezier(.2, .65, .25, 1); }
@media (max-width: 1119px) {
  .gc-player { left: 16px; right: 16px; width: auto; max-width: 560px; margin: 0 auto; bottom: 16px; }
  html.gc-player-open .gc-hero-foot { transform: translateY(-60px); }
  html.gc-player-open .gc-hero-listen { opacity: 1; pointer-events: auto; }
}
/* Round 8 (22 Oct 2026): the player carries over to the other pages (site.js shows them in place while it plays).
   Room under the footer so the end of a page can scroll clear of the bar; a busy pointer while a page comes in; no
   ring around the new page's title, which takes the focus as a newly opened page would. */
html.gc-player-open footer { padding-bottom: 92px; }
html.gc-navigating, html.gc-navigating * { cursor: progress !important; }
main h1[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .gc-player, .gc-player.gc-on, .gc-hero-foot { transition: none; }
  .gc-player-face, .gc-player-face.gc-cur, .gc-player-face.gc-gone { transform: none; transition: opacity .3s ease; }
}
@media print { .gc-player, .gc-player-embed { display: none !important; } }

/* ---- Guide search (V08 round 6, 21 Oct 2026): the search box on Eat to Day trips (its layout is inline in each page;
   these are the parts inline styles can't reach), the highlighted words and the "Also in the guide" line. ---- */
.gc-search-input::placeholder { color: #A7BCD6; opacity: 1; }
.gc-search-input::-webkit-search-cancel-button, .gc-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.gc-search-input:hover { border-color: #A7BCD6 !important; }
.gc-search-input:focus { outline: 2px solid #FEFBDE; outline-offset: 2px; }
mark.gc-hit { background: rgba(254, 251, 222, 0.16); color: inherit; box-shadow: inset 0 -1px 0 #FEFBDE; border-radius: 1px; }
.gc-search-also { margin: 0; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.6; color: #E6D1B6; }
.gc-search-also a { color: #FEFBDE; text-decoration: underline; text-underline-offset: 3px; }
.gc-search-also a:hover { color: #E6D1B6; }
@media print { [role="search"] { display: none !important; } mark.gc-hit { background: none; box-shadow: none; } }

/* ---- Phones held sideways (V08 round 7, 21 Oct 2026; Genki: "when you rotate the phone horizontally, it should resize
   it closer to desktop but of course not enough screen space"). A short, wide screen gets the desktop layout where it
   fits: the opening screen's grid (site.js), the film exactly filling the screen (no 520px floor), the guide's ten
   tiles five across, and The Gold Coast's photo beside its text, sized to the height. Guide pages already lay out
   like the desktop at these widths. ---- */
@media (orientation: landscape) and (max-height: 540px) {
  .gc-hero { min-height: 240px !important; }
}
@media (orientation: landscape) and (max-height: 540px) and (min-width: 560px) {
  #start-here div[style*="minmax(clamp("] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  #the-gold-coast > div > div:first-child { flex: 1 1 260px !important; }
  #the-gold-coast > div > div:last-child { flex: 0 1 200px !important; width: min(100%, 200px) !important; }
}
@media (orientation: landscape) and (max-height: 540px) and (min-width: 560px) and (max-width: 639px) {
  #start-here div[style*="minmax(clamp("] h3 { font-size: 17px !important; }
}
@media (orientation: landscape) and (max-height: 540px) and (min-width: 640px) {
  #the-gold-coast > div > div:first-child { flex: 1 1 300px !important; }
  #the-gold-coast > div > div:last-child { flex: 0 1 250px !important; width: min(100%, 250px) !important; }
}