/*
Theme Name: code-raunartisan
Template: bricks
*/

/*
 * style.css — STATIC DESIGN, loaded EVERYWHERE (live front-end + Bricks editor).
 * Keep only design that should be visible while building: theme tokens, fonts,
 * typography, base layout, scrollbar.
 *
 * All animation-related CSS (initial hidden/dimmed states + motion effects) lives
 * in animations.css, which is loaded FRONT-END ONLY (see functions.php) so the
 * editor isn't full of invisible elements. See Instructions.md → "animations.css".
 */

/* ─── Typography ─────────────────────────────────────────────────────────── */

.guide-text-purple {
    color: #bfacfb;
}

.guide-text-white {
    color: #ffffff;
}

.highlighted {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 48px;
}

.recoleta {
    font-family: 'recoleta';
    font-style: italic;
    font-weight: 400;
}

.recoleta-l {
    font-family: 'recoleta';
    font-weight: 200;
}

@media (max-width: 1366px) {
    .highlighted {
        font-size: 48px;
    }
}

@media (max-width: 1024px) {
    .highlighted {
        font-size: 48px;
    }
}

@media (max-width: 767px) {
    .highlighted {
        font-size: 8.4vw;
    }
    .project-desc,
    .project-title {
        font-size: 12px !important;
    }
    .project-image-container {
        aspect-ratio: 1 / 1;
    }
}

/* ─── Custom scrollbar (clean / minimal) ─────────────────────────────────── */

/* Reserve the scrollbar gutter at all times so the page doesn't shift horizontally
   when scroll unlocks after the hero entrance and the thumb reappears. During the
   lock (Lenis sets overflow:hidden) the gutter stays reserved but no thumb shows;
   the thumb only appears once scrolling is re-enabled. */
html {
    scrollbar-gutter: stable;
}

/* WebKit — Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;              /* horizontal scrollbars too */
}
::-webkit-scrollbar-track {
    background: #1a1a1a;       /* white track */
}
::-webkit-scrollbar-thumb {
    background: #000000;       /* light-grey bar */
    border-radius: 999px;      /* fully rounded thumb */
}
::-webkit-scrollbar-thumb:hover {
    background: #e6e6e6;       /* subtle darken on hover for discoverability */
}

/* Firefox (no thumb border-radius support; uses thin track) */
html {
    scrollbar-width: thin;
    scrollbar-color: #000000 #1a1a1a;   /* thumb, track */
}

/* ─── .icon-box-big vignette overlay ─────────────────────────────────────── */

/* Required so the absolutely-positioned ::before (inset:0) anchors to the box itself
   rather than some other positioned ancestor. */
.icon-box-big {
    position: relative;
}

.icon-box-big::before {
    content: "";
    position: absolute;
    /* top is pushed up above the card so the white top glow band lands in the area the
       container clips (overflow:hidden) — hides the top-edge artifact. left/right/bottom = 0.
       -20px ≥ the 16px blur, so the top glow fully fades before the visible top edge. */
    inset: -20px 2px 2px 2px;
    pointer-events: none;
    filter: blur(2px);
    border-radius: 4px;

    /* Inset shadow */
    box-shadow: inset 0 0 14px rgba(255, 255, 255, 1);

    /* Blend mode */
    mix-blend-mode: overlay;
    z-index: 10;
}

.icon-box-big::after {
    content: "";
    position: absolute;
    inset: -20px 0 0 0;
    pointer-events: none;
    border-radius: 4px;

    /* Inset shadow */
    box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, 1);

    /* Blend mode */
    mix-blend-mode: overlay;
    z-index: 11;
}

/* ─── Testimonial card glow (static; hover-dim effect lives in animations.css) ─ */

/* Inset white glow on each carousel card — the card's DEFAULT resting look. Kept on
   disk (not in Bricks) so it's in source control and still shows in the Bricks editor.
   The hover behaviour — hovering one card darkens all the OTHERS with a black overlay —
   is a front-end-only motion effect, so it lives in animations.css. Remove the
   box-shadow from this card in Bricks so this stays the single source of truth. */
.testimonial-card {
    box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.1);
}

/* ─── Guide index card (static look; show/hide + collapse states live in animations.css) ─ */

/* The card is a NON-scrolling FRAME: it clips its content and anchors the full-card fade
   overlay (::after). The inner list (its direct child) is the real scroll area, with its
   scrollbar hidden — so the overlay never scrolls or jumps on expand, and no bar shows.
   This is what lets the overlay be a plain inset:0 pseudo (fills the whole card, inherits
   its height) instead of a fiddly sticky box that misbehaves inside the flex card.
   Give the card a bounded height in Bricks for the scroll to engage. Kept on disk (not
   Bricks per-element CSS) so it's source-controlled and shows in the editor. */
.guide-index-window {
    position: relative;   /* containing block for the ::after overlay */
    overflow: hidden;     /* clip; the card itself does NOT scroll */
}

/* The single scroll area, injected by guide-index.js as the card's only child (it wraps
   whatever module markup you built). Its scrollbar is HIDDEN (still scrollable by wheel /
   touch / drag — data-lenis-prevent on the card covers it). flex:1 + min-height:0 lets it
   fill and shrink inside the flex card; max-height:100% covers a block card — so it scrolls
   either way. It re-creates the card's own vertical stacking for the modules: display:flex +
   column, and gap/align-items inherited from the card so their spacing is preserved.
   overscroll-behavior stops the scroll chaining to the page at the edges. */
.guide-index-scroller {
    display: flex;
    flex-direction: column;
    gap: inherit;                  /* keep the card's row gap between modules */
    align-items: inherit;          /* keep the card's cross-axis alignment */
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;         /* Firefox: hide the scrollbar */
    -ms-overflow-style: none;      /* legacy Edge */
}
.guide-index-scroller::-webkit-scrollbar {
    display: none;                 /* WebKit (Chrome / Edge / Safari): hide the scrollbar */
}

/* Full-card fade overlay, as a pseudo ON the card. inset:0 makes it fill the ENTIRE card and
   inherit its height/width — no hardcoded value needed. It's pinned to the (non-scrolling)
   frame, above the content (z-index 20) and click-through (pointer-events:none). Top→bottom
   gradient: solid #0d0d0d for the top 5% then fades out by 10%, transparent through the
   middle, and fades back in from 80% to solid #0d0d0d by 95% — softly masking both edges. */
.guide-index-window::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        #0d0d0d 1%,
        transparent 8%,
        transparent 85%,
        #0d0d0d 99%
    );
}