/*
    Theme — Light wedding theme
    ========================
    Two typefaces, one accent color lifted straight from the envelope
    artwork, and a lot of white space. Edit the tokens in :root to
    re-skin the whole site from one place.

    Site-wide styles only: resets, design tokens, shared components
    (site footer, image tint utility, generic page hero), and
    base element styles. Page-specific styles live in a <style> block
    on their own page (e.g. the landing/envelope page's styles are in
    landing-en.html, not here).
*/

/* ---------- Fonts (self-hosted, no external requests) ---------- */

/* Script typeface — used site-wide via var(--font-script): the "&" in
   "Alexia & Alex" (.amp), .letter__names on the landing page, and
   .page-hero h1 on interior pages. */
@font-face {
    font-family: "Pinyon Script";                          /* name used elsewhere via var(--font-script) */
    src: url("../fonts/PinyonScript-Regular.ttf") format("truetype"); /* where the font file lives and its format */
    font-weight: 400;                                       /* only weight this font file provides */
    font-style: normal;                                     /* only style this font file provides (no italic) */
    font-display: swap;                                     /* show fallback text immediately, swap in font once loaded */
}

/* Body/serif typeface — the site's default text font, used via
   var(--font-serif) on the body element and inherited everywhere
   text doesn't explicitly switch to the script font. */
@font-face {
    font-family: "Cormorant Garamond";                      /* name used elsewhere via var(--font-serif) */
    src: url("../fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype-variations"), /* variable-font format for browsers that support it */
         url("../fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype");             /* fallback format declaration for the same file */
    font-weight: 300 700;                                   /* variable weight range this file supports (light to bold) */
    font-style: normal;                                     /* only style loaded here (no italic) */
    font-display: swap;                                     /* show fallback text immediately, swap in font once loaded */
}

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

/* Custom properties shared across every page: colors, the two font
   stacks, the spacing scale, and the easing curve used for
   hover/transition effects. */
:root {
    /* Color — the blue is sampled from the envelope illustration itself */
    --color-white: hsl(0, 0%, 100%);            /* pure white, used for body background */
    --color-paper: #faf8f5;            /* off-white paper tone */
    --color-ink: #2c3942;              /* main dark text color */
    --color-ink-soft: #576972;         /* secondary/muted text color */
    --color-dusty-blue: #677c90;       /* mid-tone accent blue */
    --color-dusty-blue-deep: #495e72;  /* darker accent blue */
    --color-line: #e4e1dc;             /* light neutral line/border color */

    /* Type */
    --font-script: "Pinyon Script", cursive;                            /* handwritten-style font stack for names/amp */
    --font-serif: "Cormorant Garamond", "Times New Roman", serif;       /* body/serif font stack for all other text */

    /* Rhythm */
    --space-1: 0.5rem;   /* smallest spacing step */
    --space-2: 1rem;     /* small spacing step, e.g. site-header padding */
    --space-3: 1.75rem;  /* medium spacing step */
    --space-4: 3rem;     /* large spacing step */
    --space-5: 5rem;     /* largest spacing step, e.g. page-hero padding */

    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); /* custom easing curve for hover/float transitions */
}

/* ---------- Cross-page navigation transitions ---------- */

/* Without this, every link between pages (landing → home, etc.) is a
   full document swap: the browser drops the old page and paints the
   new one from nothing, which is what shows up as a flash/blank gap
   even once theme.css is cached. This opts every page that loads
   theme.css into the browser's native cross-document View Transition:
   on navigation, the browser holds the outgoing page's rendered frame
   and cross-fades it into the incoming page once it's ready, instead
   of a hard cut to blank. No JS needed. Unsupported browsers (Safari,
   older Firefox/Chrome) simply ignore this rule and navigate normally
   — nothing breaks, it's a pure progressive enhancement. Support:
   Chrome/Edge 126+, with Firefox/Safari expected to follow. */
@view-transition {
    navigation: auto;
}

/* ---------- Reset ---------- */

/* Universal box-sizing reset — applies site-wide. */
*,
*::before,
*::after {
    box-sizing: border-box; /* padding/border count inward, so widths stay predictable */
}

/* html-level reset. */
html {
    -webkit-text-size-adjust: 100%; /* stops iOS Safari from auto-resizing text on rotation */
    scroll-behavior: smooth;        /* animates scroll position for any in-page anchor jumps */
}

/* Base body styles — page background, default text color, and default
   font (Cormorant Garamond). Page-specific layout (e.g. body.landing's
   flex centering) is added on top of this by the page itself. */
body {
    margin: 0;                                   /* removes the browser's default body margin */
    background: var(--color-white);              /* page background color */
    color: var(--color-ink);                     /* default text color for the whole page */
    font-family: var(--font-serif);               /* default typeface (Cormorant Garamond) */
    font-weight: 400;                            /* default (regular) text weight */
    line-height: 1.6;                            /* comfortable line spacing for body copy */
    -webkit-font-smoothing: antialiased;         /* smoother font rendering on WebKit browsers */
}

/* Base <img> styles — responsive by default, no inline whitespace gap. */
img {
    max-width: 100%; /* image never overflows its container's width */
    display: block;  /* removes the small gap browsers add under inline images */
}

/* Base <a> styles — links inherit their parent's color instead of default blue. */
a {
    color: inherit; /* link text takes on its parent's color instead of default blue */
}

button {
    font-family: inherit;
    color: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Bare-link utility ---------- */

/* Turns any ONE element — an <img>, a text block, an icon, whatever —
   into a real, plain-styled link, sized to exactly that element's own
   box rather than some larger wrapping container.

   Use this instead of wrapping a big <a> around a whole
   group/section/card of stuff. A big wrapping link's hit box is a
   rectangle covering everything inside it, which — especially in a
   layout where boxes overlap or rotate, like the home.html collage —
   can silently spill on top of neighbouring, unrelated, or
   differently-linked content nearby. Putting .link-bare directly on
   the individual image or text element keeps the clickable area
   exactly as big as that element and nothing more.

   USAGE — anywhere on the site:
     <a href="/en/details" class="link-bare">
         <img src="..." alt="">
     </a>
   or, for text:
     <a href="/en/details" class="link-bare">Some label</a>

   If several separate elements (e.g. a background image, an icon, and
   a caption) should all act as one visual "button" that links to the
   same place, give .link-bare + the same href to each of them
   individually rather than wrapping all three in one shared <a>
   (browsers don't allow nested links, so a shared wrapper is the only
   way to do it in one link anyway, and that's exactly the oversized
   hit-box problem this avoids). To prevent that pattern from also
   spamming a screen reader with several identical/redundant links,
   add `aria-hidden="true" tabindex="-1"` to the decorative
   copies and keep one visible, descriptively-labeled link (via visible
   text or aria-label) as the single link a keyboard/screen-reader user
   actually reaches. See home.html's "Information sticker 2" for a
   worked example of this pattern. */
a.link-bare {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    /* The extra "a" element qualifier isn't just style — it also bumps
       this rule's specificity to (0,1,1), one notch above plain
       class-only rules like .collage-group__image / .collage-group__text
       (0,1,0). Those set pointer-events: none by default for decorative
       (non-link) items; without this bump, same-specificity rules that
       happen to load later in the cascade (e.g. a page's own <style>
       block, which always comes after this shared stylesheet) would
       silently win and make the link unclickable again. */
    pointer-events: auto;
}

a.link-bare.link-inline {
    display: inline;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Custom focus ring — used site-wide for any keyboard-focused
   interactive element. */
:focus-visible {
    outline: 2px solid var(--color-dusty-blue-deep); /* visible focus ring color and thickness */
    outline-offset: 3px;                             /* gap between the element edge and the ring */
}

/* Styles any "&" character wrapped in <span class="amp"> (e.g. in
   "Alexia & Alex") — switches it to the script typeface so it reads
   as a handwritten ampersand. Used on the landing page's hero names
   and on .site-header__mark / .site-footer below. */
.amp {
    font-family: var(--font-script); /* switches the "&" to the handwritten script font */
    font-weight: 400;                /* regular weight for the script font */
    padding: 0 0.15em;               /* small left/right breathing room around the "&" */
}

/* ---------- Site footer ---------- */

.site-footer {
    padding: var(--space-4) var(--space-3);
    text-align: center;
    color: var(--color-ink-soft);
    font-size: 1.25rem;
    letter-spacing: 0.04em;
}

.site-footer .amp {
    font-size: 1.2em;
}

/* Styles the optional <a class="site-footer__link"> used on interior
   pages as a simple back-navigation link (e.g. "Back to home page").
   Inherits size/color/tracking from .site-footer; this just adds the
   underline/hover treatment expected of a link. */
.site-footer__link {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color 0.2s ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
    color: var(--color-dusty-blue-deep);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-3);
}

/* ---------- Generic interior page hero (placeholder pages) ---------- */
/* Not yet used by any page — reserved scaffolding for future interior
   pages that need a simple centered hero. */

.page-hero {
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--space-5) var(--space-3);
    text-align: center;
}

.page-hero h1 {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: clamp(2.5rem, 8vw, 4rem);
    color: var(--color-dusty-blue-deep);
    margin: 0 0 var(--space-2);
}

.page-hero p {
    color: var(--color-ink-soft);
    font-size: 1.1rem;
}

/* ---------- Reduced motion ---------- */

/* Respects the user's OS-level "reduce motion" setting site-wide by
   disabling smooth scrolling. Any page with its own motion/animation
   (e.g. the landing page's idle float) turns those off in its own
   prefers-reduced-motion block. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto; /* disables the smooth-scroll animation for anchor jumps */
    }
}