/* ============================================================
   Studio Paradoxe — Global Styles
   Per DESIGN.MD: hard colors only, no gradients
   ============================================================ */

:root {
    --color-main: #ffffff;
    --accent: #ffd800;
    --bg-main: #000000;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Futura PT Cond', 'Futura Condensed PT Medium', 'Futura PT Medium', sans-serif;
    background-color: var(--bg-main);
}

/* Hero background (main header image, full cover) */
.hero-bg {
    background-image: url('/assets/images/main_header_bg.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Two-line section headings.
   First line = word + underline trail that fills the blank space
   created beside it, so it aligns with the (longer) second line. */
.heading-block {
    width: fit-content;
    max-width: 100%;
}

/* First line: the word, then a pseudo element covering the blank space */
.heading-line {
    display: flex;
    align-items: baseline;
}

.heading-line::after {
    content: "";
    flex: 1;
    margin-left: 0.5em;
    border-bottom: 0.07em solid currentColor;
}

/* Centered line: the text is underlined and the line pokes out a bit on each side */
.line-both {
    display: flex;
    justify-content: center;
}

/* The text itself, with an underline running beneath it */
.ul-poke {
    position: relative;
    display: inline-block;
}

.ul-poke::after {
    content: "";
    position: absolute;
    left: -2em;          /* extends a bit past the left of the text */
    right: -2em;         /* extends a bit past the right of the text */
    bottom: -0.15em;     /* sits just below the text */
    height: 0.08em;
    background-color: currentColor;
}

/* Entrance spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Inline links — bold, yellow, no underline */
.link-inline {
    font-weight: 700 !important;
    color: var(--accent) !important;
    text-decoration: none;
}

/* Inline links on the ALT (yellow) background — black */
.link-inline--alt {
    color: #000;
}

/* ============================================================
   Buttons — flat, wide, hard colors only
   ============================================================ */
.btn {
    display: inline-block;
    background-color: var(--bg-main);
    color: var(--color-main);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0.5rem 4rem;
    border: 2px solid var(--color-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn:hover {
    background-color: var(--color-main);
    color: var(--bg-main);
}

/* Narrower variant for paired buttons */
.btn--narrow {
    padding: 0.5rem 2rem;
}