/* ==========================================================
   BASKINTA GLOBAL DESIGN SYSTEM V1
   Digi Web E-Municipality

   This file is the visual authority for all Baskinta pages.
   ========================================================== */


:root {

    /* ======================================================
       BRAND COLORS
       ====================================================== */

    --bk-navy:
        #164B63;

    --bk-deep-navy:
        #073653;

    --bk-blue:
        #0877A6;

    --bk-action:
        #0877B5;

    --bk-sky:
        #59BCD3;

    --bk-green:
        #176A53;

    --bk-text:
        #18364B;

    --bk-muted:
        #667B8E;

    --bk-line:
        #DCE5EA;

    --bk-soft:
        #F5F7F8;

    --bk-warm:
        #F8F8F5;

    --bk-white:
        #FFFFFF;


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

    /*
     * Interface/body:
     * clean and highly readable.
     */

    --bk-font-ui:
        "Montserrat",
        "Avenir Next",
        "Segoe UI",
        Arial,
        sans-serif;


    /*
     * Editorial headings:
     * heritage / destination character.
     */

    --bk-font-editorial:
        Georgia,
        "Times New Roman",
        serif;


    /*
     * Handwritten/emotional statements.
     *
     * Browser uses the first installed script face.
     * We can later lock one webfont globally if needed.
     */

    --bk-font-script:
        "Segoe Script",
        "Brush Script MT",
        "Lucida Handwriting",
        cursive;


    /* ======================================================
       TYPE SCALE
       ====================================================== */

    --bk-text-xs:
        11px;

    --bk-text-sm:
        13px;

    --bk-text-base:
        16px;

    --bk-text-lg:
        20px;

    --bk-h4:
        22px;

    --bk-h3:
        28px;

    --bk-h2:
        clamp(32px,3vw,44px);

    --bk-h1:
        clamp(50px,6vw,88px);


    /* ======================================================
       SPACING
       ====================================================== */

    --bk-space-1: 8px;
    --bk-space-2: 12px;
    --bk-space-3: 16px;
    --bk-space-4: 24px;
    --bk-space-5: 32px;
    --bk-space-6: 48px;
    --bk-space-7: 64px;
    --bk-space-8: 80px;


    /* ======================================================
       RADIUS
       ====================================================== */

    --bk-radius-sm:
        8px;

    --bk-radius:
        10px;

    --bk-radius-lg:
        12px;

    --bk-radius-xl:
        16px;

    --bk-radius-round:
        999px;


    /* ======================================================
       SHADOWS
       ====================================================== */

    --bk-shadow-soft:
        0 4px 16px
        rgba(10,45,65,.08);

    --bk-shadow-card:
        0 8px 26px
        rgba(10,45,65,.12);

}


/* ==========================================================
   GLOBAL BODY TYPOGRAPHY
   ========================================================== */

body.baskinta-v1 {
    color:
        var(--bk-text);

    font-family:
        var(--bk-font-ui);

    font-size:
        var(--bk-text-base);

    line-height: 1.6;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


/* ==========================================================
   STANDARD BODY COPY
   ========================================================== */

body.baskinta-v1 p,
body.baskinta-v1 li,
body.baskinta-v1 input,
body.baskinta-v1 textarea,
body.baskinta-v1 select,
body.baskinta-v1 button {
    font-family:
        var(--bk-font-ui);
}


body.baskinta-v1 p {
    line-height: 1.6;
}


/* ==========================================================
   EDITORIAL HEADINGS
   ========================================================== */

.bk-editorial,
.bk-page-title,
.bk-section-title,

.bk-about-copy h2,
.bk-about-section-head h2,
.bk-about-tomorrow-copy h2 {

    font-family:
        var(--bk-font-editorial)
        !important;

    color:
        var(--bk-navy);

    font-weight:
        700;

    letter-spacing:
        -.025em;

    line-height:
        1.08;
}


/* ==========================================================
   HERO TITLES
   ========================================================== */

.bk-hero-title,
.bk-about-hero h1 {

    font-family:
        var(--bk-font-editorial)
        !important;

    font-size:
        var(--bk-h1);

    font-weight:
        700;

    letter-spacing:
        -.035em;

    line-height:
        .95;
}


/* ==========================================================
   KICKERS / EYEBROWS
   ========================================================== */

.bk-kicker,
.bk-about-kicker {

    font-family:
        var(--bk-font-ui)
        !important;

    color:
        var(--bk-blue);

    font-size:
        var(--bk-text-xs);

    font-weight:
        800;

    letter-spacing:
        .23em;

    line-height:
        1.2;

    text-transform:
        uppercase;
}


/* ==========================================================
   SCRIPT / EMOTIONAL STATEMENTS
   ========================================================== */

.bk-script,
.bk-about-tomorrow-image > strong {

    font-family:
        var(--bk-font-script)
        !important;

    font-style:
        normal !important;

    font-weight:
        400 !important;

    letter-spacing:
        .01em;

    line-height:
        1.2;
}


/* ==========================================================
   STANDARD BUTTONS
   ========================================================== */

.bk-button,
.bk-about-button {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        0
        20px;

    border:
        0;

    border-radius:
        var(--bk-radius);

    font-family:
        var(--bk-font-ui)
        !important;

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1;

    text-decoration:
        none !important;

    cursor:
        pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.bk-button:hover,
.bk-about-button:hover {

    transform:
        translateY(-1px);

    box-shadow:
        var(--bk-shadow-soft);
}


/* Primary */

.bk-button-primary {

    background:
        var(--bk-action);

    color:
        #fff !important;
}


/* White */

.bk-button-white,
.bk-about-button-white {

    background:
        #fff;

    color:
        var(--bk-navy)
        !important;
}


/* ==========================================================
   CARDS
   ========================================================== */

.bk-card {

    overflow:
        hidden;

    border-radius:
        var(--bk-radius-lg);

    background:
        #fff;

    box-shadow:
        var(--bk-shadow-soft);
}


/* ==========================================================
   STANDARD IMAGES
   ========================================================== */

.bk-rounded-image {

    overflow:
        hidden;

    border-radius:
        var(--bk-radius-lg);
}


.bk-rounded-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


/* ==========================================================
   STANDARD CONTENT WIDTH
   ========================================================== */

.bk-container,
.bk-about-wrap {

    width:
        min(
            calc(100% - 80px),
            1500px
        );

    margin-left:
        auto;

    margin-right:
        auto;
}


/* ==========================================================
   STANDARD SECTION SPACING
   ========================================================== */

.bk-section {

    padding-top:
        var(--bk-space-7);

    padding-bottom:
        var(--bk-space-7);
}


/* ==========================================================
   LINKS
   ========================================================== */

body.baskinta-v1 a {

    transition:
        color .18s ease,
        background .18s ease,
        opacity .18s ease;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:767px) {

    :root {

        --bk-text-base:
            15px;

        --bk-space-7:
            42px;

        --bk-space-8:
            55px;
    }


    .bk-container,
    .bk-about-wrap {

        width:
            calc(100% - 40px);
    }

}