/* ==========================================================================
   SzymonExplores - Main Stylesheet
   Depends on: style.css (design tokens must be loaded first)
   ========================================================================== */


/* ═══════════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   1.  RESET & NORMALIZATION
   2.  BASE TYPOGRAPHY
   3.  LAYOUT UTILITIES
   4.  ACCESSIBILITY
   5.  SITE HEADER
   6.  WORDMARK (Text Logo)
   7.  DESKTOP NAVIGATION
   8.  HAMBURGER BUTTON
   9.  MOBILE NAVIGATION OVERLAY
   10. SEARCH OVERLAY
   11. SITE FOOTER
   12. WORDPRESS DEFAULTS
   13. ANIMATIONS & TRANSITIONS
   14. MEDIA QUERIES
   ══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   1. RESET & NORMALIZATION
   ══════════════════════════════════════════════════════════════════════ */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-size: 100%;
    height: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--clr-text);
    background-color: var(--clr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100%;
    overflow-x: hidden;
}

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

/* Colour placeholder: a photograph's frame shows its average colour until the
   image paints over it (--ph is set per image; see style.css). Images without
   one, including every transparent PNG, stay transparent. */
img {
    background-color: var(--ph, transparent);
}

/* PhotoSwipe sets explicit width/height on its image; the global rules above
   must not override them, or the lightbox image stretches/crops. Let PhotoSwipe
   size and zoom its own image - do not impose object-fit here. */
.pswp img {
    max-width: none;
}

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

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

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

ul, ol {
    list-style: none;
}

/* Remove default button styles */
button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    line-height: 1;
}


/* ═══════════════════════════════════════════════════════════════════════
   2. BASE TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    color: var(--clr-text);
    letter-spacing: -0.01em;
}

h1 { font-size: var(--text-6xl); font-weight: 400; letter-spacing: -0.02em; }
h2 { font-size: var(--text-5xl); }
h3 { font-size: var(--text-4xl); }
h4 { font-size: var(--text-3xl); }
h5 { font-size: var(--text-2xl); }
h6 { font-size: var(--text-xl);  }

p {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--clr-text);
}

p + p {
    margin-top: var(--sp-4);
}

strong { font-weight: 500; }
em     { font-style: italic; }

small {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
}

/* Editorial text decoration – used on section labels */
.eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-accent);
}

/* Inline link style for body copy */
.prose a {
    color: var(--clr-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--dur-fast) var(--ease-out);
}

.prose a:hover {
    color: var(--clr-accent-bright);
}


/* ═══════════════════════════════════════════════════════════════════════
   3. LAYOUT UTILITIES
   ══════════════════════════════════════════════════════════════════════ */

/* Standard max-width container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Narrower container for readable prose */
.container--prose {
    max-width: var(--container-prose);
}

/* Medium container for feature sections */
.container--narrow {
    max-width: var(--container-narrow);
}

/* Wide container - full viewport with breathing room (galleries + shop).
   No max-width; symmetric fluid side padding instead of a centered column. */
.container--wide {
    max-width: none;
    padding-left: clamp(1.5rem, 4vw, 5rem);
    padding-right: clamp(1.5rem, 4vw, 5rem);
}

/* Full-bleed – breaks out of any container */
.full-bleed {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* Section spacing */
.section {
    padding-top: var(--sp-20);
    padding-bottom: var(--sp-20);
}

.section--lg {
    padding-top: var(--sp-32);
    padding-bottom: var(--sp-32);
}

/* Decorative horizontal rule */
.divider {
    border: none;
    border-top: var(--border);
    margin: var(--sp-12) 0;
}

.divider--gold {
    border-top-color: var(--clr-accent);
    opacity: 0.4;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. ACCESSIBILITY
   ══════════════════════════════════════════════════════════════════════ */

/* Skip link – visible on focus for keyboard users */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--sp-4);
    z-index: var(--z-toast);
    padding: var(--sp-3) var(--sp-6);
    background: var(--clr-accent);
    color: var(--clr-on-accent);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--clr-ink);
    outline-offset: 2px;
}

/* Screen reader only text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none;
    display: block;
    height: auto;
    left: 5px;
    top: 5px;
    width: auto;
    z-index: 100000;
    background: var(--clr-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    color: var(--clr-ink);
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    padding: var(--sp-3) var(--sp-5);
    text-decoration: none;
}



/* ═══════════════════════════════════════════════════════════════════════
   5. SITE HEADER
   ══════════════════════════════════════════════════════════════════════ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    height: var(--header-height);

    /* Dark frosted glass – works on any background */
    background: rgba(23, 20, 15, 0.88);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);

    /* Thin gold bottom line */
    border-bottom: 1px solid rgba(28, 140, 160, 0.15);

    transition:
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

/* When user has scrolled – header becomes more opaque */
.site-header.is-scrolled {
    background: rgba(23, 20, 15, 0.97);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    border-bottom-color: rgba(28, 140, 160, 0.3);
}

/* Inner flex row */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    height: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Push <main> content below the fixed header */
.site-main {
    padding-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
}


/* ═══════════════════════════════════════════════════════════════════════
   6. WORDMARK (Text Logo)
   ══════════════════════════════════════════════════════════════════════ */

.site-header__brand {
    flex-shrink: 0;
}

.site-header__wordmark {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    transition: opacity var(--dur-fast) var(--ease-out);
}

.site-header__wordmark:hover {
    opacity: 0.8;
}

/* Brand lockup - variant B spec (see brand guide):
   SZYMON cap 0.76× EXPLORES cap → font-size 0.74× (cap-factor adjusted),
   tracking 0.13em / 0.22em, line gap 0.40× cap ≈ 0.28em. */
.wordmark__first {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 0.815rem;
    letter-spacing: 0.13em;
    line-height: 1;
    color: var(--clr-accent-bright);
    text-transform: uppercase;
}

.wordmark__second {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: 0.22em;
    line-height: 1;
    color: var(--clr-white);
    text-transform: uppercase;
    margin-top: 0.28em;
}

/* Custom logo image sizing */
.custom-logo {
    height: 44px;
    width: auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. DESKTOP NAVIGATION
   ══════════════════════════════════════════════════════════════════════ */

.site-nav {
    display: none; /* hidden on mobile; shown at breakpoint in §14 */
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    list-style: none;
}

.site-nav__item {
    position: relative;
}

.site-nav__item > a {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-sm);
    transition:
        color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);

    /* Animated underline via pseudo-element */
    position: relative;
}

.site-nav__item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--sp-4);
    right: var(--sp-4);
    height: 1px;
    background: var(--clr-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out);
}

.site-nav__item > a:hover {
    color: var(--clr-white);
}

.site-nav__item > a:hover::after,
.site-nav__item.current-menu-item > a::after,
.site-nav__item.current-page-ancestor > a::after {
    transform: scaleX(1);
}

.site-nav__item.current-menu-item > a,
.site-nav__item.current-page-ancestor > a {
    color: var(--clr-white);
}

/* Dropdown sub-menus */
.site-nav__item .sub-menu {
    position: absolute;
    top: calc(100% + var(--sp-2));
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 180px;
    background: var(--clr-ink-soft);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    pointer-events: none;
    list-style: none;
    padding: var(--sp-2) 0;
    transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
    z-index: var(--z-dropdown);
}

.site-nav__item:hover .sub-menu,
.site-nav__item:focus-within .sub-menu {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.site-nav__item .sub-menu a {
    display: block;
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.75);
    transition: color var(--dur-fast);
}

.site-nav__item .sub-menu a:hover {
    color: var(--clr-accent-bright);
}


/* ═══════════════════════════════════════════════════════════════════════
   8. HEADER ACTION BUTTONS & HAMBURGER
   ══════════════════════════════════════════════════════════════════════ */

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.8);
    transition:
        color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

.header-btn:hover {
    color: var(--clr-white);
    background: rgba(255, 255, 255, 0.1);
}

/* Hide desktop-only search button on mobile */
.header-btn--search {
    display: none;
}

/* Hamburger icon */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 22px;
    height: 22px;
}

.hamburger__bar {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--clr-white);
    border-radius: 1px;
    transition:
        transform var(--dur-base) var(--ease-inout),
        opacity var(--dur-base) var(--ease-out),
        width var(--dur-base) var(--ease-out);
    transform-origin: center;
}

/* Hamburger → ✕ when menu is open */
.header-btn--menu[aria-expanded="true"] .hamburger__bar--top {
    transform: translateY(6.5px) rotate(45deg);
}

.header-btn--menu[aria-expanded="true"] .hamburger__bar--mid {
    opacity: 0;
    transform: scaleX(0);
}

.header-btn--menu[aria-expanded="true"] .hamburger__bar--bot {
    transform: translateY(-6.5px) rotate(-45deg);
}


/* ═══════════════════════════════════════════════════════════════════════
   9. MOBILE NAVIGATION OVERLAY
   ══════════════════════════════════════════════════════════════════════ */

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--clr-ink);
    display: flex;
    flex-direction: column;

    /* Hidden state */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateX(100%);

    transition:
        transform var(--dur-slow) var(--ease-inout),
        opacity var(--dur-slow) var(--ease-out),
        visibility 0s var(--dur-slow);
}

/* Shown state – JS adds .is-open */
.mobile-nav.is-open {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    transform: translateX(0);
    transition:
        transform var(--dur-slow) var(--ease-out),
        opacity var(--dur-slow) var(--ease-out),
        visibility 0s 0s;
}

.mobile-nav__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: var(--sp-6) var(--gutter) var(--sp-10);
}

/* Close button inside overlay */
.mobile-nav__close {
    align-self: flex-end;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    transition:
        color var(--dur-fast),
        border-color var(--dur-fast),
        background var(--dur-fast);
}

.mobile-nav__close:hover {
    color: var(--clr-white);
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.06);
}

/* Navigation list */
.mobile-nav__list {
    list-style: none;
    margin-top: var(--sp-6);
}

.mobile-nav__list .menu-item {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}

.mobile-nav__list .menu-item a {
    display: block;
    padding: var(--sp-5) 0;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: color var(--dur-base) var(--ease-out);
}

.mobile-nav__list .menu-item a:hover,
.mobile-nav__list .current-menu-item a {
    color: var(--clr-accent-bright);
}

/* Mobile nav footer (location badge) */
.mobile-nav__footer {
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.mobile-nav__location {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.4);
    font-weight: 400;
    letter-spacing: 0.04em;
}

.mobile-nav__location svg {
    flex-shrink: 0;
    color: var(--clr-accent);
}

/* Staggered animation for menu items when overlay opens */
.mobile-nav.is-open .mobile-nav__list .menu-item:nth-child(1) { transition-delay: 50ms; }
.mobile-nav.is-open .mobile-nav__list .menu-item:nth-child(2) { transition-delay: 100ms; }
.mobile-nav.is-open .mobile-nav__list .menu-item:nth-child(3) { transition-delay: 150ms; }
.mobile-nav.is-open .mobile-nav__list .menu-item:nth-child(4) { transition-delay: 200ms; }
.mobile-nav.is-open .mobile-nav__list .menu-item:nth-child(5) { transition-delay: 250ms; }
.mobile-nav.is-open .mobile-nav__list .menu-item:nth-child(6) { transition-delay: 300ms; }


/* ═══════════════════════════════════════════════════════════════════════
   10. SEARCH OVERLAY
   ══════════════════════════════════════════════════════════════════════ */

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(23, 20, 15, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--gutter);

    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity var(--dur-base) var(--ease-out),
        visibility 0s var(--dur-base);
}

.search-overlay.is-open {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    transition:
        opacity var(--dur-base) var(--ease-out),
        visibility 0s 0s;
}

.search-overlay__inner {
    width: 100%;
    max-width: 640px;
    position: relative;
}

.search-overlay__label {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-2xl);
    color: var(--clr-accent-bright);
    margin-bottom: var(--sp-6);
    opacity: 0.8;
}

/* Style the WordPress search form */
.search-form {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    transition: border-color var(--dur-base);
}

.search-form:focus-within {
    border-bottom-color: var(--clr-accent);
}

.search-form .search-field {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: var(--sp-4) 0;
    font-size: var(--text-2xl);
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--clr-white);
    caret-color: var(--clr-accent);
}

.search-form .search-field::placeholder {
    color: rgba(255,255,255,0.25);
    font-style: italic;
}

.search-form .search-submit {
    background: transparent;
    border: none;
    padding: var(--sp-3) var(--sp-4);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: var(--text-base);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color var(--dur-fast);
}

.search-form .search-submit:hover {
    color: var(--clr-accent-bright);
}

.search-overlay__close {
    position: absolute;
    top: -56px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    transition: all var(--dur-fast);
}

.search-overlay__close:hover {
    color: var(--clr-white);
    border-color: rgba(255,255,255,0.4);
}


/* ═══════════════════════════════════════════════════════════════════════
   11. SITE FOOTER
   ══════════════════════════════════════════════════════════════════════ */

.site-footer {
    background: var(--clr-ink);
    color: rgba(255,255,255,0.6);
    font-size: var(--text-sm);
}

.site-footer__top {
    padding: var(--sp-16) 0 var(--sp-12);
}

.site-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Footer grid: single column on mobile, three columns on desktop */
.site-footer__top .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-12);
}

/* Footer logo */
.footer-logo {
    display: inline-block;
    margin-bottom: var(--sp-4);
    line-height: 1.1;
    transition: opacity var(--dur-fast);
}

.footer-logo:hover {
    opacity: 0.75;
}

.footer-logo__first {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-accent-bright);
}

.footer-logo__second {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    margin-top: 2px;
}

.footer-col__description {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: rgba(255,255,255,0.45);
    max-width: 300px;
    margin-bottom: var(--sp-6);
}

/* Expedition status badge */
.expedition-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid rgba(28,140,160,0.3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    color: var(--clr-accent-bright);
    margin-bottom: var(--sp-6);
}

.expedition-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--clr-sage);
    flex-shrink: 0;
    animation: pulse 2.5s ease-in-out infinite;
}

/* Footer column headings */
.footer-col__heading {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: var(--sp-5);
}

/* Footer navigation list */
.footer-nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.footer-nav__list .menu-item a,
.footer-nav__link {
    display: inline-block;
    padding: var(--sp-2) 0;
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.55);
    transition: color var(--dur-fast) var(--ease-out);
    position: relative;
}

.footer-nav__list .menu-item a::after,
.footer-nav__link::after {
    content: '';
    position: absolute;
    bottom: var(--sp-1);
    left: 0;
    width: 0;
    height: 1px;
    background: var(--clr-accent);
    transition: width var(--dur-base) var(--ease-out);
}

.footer-nav__list .menu-item a:hover,
.footer-nav__link:hover {
    color: var(--clr-white);
}

.footer-nav__list .menu-item a:hover::after,
.footer-nav__link:hover::after {
    width: 100%;
}

/* Footer contact list */
.footer-contact {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.footer-contact__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: rgba(255,255,255,0.45);
}

.footer-contact__item svg {
    flex-shrink: 0;
    color: var(--clr-accent);
    opacity: 0.8;
}

.footer-contact__link {
    color: rgba(255,255,255,0.55);
    transition: color var(--dur-fast);
}

.footer-contact__link:hover {
    color: var(--clr-accent-bright);
}

/* Social links */
.social-links {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    list-style: none;
    flex-wrap: wrap;
}

.social-links .menu-item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.45);
    font-size: var(--text-xs);
    transition:
        color var(--dur-fast),
        border-color var(--dur-fast),
        background var(--dur-fast);
}

.social-links .menu-item a:hover {
    color: var(--clr-accent-bright);
    border-color: rgba(28,140,160,0.4);
    background: rgba(28,140,160,0.08);
}

/* Footer bottom bar */
.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: var(--sp-5) 0;
}

.site-footer__bottom .site-footer__inner {
    /* Grid, not flex: with justify-content:space-between the middle child is
       centred in the leftover space, which only coincides with the container
       centre when both outer items are the same width. The copyright line is
       far wider than the credit, so the legal links drifted right. Equal 1fr
       rails guarantee the pair sits dead centre whatever flanks it. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-4);
}

.site-footer__bottom .footer-legal {
    justify-self: center;
}

.site-footer__bottom .footer-credit {
    justify-self: end;
}

@media (max-width: 700px) {
    .site-footer__bottom .site-footer__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .site-footer__bottom .footer-credit {
        justify-self: center;
    }
}

.footer-copyright {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.25);
    letter-spacing: 0.04em;
}

.footer-copyright a {
    color: rgba(255,255,255,0.45);
    transition: color var(--dur-fast);
}

.footer-copyright a:hover {
    color: var(--clr-accent-bright);
}

.footer-credit {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.2);
}

.footer-credit a {
    color: rgba(255,255,255,0.3);
    transition: color var(--dur-fast);
}

.footer-credit a:hover {
    color: rgba(255,255,255,0.5);
}

/* Legal links - bottom bar, between copyright and credit.
   Descendant selector so it styles both wp_nav_menu output and the fallback. */
.footer-legal__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-legal__list a {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.04em;
    transition: color var(--dur-fast);
}

.footer-legal__list a:hover,
.footer-legal__list a:focus-visible {
    color: var(--clr-accent-bright);
}


/* ═══════════════════════════════════════════════════════════════════════
   12. WORDPRESS DEFAULTS
   Styles for content WordPress generates automatically.
   ══════════════════════════════════════════════════════════════════════ */

/* WordPress alignment classes */
.alignleft  { float: left;  margin: 0 var(--sp-6) var(--sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-6); }
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

/* WordPress image captions */
.wp-caption {
    max-width: 100%;
}
.wp-caption-text,
figcaption {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    font-style: italic;
    text-align: center;
    margin-top: var(--sp-2);
    line-height: 1.5;
}

/* Sticky posts */
.sticky {
    border-left: 3px solid var(--clr-accent);
    padding-left: var(--sp-4);
}

/* Gallery */
.gallery {
    display: grid;
    gap: var(--sp-3);
}
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item img { width: 100%; object-fit: cover; }


/* ═══════════════════════════════════════════════════════════════════════
   13. ANIMATIONS
   ══════════════════════════════════════════════════════════════════════ */

/* Pulsing green dot for expedition badge */
@keyframes pulse {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.5; transform: scale(0.85); }
}

/* Fade-in from below (applied via JS IntersectionObserver) */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Only when scripts run (header.php adds .js to <html> before first paint):
   without them the observer never fires, and this content must not stay
   invisible. */
.js .js-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 550ms var(--ease-out),
        transform 550ms var(--ease-out);
}

.js .js-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Page transitions (cross-document view transitions) ─────────────────
   Every same-origin navigation cross-fades instead of flashing white, and a
   journal card's photograph and title travel into the hero of the story it
   opens; the back button plays it in reverse. The names that pair a card
   with its hero are set per post in includes/journal.php.
   Chrome and Edge 126+, Safari 18.2+. Other browsers load pages as normal,
   and with reduced motion there is no transition at all.

   The @view-transition opt-in itself is printed INLINE in <head> by
   se_view_transition_opt_in() (includes/journal.php), never here: Chrome
   reads the opt-in when it parses <body>, before this file has loaded, and
   silently skips the transition if it is not there yet. */

/* The header is identical on both pages: name it so it holds still. */
.site-header {
    view-transition-name: site-header;
}

.post-card__image-wrap,
.post-hero__image-wrap,
.read-next__image-wrap {
    view-transition-class: photo;
}
.post-card__title,
.post-hero__title,
.read-next__title {
    view-transition-class: title;
}

::view-transition-group(*) {
    animation-duration: 0.55s;
    animation-timing-function: cubic-bezier(0.2, 0.75, 0.15, 1);
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.28s;
}

/* Photographs crop while they grow, instead of stretching. */
::view-transition-old(*.photo),
::view-transition-new(*.photo) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: clip;
}

/* Titles cross-fade at their own size, instead of scaling blurry. The
   outgoing title leaves in half the time, so the large hero title does not
   linger as a ghost over the card text on the way back to the journal. */
::view-transition-old(*.title),
::view-transition-new(*.title) {
    width: auto;
    height: auto;
    object-fit: none;
    object-position: 0 0;
}
::view-transition-old(*.title) {
    animation-duration: 0.25s;
}

/* Cards that were not opened have no partner on the new page, so theirs is
   the only snapshot in its pair. Drop them at once instead of letting them
   fade out on top of the growing photograph. */
::view-transition-old(*.photo):only-child,
::view-transition-old(*.title):only-child {
    animation: none;
    opacity: 0;
}

/* While a transition runs, scroll-reveal targets show at rest, so the page
   being revealed (the journal, on the way back) is captured with its cards
   in place rather than faded out below their final position. */
:root:active-view-transition .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   14. MEDIA QUERIES - RESPONSIVE BREAKPOINTS
   Mobile-first: base styles above → progressively enhance for larger screens.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tablet: 768px+ ──────────────────────────────────────────────────── */
@media screen and (min-width: 48rem) {

    .header-btn--search {
        display: inline-flex; /* Show search button on tablet+ */
    }

    /* Footer: two-column grid */
    .site-footer__top .site-footer__inner {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: var(--sp-16);
    }

    /* Gallery adjustments */
    .gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Desktop: 1024px+ ────────────────────────────────────────────────── */
@media screen and (min-width: 64rem) {

    /* Show desktop nav, hide hamburger */
    .site-nav {
        display: block;
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .header-btn--menu {
        display: none; /* Hamburger hidden on desktop */
    }

    /* Footer: three-column grid */
    .site-footer__top .site-footer__inner {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: var(--sp-20);
    }
}

/* ── Wide: 1280px+ ───────────────────────────────────────────────────── */
@media screen and (min-width: 80rem) {

    :root {
        --header-height: 90px;
    }

    .wordmark__first  { font-size: 0.89rem; }
    .wordmark__second { font-size: 1.2rem; }
}

/* ==========================================================================
   Print zoom + flip-through (PhotoSwipe)
   Trigger lives on the single-print image; the info bar renders inside the
   PhotoSwipe root (outside theme containers, so colours are set literally).
   ========================================================================== */
.print-detail__image-wrap.is-zoomable .print-detail__image { cursor: zoom-in; }

.print-detail__zoom-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(23, 20, 15, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, transform 0.2s ease;
}
.print-detail__zoom-btn:hover { background: rgba(23, 20, 15, 0.8); transform: scale(1.05); }
.print-detail__zoom-btn[hidden] { display: none; }

.pswp-print-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
    z-index: 1100;
}
.pswp-print-info__inner {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    max-width: min(92vw, 720px);
    padding: 9px 9px 9px 18px;
    color: #F3EEE3;
    background: rgba(23, 20, 15, 0.82);
    border: 1px solid rgba(243, 238, 227, 0.16);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.pswp-print-info__title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.2;
}
.pswp-print-info__price {
    font-size: 0.9rem;
    opacity: 0.78;
    white-space: nowrap;
}
.pswp-print-info__buy {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.95rem;
    color: #2A2520;
    background: #F07A57;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    white-space: nowrap;
}
.pswp-print-info__buy:hover { filter: brightness(1.06); }
.pswp-print-info__buy[hidden] { display: none; }

@media (max-width: 520px) {
    .pswp-print-info__inner { gap: 10px; padding: 8px 8px 8px 14px; }
    .pswp-print-info__title { font-size: 0.95rem; }
    .pswp-print-info__price { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .print-detail__zoom-btn { transition: none; }
}