/**
 * Main Theme Styles
 */

@font-face {
    font-family: 'Freehand';
    src: url('../fonts/Freehand-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --primary-color: #000;
    --text-color: #333;
    --bg-color: #fff;
    --font-primary: sans-serif;

    /* 
       SPACING SYSTEM (Minimalna wartość (360px) -> Maksymalna wartość (1920px)):
       --space-3xs:  2px  (fixed)
       --space-2xs:  4px  (fixed)
       --space-xs:   6px  -> 8px
       --space-sm:   8px  -> 12px
       --space-md:   12px -> 16px
       --space-lg:   16px -> 24px
       --space-xl:   24px -> 32px
       --space-2xl:  32px -> 48px
       --space-3xl:  40px -> 64px
       --space-4xl:  64px -> 96px
       --space-5xl:  80px -> 128px
       --space-6xl:  96px -> 160px

       FONT SIZE SYSTEM (Based on theme.json presets):
       --wp--preset--font-size--large-title:  48px -> 86px (5.375rem)
       --wp--preset--font-size--medium-title: 32px -> 56px (3.5rem)
       --wp--preset--font-size--small-title:  28px -> 48px (3rem)
       --wp--preset--font-size--bold-large:   24px -> 32px (2rem)
       --wp--preset--font-size--bold-medium:  20px -> 28px (1.75rem)
       --wp--preset--font-size--bold-small:   16px -> 20px (1.25rem)
       --wp--preset--font-size--text-large:   20px -> 32px (2rem)
       --wp--preset--font-size--text-medium:  18px -> 24px (1.5rem)
       --wp--preset--font-size--text-small:   16px -> 20px (1.25rem)
       --wp--preset--font-size--text-xsmall:  16px
    */

    /* FLUID SPACING SYSTEM (320px - 1920px) 
       Nazewnictwo semantyczne, stosuje rem i vw. Skala rośnie od ok. 60-75% wartości na 320px do 100% na 1920px. */
    --space-3xs: clamp(0.125rem, 0.125rem, 0.125rem);
    /* 2px */
    --space-2xs: clamp(0.25rem, 0.25rem, 0.25rem);
    /* 4px */
    --space-xs: clamp(0.375rem, 0.35rem + 0.125vw, 0.5rem);
    /* 6px -> 8px */
    --space-sm: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
    /* 8px -> 12px */
    --space-md: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
    /* 12px -> 16px */
    --space-lg: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    /* 16px -> 24px */
    --space-xl: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
    /* 24px -> 32px */
    --space-2xl: clamp(2rem, 1.8rem + 1vw, 3rem);
    /* 32px -> 48px */
    --space-3xl: clamp(2.5rem, 2.2rem + 1.5vw, 4rem);
    /* 40px -> 64px */
    --space-4xl: clamp(4rem, 3.6rem + 2vw, 6rem);
    /* 64px -> 96px */
    --space-5xl: clamp(5rem, 4.4rem + 3vw, 8rem);
    /* 80px -> 128px */
    --space-6xl: clamp(6rem, 5.2rem + 4vw, 10rem);
    /* 96px -> 160px */

    /* ICON SIZING SYSTEM */
    --icon-16: 1rem;
    /* 16px */
    --icon-20: 1.25rem;
    /* 20px */
    --icon-24: 1.5rem;
    /* 24px */
    --icon-32: 2rem;
    /* 32px */
    --icon-40: 2.5rem;
    /* 40px */
    --icon-48: 3rem;
    /* 48px */
    --icon-64: 4rem;
    /* 64px */

    /* LINE HEIGHTS */
    --lh-100: 1;
    --lh-125: 1.25;
    --lh-150: 1.5;
    --lh-175: 1.75;
    --lh-200: 2;

    /* HEADER HEIGHT - updated by JS ResizeObserver */
    --header-height: 144px;
}

/* ==========================================================================
   Header Offset Utility
   ========================================================================== */
.has-header-offset {
    padding-top: calc(var(--header-height) + 2dvh);
}

/* ==========================================================================
   Icon Size Utility Classes
   ========================================================================== */
.icon-16 {
    width: var(--icon-16);
    height: var(--icon-16);
}

.icon-20 {
    width: var(--icon-20);
    height: var(--icon-20);
}

.icon-24 {
    width: var(--icon-24);
    height: var(--icon-24);
}

.icon-32 {
    width: var(--icon-32);
    height: var(--icon-32);
}

.icon-40 {
    width: var(--icon-40);
    height: var(--icon-40);
}

.icon-48 {
    width: var(--icon-48);
    height: var(--icon-48);
}

.icon-64 {
    width: var(--icon-64);
    height: var(--icon-64);
}

.icon {
    display: inline-block;
    flex-shrink: 0;
}

/* ==========================================================================
   Icon Color Utility Classes
   ========================================================================== */

/* Ustawienie dla SVG renderowanych przez funkcję: dziedziczenie currentColor.
   Wybieramy tylko elementy, które NIE mają ustawionego fill="none" (np. chevron). */
.icon.icon-self path:not([fill="none"]),
.icon.icon-self rect:not([fill="none"]),
.icon.icon-self circle:not([fill="none"]),
.icon.icon-self polygon:not([fill="none"]),
.icon.icon-in-button path:not([fill="none"]),
.icon.icon-in-button rect:not([fill="none"]),
.icon.icon-in-button circle:not([fill="none"]),
.icon.icon-in-button polygon:not([fill="none"]),
.icon.icon-self-reverse path:not([fill="none"]),
.icon.icon-self-reverse rect:not([fill="none"]),
.icon.icon-self-reverse circle:not([fill="none"]),
.icon.icon-self-reverse polygon:not([fill="none"]) {
    fill: currentColor;
    transition: fill 0.3s ease;
}

/* W przypadku użycia stroke (obrysu) zamiast wypełnienia */
.icon.icon-self [stroke],
.icon.icon-in-button [stroke],
.icon.icon-self-reverse [stroke] {
    stroke: currentColor;
    transition: stroke 0.3s ease;
}

/* 
   Specyficzne wymuszenia kolorów:
   Te klasy narzucają z góry domyślny kolor ikonie, który reaguje na hover nadrzędny
*/
.icon-self {
    color: var(--wp--preset--color--fair-sand, #E2DCD3);
    transition: color 0.3s ease;
}

.icon-self:hover,
a:hover .icon-self,
button:hover .icon-self,
.match-card:hover .icon-self,
.site-footer__social-link:hover .icon-self {
    color: var(--wp--preset--color--game-red, #B02A2A);
}

.icon-self-reverse {
    color: var(--wp--preset--color--game-red, #B02A2A);
    transition: color 0.3s ease;
}

.icon-self-reverse:hover,
a:hover .icon-self-reverse,
button:hover .icon-self-reverse {
    color: var(--wp--preset--color--game-red, #B02A2A);
}

.icon-in-button {
    /* Dziedziczy z .button / nadrzędnego linku */
    color: inherit;
}




body {
    margin: 0;
    font-family: var(--font-primary);
    color: var(--text-color);
    background-color: var(--wp--preset--color--steel-black);
    overflow-x: hidden;
}

/* Base styles for Swiper compatibility */
img {
    max-width: 100%;
    height: auto;
}




/* ==========================================================================
   Typography & Color Utility Classes (Figma)
   ========================================================================== */

/* NINES - Tytuły */
.large-title {
    font-family: var(--wp--preset--font-family--nines);
    font-size: var(--wp--preset--font-size--large-title);
    font-weight: 600;
    line-height: var(--lh-100);
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.medium-title {
    font-family: var(--wp--preset--font-family--nines);
    font-size: var(--wp--preset--font-size--medium-title);
    font-weight: 600;
    line-height: var(--lh-125);
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.small-title {
    font-family: var(--wp--preset--font-family--nines);
    font-size: var(--wp--preset--font-size--small-title);
    font-weight: 600;
    line-height: var(--lh-125);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* NINES - Bold Text */
.bold-text-large {
    font-family: var(--wp--preset--font-family--nines);
    font-size: var(--wp--preset--font-size--bold-large);
    font-weight: 600;
    line-height: var(--lh-150);
    letter-spacing: 0.075em;
    /* 7.5% */
    text-transform: uppercase;
}

.bold-text-medium {
    font-family: var(--wp--preset--font-family--nines);
    font-size: var(--wp--preset--font-size--bold-medium);
    font-weight: 600;
    line-height: var(--lh-150);
    letter-spacing: 0.05em;
    /* 5% */
    text-transform: uppercase;
}

.bold-text-small {
    font-family: var(--wp--preset--font-family--nines);
    font-size: var(--wp--preset--font-size--bold-small);
    font-weight: 600;
    line-height: var(--lh-125);
    letter-spacing: 0.025em;
    /* 2.5% */
    text-transform: uppercase;
}

/* Engram - Teksty */
.menu-title {
    font-family: var(--wp--preset--font-family--engram);
    font-size: var(--wp--preset--font-size--bold-large);
    font-weight: 600;
    line-height: var(--lh-150);
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.large-text {
    font-family: var(--wp--preset--font-family--engram);
    font-size: var(--wp--preset--font-size--text-large);
    font-weight: 400;
    line-height: var(--lh-150);
    /* Regular default */
}

.large-text.semibold {
    font-weight: 600;
}

.large-text.medium {
    font-weight: 500;
}

.large-text.italic {
    font-style: italic;
}

.medium-text {
    font-family: var(--wp--preset--font-family--engram);
    font-size: var(--wp--preset--font-size--text-medium);
    font-weight: 400;
    line-height: var(--lh-150);
}

.medium-text.semibold {
    font-weight: 600;
}

.medium-text.medium {
    font-weight: 500;
}

.medium-text.italic {
    font-style: italic;
}

.small-text {
    font-family: var(--wp--preset--font-family--engram);
    font-size: var(--wp--preset--font-size--text-small);
    font-weight: 400;
    line-height: var(--lh-175);
}

.small-text.semibold {
    font-weight: 600;
}

.small-text.medium {
    font-weight: 500;
}

.small-text.italic {
    font-style: italic;
}

.x-small-text {
    font-family: var(--wp--preset--font-family--engram);
    font-size: var(--wp--preset--font-size--text-xsmall);
    font-weight: 400;
    line-height: var(--lh-200);
}

.x-small-text.semibold {
    font-weight: 600;
}

.x-small-text.medium {
    font-weight: 500;
}

.x-small-text.italic {
    font-style: italic;
}

/* Kolory SVG / Tekst */
.text-steel-black {
    color: var(--wp--preset--color--steel-black);
}

.text-fair-sand {
    color: var(--wp--preset--color--fair-sand);
}

.text-warm-copper {
    color: var(--wp--preset--color--warm-copper);
}

.text-game-red {
    color: var(--wp--preset--color--game-red);
}

.text-concrete-grey {
    color: var(--wp--preset--color--concrete-grey);
}

.bg-steel-black {
    background-color: var(--wp--preset--color--steel-black);
}

.bg-fair-sand {
    background-color: var(--wp--preset--color--fair-sand);
}

.bg-warm-copper {
    background-color: var(--wp--preset--color--warm-copper);
}

.bg-game-red {
    background-color: var(--wp--preset--color--game-red);
}

.bg-concrete-grey {
    background-color: var(--wp--preset--color--concrete-grey);
}

/* ==========================================================================
   Global Button Styles
   ========================================================================== */

/* Button Mask for Reveal Animation */
.btn-mask {
    overflow: hidden;
    display: inline-block;
}

/* Base Button Style */
.btn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    border: none;
}

/* Button Large (lg) */
.btn-lg {
    padding: var(--space-lg) var(--space-2xl);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.5);
    color: var(--wp--preset--color--fair-sand);
    background-image: url('http://nines.local/wp-content/uploads/button-background-1.png');
    background-size: cover;
    background-position: center;
    background-color: var(--wp--preset--color--game-red);
    background-blend-mode: multiply;
}

.btn-lg:hover {
    background-color: var(--wp--preset--color--fair-sand);
    color: var(--wp--preset--color--game-red);
    box-shadow: inset 0 0 0 0px 0%;
}

/* ==========================================================================
   Fullscreen Scroller (GSAP)
   ========================================================================== */
.block-fullscreen-scroller {
    width: 100%;
    height: 100dvh;
    position: relative;
    background-color: #111;
    --text-color: #fff;
    --primary-color: #fff;
    color: var(--text-color);
}

.block-fullscreen-scroller__inner {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Kady bezposedni blok-dziecko w obrebie scrollera zajmuje 100dvh i ukladany jest absolutnie */
.block-fullscreen-scroller__inner>.block-editor-inner-blocks>.block-editor-block-list__layout>*,
.block-fullscreen-scroller__inner>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    visibility: hidden;
}

.block-fullscreen-scroller__inner>.block-editor-inner-blocks>.block-editor-block-list__layout>*:first-child,
.block-fullscreen-scroller__inner>*:first-child {
    visibility: visible;
}


.block-fullscreen-scroller__inner>.acf-innerblocks-container>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    visibility: hidden;
}

.block-fullscreen-scroller__inner>.acf-innerblocks-container>*:first-child {
    visibility: visible;
}

.block-fullscreen-scroller {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}




/* PREVENT FOUC IN FULLSCREEN SCROLLER */
.block-fullscreen-scroller__inner h1,
.block-fullscreen-scroller__inner h2,
.block-fullscreen-scroller__inner h3,
.block-fullscreen-scroller__inner p,
.block-fullscreen-scroller__inner .block-cta-image__img,
.block-fullscreen-scroller__inner .block-cta-image__mask {
    opacity: 0;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Hover Wipe Animation - Reusable text reveal on hover */
.hover-wipe {
    --hover-wipe-active: var(--wp--preset--color--game-red, #B02A2A);
    --hover-wipe-default: currentColor;
    background: linear-gradient(to top, var(--hover-wipe-active) 50%, var(--hover-wipe-default) 50%);
    background-size: 100% 200%;
    background-position: top;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.hover-wipe:hover {
    background-position: bottom;
}

/* FIX: GSAP SplitType breaks parent background-clip masks in WebKit. Move effect to .word children. */
.hover-wipe:has(.word) {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
}

.hover-wipe .word {
    background: linear-gradient(to top, var(--hover-wipe-active) 50%, var(--hover-wipe-default) 50%);
    background-size: 100% 200%;
    background-position: top;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.hover-wipe:hover .word {
    background-position: bottom;
}

/* Outline Text - Transparent text with responsive stroke */
.outline-text {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: clamp(1px, 0.03em, 3px) currentColor;
}

/* FIX: GSAP SplitType breaks parent text-fill/stroke masks in WebKit. Move effect to .word children. */
.outline-text:has(.word) {
    -webkit-text-fill-color: initial;
    -webkit-text-stroke: initial;
}

.outline-text .word {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: clamp(1px, 0.03em, 3px) currentColor;
}