@import "_fonts.css";
@import "_resets.css";

/*
 * ALA VINTAGE – main stylesheet
 *
 * MOBILE-FIRST: base styles are for small screens, larger screens are added
 * with min-width media queries. Breakpoints (CSS variables can't be used in
 * media queries, so always use these values):
 *   sm  640px   |  md  768px   |  lg  1024px   |  xl  1280px   |  3xl  1514px
 *
 * Order: tokens → base → components/utilities → layout → pages → modules → teasers → WooCommerce
 */

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
    /* colors */
    --color-white: #ffffff;
    --color-black: #111111;
    --color-bg: #ffffff;            /* page background (Figma: white) */
    --color-surface: #ffffff;       /* cards */
    --color-text: #111111;
    --color-text-muted: #6b6b70;    /* Figma © line – 5.2:1 on white */
    --color-line: #111111;          /* thin black lines (Figma) */
    --color-line-soft: #d9d9d9;     /* subtle lines, e.g. form fields */
    --color-chip: #efefef;          /* grey price chip, neutral pills */
    --color-accent: #ff4d1f;        /* orange-red: fills only (pills, badges) – use dark text on it */
    --color-accent-text: #d4380f;   /* orange-red for TEXT (sale price) – 4.8:1 on white */
    --color-error: #b3261e;
    --color-success: #2e6b3a;

    /* fonts */
    --font-sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* section headings */

    /* font sizes (fluid between mobile and desktop) */
    --fs-xxs: 0.6875rem;                                /* 11px – copyright */
    --fs-xs: 0.75rem;                                   /* 12px – navigation, labels, badges */
    --fs-s: 0.875rem;                                   /* 14px – UI, meta */
    --fs-base: 1rem;                                    /* 16px – body */
    --fs-m: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);    /* product titles */
    --fs-l: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);     /* page titles */
    --fs-xl: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);       /* section titles */
    --fs-serif: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); /* Instrument Serif text */
    --fs-section: clamp(2.25rem, 1.5rem + 3vw, 4rem);   /* JetBrains Mono section heading, 64px desktop */
    --fs-logo: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);    /* header logo, 20px desktop */
    --fs-footer-mark: clamp(3rem, 8.33vw, 7.5rem);      /* footer wordmark, 120px at 1440 */
    --fs-display: clamp(3.5rem, 16vw, 15rem);           /* homepage wordmark */

    /* letter spacing */
    --tracking-nav: 0.02em;    /* navigation (Figma 0.24px at 12px) */
    --tracking-tight: -0.03em; /* large Inter wordmarks (Figma -3.6px at 120px) */

    /* spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 5rem;
    --space-9: 8rem;
    --gap-around: clamp(1rem, 4vw, 2.5rem); /* page side padding */
    --gap-grid: clamp(0.75rem, 2vw, 1.5rem);
    --max-width: 1600px;

    /* shapes & lines */
    --radius-s: 8px;
    --radius-card: 0;     /* Figma: square cards */
    --radius-pill: 999px;
    --line: 1px solid var(--color-line);

    /* motion */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --duration: 200ms;

    /* layout */
    --header-height: 60px;

    /* legacy name from the starter theme */
    --font-h1: normal var(--fs-xl)/110% var(--font-sans);
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.5;
}
h1, h2, h3, h4 {
    font-weight: 500;
    line-height: 1.15;
}
h1 { font-size: var(--fs-l); }
h2 { font-size: var(--fs-m); }
h3, h4 { font-size: var(--fs-base); }
p + p {
    margin-top: 1em;
}
a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--duration) var(--ease);
}
a:hover {
    color: var(--color-text-muted);
}
hr {
    border: 0;
    border-top: var(--line);
}
:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
    border-radius: 2px;
}
::selection {
    background-color: var(--color-accent);
    color: var(--color-black);
}
input:not([type="checkbox"], [type="radio"], [type="submit"]),
select,
textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface);
    border: var(--line);
    border-radius: var(--radius-s);
    font-size: var(--fs-base); /* ≥16px prevents iOS zoom on focus */
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-text);
    outline: none;
}

/* ==========================================================================
   Components & utilities – usable anywhere
   ========================================================================== */

/* -> centered content area with side padding */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gap-around);
}

/* -> navigation typography (Figma: Inter Regular 12px, uppercase) */
.nav-type {
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: var(--tracking-nav);
    text-decoration: none;
}

/* -> section heading in JetBrains Mono (e.g. "CLOTHING", "NEW") */
.section-title {
    font-family: var(--font-mono);
    font-size: var(--fs-section);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* -> serif text (product descriptions, editorial) */
.serif {
    font-family: var(--font-serif);
    font-size: var(--fs-serif);
    line-height: 1.3;
}

/* -> muted helper text */
.muted {
    color: var(--color-text-muted);
}

/* -> buttons: dark pill by default, outline variant */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px; /* touch target */
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: var(--radius-pill);
    font-size: var(--fs-s);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
    &:hover {
        background-color: transparent;
        color: var(--color-black);
    }
    &.-outline {
        background-color: transparent;
        color: var(--color-black);
        &:hover {
            background-color: var(--color-black);
            color: var(--color-white);
        }
    }
    &:disabled,
    &.disabled {
        opacity: 0.4;
        pointer-events: none;
    }
}

/* -> filter pills; .is-active = orange */
.pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: var(--space-2) var(--space-4);
    background-color: transparent;
    border: var(--line);
    border-radius: var(--radius-pill);
    font-size: var(--fs-s);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
    &:hover {
        border-color: var(--color-text);
        color: var(--color-text);
    }
    &.is-active,
    &[aria-current="page"],
    &[aria-pressed="true"] {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-black);
    }
}

/* -> grey price chip */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background-color: var(--color-chip);
    border-radius: var(--radius-pill);
    font-size: var(--fs-s);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* -> small badge (staff pick, sale); .-neutral = sold out */
.badge {
    display: inline-block;
    padding: 0.2em 0.7em;
    background-color: var(--color-accent);
    color: var(--color-black);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
    &.-neutral {
        background-color: var(--color-black);
        color: var(--color-white);
    }
    &.-outline {
        background-color: var(--color-white);
        color: var(--color-black);
        box-shadow: inset 0 0 0 1px var(--color-line);
    }
}

/* -> rounded white card */
.card {
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    overflow: clip;
}

/* -> thin divider line */
.line {
    border: 0;
    border-top: var(--line);
}

/* -> hide visually, keep for screen readers */
.visually-hidden,
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==========================================================================
   Layout components
   ========================================================================== */
/* -> HEADER (Figma 29:831): bar with three boxes, separated by double lines */
[data-layout="header"] {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-bg);
    & > .bar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        column-gap: 6px; /* the gap between two 1px borders creates the double line */
        height: var(--header-height);
        border: var(--line);
        background-color: var(--color-bg);
    }
    & .box {
        display: flex;
        align-items: center;
        min-width: 0;
        padding-inline: var(--space-4);
        &.-left {
            border-right: var(--line);
        }
        &.-center {
            justify-content: center;
            border-inline: var(--line);
            padding-inline: var(--space-5);
        }
        &.-right {
            justify-content: flex-end;
            gap: var(--space-5);
            border-left: var(--line);
        }
    }

    /* logo: site name as text (Figma: Inter Bold 20px) or uploaded image */
    & .logo {
        font-size: var(--fs-logo);
        font-weight: 700;
        letter-spacing: var(--tracking-nav);
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
        &:hover {
            color: var(--color-text);
        }
        & > .image {
            width: auto;
            max-height: 28px;
        }
    }

    /* links: underline on hover and for the current page */
    & .link,
    & .languages a,
    & .cart-link {
        &:hover,
        &[aria-current] {
            color: var(--color-text);
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 0.3em;
        }
    }

    /* mobile menu button: "Menü" / "Schliessen" */
    & .menu-toggle {
        min-height: 44px;
        & > .label.-open {
            display: none;
        }
        &[aria-expanded="true"] {
            & > .label.-closed { display: none; }
            & > .label.-open { display: inline; }
        }
    }

    /* main navigation: mobile = dropdown panel below the bar */
    & .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        background-color: var(--color-bg);
        border: var(--line);
        border-top: 0;
        & .list > li + li {
            border-top: var(--line);
        }
        & .link {
            display: block;
            padding: var(--space-4);
        }
    }
    &[data-menu-open] .main-nav {
        display: block;
    }

    /* language switcher (only visible when Polylang is active) */
    & .languages {
        display: flex;
        gap: var(--space-4);
        &.-mobile {
            padding: var(--space-4);
            border-top: var(--line);
        }
        &.-desktop {
            display: none;
        }
    }

    /* cart: "Korb (0)" on small screens, "Warenkorb (0)" from md */
    & .cart-link {
        white-space: nowrap;
        & > .label.-long {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
        }
    }
}
/* -> keep the sticky header below the WordPress admin bar when logged in */
@media (min-width: 601px) {
    .admin-bar [data-layout="header"] { top: 46px; }
}
@media (min-width: 783px) {
    .admin-bar [data-layout="header"] { top: 32px; }
}

/* -> FOOTER (Figma 27:135): white, huge wordmark, links, copyright */
[data-layout="footer"] {
    padding: var(--space-6) var(--gap-around) var(--space-5);
    background-color: var(--color-bg);
    border-top: var(--line);
    & > .wordmark {
        display: block;
        width: fit-content;
        font-size: var(--fs-footer-mark);
        font-weight: 700;
        line-height: 1;
        letter-spacing: var(--tracking-tight);
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
        &:hover {
            color: var(--color-text);
        }
    }
    & > .bottom {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
        margin-top: var(--space-5);
    }
    & .footer-nav > .list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-6);
    }
    & .link:hover,
    & .link[aria-current] {
        color: var(--color-text);
        text-decoration: underline;
        text-underline-offset: 0.3em;
    }
    & .copyright {
        font-size: var(--fs-xxs);
        letter-spacing: var(--tracking-nav);
        color: var(--color-text-muted);
    }
}

/* ==========================================================================
   Page components
   ========================================================================== */
[data-page] {
    width: 100%;
    min-height: 60vh;
}
[data-page="front"] {
    display: grid;
    place-items: center;
    min-height: calc(100vh - var(--header-height));
    & > .wordmark {
        font-size: var(--fs-display);
        font-weight: 600;
        line-height: 0.9;
        letter-spacing: var(--tracking-tight);
        text-align: center;
        text-transform: uppercase;
    }
}
[data-page="404"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    max-width: 40rem;
    padding: var(--space-8) var(--gap-around);
    & > .text {
        font-family: var(--font-serif);
        font-size: var(--fs-serif);
    }
}

/* ==========================================================================
   Module components
   ========================================================================== */
[data-module] {
    overflow: clip;
    position: relative;
    width: 100%;
}
/* course example module */
[data-module="example"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    & > .image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        inset: 0;
    }
    & > .title {
        position: relative;
        color: var(--color-white);
        font: var(--font-h1);
        text-align: center;
    }
}

/* ==========================================================================
   Teaser components
   ========================================================================== */

/* ==========================================================================
   WooCommerce – shared basics (page-specific styles follow in later steps)
   ========================================================================== */

/* -> prices: sale = old price struck through (muted), new price orange */
.price {
    font-variant-numeric: tabular-nums;
    & del {
        color: var(--color-text-muted);
        opacity: 1;
        font-weight: 400;
    }
    & ins {
        color: var(--color-accent-text);
        text-decoration: none;
        font-weight: 500;
    }
}
/* -> sale badge from WooCommerce */
.woocommerce span.onsale {
    min-width: 0;
    min-height: 0;
    padding: 0.2em 0.7em;
    background-color: var(--color-accent);
    color: var(--color-black);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* -> product badges (Ausverkauft / Sale / Staff Pick) on top of the product image */
.product-badges {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    pointer-events: none;
}
/* -> sold-out products: image slightly faded */
.woocommerce ul.products li.product.outofstock img {
    opacity: 0.5;
}
/* -> availability text on the product page ("Einzelstück" / "Ausverkauft") */
.woocommerce div.product .stock {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-nav);
    color: var(--color-text);
    &.out-of-stock {
        color: var(--color-text-muted);
    }
}

/* ==========================================================================
   Breakpoints (mobile-first, min-width)
   ========================================================================== */

/* BREAKPOINT: sm */
@media (min-width: 640px) {}

/* BREAKPOINT: md */
@media (min-width: 768px) {
    [data-layout="header"] .cart-link {
        & > .label.-long {
            position: static;
            width: auto;
            height: auto;
            overflow: visible;
            clip-path: none;
        }
        & > .label.-short {
            display: none;
        }
    }
    [data-layout="footer"] > .bottom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3) var(--gap-grid);
        & > .footer-nav { grid-column: 2; grid-row: 1; }
        & > .copyright { grid-column: 1; grid-row: 2; }
    }
    [data-layout="footer"] .footer-nav > .list {
        column-gap: clamp(2rem, 6vw, 6rem);
    }
}

/* BREAKPOINT: lg */
@media (min-width: 1024px) {
    /* header: desktop proportions from Figma (≈ 25% | 50% | 25%), menu inline */
    [data-layout="header"] {
        & > .bar {
            grid-template-columns: 1fr 2fr 1fr;
        }
        & .menu-toggle {
            display: none;
        }
        & .main-nav {
            display: block;
            position: static;
            width: 100%;
            max-height: none;
            overflow: visible;
            border: 0;
            & .list {
                display: flex;
                justify-content: space-around;
                & > li + li { border-top: 0; }
            }
            & .link {
                padding: var(--space-2);
            }
            & .languages.-mobile {
                display: none;
            }
        }
        & .box.-right {
            justify-content: space-around;
        }
        & .languages.-desktop {
            display: flex;
        }
    }
}

/* BREAKPOINT: xl */
@media (min-width: 1280px) {}

/* BREAKPOINT: 3xl */
@media (min-width: 1514px) {}