/* global css styling over all components (use prefix) */

@import './_colors.css';

/* Font Faces */
@font-face {
    font-family: 'Nunito';
    src: url('./fonts/Nunito-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

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

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

@font-face {
    font-family: 'Inria Serif';
    src: url('./fonts/InriaSerif-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    /* ========================================
       TYPOGRAPHY - FONT FAMILIES
       ======================================== */
    /* ========================================
       Z-INDEX LAYERS
       ======================================== */
    --zindex-skip-link: 9999;
    --zindex-overlay: 900;
    --zindex-sidebar-edit-menue: 800;
    --zindex-sidebar: 700;
    --zindex-header: 600;
    --zindex-dropdown: 500;
    --zindex-footer: 100;
    --zindex-content: 5;
    --zindex-minus: -1;
}

strong {
    font-weight: bold;
}


/* ========================================
   HTML EDITOR STYLING
   ======================================== */

.edhtml p {
    margin: 0;
    font-size: 22px;
    font-style: normal;
    font-weight: 300;
    line-height: 35px;
}

.edhtml h2 {
    margin-top: 0;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 55px;
}

    .edhtml h2 + p {
        margin-top: 0;
        font-size: 22px;
        font-style: normal;
        font-weight: 300;
        line-height: 40px;
    }

.edhtml h3 {
    margin: 0px;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 35px;
}

    .edhtml h3 + p {
        margin-top: 0px;
    }

.edhtml strong {
    font-weight: bold;
}

/* ========================================
   ACCESSIBILITY - FOCUS STYLES
   ======================================== */
*:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
}

/* ========================================
   ACCESSIBILITY - REDUCED MOTION
   Respect user preference for reduced motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   ACCESSIBILITY - SCREEN READER ONLY
   Visually hidden but accessible to screen readers
   ======================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   ACCESSIBILITY - SKIP LINK
   For keyboard navigation
   ======================================== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: var(--zindex-skip-link);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--caritas-blue);
    color: var(--white);
    text-decoration: none;
}

    .skip-link:focus {
        top: 0;
    }

/* ========================================
   MOBILE FIRST - BASE STYLES
   These apply to mobile (smallest screens)
   ======================================== */
html {
    font-size: 100%;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-primary);
    scrollbar-width: none;
}

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none;
    }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ========================================
   ACCESSIBILITY - HIGH CONTRAST MODE
   Support for Windows High Contrast Mode
   ======================================== */
@media (forced-colors: active) {
    *:focus-visible {
        outline: 3px solid CanvasText;
    }

    a {
        text-decoration: underline;
    }
}


/* ========================================
   ACCESSIBILITY - LINK DISTINCTION
   Links must be distinguishable not only by color
   ======================================== */
a {
    text-decoration: underline;
}

    a:hover {
        text-decoration: none;
    }

    /* ========================================
   ACCESSIBILITY - INTERACTIVE FOCUS STYLES
   Consistent focus indicators for links and buttons
   ======================================== */
    a:focus,
    button:focus {
        outline: 3px solid var(--caritas-blue);
        outline-offset: 2px;
    }

        a:focus:not(:focus-visible),
        button:focus:not(:focus-visible) {
            outline: none;
        }

    a:focus-visible,
    button:focus-visible {
        outline: 3px solid var(--caritas-blue);
        outline-offset: 2px;
    }


.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   Mobile First: min-width (ascending)
   ======================================== */

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .content-narrow {
        padding-left: max(235px, 15vw) !important;
        padding-right: max(235px, 15vw) !important;
    }

}