/* ==========================================================
   BASKINTA DESIGN SYSTEM V2
   Digi Web E-Municipality

   VISUAL AUTHORITY:
   Brand + Editorial + Signature

   Applies to:
   - Global shell
   - Homepage
   - About Baskinta
   - Future Baskinta content modules

   Plugin/admin interfaces remain protected.
   ========================================================== */


:root {

    /* ======================================================
       BRAND PALETTE
       ====================================================== */

    --bk-navy: #164B63;
    --bk-navy-dark: #073653;

    --bk-blue: #0877A6;
    --bk-action: #087FB6;
    --bk-cyan: #59BCD3;

    --bk-green: #176A53;
    --bk-green-soft: #438D72;

    --bk-text: #18364B;
    --bk-muted: #667B8E;

    --bk-line: #DCE5EA;

    --bk-bg-soft: #F5F7F8;
    --bk-bg-warm: #F8F8F5;

    --bk-white: #FFFFFF;


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

       VOICE 1 — BRAND / UI
       ====================================================== */

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


    /* ======================================================
       VOICE 2 — EDITORIAL / HERITAGE
       ====================================================== */

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


    /* ======================================================
       VOICE 3 — SIGNATURE

       Change this variable later when final webfont is chosen.
       ====================================================== */

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


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

    --bk-size-kicker: 11px;

    --bk-size-caption: 12px;
    --bk-size-small: 13px;

    --bk-size-body: 16px;

    --bk-size-card: 18px;

    --bk-size-ui-title: 21px;

    --bk-size-h3:
        clamp(25px,2.2vw,32px);

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

    --bk-size-story-hero:
        clamp(55px,6vw,88px);

    --bk-size-brand-hero:
        clamp(58px,7vw,96px);

    --bk-size-signature:
        clamp(34px,3.5vw,52px);


    /* ======================================================
       FONT WEIGHTS
       ====================================================== */

    --bk-weight-normal: 400;
    --bk-weight-medium: 500;
    --bk-weight-semibold: 600;
    --bk-weight-bold: 700;
    --bk-weight-heavy: 800;


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

    --bk-space-1: 6px;
    --bk-space-2: 10px;
    --bk-space-3: 14px;
    --bk-space-4: 20px;
    --bk-space-5: 28px;
    --bk-space-6: 40px;
    --bk-space-7: 56px;
    --bk-space-8: 72px;
    --bk-space-9: 90px;


    /* ======================================================
       RADII
       ====================================================== */

    --bk-radius-control: 9px;

    --bk-radius-card: 11px;

    --bk-radius-photo: 12px;

    --bk-radius-large: 16px;

    --bk-radius-round: 999px;


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

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

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

    --bk-shadow-float:
        0 12px 34px
        rgba(8,45,65,.16);


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

    --bk-content-width:
        1500px;

}


/* ==========================================================
   FOUNDATION
   ========================================================== */

body.baskinta-v1 {

    color:
        var(--bk-text);

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

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

    font-weight:
        var(--bk-weight-normal);

    line-height:
        1.6;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


/* ==========================================================
   STANDARD BODY TYPOGRAPHY
   ========================================================== */

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);
}


/* ==========================================================
   GLOBAL BASKINTA CONTAINER
   ========================================================== */

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

    width:
        min(
            calc(100% - 80px),
            var(--bk-content-width)
        );

    margin-left:
        auto;

    margin-right:
        auto;
}


/* ==========================================================
   VOICE 1
   BRAND / UI
   ========================================================== */

.bk-ui-title,
.bk-card-title,
.bk-widget-title {

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

    font-weight:
        var(--bk-weight-bold);

    color:
        var(--bk-text);

    line-height:
        1.2;
}


/* Homepage BASKINTA remains brand sans-serif */

.bk-hero h1 {

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

    font-size:
        var(--bk-size-brand-hero);

    font-weight:
        var(--bk-weight-heavy);

    letter-spacing:
        -.045em;

    line-height:
        .92;
}


/* ==========================================================
   VOICE 2
   EDITORIAL
   ========================================================== */

.bk-editorial,
.bk-editorial-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:
        var(--bk-weight-bold);

    letter-spacing:
        -.025em;

    line-height:
        1.08;
}


/* Story-page hero */

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

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

    font-size:
        var(--bk-size-story-hero);

    font-weight:
        var(--bk-weight-bold);

    letter-spacing:
        -.035em;

    line-height:
        .94;
}


/* ==========================================================
   MAJOR HOMEPAGE STORY HEADINGS
   ========================================================== */

/*
 * Editorial sections use serif.
 * Functional widgets remain sans-serif.
 */

.bk-explore-heading h2,
.bk-pictures-title h2 {

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

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

    font-weight:
        var(--bk-weight-bold)
        !important;

    letter-spacing:
        -.025em;

    line-height:
        1.08;
}


/* Functional widgets remain UI */

.bk-live-head h2,
.bk-live-head h3,
.bk-feature-content h2,
.bk-explore-card h3 {

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


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

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

    display:
        block;

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

    color:
        var(--bk-blue);

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

    font-weight:
        var(--bk-weight-heavy);

    line-height:
        1.2;

    letter-spacing:
        .23em;

    text-transform:
        uppercase;
}


/* ==========================================================
   VOICE 3
   SIGNATURE
   ========================================================== */

.bk-signature,
.bk-script,

.bk-about-tomorrow-image > strong {

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

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

    font-style:
        normal !important;

    font-weight:
        var(--bk-weight-normal)
        !important;

    line-height:
        1.15;

    letter-spacing:
        .01em;
}


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

.bk-body,
.bk-copy,

.bk-about-copy > p,
.bk-about-tomorrow-copy > p {

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

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

    font-weight:
        var(--bk-weight-normal);

    line-height:
        1.65;

    color:
        var(--bk-text);
}


/* ==========================================================
   CAPTIONS / META
   ========================================================== */

.bk-caption,
.bk-meta {

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

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

    line-height:
        1.4;

    color:
        var(--bk-muted);
}


/* ==========================================================
   BUTTON SYSTEM
   ========================================================== */

.bk-btn,
.bk-button,
.bk-about-button,

.bk-plan-visit {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        0
        20px;

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

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

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

    font-weight:
        var(--bk-weight-bold);

    line-height:
        1;

    text-decoration:
        none !important;

    cursor:
        pointer;

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


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

    transform:
        translateY(-1px);

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


/* Primary */

.bk-btn-primary,
.bk-button-primary {

    border:
        1px solid
        var(--bk-action);

    background:
        var(--bk-action);

    color:
        #fff !important;
}


/* White */

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

    border:
        1px solid
        rgba(22,75,99,.12);

    background:
        #fff;

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


/* ==========================================================
   PHOTO SYSTEM
   ========================================================== */


/* Standard editorial photograph */

.bk-photo,
.bk-rounded-image {

    overflow:
        hidden;

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


.bk-photo img,
.bk-rounded-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


/* Gallery thumbnails */

.bk-picture-real {

    overflow:
        hidden !important;

    border-radius:
        var(--bk-radius-photo)
        !important;

    background:
        transparent !important;
}


.bk-picture-real img {

    border-radius:
        var(--bk-radius-photo)
        !important;
}


/* About editorial image */

.bk-about-identity-image img {

    border-radius:
        var(--bk-radius-photo)
        !important;
}


/* ==========================================================
   CARD SYSTEM
   ========================================================== */


/* A — Destination/photo card */

.bk-card-destination,
.bk-about-layer {

    position:
        relative;

    overflow:
        hidden;

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

    background:
        var(--bk-navy-dark);

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


/* B — Information card */

.bk-card-info,
.bk-live-card {

    border:
        1px solid
        var(--bk-line);

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

    background:
        #fff;

    box-shadow:
        0 2px 8px
        rgba(8,45,65,.04);
}


/* C — Editorial card */

.bk-card-editorial {

    overflow:
        hidden;

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

    background:
        #fff;
}


/* D — CTA card */

.bk-card-cta {

    overflow:
        hidden;

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

    background:
        var(--bk-navy);

    color:
        #fff;
}


/* ==========================================================
   ICON SYSTEM FOUNDATION
   ========================================================== */

/*
 * V2 standard:
 *
 * Every new icon should live inside .bk-icon.
 * Do NOT introduce random Unicode pictograms on future pages.
 */

.bk-icon {

    width:
        24px;

    height:
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 24px;

    color:
        currentColor;
}


.bk-icon svg {

    width:
        100%;

    height:
        100%;

    display:
        block;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* Standard circular icon */

.bk-icon-circle {

    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

    background:
        #fff;

    color:
        var(--bk-navy);

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


.bk-icon-circle .bk-icon {

    width:
        20px;

    height:
        20px;
}


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

.bk-section {

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

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


/* ==========================================================
   DIVIDERS
   ========================================================== */

.bk-divider {

    width:
        100%;

    height:
        1px;

    background:
        var(--bk-line);
}


/* ==========================================================
   FORMS
   ========================================================== */

.bk-field {

    min-height:
        46px;

    padding:
        0
        16px;

    border:
        1px solid
        var(--bk-line);

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

    background:
        #fff;

    color:
        var(--bk-text);

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

    font-size:
        var(--bk-size-small);
}


/* ==========================================================
   GLOBAL SHELL TYPOGRAPHY
   ========================================================== */

.bk-global-header,
.bk-global-footer {

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


.bk-global-nav a,
.bk-header-actions a,
.bk-footer-nav a,
.bk-footer-social a {

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


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:767px) {

    :root {

        --bk-size-body:
            15px;

        --bk-size-story-hero:
            clamp(44px,13vw,58px);

        --bk-size-brand-hero:
            clamp(48px,14vw,68px);

        --bk-size-signature:
            clamp(28px,8vw,38px);

        --bk-space-7:
            42px;

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


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

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

}