/*
 * ============================================================
 * BISDIG UJB — BASE CSS
 * Foundation / Reset / Responsive / Accessibility / Safety
 *
 * FASE 2 — GLOBAL FOUNDATION
 *
 * BRAND HIERARCHY
 *   Janabadra Red  = Primary Identity
 *   Burgundy       = Secondary Identity
 *   Wine           = Premium Depth
 *   Gold           = Premium Accent
 *   Charcoal       = Dark Neutral
 *   Ivory          = Light Surface
 *
 * PREFIX
 *   --bisdig-*
 *
 * RULE
 *   variables.css = MASTER DESIGN TOKENS
 *   base.css      = GLOBAL FOUNDATION + RESPONSIVE SAFETY
 * ============================================================
 */


/* ============================================================
   1. GLOBAL FOUNDATION TOKENS
   ============================================================ */

:root {

    /* --------------------------------------------------------
       1.1 Typography
       -------------------------------------------------------- */

    --bisdig-font-sans:
        'Inter',
        'Plus Jakarta Sans',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Arial,
        sans-serif;

    --font-sans: var(--bisdig-font-sans);


    /* --------------------------------------------------------
       1.2 Brand hierarchy
       -------------------------------------------------------- */

    --bisdig-brand-primary:
        var(--color-red);

    --bisdig-brand-primary-hover:
        var(--color-red-dark);

    --bisdig-brand-secondary:
        var(--color-burgundy);

    --bisdig-brand-secondary-hover:
        var(--color-burgundy-dark);

    --bisdig-brand-wine:
        var(--color-wine);

    --bisdig-brand-dark:
        var(--color-charcoal-dark);

    --bisdig-brand-light:
        var(--color-ivory);

    --bisdig-brand-accent:
        var(--color-gold);


    /* Legacy compatibility */
    --brand-primary: var(--bisdig-brand-primary);
    --brand-primary-hover: var(--bisdig-brand-primary-hover);
    --brand-secondary: var(--bisdig-brand-secondary);
    --brand-secondary-hover: var(--bisdig-brand-secondary-hover);
    --brand-dark: var(--bisdig-brand-dark);
    --brand-light: var(--bisdig-brand-light);
    --brand-accent: var(--bisdig-brand-accent);


    /* --------------------------------------------------------
       1.3 Basic colors
       -------------------------------------------------------- */

    --bisdig-white: var(--color-white);
    --bisdig-black: #000000;
    --bisdig-transparent: transparent;

    --white: var(--bisdig-white);
    --black: var(--bisdig-black);
    --transparent: var(--bisdig-transparent);


    /* --------------------------------------------------------
       1.4 Warm neutral scale
       -------------------------------------------------------- */

    --bisdig-neutral-50: #FAF9F6;
    --bisdig-neutral-100: #F4F1EB;
    --bisdig-neutral-200: #E6E0D7;
    --bisdig-neutral-300: #D5CEC2;
    --bisdig-neutral-400: #A3A0A0;
    --bisdig-neutral-500: #777377;
    --bisdig-neutral-600: #5C585C;
    --bisdig-neutral-700: #454146;
    --bisdig-neutral-800: #302D31;
    --bisdig-neutral-900: #211F22;

    /*
     * Keep legacy slate names because older components may use them.
     * They now point to warm-neutral values instead of blue-gray.
     */
    --slate-50: var(--bisdig-neutral-50);
    --slate-100: var(--bisdig-neutral-100);
    --slate-200: var(--bisdig-neutral-200);
    --slate-300: var(--bisdig-neutral-300);
    --slate-400: var(--bisdig-neutral-400);
    --slate-500: var(--bisdig-neutral-500);
    --slate-600: var(--bisdig-neutral-600);
    --slate-700: var(--bisdig-neutral-700);
    --slate-800: var(--bisdig-neutral-800);
    --slate-900: var(--bisdig-neutral-900);


    /* --------------------------------------------------------
       1.5 Legacy blue compatibility
       -------------------------------------------------------- */

    --bisdig-blue-50: var(--color-red-pale);
    --bisdig-blue-100: var(--color-red-soft);
    --bisdig-blue-500: var(--color-burgundy);
    --bisdig-blue-600: var(--color-burgundy-dark);

    --bisdig-sky-50: var(--color-ivory);
    --bisdig-sky-400: var(--color-gold);

    --blue-50: var(--bisdig-blue-50);
    --blue-100: var(--bisdig-blue-100);
    --blue-500: var(--bisdig-blue-500);
    --blue-600: var(--bisdig-blue-600);
    --sky-50: var(--bisdig-sky-50);
    --sky-400: var(--bisdig-sky-400);


    /* --------------------------------------------------------
       1.6 Status
       -------------------------------------------------------- */

    --bisdig-success: var(--color-success);
    --bisdig-success-soft: #ECFDF5;

    --bisdig-warning: var(--color-warning);
    --bisdig-warning-soft: #FFFBEB;

    --bisdig-danger: var(--color-danger);
    --bisdig-info: var(--color-info);

    --emerald-50: var(--bisdig-success-soft);
    --emerald-500: #159A68;
    --amber-50: var(--bisdig-warning-soft);
    --amber-100: #FEF3C7;


    /* --------------------------------------------------------
       1.7 Spacing
       -------------------------------------------------------- */

    --bisdig-space-1: 0.25rem;
    --bisdig-space-2: 0.5rem;
    --bisdig-space-3: 0.75rem;
    --bisdig-space-4: 1rem;
    --bisdig-space-5: 1.25rem;
    --bisdig-space-6: 1.5rem;
    --bisdig-space-8: 2rem;
    --bisdig-space-10: 2.5rem;
    --bisdig-space-12: 3rem;
    --bisdig-space-16: 4rem;
    --bisdig-space-20: 5rem;
    --bisdig-space-24: 6rem;

    --space-1: var(--bisdig-space-1);
    --space-2: var(--bisdig-space-2);
    --space-3: var(--bisdig-space-3);
    --space-4: var(--bisdig-space-4);
    --space-5: var(--bisdig-space-5);
    --space-6: var(--bisdig-space-6);
    --space-8: var(--bisdig-space-8);
    --space-10: var(--bisdig-space-10);
    --space-12: var(--bisdig-space-12);
    --space-16: var(--bisdig-space-16);
    --space-20: var(--bisdig-space-20);
    --space-24: var(--bisdig-space-24);


    /* --------------------------------------------------------
       1.8 Radius
       -------------------------------------------------------- */

    --bisdig-radius-sm: 0.375rem;
    --bisdig-radius-md: 0.5rem;
    --bisdig-radius-lg: 0.75rem;
    --bisdig-radius-xl: 1rem;
    --bisdig-radius-2xl: 1.5rem;
    --bisdig-radius-3xl: 2rem;
    --bisdig-radius-full: 9999px;

    --radius-sm: var(--bisdig-radius-sm);
    --radius-md: var(--bisdig-radius-md);
    --radius-lg: var(--bisdig-radius-lg);
    --radius-xl: var(--bisdig-radius-xl);
    --radius-2xl: var(--bisdig-radius-2xl);
    --radius-3xl: var(--bisdig-radius-3xl);
    --radius-full: var(--bisdig-radius-full);


    /* --------------------------------------------------------
       1.9 Shadows
       -------------------------------------------------------- */

    --bisdig-shadow-sm:
        0 1px 2px rgba(36, 36, 38, 0.06);

    --bisdig-shadow-md:
        0 4px 12px rgba(36, 36, 38, 0.09);

    --bisdig-shadow-lg:
        0 10px 30px rgba(36, 36, 38, 0.12);

    --bisdig-shadow-xl:
        0 20px 45px rgba(36, 36, 38, 0.15);

    --bisdig-shadow-2xl:
        0 25px 60px rgba(16, 16, 18, 0.20);

    --bisdig-shadow-red:
        0 12px 30px rgba(var(--color-red-rgb), 0.20);

    --bisdig-shadow-red-strong:
        0 18px 45px rgba(var(--color-red-rgb), 0.26);

    --bisdig-shadow-gold:
        0 10px 30px rgba(var(--color-gold-rgb), 0.18);

    --shadow-sm: var(--bisdig-shadow-sm);
    --shadow-md: var(--bisdig-shadow-md);
    --shadow-lg: var(--bisdig-shadow-lg);
    --shadow-xl: var(--bisdig-shadow-xl);
    --shadow-2xl: var(--bisdig-shadow-2xl);
    --shadow-red: var(--bisdig-shadow-red);
    --shadow-red-strong: var(--bisdig-shadow-red-strong);
    --shadow-gold: var(--bisdig-shadow-gold);


    /* --------------------------------------------------------
       1.10 Motion
       -------------------------------------------------------- */

    --bisdig-transition-fast: 150ms ease;
    --bisdig-transition-normal: 300ms ease;
    --bisdig-transition-slow: 500ms ease;

    --transition-fast: var(--bisdig-transition-fast);
    --transition-normal: var(--bisdig-transition-normal);
    --transition-slow: var(--bisdig-transition-slow);


    /* --------------------------------------------------------
       1.11 Layers
       -------------------------------------------------------- */

    --bisdig-z-0: 0;
    --bisdig-z-10: 10;
    --bisdig-z-20: 20;
    --bisdig-z-30: 30;
    --bisdig-z-40: 40;
    --bisdig-z-50: 50;
    --bisdig-z-header: 1000;
    --bisdig-z-overlay: 2000;
    --bisdig-z-modal: 3000;

    --z-0: var(--bisdig-z-0);
    --z-10: var(--bisdig-z-10);
    --z-20: var(--bisdig-z-20);
    --z-30: var(--bisdig-z-30);
    --z-40: var(--bisdig-z-40);
    --z-50: var(--bisdig-z-50);
    --z-header: var(--bisdig-z-header);
    --z-overlay: var(--bisdig-z-overlay);
    --z-modal: var(--bisdig-z-modal);


    /* --------------------------------------------------------
       1.12 Layout
       -------------------------------------------------------- */

    --bisdig-container-max: 1280px;

    /*
     * Fluid side padding:
     * 12px at very small screens,
     * growing smoothly to desktop.
     */
    --bisdig-container-padding:
        clamp(0.75rem, 3vw, 2rem);

    --bisdig-content-measure:
        72rem;

    --container-max:
        var(--bisdig-container-max);

    --container-padding:
        var(--bisdig-container-padding);


    /* --------------------------------------------------------
       1.13 Touch target
       -------------------------------------------------------- */

    --bisdig-touch-target:
        44px;
}


/* ============================================================
   2. GLOBAL BOX MODEL
   ============================================================ */

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


/* ============================================================
   3. HTML
   ============================================================ */

html {
    margin: 0;
    padding: 0;

    width: 100%;
    max-width: 100%;

    font-size: 16px;

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    overflow-x: hidden;
}


/* ============================================================
   4. BODY
   ============================================================ */

body {
    margin: 0;
    padding: 0;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    font-family: var(--bisdig-font-sans);
    font-size: 1rem;
    line-height: 1.6;

    color: var(--color-text);
    background: var(--color-white);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}


/* ============================================================
   5. MEDIA
   ============================================================ */

img,
svg,
video,
canvas,
iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

iframe {
    border: 0;
}

svg {
    max-height: 100%;
}


/* ============================================================
   6. LINKS
   ============================================================ */

a {
    color: inherit;
    text-decoration: none;
}

a img {
    border: 0;
}


/* ============================================================
   7. BUTTONS / FORMS
   ============================================================ */

button,
input,
textarea,
select {
    font: inherit;
    max-width: 100%;
}

button {
    cursor: pointer;
    border: 0;
    background: none;

    /*
     * Accessibility + touch comfort.
     * Specific compact controls may override this in their
     * component file when necessary.
     */
    min-height: var(--bisdig-touch-target);
}

input,
textarea,
select {
    min-height: var(--bisdig-touch-target);
}

textarea {
    resize: vertical;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;
}


/* ============================================================
   8. LISTS
   ============================================================ */

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* ============================================================
   9. HEADINGS / TEXT SAFETY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a,
span {
    overflow-wrap: break-word;
    word-break: normal;
}


/* ============================================================
   10. CONTAINER SYSTEM
   ============================================================ */

.container,
.bisdig-container {
    width: 100%;
    max-width: var(--bisdig-container-max);

    margin-inline: auto;

    padding-inline:
        var(--bisdig-container-padding);
}


/*
 * Wide content helper.
 */
.bisdig-content {
    width: 100%;
    max-width: var(--bisdig-content-measure);

    margin-inline: auto;
}


/* ============================================================
   11. CONTENT SAFETY
   ============================================================ */

section,
article,
main,
header,
footer,
nav,
aside {
    min-width: 0;
    max-width: 100%;
}


/* ============================================================
   12. GRID SAFETY
   ============================================================ */

.grid {
    min-width: 0;
}

.grid > * {
    min-width: 0;
    max-width: 100%;
}


/* ============================================================
   13. FLEX SAFETY
   ============================================================ */

.flex {
    min-width: 0;
}

.flex > * {
    min-width: 0;
}


/* ============================================================
   14. TABLE SAFETY
   ============================================================ */

table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

.table-responsive,
.overflow-x-auto {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   15. WORDPRESS CONTENT
   ============================================================ */

.wp-caption {
    max-width: 100%;
}

.alignwide {
    max-width: 100%;
}

.alignfull {
    width: 100%;
    max-width: 100%;
}


/* ============================================================
   16. FOCUS / KEYBOARD ACCESS
   ============================================================ */

:where(
    a,
    button,
    input,
    textarea,
    select,
    summary,
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline:
        3px solid
        rgba(var(--color-red-rgb), 0.35);

    outline-offset: 3px;
}


/* ============================================================
   17. SELECTION
   ============================================================ */

::selection {
    background: var(--bisdig-brand-primary);
    color: var(--bisdig-white);
}


/* ============================================================
   18. SAFE AREA — MODERN MOBILE DEVICES
   ============================================================ */

.bisdig-safe-area {
    padding-left:
        max(
            var(--bisdig-container-padding),
            env(safe-area-inset-left)
        );

    padding-right:
        max(
            var(--bisdig-container-padding),
            env(safe-area-inset-right)
        );
}


/* ============================================================
   19. LARGE DESKTOP — 1440px+
   ============================================================ */

@media (min-width: 1440px) {

    :root {
        --bisdig-container-padding:
            clamp(2rem, 3vw, 3rem);
    }

    .container,
    .bisdig-container {
        max-width: 1320px;
    }
}


/* ============================================================
   20. WIDE DESKTOP — 1920px+
   ============================================================ */

@media (min-width: 1920px) {

    :root {
        --bisdig-container-padding:
            2.5rem;
    }

    .container,
    .bisdig-container {
        max-width: 1440px;
    }
}


/* ============================================================
   21. LAPTOP — 1024px to 1439px
   ============================================================ */

@media (max-width: 1439px) and (min-width: 1025px) {

    :root {
        --bisdig-container-padding:
            clamp(1.25rem, 2vw, 2rem);
    }
}


/* ============================================================
   22. TABLET — <= 1024px
   ============================================================ */

@media (max-width: 1024px) {

    html {
        font-size: 15.5px;
    }

    .container,
    .bisdig-container {
        width: 100%;
    }
}


/* ============================================================
   23. TABLET / LARGE MOBILE — <= 768px
   ============================================================ */

@media (max-width: 768px) {

    html {
        font-size: 15px;
    }

    :root {
        --bisdig-container-padding:
            clamp(1rem, 4vw, 1.5rem);
    }

    .container,
    .bisdig-container {
        width: 100%;
    }

    /*
     * Prevent accidental fixed-width children from forcing
     * horizontal scrolling.
     */
    section > *,
    article > * {
        max-width: 100%;
    }
}


/* ============================================================
   24. MOBILE — <= 480px
   ============================================================ */

@media (max-width: 480px) {

    html {
        font-size: 15px;
    }

    :root {
        --bisdig-container-padding:
            max(0.875rem, 4vw);
    }

    .container,
    .bisdig-container {
        padding-inline:
            var(--bisdig-container-padding);
    }

    /*
     * Form controls remain comfortably tappable.
     */
    button,
    input,
    textarea,
    select {
        min-height: 44px;
    }
}


/* ============================================================
   25. SMALL MOBILE — <= 360px
   ============================================================ */

@media (max-width: 360px) {

    html {
        font-size: 14px;
    }

    :root {
        --bisdig-container-padding:
            0.75rem;
    }

    .container,
    .bisdig-container {
        padding-inline: 0.75rem;
    }
}


/* ============================================================
   26. VERY SMALL / SHORT VIEWPORT SAFETY
   ============================================================ */

@media (max-width: 360px), (max-height: 600px) {

    /*
     * Avoid oversized fixed-height layouts.
     * Components should use their own responsive rules.
     */
    html,
    body {
        min-height: 100%;
    }
}


/* ============================================================
   27. HOVER CAPABILITY
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    a,
    button {
        transition:
            color var(--bisdig-transition-fast),
            background-color var(--bisdig-transition-fast),
            border-color var(--bisdig-transition-fast),
            box-shadow var(--bisdig-transition-fast),
            transform var(--bisdig-transition-fast);
    }
}


/* ============================================================
   28. TOUCH DEVICES
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

    /*
     * Remove hover-dependent movement on touch devices.
     * Tap interactions remain available to component CSS.
     */
    a,
    button {
        -webkit-tap-highlight-color:
            rgba(var(--color-red-rgb), 0.12);
    }
}


/* ============================================================
   29. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   30. FORCED COLORS / HIGH CONTRAST
   ============================================================ */

@media (forced-colors: active) {

    :focus-visible {
        outline: 2px solid CanvasText;
    }

    button,
    input,
    textarea,
    select {
        border: 1px solid ButtonText;
    }
}


/* ============================================================
   31. GLOBAL OVERFLOW SAFETY
   ============================================================ */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


/* ============================================================
   32. MEDIA OVERFLOW SAFETY
   ============================================================ */

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}


/* ============================================================
   33. STRUCTURAL OVERFLOW SAFETY
   ============================================================ */

.container,
.bisdig-container,
section,
article,
main,
header,
footer,
nav,
aside {
    min-width: 0;
    max-width: 100%;
}


/* ============================================================
   34. FLEX / GRID OVERFLOW SAFETY
   ============================================================ */

.flex > *,
.grid > * {
    min-width: 0;
}


/* ============================================================
   35. LONG TEXT SAFETY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li {
    overflow-wrap: anywhere;
}


/* ============================================================
   36. TABLE HORIZONTAL SCROLL
   ============================================================ */

.table-responsive,
.overflow-x-auto {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   ACCESSIBILITY — SKIP LINK
========================================================= */

.bisdig-skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100000;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 10px 18px;

    border: 2px solid #c9a45c;
    border-radius: 8px;

    background: #ffffff;
    color: #8f1d24;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.18);

    transform: translateY(-180%);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.bisdig-skip-link:focus {
    transform: translateY(0);

    outline: 3px solid #c9a45c;
    outline-offset: 3px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .bisdig-skip-link {
        transition: none;
    }
}