/*
 * public/css/kvuc-site-base.css
 * Base styles from layouts/partials/head.blade.php (before page styles, as before).
 * Edit here; the version in the address updates by itself (App\Support\Assets).
 */


/* ==========================================================================
   layouts/partials/head.blade.php
   ========================================================================== */

/* =====================================================
   DESIGN TOKENS
===================================================== */

/* Token names predate the corporate palette; every value is a shade of
   Kerio Earth, Sage Shrub, Golden Grass or Clear Sky (see kvuc-brand.css). */
:root {
    color-scheme: light;

    --kvuc-ochre: #D2B48C;
    --kvuc-ochre-light: #E7D7BD;
    --kvuc-ochre-dark: #977546;

    --kvuc-crimson: #C65A2E;
    --kvuc-crimson-dark: #A84320;
    --kvuc-crimson-light: #D67F59;

    --kvuc-blue: #3D4A1F;
    --kvuc-blue-dark: #2C3616;
    --kvuc-blue-light: #4A5825;

    --kvuc-white: #FFFFFF;
    --kvuc-off-white: #FAF7F0;
    --kvuc-light: #E7D8C4;

    --kvuc-text: #3e413a;
    --kvuc-text-dark: #292B24;
    --kvuc-muted: #73756d;

    --kvuc-border: #E3E1D8;

    --kvuc-shadow-sm: 0 5px 18px rgba(44, 54, 22, .06);
    --kvuc-shadow: 0 16px 45px rgba(44, 54, 22, .10);
    --kvuc-shadow-lg: 0 28px 80px rgba(44, 54, 22, .14);

    --kvuc-radius-sm: 8px;
    --kvuc-radius: 14px;
    --kvuc-radius-lg: 20px;
    --kvuc-radius-xl: 28px;

    --kvuc-container-width: 1320px;
    --kvuc-nav-height: 74px;

    --kvuc-transition: 180ms ease;
}


/* =====================================================
   DOCUMENT AND PAGE BASE
===================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--kvuc-nav-height) + 20px);
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    color: var(--kvuc-text);
    background: var(--kvuc-white);

    font-family:
        'DM Sans',
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}


/* =====================================================
   TYPOGRAPHY
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    /* Dark surfaces set --kvuc-heading-color to the light text colour (kvuc-theme.css). */
    color: var(--kvuc-heading-color, var(--kvuc-blue));
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-wrap: balance;
}

/* One heading scale for every public page. Headings that carry a
   Bootstrap display-* class (page heroes, section titles) follow the
   same scale so long titles stay readable; .h1-.h6 and .fs-* still
   win when a page asks for a specific size. */
h1,
h1[class*="display-"] {
    font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
}

h2,
h2[class*="display-"] {
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
}

h3,
h3[class*="display-"] {
    font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
}

p {
    text-wrap: pretty;
}

/* About and News pages: larger reading text inside the page content
   (the header and footer keep the site-wide size). The body class is
   set in layouts/app and layouts/public. Plain text and .small (em)
   follow the main font size; the rem-based defaults are raised below.
   :where() keeps these at default strength, so a page's own component
   styles (e.g. .kvuc-news-card-title) still decide their sizes. */
.kvuc-text-lg main {
    font-size: 1.125rem;
}

:where(.kvuc-text-lg main) .fs-6 { font-size: 1.125rem !important; }
:where(.kvuc-text-lg main) .fs-5 { font-size: 1.375rem !important; }
:where(.kvuc-text-lg main) .lead { font-size: 1.375rem; }

:where(.kvuc-text-lg main) h3,
:where(.kvuc-text-lg main) h3[class*="display-"] {
    font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem);
}

:where(.kvuc-text-lg main) :is(h4, .h4) { font-size: clamp(1.3rem, 1.2rem + .4vw, 1.6rem); }
:where(.kvuc-text-lg main) :is(h5, .h5) { font-size: 1.375rem; }
:where(.kvuc-text-lg main) :is(h6, .h6) { font-size: 1.15rem; }

@media (max-width: 767.98px) {
    .kvuc-text-lg main {
        font-size: 1.0625rem;
    }
}


/* =====================================================
   LINKS AND INTERACTIONS
===================================================== */

/* On dark surfaces (which set --kvuc-heading-color) links follow the light text colour. */
a {
    color: var(--kvuc-heading-color, var(--kvuc-blue));
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition:
        color var(--kvuc-transition),
        background-color var(--kvuc-transition),
        border-color var(--kvuc-transition),
        box-shadow var(--kvuc-transition),
        transform var(--kvuc-transition),
        opacity var(--kvuc-transition);
}

a:hover {
    color: var(--kvuc-link-hover-color, #A84320);
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

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

img {
    height: auto;
}


/* =====================================================
   INSTITUTIONAL BRANDING
===================================================== */

.kvuc-logo,
.kvuc-brand-logo {
    flex-shrink: 0;
}

.kvuc-brand-logo img,
.kvuc-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


/* =====================================================
   ACCESSIBLE KEYBOARD FOCUS
===================================================== */

/* Two-tone ring (white inside, Kerio Earth outside) stays visible on light and dark surfaces. */
:focus-visible {
    outline: 3px solid #A84320;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #FFFFFF;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-radius: 4px;
}


/* =====================================================
   SCREEN-READER UTILITY
===================================================== */

.kvuc-sr-only,
.visually-hidden-custom {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =====================================================
   SKIP NAVIGATION LINK
===================================================== */

.kvuc-skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 100000;

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

    min-height: 48px;
    padding: 12px 20px;

    border-radius: var(--kvuc-radius-sm);
    background: var(--kvuc-blue-dark);
    color: var(--kvuc-white);

    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;

    box-shadow: var(--kvuc-shadow);
    transition: top var(--kvuc-transition);
}

.kvuc-skip-link:focus {
    top: 16px;
    color: var(--kvuc-white);
}


/* =====================================================
   CONTAINER WIDTH
===================================================== */

@media (min-width: 1400px) {
    .container-xxl {
        max-width: var(--kvuc-container-width);
    }

    .kvuc-main-navigation .container,
    .kvuc-nav-mobile-panel .container {
        max-width: var(--kvuc-container-width);
    }
}


/* =====================================================
   GLOBAL MOBILE LAYOUT SAFETY
===================================================== */

@media (max-width: 767.98px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        font-size: 15px;
    }

    .container,
    .container-fluid {
        --bs-gutter-x: 1.25rem;
    }

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


/* =====================================================
   REDUCED MOTION ACCESSIBILITY
===================================================== */

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

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