/* =====================================================================
   Website look — set in Admin → Setup → Website look.
   The colours come from <style id="siteLook"> (CSS variables); the choices are data-* attributes on <body>.
   ===================================================================== */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--cream); color: var(--text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.container { max-width: var(--wrap, 1240px); }
::selection { background: color-mix(in srgb, var(--accent) 25%, white); }
a, button, .btn, .chip, .cat-tab, .card, .pr-card, .rs-card { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

/* Smooth page changes (browsers that support it fade between pages) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ---------- Shapes ---------- */
.btn, .search-btn, .chip, .cat-tab, .cat-tabs, .pr-more, .hero-kicker, .user-menu summary { border-radius: var(--r-btn); }
.card, .pr-card, .rs-card, .book-card, .summary-card, .enquiry-card, .confirm-card, .lookup-card, .trip, .au-card, .key-facts div,
.pr-wrap .pr-section { border-radius: var(--r-card); }
.card-img, .slider, .photo-grid, .hero-spot, .hc img { border-radius: var(--r-img); }
body[data-radius="sharp"] .search, body[data-radius="sharp"] .filter-bar { border-radius: 8px; }
body[data-radius="sharp"] .search-btn { border-radius: 6px; }
body[data-radius="soft"] .search, body[data-radius="soft"] .filter-bar { border-radius: 16px; }
body[data-radius="soft"] .search-btn { border-radius: 12px; }
body[data-radius="sharp"] .au-input, body[data-radius="sharp"] .au-btn, body[data-radius="sharp"] .au-alt { border-radius: 6px; }

/* ---------- Top bar ---------- */
body[data-header="light"] .nav { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0, 0, 0, .02), 0 8px 24px -22px rgba(0, 0, 0, .4); }
body[data-header="glass"] .nav { background: color-mix(in srgb, var(--cream) 82%, transparent); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--brand) 12%, transparent); }
body[data-header="brand"] .nav, body[data-header="dark"] .nav { border-bottom: 0; backdrop-filter: none; }
body[data-header="brand"] .nav { background: var(--grad-brand); }
body[data-header="dark"] .nav { background: #0f141a; }
body[data-header="brand"] .brand-text strong, body[data-header="dark"] .brand-text strong { color: #fff; }
body[data-header="brand"] .brand-text small, body[data-header="dark"] .brand-text small { color: color-mix(in srgb, var(--accent) 45%, white); }
body[data-header="brand"] .cat-tabs, body[data-header="dark"] .cat-tabs { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
body[data-header="brand"] .cat-tab, body[data-header="dark"] .cat-tab { color: rgba(255, 255, 255, .78); }
body[data-header="brand"] .cat-tab:hover, body[data-header="dark"] .cat-tab:hover { background: rgba(255, 255, 255, .12); color: #fff; }
body[data-header="brand"] .cat-tab.active, body[data-header="dark"] .cat-tab.active { background: #fff; color: var(--brand-dark); box-shadow: none; }
body[data-header="brand"] .cat-tab.active svg, body[data-header="dark"] .cat-tab.active svg { color: var(--accent); }
body[data-header="brand"] .menu-toggle, body[data-header="dark"] .menu-toggle { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); }
.nav { transition: box-shadow .25s, background .25s; }
.nav.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); }
body[data-look="modern"] .cat-tab.active, body[data-look="luxe"] .cat-tab.active { background: var(--brand); box-shadow: none; }
body[data-look="modern"][data-header="light"] .cat-tabs { background: var(--cream); box-shadow: none; }

/* ---------- Buttons ---------- */
body[data-btn="solid"] .btn-primary, body[data-btn="solid"] .search-btn, body[data-btn="solid"] .tick { background: var(--accent); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
body[data-btn="solid"] .btn-primary:hover, body[data-btn="solid"] .search-btn:hover { background: color-mix(in srgb, var(--accent) 86%, black); }
body[data-btn="outline"] .btn-primary { background: transparent; color: var(--accent); border: 2px solid var(--accent); box-shadow: none; }
body[data-btn="outline"] .btn-primary:hover { background: var(--accent); color: #fff; }
body[data-btn="outline"] .search-btn { background: var(--accent); box-shadow: none; }
.btn-ghost { border-color: color-mix(in srgb, var(--brand) 55%, transparent); color: var(--brand-dark); }
.btn-ghost:hover { background: var(--brand-soft); }
.btn { transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background-color .2s, color .2s, border-color .2s; }
.btn:active { transform: scale(.97); }

/* ---------- Cards ---------- */
.card, .pr-card, .rs-card { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .25s; }
.card-img img, .pr-img img, .rs-img img { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
body[data-cards="outline"] .card, body[data-cards="outline"] .pr-card, body[data-cards="outline"] .rs-card { box-shadow: none; border: 1px solid var(--line); background: #fff; }
body[data-cards="outline"] .card:hover, body[data-cards="outline"] .pr-card:hover, body[data-cards="outline"] .rs-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .35); }
body[data-cards="flat"] .card, body[data-cards="flat"] .pr-card, body[data-cards="flat"] .rs-card { box-shadow: none; border: 0; background: transparent; padding: 0; }
body[data-cards="flat"] .card-body, body[data-cards="flat"] .pr-body { padding-left: 2px; padding-right: 2px; }
body[data-cards="glass"] .card, body[data-cards="glass"] .pr-card, body[data-cards="glass"] .rs-card { background: rgba(255, 255, 255, .62); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 16px 40px -24px color-mix(in srgb, var(--brand) 55%, transparent); }
body[data-hover="lift"] .card:hover, body[data-hover="lift"] .pr-card:hover, body[data-hover="lift"] .rs-card:hover { transform: translateY(-6px); }
body[data-hover="zoom"] .card:hover, body[data-hover="zoom"] .pr-card:hover, body[data-hover="zoom"] .rs-card:hover { transform: none; }
body[data-hover="zoom"] .card:hover .card-img img, body[data-hover="zoom"] .pr-card:hover .pr-img img, body[data-hover="zoom"] .rs-card:hover .rs-img img { transform: scale(1.07); }
body[data-hover="none"] .card:hover, body[data-hover="none"] .pr-card:hover, body[data-hover="none"] .rs-card:hover { transform: none; }
body[data-hover="none"] .card:hover img, body[data-hover="none"] .pr-card:hover img, body[data-hover="none"] .rs-card:hover img { transform: none; }
.card-img { overflow: hidden; }
.price strong, .sale-price { color: var(--brand-dark); }
.rating { background: color-mix(in srgb, var(--accent) 12%, white); color: color-mix(in srgb, var(--accent) 60%, black); }
.chip.active { background: var(--brand); box-shadow: none; }
.chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.arrow:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); }
.loc-title h2 span { background: var(--accent-soft); color: var(--accent); }

/* ---------- Banners ---------- */
/* Curved edge: drawn with a mask so it always matches the page colour */
.hero::after, .page-hero::after {
    background: var(--cream);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40c160 26 320 30 480 12S800 0 960 8s320 44 480 30v32H0z'/%3E%3C/svg%3E") left top/100% 72px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40c160 26 320 30 480 12S800 0 960 8s320 44 480 30v32H0z'/%3E%3C/svg%3E") left top/100% 72px no-repeat;
}
body[data-wave="off"] .hero::after, body[data-wave="off"] .page-hero::after { display: none; }
body[data-wave="off"] .hero { padding-bottom: 70px; }
body[data-wave="off"] .page-hero { padding-bottom: 64px; }
body[data-wave="off"] .footer-wave { display: none; }
body[data-wave="off"] .footer { padding-top: 56px; }
/* Section banners in the look's colours (not the original sunset look, and not when changed in Admin → Banners) */
body:not([data-look="sunset"]) .page-hero:not(.hero-custom) {
    background: radial-gradient(760px 400px at 95% 0%, color-mix(in srgb, var(--hero-4) 45%, transparent), transparent 60%),
                linear-gradient(125deg, var(--hero-1) 0%, var(--hero-2) 45%, var(--hero-3) 80%, color-mix(in srgb, var(--hero-4) 70%, var(--hero-3)) 100%);
}
body:not([data-look="sunset"]) .rs-hero:not(.hero-custom) {
    background: radial-gradient(1000px 300px at 10% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
                radial-gradient(900px 300px at 90% 10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--cream);
    border-bottom: 1px solid var(--line);
}
body:not([data-look="sunset"]) .rs-hero:not(.hero-custom) h1 span { background: linear-gradient(120deg, var(--accent), var(--accent-2), var(--brand)); -webkit-background-clip: text; background-clip: text; }
.rs-kicker { color: var(--accent); }

/* ---------- Footer ---------- */
.footer-wave {
    background: var(--cream);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v18c-170 22-340 26-520 10S560-4 380 8 120 40 0 30z'/%3E%3C/svg%3E") top/100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v18c-170 22-340 26-520 10S560-4 380 8 120 40 0 30z'/%3E%3C/svg%3E") top/100% 100% no-repeat;
}
body[data-footer="brand"] .footer { background: linear-gradient(160deg, var(--brand-deep) 0%, color-mix(in srgb, var(--brand-deep) 60%, var(--brand)) 100%); }
body[data-footer="dark"] .footer { background: #0d1117; color: #b8c0cc; }
body[data-footer="dark"] .footer-grid > div > a { color: #b8c0cc; }
body[data-footer="light"] .footer { background: #fff; color: var(--muted); border-top: 1px solid var(--line); }
body[data-footer="light"] .footer-wave { background: #fff; }
body[data-footer="light"] .footer-grid h4, body[data-footer="light"] .footer-logo strong { color: var(--text); }
body[data-footer="light"] .footer-grid > div > a { color: var(--muted); }
body[data-footer="light"] .footer-grid > div > a:hover { color: var(--accent); }
body[data-footer="light"] .footer-social a { background: var(--brand-soft); color: var(--brand-dark); }
body[data-footer="light"] .footer-bottom { border-top-color: var(--line); }
.footer-grid > div > a:hover { color: color-mix(in srgb, var(--accent) 40%, white); }
.footer-logo small { color: color-mix(in srgb, var(--accent) 45%, white); }
body[data-footer="light"] .footer-logo small { color: var(--accent); }

/* ---------- Forms ---------- */
.field input:focus, .field textarea:focus, .field select:focus { outline-color: var(--brand); }
.au-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.au-side { background: linear-gradient(180deg, color-mix(in srgb, var(--hero-1) 55%, transparent) 0%, color-mix(in srgb, var(--hero-2) 35%, transparent) 45%, color-mix(in srgb, var(--hero-1) 90%, transparent) 100%), var(--au-photo, none) center / cover no-repeat, linear-gradient(135deg, var(--hero-1), var(--hero-3) 60%, var(--hero-4)); }
.au-ico { background: var(--accent-soft); }
.pr-badge { background: var(--grad); }

/* ---------- Motion: things glide in as you scroll ---------- */
body[data-motion="on"] .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--rv-d, 0s); }
body[data-motion="on"] .rv.in { opacity: 1; transform: none; }
body[data-motion="on"] .hero-copy > *, body[data-motion="on"] .page-hero > .container > *, body[data-motion="on"] .rs-hero > .container > * { animation: lookUp .8s cubic-bezier(.2, .8, .2, 1) both; }
body[data-motion="on"] .hero-copy > :nth-child(2), body[data-motion="on"] .page-hero > .container > :nth-child(2), body[data-motion="on"] .rs-hero > .container > :nth-child(2) { animation-delay: .08s; }
body[data-motion="on"] .hero-copy > :nth-child(3), body[data-motion="on"] .page-hero > .container > :nth-child(3), body[data-motion="on"] .rs-hero > .container > :nth-child(3) { animation-delay: .16s; }
body[data-motion="on"] .hero-copy > :nth-child(n+4), body[data-motion="on"] .page-hero > .container > :nth-child(n+4), body[data-motion="on"] .rs-hero > .container > :nth-child(n+4) { animation-delay: .24s; }
body[data-motion="on"] .hero-collage, body[data-motion="on"] .hero-spot { animation: lookIn 1s cubic-bezier(.2, .8, .2, 1) .15s both; }
body[data-motion="on"] .hero .search { animation: lookUp .8s cubic-bezier(.2, .8, .2, 1) .3s both; }
@keyframes lookUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lookIn { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
body[data-motion="off"] *, body[data-motion="off"] *::before, body[data-motion="off"] *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
    body *, body *::before, body *::after { animation: none !important; }
    @view-transition { navigation: none; }
}

/* ---------- Style details ---------- */
body[data-look="modern"] .hero h1, body[data-look="modern"] .page-hero h1 { letter-spacing: -.035em; }
body[data-look="modern"] .card { padding: 8px; }
body[data-look="luxe"] .hero h1 span, body[data-look="luxe"] .page-hero h1 span { font-style: italic; }
body[data-look="luxe"] .chip, body[data-look="luxe"] .cat-tab { letter-spacing: .02em; }
body[data-look="luxe"] .card-type, body[data-look="luxe"] .pr-kind { text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; }
/* Glow spots in the home banner take the look's colours; without the curved edge the lower one stays inside */
.orb-1 { background: var(--hero-4); }
.orb-2 { background: var(--hero-3); }
body[data-wave="off"] .orb-2 { display: none; }
.hero:not(.has-photo) {
    background:
        radial-gradient(900px 520px at 100% 0%, color-mix(in srgb, var(--banner-4) 55%, transparent), transparent 62%),
        radial-gradient(700px 420px at 0% 100%, color-mix(in srgb, var(--banner-3) 45%, transparent), transparent 60%),
        linear-gradient(125deg, var(--banner-1) 0%, var(--banner-2) 40%, var(--banner-3) 72%, var(--banner-4) 100%);
}