/* ==========================================================================
   AL-RIHLA VOYAGES — global design system
   --------------------------------------------------------------------------
   Brand tokens, reset, typography, buttons, layout primitives and the shared
   scroll-reveal utility. Everything section specific lives in the matching
   component stylesheet, alongside its component as a .razor.css file.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
    /* Brand palette — from the Al-Rihla Voyages brand board */
    --navy: #0D1527;
    --jet: #0D0D0D;
    --white: #FFFFFF;
    --gold: #BC9C22;

    /* Supporting tones derived from the four brand colours */
    --navy-deep: #080E1B;
    --navy-soft: #16203A;
    --navy-line: rgba(255, 255, 255, 0.12);
    --gold-light: #D8BC4E;
    --gold-dim: rgba(188, 156, 34, 0.35);
    --cream: #F4F1EA;
    --cream-deep: #EBE6DA;
    --ink: #1A2233;
    --ink-soft: #5A6273;

    /* Type */
    --font-serif: "IBM Plex Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-sans: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Rhythm */
    --shell: 1440px;
    --gutter: clamp(1.25rem, 4vw, 4.5rem);
    --section-y: clamp(3rem, 6vw, 6rem);
    --header-h: 88px;

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 0.25s;
    --t-med: 0.45s;
    /* The mobile menu specifically. Shorter than --t-med: a panel you asked for
       with a tap should be there, not be admired on its way in. */
    --t-menu: 0.34s;
    --t-slow: 0.9s;
}

/* ------------------------------------------------------------------- reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--navy);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.08;
}

p {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* <picture> is a layout no-op: the <img> inside behaves exactly as if it were a
   direct child of the container, so the AVIF/WebP sources cost nothing in CSS. */
picture {
    display: contents;
}

/* The enquiry form toggles [hidden] on panels that also carry a display rule. */
[hidden] {
    display: none !important;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
}

::selection {
    background: var(--gold);
    color: var(--navy);
}

/* --------------------------------------------------------------- app shell */

#app {
    min-height: 100vh;
}

.page {
    display: block;
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--section-y);
    position: relative;
}

/* Someone arriving on /#destinations, or using the browser's back button, gets
   the section heading clear of the fixed header rather than tucked behind it.
   The script's own scrolling already allows for the header, so this only
   affects native anchor jumps. */
[id] {
    scroll-margin-top: calc(var(--header-h) - 10px);
}

.section--cream {
    background-color: var(--cream);
    color: var(--ink);
}

.section--navy {
    background-color: var(--navy);
    color: rgba(255, 255, 255, 0.82);
}

.section--jet {
    background-color: var(--jet);
    color: rgba(255, 255, 255, 0.82);
}

/* Sections meet on a clean edge. A soft gradient dissolve between the cream and
   the dark grounds was tried and removed: over a couple of hundred pixels it
   read as a grey smear rather than as a transition. */

/* --------------------------------------------------------------- typography */

.eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(0.65rem, 0.9vw, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold);
}

.display {
    font-size: clamp(2.75rem, 7.6vw, 6.75rem);
    line-height: 0.98;
}

.heading-xl {
    font-size: clamp(2.1rem, 4.6vw, 4rem);
    line-height: 1.05;
}

.heading-lg {
    font-size: clamp(1.75rem, 3.2vw, 2.85rem);
    line-height: 1.12;
}

.lede {
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.85;
    color: var(--ink-soft);
}

.section--navy .lede,
.section--jet .lede {
    color: rgba(255, 255, 255, 0.66);
}

.gold {
    color: var(--gold);
}

.rule {
    width: 68px;
    height: 2px;
    border: 0;
    margin: 0;
    background: var(--gold);
}

/* ----------------------------------------------------------------- buttons */

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--white);
    --btn-border: currentColor;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    padding: 1.05rem 2.15rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    transition: background-color var(--t-med) var(--ease),
                color var(--t-med) var(--ease),
                border-color var(--t-med) var(--ease),
                transform var(--t-med) var(--ease);
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn--gold {
    --btn-bg: var(--gold);
    --btn-fg: var(--navy);
    --btn-border: var(--gold);
}

.btn--gold:hover,
.btn--gold:focus-visible {
    --btn-bg: var(--gold-light);
    --btn-border: var(--gold-light);
}

.btn--outline-light {
    --btn-bg: transparent;
    --btn-fg: var(--white);
    --btn-border: rgba(255, 255, 255, 0.55);
}

.btn--outline-light:hover,
.btn--outline-light:focus-visible {
    --btn-bg: var(--white);
    --btn-fg: var(--navy);
    --btn-border: var(--white);
}

.btn--outline-dark {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-border: rgba(13, 21, 39, 0.28);
}

.btn--outline-dark:hover,
.btn--outline-dark:focus-visible {
    --btn-bg: var(--navy);
    --btn-fg: var(--white);
    --btn-border: var(--navy);
}

.btn__arrow {
    display: inline-block;
    transition: transform var(--t-med) var(--ease);
}

.btn:hover .btn__arrow {
    transform: translateX(5px);
}

/* --------------------------------------------------- scroll reveal utility */

/* Elements only hide themselves once the head script confirms they can be
   revealed again, so the page still reads correctly without JavaScript. */
html.has-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--t-slow) var(--ease-out),
                transform var(--t-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

html.has-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------- crossfading imagery */

/* Used by the story photograph and by every gallery cell. All frames are
   stacked in the same box; only the active one is visible, and they dissolve
   slowly enough to read as a change of scene rather than an animation. */
[data-rotator-slide] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s var(--ease);
}

[data-rotator-slide].is-active {
    opacity: 1;
}

/* Without scripting only the first frame is ever shown, so it must not be
   hidden by the rule above. */
html:not(.has-rotators) [data-rotator-slide]:first-child {
    opacity: 1;
}

/* Accessibility helper for labels that should be read but not seen. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--gutter);
    z-index: 200;
    padding: 0.85rem 1.5rem;
    background: var(--gold);
    color: var(--navy);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: top var(--t-fast) var(--ease);
}

.skip-link:focus {
    top: 1rem;
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    html.has-reveal [data-reveal] {
        opacity: 1;
        transform: none;
    }
}