/* ── STRANGE PAGES THEME CSS ──────────────────────────────────────────────── */

/* ── VARIABLES ────────────────────────────────────────────────────────────── */
:root {
    --sp-black:      #060a10;
    --sp-deep:       #0a0e14;
    --sp-dark:       #111825;
    --sp-blood:      #8b1a1a;
    --sp-crimson:    #c0392b;
    --sp-ice:        #4a7fa5;
    --sp-ice-bright: #6ba3c7;
    --sp-ice-pale:   #a8c8e0;
    --sp-ember:      #c9841c;
    --sp-amber:      #e8955a;
    --sp-bone:       #d4cfc4;
    --sp-dust:       #b8956a;
    --sp-ash:        #7a8a95;
    --sp-fog:        #a8b4bc;
    --sp-parchment:  #ddd8d0;
}

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

/* ── BASE ─────────────────────────────────────────────────────────────────── */
html {
    background: var(--sp-black);
    scroll-behavior: smooth;
}

body {
    background: var(--sp-black);
    color: var(--sp-parchment);
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 16px;
    line-height: 1.75;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Grain overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.3;
}

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--sp-parchment);
    line-height: 1.15;
    font-weight: 900;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(36px, 6vw, 72px); }
h2 { font-size: clamp(26px, 4vw, 44px); }
h3 { font-size: clamp(20px, 3vw, 32px); }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p {
    color: var(--sp-fog);
    margin: 0 0 1em;
}

a {
    color: var(--sp-ice-bright);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover { color: var(--sp-ice-pale); }

strong, b { color: var(--sp-parchment); font-weight: 700; }
em, i     { font-style: italic; }

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

hr {
    border: none;
    border-top: 1px solid rgba(74, 127, 165, 0.2);
    margin: 32px 0;
}

/* ── HEADER ───────────────────────────────────────────────────────────────── */
.sp-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(6, 10, 16, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(74, 127, 165, 0.2);
    width: 100%;
}
/* Admin bar compensation */
.admin-bar .sp-header { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .sp-header { top: 46px; }
}

/* Site title */
.sp-header .wp-block-site-title a {
    font-family: 'Playfair Display', serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--sp-parchment) !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.sp-header .wp-block-site-title a:hover {
    color: var(--sp-ice-pale) !important;
}

/* Nav links */
.sp-header .wp-block-navigation .wp-block-navigation__container {
    gap: 8px !important;
}
.sp-header .wp-block-navigation a,
.sp-header .wp-block-navigation a.wp-block-navigation-item__content {
    font-family: 'Special Elite', serif !important;
    font-size: 13px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #a8b8c4 !important;
    text-decoration: none !important;
    transition: color 0.2s, background 0.2s !important;
    padding: 4px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 20px !important;
}
.sp-header .wp-block-navigation a:hover,
.sp-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
    color: var(--sp-ice-pale) !important;
}
/* Reserve pill */
.sp-header .wp-block-navigation a[href="/reserve"],
.sp-header .wp-block-navigation a[href="/reserve/"],
.sp-header .wp-block-navigation a.wp-block-navigation-item__content[href="/reserve"],
.sp-header .wp-block-navigation a.wp-block-navigation-item__content[href="/reserve/"] {
    color: #c9a84c !important;
    border-color: rgba(201, 168, 76, 0.5) !important;
}
.sp-header .wp-block-navigation a[href="/reserve"]:hover,
.sp-header .wp-block-navigation a[href="/reserve/"]:hover,
.sp-header .wp-block-navigation a.wp-block-navigation-item__content[href="/reserve"]:hover,
.sp-header .wp-block-navigation a.wp-block-navigation-item__content[href="/reserve/"]:hover {
    background: #c9a84c !important;
    color: #000 !important;
    border-color: #c9a84c !important;
}

/* Mobile menu */
.sp-header .wp-block-navigation__responsive-container-open svg,
.sp-header .wp-block-navigation__responsive-container-close svg {
    fill: var(--sp-parchment);
}
.sp-header .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    max-height: 100dvh;
    overflow-y: auto;
    background: var(--sp-black) !important;
    padding: 16px 0 24px !important;
    z-index: 99999 !important;
    border-bottom: 1px solid rgba(74, 127, 165, 0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.sp-header .wp-block-navigation__responsive-container.is-menu-open a {
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 16px 24px !important;
    display: block !important;
    border-bottom: 1px solid rgba(74, 127, 165, 0.08) !important;
    color: var(--sp-parchment) !important;
}
.sp-header .wp-block-navigation__responsive-container.is-menu-open a:hover {
    color: var(--sp-ice-pale) !important;
    background: rgba(74, 127, 165, 0.06) !important;
}
.sp-header .wp-block-navigation__responsive-container-close {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 16px 8px !important;
}
.sp-header .wp-block-navigation__responsive-container-close svg {
    fill: var(--sp-parchment);
}
@media (min-width: 769px) {
    .sp-header .wp-block-navigation__responsive-container-open,
    .sp-header .wp-block-navigation__responsive-container-close {
        display: none !important;
    }
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.sp-footer {
    background: var(--sp-deep);
    border-top: 1px solid rgba(74, 127, 165, 0.15);
    padding: 0 !important;
    min-height: 0 !important;
}
.sp-footer * { display: none !important; }

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
    font-family: 'Special Elite', serif !important;
    font-size: 11px !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 14px 32px !important;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: var(--sp-blood) !important;
    color: var(--sp-parchment) !important;
    border: 1px solid var(--sp-crimson) !important;
    box-shadow: 0 0 24px rgba(139, 26, 26, 0.2);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background: var(--sp-crimson) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(192, 57, 43, 0.35);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    color: var(--sp-parchment) !important;
    border: 1px solid rgba(74, 127, 165, 0.5) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: rgba(74, 127, 165, 0.1) !important;
    border-color: var(--sp-ice-bright) !important;
    color: var(--sp-ice-pale) !important;
}

/* ── FORMS ────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    background: var(--sp-deep);
    border: 1px solid rgba(74, 127, 165, 0.25);
    color: var(--sp-parchment);
    font-family: 'Libre Baskerville', serif;
    font-size: 15px;
    padding: 10px 14px;
    border-radius: 0;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--sp-ice);
    box-shadow: 0 0 12px rgba(74, 127, 165, 0.15);
}
::placeholder { color: var(--sp-ash); opacity: 0.6; }

/* ── SEPARATORS ───────────────────────────────────────────────────────────── */
.wp-block-separator {
    border-color: rgba(74, 127, 165, 0.2) !important;
    opacity: 1 !important;
}

/* ── IMAGES ───────────────────────────────────────────────────────────────── */
.wp-block-image img {
    filter: sepia(0.08) contrast(1.02);
}

/* ── VIEWER & LIBRARY: EDGE TO EDGE ──────────────────────────────────────── */
.sp-viewer-outer,
.sp-library-outer {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 0;
}

.sp-viewer,
.sp-library {
    padding: 0;
    margin: 0;
    width: 100vw;
    max-width: 100vw;
}

/* ── MOBILE ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    h1 { font-size: clamp(28px, 8vw, 42px); }
    h2 { font-size: clamp(22px, 6vw, 32px); }

    .sp-header .wp-block-site-title a {
        font-size: 15px !important;
    }
}

/* ── AUTH NAV ITEM ─────────────────────────────────────────────────────────── */
.sp-nav-auth-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    transition: color 0.2s;
}
.sp-nav-auth-btn:hover {
    color: #ddd8d0;
}