/* ==========================================
   CORE.CSS - Reusable Component Library
   ==========================================

   Purpose:
   - CSS variables (colors, shadows, spacing, typography)
   - Reusable component classes (.callout, .block-*, .grid-*)
   - Components that can be used across multiple pages

   DO NOT put here:
   - Semantic HTML element styles (those go in layout.css)
   - Page-specific customizations (those go in dating.css)

   ==========================================  */

:root {
    /* Colors */
    --nadiyno-white: rgb(240, 243, 251);
    --nadiyno-white-alpha: rgba(240, 243, 251, 0.69);
    --nadiyno-light-blue: rgb(200, 214, 255);
    --nadiyno-light-blue-alpha: rgba(200, 214, 255, 0.69);
    --nadiyno-blue: rgb(15, 72, 232);
    --nadiyno-blue-alpha: rgba(15, 72, 232, 0.69);
    --nadiyno-yellow: rgb(255, 199, 10);
    --nadiyno-yellow-alpha: rgba(255, 199, 10,0.69);
    --nadiyno-pink: rgb(255, 91, 217);
    --nadiyno-pink-alpha: rgba(255, 91, 217,0.69);
    --nadiyno-navy: rgb(37, 44, 62);
    --nadiyno-navy-alpha: rgba(37, 44, 62,0.69);
    --nadiyno-matrix-0: rgb(135, 163, 243);
    --nadiyno-matrix-0-alpha: rgb(135, 163, 243,0.69);
    --nadiyno-matrix-1: rgb(173, 193, 247);
    --nadiyno-matrix-2: var(--nadiyno-light-blue);
    --nadiyno-matrix-3: rgb(225, 232, 255);
    /* Gradients */
    --nadiyno-dating-gradient-horizontal: linear-gradient(90deg, var(--nadiyno-pink-alpha) 0%, var(--nadiyno-light-blue-alpha) 100%);
    --nadiyno-dating-gradient: linear-gradient(180deg, var(--nadiyno-light-blue-alpha) 0%, var(--nadiyno-pink-alpha) 100%);
    --dating-radar-gradient: conic-gradient(from 45deg, var(--nadiyno-navy), var(--nadiyno-blue), var(--nadiyno-pink), var(--nadiyno-blue), var(--nadiyno-navy));
    --deep-blue-gradient: linear-gradient(180deg, var(--nadiyno-navy) 0%, var(--nadiyno-blue) 100%);
    --deep-blue-reverse-gradient: linear-gradient(90deg, var(--nadiyno-blue) 0%, var(--nadiyno-navy) 100%);
    /* Shadows - Consistent dark, long shadows */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.45);
    --header-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
    --btn-pink-box-shadow:
        0 6px 25px rgba(0, 0, 0, 0.3),
        0 0 30px var(--nadiyno-pink-alpha),
    inset 0 1px 3px rgba(255, 255, 255, 0.3);
    --drop-shadow-blue-a: drop-shadow(0px 4px 4px rgba(15, 72, 232, 0.34));
    --drop-shadow-pink-a: drop-shadow(0px 4px 4px rgba(255, 91, 217, 0.34));

    /* Footer */
    --footer-padding-y: 60px;
    --footer-section-gap: 40px;
    --footer-logos-gap: 40px;
    --footer-logo-height: 34px;

    /* Common Gaps */
    --gap-3xs: 6px;
    --gap-2xs: 10px;
    --gap-xs: 14px;
    --gap-xs-plus: 18px;
    --gap-sm: 16px;
    --gap-s: 21px;
    --gap-md: 28px;
    --gap-m: 33px;
    --gap-l: 42px;
    --gap-xl: 69px;
    --gap-xxl: 96px;
    --dd: 20px; /* Default spacing unit */
    --section-gap: calc(69px * 2);
    --header-height: 69px;
    --paddding: 121px;
    --x-padding: 0 calc(69px * 2);
    --y-padding: var(--padding) 0;

    /* Border Radius */
    --border-radius-xl: 96px;
    --border-radius-l: 76px;
    --border-radius-m: 44px;
    --border-radius-s: 24px;
    --border-radius-m-left: var(--border-radius-m) 0 0 var(--border-radius-m);
    --border-radius-m-right: 0 var(--border-radius-m) var(--border-radius-m) 0;

    /* Typography */
    --body-font-family: "SF Pro Display", "SF UI Display", "Inter", sans-serif;
    --heading-font-family: "RockStar", sans-serif;
    --body-line-height: 1.05;
    --header-line-height: 1.1;

    /* Fluid Typography - Scales smoothly between mobile and desktop */
    --font-size-h1: clamp(32px, 4vw + 1rem, 56px);
    --font-size-h2: clamp(28px, 3.5vw + 1rem, 48px);
    --font-size-h3: clamp(26px, 3vw + 1rem, 42px);
    --font-size-h4: clamp(24px, 2.5vw + 0.5rem, 32px);
    --font-size-h5: clamp(22px, 2vw + 0.5rem, 30px);
    --font-size-h6: clamp(20px, 1.8vw + 0.5rem, 28px);
    --font-size-b1: clamp(20px, 1.8vw + 0.5rem, 28px);
    --font-size-b2: clamp(18px, 1.6vw + 0.5rem, 26px);
    --font-size-b3: clamp(16px, 1.4vw + 0.4rem, 24px);
    --font-size-b4: clamp(16px, 1.2vw + 0.4rem, 22px);
    --font-size-b5: clamp(14px, 1vw + 0.4rem, 20px);
    --font-size-b6: clamp(12px, 0.8vw + 0.4rem, 18px);
    --heading-line-height:  1.1;
    --body-line-height: 1.05;

    /* Transitions */
    --link-transition: all 0.21s ease;
    --transition-fast: 0.21s ease;
    --transition-base: 0.33s ease;
    --transition-smooth: 0.33s cubic-bezier(0.42, 0, 0.21, 1);
    --transition-bounce: 0.33s cubic-bezier(0.69, -0.69, 0.21, 1.69);
}

@supports (font-variation-settings: normal) {
    :root {
        font-family: 'Inter var';
    }
}

html {
    background-color: var(--nadiyno-white);
    scroll-behavior: smooth;
}

/* ==========================================
   Smooth Scrolling
   ========================================== */

/* Note: Scroll-snap removed for better UX and free scrolling.
   Modern landing pages favor smooth, natural scrolling over
   restrictive section snapping. This allows users to scroll
   freely and reach all content including footer without friction. */

/* Note: Section layout styles moved to layout.css */

/* ==========================================
   Callout System - Full-Bleed Alert Boxes
   ==========================================

   BRANDKIT COMPLIANT STRUCTURE:
   - Structure: .callout > .callout__header + .callout__body
   - Padding/Gap: var(--spacing-unit) (21px) throughout
   - Border-radius: var(--border-radius-m) (44px)
   - Width: calc(100vw - 120px) - ALWAYS, regardless of parent
   - Two directional variants: .callout_left, .callout_right

   VARIANTS:
   - .callout - base callout
   - .callout_left - slides from left, rounded right corners
   - .callout_right - slides from right, rounded left corners
   - .callout_warning - navy background with gradient overlay

   ANIMATION:
   - Intersection Observer adds .visible class
   - Slide-in with bounce easing
   - Hover: scale + shadow + shine effect

   ========================================== */

/* ===== BASE CALLOUT ===== */
.callout {
    padding: 44px 0;

    /* Layout */
    display: flex;
    flex-direction: column;
    gap: 21px;

    /* CRITICAL: Fixed width - always 100vw - 120px */
    width: calc(100vw - (69px * 2));
    max-width: calc(100vw - (69px * 2));

    /* Typography */
    font-size: var(--font-size-b2);
    line-height: 1.1;

    /* Visual - NO default background, variants define it */
    color: var(--nadiyno-navy);
    border-radius: var(--border-radius-m);

    /* Animation setup */
    opacity: 1;
    transition:
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.8s ease-out,
        box-shadow var(--transition-smooth);

    /* Effects */
    position: relative;
    overflow: visible;
    cursor: pointer;

}

/* ===== CALLOUT HEADER ===== */
.callout__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-s);
    position: relative;
    z-index: 1;
    h1, h2, h3, h4, h5, h6 {
        font-size: var(--font-size-h5);
    }
    .callout__icon {
        display: flex;
        width: 100%;
    }
    .callout__circle {
        font-family: var(--heading-font-family);
        font-size: var(--font-size-h5);
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        gap: 10px;
        width: 55px;
        height: 55px;
        border-radius: 60px;
        color: var(--nadiyno-navy);
        background-color: var(--nadiyno-white);
        border: 2px solid var(--nadiyno-navy-alpha);
    }
}

.callout__title {
    font-size: var(--font-size-h5);
    font-weight: bold;
    font-family: var(--body-font-family);
    text-transform: none;
}

/* ===== CALLOUT BODY ===== */
.callout__body {
    display: flex;
    font-size: var(--font-size-b5);
    flex-direction: column;
    gap: var(--gap-s);
    position: relative;
    z-index: 1;
}

/* ===== LEFT VARIANT ===== */
.callout_left {
    padding-left: calc(69px * 3);
    padding-right: 69px;
    /* Align to left edge of viewport */
    margin-right: auto;
    text-align: right;
    align-items: flex-end;
    /* Round right corners only */
    border-radius: 0 var(--border-radius-m) var(--border-radius-m) 0;

    /* Start off-screen left */
    margin-left: calc(-69px * 2);
    .callout__icon {
        display: flex;
        flex-direction: column-reverse;
        .callout__circle {
            align-self: flex-end;
        }
    }
}

.callout_left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ===== RIGHT VARIANT ===== */
.callout_right {
    padding-right: calc(69px * 3);
    padding-left: 69px;
    /* Align to right edge of viewport */
    margin-left: auto;
    text-align: left;
    align-items: flex-start;

    /* Round left corners only */
    border-radius: var(--border-radius-m) 0 0 var(--border-radius-m);

    /* Start off-screen right */
    margin-right: calc(-69px * 2);
    .callout__icon {
        display: flex;
        flex-direction: column-reverse;
        .callout__circle {
            align-self: flex-start;
        }
    }
}

.callout_right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ===== WARNING VARIANT ===== */
.callout_warning {
    background-color: var(--nadiyno-navy);
    color: var(--nadiyno-white);
}


/* Ensure content appears above gradient */
.callout_warning > * {
    position: relative;
    z-index: 1;
}


.callout_left:hover {
    transform: translateX(69px);
}

.callout_right:hover {
    transform: translateX(-69px);
}

/* ===== CALLOUT CASE - REVERSED INDEPENDENT CALLOUT ===== */
/*
   Callout cases are positioned absolutely relative to parent callout,
   extending from screen edge in opposite direction, centered on parent's bottom border
*/

/* Add bottom padding to callout when it has a case */
.callout:has(.callout__case) {
    padding-bottom: calc(69px * 2); /* Flexible padding to accommodate case */
    margin-bottom: 96px;
}

.callout__case {
    background-color: var(--nadiyno-white);
    color: var(--nadiyno-navy);
    position: absolute;
    /* bottom: 0; */
    transform: translateY(50%); /* Center on the bottom border */
    width: calc(100vw - (69px) * 6);
    padding: 30px 44px;
    display: flex;
    flex-direction: column;
    gap: 21px;
    box-shadow:
        0 7px 21px rgba(255, 91, 217, 0.2),
        0 3px 12px rgba(255, 91, 217, 0.1);
    transition: all var(--transition-smooth);
    z-index: 5;
}

/* Case inside LEFT callout → aligns with RIGHT border */
/* Body is inset by padding-right: 69px, so offset by -69px to reach border */
.callout_left .callout__case {
    right: -69px;
    border-radius: var(--border-radius-m) 0 var(--border-radius-m) var(--border-radius-m);
    text-align: left;
}

/* Case inside RIGHT callout → aligns with LEFT border */
/* Body is inset by padding-left: 69px, so offset by -69px to reach border */
.callout_right .callout__case {
    left: -69px;
    border-radius: 0 var(--border-radius-m) var(--border-radius-m) var(--border-radius-m);
    text-align: right;
}

/* Case content styling */
.case__header {
    font-family: var(--heading-font-family);
    font-size: var(--font-size-b5);
    text-transform: uppercase;
}

.case__body {
    font-size: var(--font-size-b5);
    font-weight: 300;
    font-style: italic;
}

.case__src {
    font-size: var(--font-size-b6);
    font-weight: 400;
    font-style: normal;
    color: var(--nadiyno-navy-alpha);
}

/* Hover effect */
.callout__case:hover {
    box-shadow:
        0 14px 42px rgba(255, 91, 217, 0.4),
        0 6px 24px rgba(255, 91, 217, 0.2);
}

/* ===== TOUCH DEVICE OPTIMIZATION ===== */
@media (hover: none) {
    .callout {
        cursor: default;
    }

    .callout:hover {
        transform: translateX(0) scale(1);
        box-shadow: none;
    }

    .callout::before {
        display: none;
    }

    .callout:active {
        transform: scale(0.99);
        transition: transform 0.1s ease;
    }

}

/* ===== MOBILE RESPONSIVENESS ===== */
/* Tablet (max-width: 900px) */
@media (max-width: 900px) {
    .callout {
        width: calc(100vw - var(--gap-xl));
        max-width: calc(100vw - var(--gap-xl));
    }

    .callout_left {
        padding-left: var(--gap-xxl);
        padding-right: var(--gap-m);
        margin-left: calc(-1 * var(--gap-m));
    }

    .callout_right {
        padding-right: var(--gap-xxl);
        padding-left: var(--gap-m);
        margin-right: calc(-1 * var(--gap-m));
    }

    .callout_left:hover {
        margin-left: 0;
    }

    .callout_right:hover {
        margin-right: 0;
    }

    .callout__case {
        width: calc(100vw - var(--gap-xxl));
        padding: var(--gap-m);
    }

    /* Account for callout padding on tablet */
    .callout_left .callout__case {
        right: calc(-1 * var(--gap-m)); /* Offset by padding-right: 33px */
    }

    .callout_right .callout__case {
        left: calc(-1 * var(--gap-m)); /* Offset by padding-left: 33px */
    }
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
    .callout {
        width: calc(100vw - var(--gap-m));
        max-width: calc(100vw - var(--gap-m));
        padding: var(--gap-m) 0;
    }

    .callout_left {
        padding-left: var(--gap-l);
        padding-right: var(--gap-s);
        margin-left: calc(-1 * var(--gap-s));
        border-radius: 0 var(--border-radius-s) var(--border-radius-s) 0;
    }

    .callout_right {
        padding-right: var(--gap-l);
        padding-left: var(--gap-s);
        margin-right: calc(-1 * var(--gap-s));
        border-radius: var(--border-radius-s) 0 0 var(--border-radius-s);
    }

    .callout_left:hover {
        margin-left: calc(-1 * var(--gap-3xs));
    }

    .callout_right:hover {
        margin-right: calc(-1 * var(--gap-3xs));
    }

    .callout__header {
        gap: var(--gap-xs);
    }

    .callout__circle {
        width: 45px;
        height: 45px;
        font-size: var(--font-size-b2);
    }

    .callout__title {
        font-size: var(--font-size-b3);
    }

    .callout__body {
        font-size: var(--font-size-b5);
        gap: var(--gap-xs);
    }

    .callout__case {
        padding: var(--gap-s);
        width: calc(100vw - var(--gap-xl));
    }

    /* Account for callout padding on mobile */
    .callout_left .callout__case {
        right: calc(-1 * var(--gap-s)); /* Offset by padding-right: 21px */
        left: auto;
        border-radius: var(--border-radius-s) 0 var(--border-radius-s) var(--border-radius-s);
    }

    .callout_right .callout__case {
        left: calc(-1 * var(--gap-s)); /* Offset by padding-left: 21px */
        right: auto;
        border-radius: 0 var(--border-radius-s) var(--border-radius-s) var(--border-radius-s);
    }
}

/* ===== INFO VARIANT ===== */
.callout_info {
    background: linear-gradient(180deg, #D5DFFF 50%, #C8D6FF 100%);
    color: var(--nadiyno-navy);
}

.callout_alt {
    color: var(--nadiyno-navy);
    background-color: var(--nadiyno-white);
}

.callout_alt:hover {
    box-shadow: none;
}