/* =========================================================
   TECNICHKOS RESPONSIVE V4
   Additive responsive layer.
   Does not replace site.css / cms CSS.
========================================================= */

:root {
    --tk-v4-max: 1240px;
    --tk-v4-gutter: clamp(18px, 4vw, 42px);
    --tk-v4-radius: clamp(14px, 2vw, 24px);
    --tk-v4-touch: 44px;
    --tk-v4-header-mobile: 72px;
}

/* ---------------------------------------------------------
   GLOBAL SAFETY
--------------------------------------------------------- */

html {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    min-height:100vh;
    min-height:100dvh;
}

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

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

img {
    height:auto;
}

.container {
    width:min(
        var(--tk-v4-max),
        calc(100% - (var(--tk-v4-gutter) * 2))
    );
    margin-inline:auto;
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color:transparent;
}

button,
a,
summary,
select,
input[type="checkbox"],
input[type="radio"] {
    touch-action:manipulation;
}

/* ---------------------------------------------------------
   FLUID TYPOGRAPHY
--------------------------------------------------------- */

h1 {
    font-size:clamp(40px, 6vw, 86px);
    line-height:.98;
    overflow-wrap:anywhere;
}

h2 {
    font-size:clamp(30px, 4vw, 54px);
    line-height:1.02;
    overflow-wrap:anywhere;
}

h3 {
    overflow-wrap:anywhere;
}

p,
li {
    overflow-wrap:anywhere;
}

/* ---------------------------------------------------------
   BUTTONS / TOUCH TARGETS
--------------------------------------------------------- */

.btn,
.primary-button,
.secondary-button,
.danger-button,
header a,
header button,
nav a {
    min-height:var(--tk-v4-touch);
}

.btn,
.primary-button,
.secondary-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* ---------------------------------------------------------
   FRONTEND HEADER / MOBILE DRAWER
--------------------------------------------------------- */

.tk-v4-menu-toggle {
    display:none;
}

@media (max-width: 900px) {

    body.tk-v4-enhanced header {
        min-height:var(--tk-v4-header-mobile);
    }

    body.tk-v4-enhanced .tk-v4-menu-toggle {
        position:relative;
        z-index:10003;
        width:46px;
        height:46px;
        padding:0;
        display:grid;
        place-items:center;
        border:1px solid rgba(7,17,31,.12);
        border-radius:12px;
        background:#fff;
        color:#07111f;
        cursor:pointer;
    }

    body.tk-v4-enhanced .tk-v4-menu-toggle-box {
        width:20px;
        display:grid;
        gap:4px;
    }

    body.tk-v4-enhanced .tk-v4-menu-toggle-box i {
        display:block;
        height:2px;
        border-radius:10px;
        background:currentColor;
        transition:
            transform .22s ease,
            opacity .22s ease;
    }

    body.tk-v4-menu-open
    .tk-v4-menu-toggle-box i:nth-child(1) {
        transform:translateY(6px) rotate(45deg);
    }

    body.tk-v4-menu-open
    .tk-v4-menu-toggle-box i:nth-child(2) {
        opacity:0;
    }

    body.tk-v4-menu-open
    .tk-v4-menu-toggle-box i:nth-child(3) {
        transform:translateY(-6px) rotate(-45deg);
    }

    body.tk-v4-enhanced header .tk-v4-nav {
        position:fixed !important;
        z-index:10001;
        top:0;
        right:0;
        bottom:0;
        width:min(88vw, 390px);
        max-width:390px;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:4px !important;

        padding:
            calc(92px + env(safe-area-inset-top))
            22px
            calc(30px + env(safe-area-inset-bottom));

        overflow-y:auto;
        overscroll-behavior:contain;

        background:#07111f;
        box-shadow:
            -25px 0 70px
            rgba(0,0,0,.25);

        transform:translateX(110%);
        visibility:hidden;

        transition:
            transform .26s ease,
            visibility .26s ease;
    }

    body.tk-v4-menu-open header .tk-v4-nav {
        transform:translateX(0);
        visibility:visible;
    }

    body.tk-v4-enhanced header .tk-v4-nav a {
        width:100%;
        min-height:52px;
        display:flex;
        align-items:center;
        padding:10px 5px;
        color:#fff;
        border-bottom:
            1px solid
            rgba(255,255,255,.10);
        font-size:16px;
    }

    body.tk-v4-enhanced header .tk-v4-nav select {
        width:100%;
        min-height:48px;
        margin-top:10px;
        font-size:16px;
    }

    .tk-v4-overlay {
        position:fixed;
        z-index:10000;
        inset:0;
        background:rgba(4,11,20,.57);
        backdrop-filter:blur(3px);
        opacity:0;
        visibility:hidden;
        transition:
            opacity .22s ease,
            visibility .22s ease;
    }

    body.tk-v4-menu-open .tk-v4-overlay {
        opacity:1;
        visibility:visible;
    }

    body.tk-v4-menu-open {
        overflow:hidden;
        touch-action:none;
    }
}

/* ---------------------------------------------------------
   SECTIONS / HERO
--------------------------------------------------------- */

.hero,
.quote-hero,
.v2-detail-hero {
    padding-left:0;
    padding-right:0;
}

.hero-image,
.cms-photo-band,
.v2-detail-image,
.project-image {
    max-width:100%;
}

@media (max-width: 900px) {

    .hero {
        padding-top:
            clamp(80px, 11vw, 115px);
    }

    .hero-grid,
    .split,
    .two-column,
    .content-grid {
        grid-template-columns:1fr !important;
    }

    .hero-image {
        min-height:clamp(330px, 70vw, 520px);
    }
}

@media (max-width: 580px) {

    .hero {
        padding-top:76px;
    }

    .hero h1,
    .quote-hero h1,
    .v2-detail-hero h1 {
        font-size:
            clamp(
                40px,
                12vw,
                54px
            ) !important;

        letter-spacing:-.045em;
    }

    .hero p,
    .quote-hero p,
    .v2-detail-hero p {
        font-size:16px !important;
        line-height:1.6;
    }
}

/* ---------------------------------------------------------
   CARDS / GRIDS
--------------------------------------------------------- */

.cards,
.v2-project-grid,
.v2-service-grid,
.v2-testimonial-grid,
.v2-detail-grid,
.cms-photo-pair,
.quick-grid,
.stats-grid {
    min-width:0;
}

@media (max-width: 1024px) {

    .cards {
        grid-template-columns:
            repeat(2, minmax(0,1fr))
            !important;
    }

    .v2-project-grid,
    .v2-service-grid,
    .v2-testimonial-grid,
    .v2-detail-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr))
            !important;
    }
}

@media (max-width: 620px) {

    .cards,
    .v2-project-grid,
    .v2-service-grid,
    .v2-testimonial-grid,
    .v2-detail-grid,
    .cms-photo-pair {
        grid-template-columns:
            minmax(0,1fr)
            !important;
    }

    .card,
    .v2-project-card,
    .v2-service-card,
    .v2-testimonial {
        width:100%;
        min-width:0;
    }

    .v2-service-card {
        min-height:300px;
    }
}

/* ---------------------------------------------------------
   IMAGES
--------------------------------------------------------- */

.card img,
.v2-project-image img,
.v2-detail-image img,
.cms-photo-band img {
    object-fit:cover;
}

@media (max-width: 580px) {

    .cms-photo-band,
    .cms-photo-pair .cms-photo-band {
        min-height:260px !important;
    }

    .v2-project-image {
        aspect-ratio:4/3;
    }

    .v2-detail-image {
        width:
            calc(
                100% - 28px
            ) !important;
    }
}

/* ---------------------------------------------------------
   FORMS / IOS
--------------------------------------------------------- */

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

@media (max-width: 900px) {

    input,
    textarea,
    select {
        /*
         * 16px prevents unwanted Safari zoom
         * when focusing fields on iPhone.
         */
        font-size:16px !important;
    }

    input,
    select {
        min-height:48px;
    }

    textarea {
        min-height:120px;
    }

    .form-row,
    .quote-row {
        grid-template-columns:1fr !important;
    }
}

/* ---------------------------------------------------------
   PROJECT REQUEST WIZARD
--------------------------------------------------------- */

@media (max-width: 900px) {

    .quote-layout {
        grid-template-columns:1fr !important;
        gap:24px !important;
    }

    .quote-progress {
        position:static !important;
        width:100%;
        display:grid;
        grid-template-columns:
            repeat(5, minmax(48px,1fr))
            !important;
        gap:5px;
        overflow-x:auto;
        scrollbar-width:none;
    }

    .quote-progress::-webkit-scrollbar {
        display:none;
    }

    .quote-progress-item {
        min-width:48px;
        display:flex !important;
        justify-content:center;
    }

    .quote-progress-item b {
        display:none;
    }
}

@media (max-width: 580px) {

    .quote-shell {
        padding-top:28px !important;
    }

    .quote-form {
        padding:21px 16px !important;
        border-radius:15px !important;
    }

    .quote-options {
        grid-template-columns:1fr !important;
    }

    .quote-option span {
        min-height:62px !important;
        padding:15px !important;
    }

    .quote-actions {
        position:sticky;
        z-index:20;
        bottom:
            calc(
                8px +
                env(safe-area-inset-bottom)
            );

        padding:9px;

        border:
            1px solid
            rgba(7,17,31,.08);

        background:
            rgba(255,255,255,.96);

        backdrop-filter:blur(14px);

        box-shadow:
            0 14px 34px
            rgba(7,17,31,.10);
    }

    .quote-actions button {
        min-height:48px;
    }
}

/* ---------------------------------------------------------
   CMS ADMIN MOBILE
--------------------------------------------------------- */

.tk-v4-admin-toggle {
    display:none;
}

@media (max-width: 900px) {

    body.tk-v4-admin {
        overflow-x:hidden;
    }

    body.tk-v4-admin
    .tk-v4-admin-toggle {
        position:fixed;
        z-index:20003;

        left:
            max(
                12px,
                env(safe-area-inset-left)
            );

        top:
            calc(
                12px +
                env(safe-area-inset-top)
            );

        width:46px;
        height:46px;

        display:grid;
        place-items:center;

        border:1px solid #d5dce4;
        border-radius:12px;

        background:#fff;
        color:#07111f;

        box-shadow:
            0 7px 25px
            rgba(7,17,31,.12);

        cursor:pointer;
    }

    body.tk-v4-admin
    .tk-v4-admin-sidebar {
        position:fixed !important;
        z-index:20002 !important;

        top:0 !important;
        left:0 !important;
        bottom:0 !important;

        width:min(84vw, 320px) !important;

        padding-top:
            calc(
                80px +
                env(safe-area-inset-top)
            ) !important;

        padding-bottom:
            calc(
                30px +
                env(safe-area-inset-bottom)
            ) !important;

        overflow-y:auto !important;
        overscroll-behavior:contain;

        transform:
            translateX(-105%);

        visibility:hidden;

        transition:
            transform .25s ease,
            visibility .25s ease;
    }

    body.tk-v4-admin.tk-v4-admin-menu-open
    .tk-v4-admin-sidebar {
        transform:translateX(0);
        visibility:visible;
    }

    .tk-v4-admin-overlay {
        position:fixed;
        z-index:20001;
        inset:0;

        background:
            rgba(4,11,20,.56);

        backdrop-filter:blur(3px);

        opacity:0;
        visibility:hidden;

        transition:
            opacity .2s ease,
            visibility .2s ease;
    }

    body.tk-v4-admin.tk-v4-admin-menu-open
    .tk-v4-admin-overlay {
        opacity:1;
        visibility:visible;
    }

    body.tk-v4-admin.tk-v4-admin-menu-open {
        overflow:hidden;
    }

    body.tk-v4-admin main,
    body.tk-v4-admin .admin-main,
    body.tk-v4-admin .content,
    body.tk-v4-admin .main-content {
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
    }

    body.tk-v4-admin
    .two-panels,
    body.tk-v4-admin
    .dashboard-grid,
    body.tk-v4-admin
    .stats-grid,
    body.tk-v4-admin
    .v3-detail-grid {
        grid-template-columns:
            minmax(0,1fr)
            !important;
    }

    body.tk-v4-admin
    .stats-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr))
            !important;
    }

    body.tk-v4-admin
    .panel {
        min-width:0;
    }

    body.tk-v4-admin
    .panel-head {
        gap:15px;
        flex-wrap:wrap;
    }

    body.tk-v4-admin
    .v3-filter {
        grid-template-columns:1fr !important;
    }

    body.tk-v4-admin
    .v3-lead-row {
        grid-template-columns:
            1fr 1fr
            !important;
    }

    body.tk-v4-admin
    .v3-data-grid,
    body.tk-v4-admin
    .v3-attachments {
        grid-template-columns:
            1fr
            !important;
    }

    body.tk-v4-admin
    .bulk-slot-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;
    }

    .tk-v4-table-scroll {
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .tk-v4-table-scroll table {
        min-width:780px;
    }
}

@media (max-width: 580px) {

    body.tk-v4-admin
    .stats-grid,
    body.tk-v4-admin
    .bulk-slot-grid,
    body.tk-v4-admin
    .v3-lead-row {
        grid-template-columns:
            minmax(0,1fr)
            !important;
    }

    body.tk-v4-admin
    .panel {
        padding:
            20px 15px
            !important;
    }

    body.tk-v4-admin
    .hero-panel {
        padding:
            28px 20px
            !important;
    }

    body.tk-v4-admin
    .hero-panel h1 {
        font-size:
            clamp(
                33px,
                10vw,
                46px
            ) !important;
    }

    body.tk-v4-admin
    .v2-record {
        align-items:flex-start;
        flex-direction:column;
    }

    body.tk-v4-admin
    .v2-record-actions {
        width:100%;
        flex-wrap:wrap;
    }
}

/* ---------------------------------------------------------
   IOS SAFE AREA
--------------------------------------------------------- */

@supports (
    padding:
    max(0px)
) {

    body {
        padding-left:
            env(safe-area-inset-left);

        padding-right:
            env(safe-area-inset-right);
    }

    footer {
        padding-bottom:
            max(
                0px,
                env(safe-area-inset-bottom)
            );
    }
}

/* ---------------------------------------------------------
   LANDSCAPE PHONE
--------------------------------------------------------- */

@media (
    max-width: 900px
)
and (
    orientation: landscape
)
and (
    max-height: 520px
) {

    body.tk-v4-enhanced
    header .tk-v4-nav {
        padding-top:
            calc(
                68px +
                env(safe-area-inset-top)
            );
    }

    .quote-hero {
        padding-top:70px !important;
        padding-bottom:35px !important;
    }
}

/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

:focus-visible {
    outline:
        3px solid
        rgba(255,105,0,.65);
    outline-offset:3px;
}

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

    html {
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}


/* =========================================================
   TECNICHKOS V4.1 PUBLIC MENU FIX

   The original TecnichKos frontend already has a mobile
   navigation system. V4 must not create a second one.
========================================================= */

body:not(.tk-v4-admin) .tk-v4-menu-toggle,
body:not(.tk-v4-admin) .tk-v4-overlay {
    display:none !important;
}

/*
 * Neutralise V4 drawer rules if an older cached JS file
 * temporarily adds tk-v4-nav.
 */

@media (max-width:900px) {

    body:not(.tk-v4-admin)
    header .tk-v4-nav {

        position:static !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        width:auto !important;
        max-width:none !important;
        min-width:0 !important;

        padding:0 !important;

        overflow:visible !important;

        background:transparent !important;
        box-shadow:none !important;

        transform:none !important;
        visibility:visible !important;

        transition:none !important;
    }

    body:not(.tk-v4-admin)
    header .tk-v4-nav a {

        width:auto;

        border-bottom:0;

        color:inherit;
    }

    body:not(.tk-v4-admin).tk-v4-menu-open {
        overflow:auto !important;
        touch-action:auto !important;
    }
}


/* ---------------------------------------------------------
   MOBILE HEADER POLISH
--------------------------------------------------------- */

@media (max-width:580px) {

    /*
     * Keep the native header compact.
     */

    header {
        width:100%;
        max-width:100%;
    }

    header .container {
        width:
            calc(
                100% - 28px
            );

        max-width:100%;

        margin-inline:auto;

        gap:10px;
    }

    /*
     * Quote button must remain usable,
     * but should not dominate the entire header.
     */

    header .btn,
    header a[class*="btn"],
    header a[class*="quote"] {

        min-height:44px;

        padding:
            10px 13px;

        font-size:14px;

        line-height:1.15;
    }

    /*
     * Native menu buttons.
     */

    header button {
        min-width:44px;
        min-height:44px;
    }
}