/**
 * TNT CMS — Theme: Arsha
 * Bridges TNT CSS variables → Arsha CSS variables.
 * Set active_theme = 'theme-arsha' in Design → Theme & Style.
 *
 * HOW IT WORKS:
 * 1. Your Theme & Style settings set --tnt-* variables
 * 2. This file maps those to Arsha's --accent-color, --heading-color etc.
 * 3. Arsha's main.css uses those variables throughout
 * Result: Theme & Style admin controls Arsha's entire color scheme.
 *
 * FONTS:
 * Arsha uses Jost (headings), Open Sans (body), Poppins (nav).
 * If you set fonts in Theme & Style those will override these.
 */

/* ── Google Fonts used by Arsha ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&family=Open+Sans:wght@300;400;600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* ── Map TNT variables → Arsha variables ─────────────────────────────── */
:root {
    /* Arsha font variables */
    --default-font:  var(--tnt-font-body,    "Open Sans", system-ui, sans-serif);
    --heading-font:  var(--tnt-font-heading,  "Jost", sans-serif);
    --nav-font:      "Poppins", sans-serif;

    /* Arsha color variables — driven by TNT Theme & Style settings */
    --background-color:  var(--tnt-color-bg,        #ffffff);
    --default-color:     var(--tnt-color-text,       #444444);
    --heading-color:     var(--tnt-color-heading,    #37517e);
    --accent-color:      var(--tnt-color-primary,    #47b2e4);
    --surface-color:     var(--tnt-color-card-bg,    #ffffff);
    --contrast-color:    #ffffff;

    /* Nav colors */
    --nav-color:                     var(--tnt-color-primary, #ffffff);
    --nav-hover-color:               var(--tnt-color-secondary, #47b2e4);
    --nav-mobile-background-color:   var(--tnt-color-bg, #ffffff);
    --nav-dropdown-background-color: var(--tnt-color-card-bg, #ffffff);
    --nav-dropdown-color:            var(--tnt-color-text, #444444);
    --nav-dropdown-hover-color:      var(--tnt-color-primary, #47b2e4);

    /* TNT radius carried through */
    --tnt-radius: 10px;
}

/* ── Dark background sections use secondary color ────────────────────── */
.dark-background {
    --background-color: var(--tnt-color-heading, #37517e);
    --default-color:    #ffffff;
    --heading-color:    #ffffff;
    --surface-color:    color-mix(in srgb, var(--tnt-color-heading, #37517e), white 20%);
    --contrast-color:   #ffffff;
    --accent-color:     var(--tnt-color-secondary, #47b2e4);
}

/* ── Light background sections ───────────────────────────────────────── */
.light-background {
    --background-color: color-mix(in srgb, var(--tnt-color-bg, #ffffff), #e8e8e8 15%);
    --surface-color:    var(--tnt-color-bg, #ffffff);
}

/* ── Override Bootstrap container max-width ──────────────────────────── */
.container {
    max-width: var(--tnt-container-width, 1200px);
}

/* ── Override Arsha hero height — auto-adjust to content ─────────────── */
/* Uses body class for specificity over vendor main.css which loads later */
.tnt-arsha-home .hero {
    min-height: auto;
    padding: 80px 0 60px 0;
    --background-color: var(--tnt-hero-bg, #37517e);
    align-items: stretch;
}
.tnt-arsha-home .hero .row {
    align-items: stretch;
    min-height: 100%;
}
.tnt-arsha-home .hero > .container {
    display: flex;
    align-items: stretch;
}
.tnt-arsha-home .hero .hero-img {
    display: flex;
    align-items: stretch;
    margin: -80px 0 -60px 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}
.tnt-arsha-home .hero .hero-img img {
    width: 105%;
    height: 100%;
    margin-left: -2%;
    object-fit: cover;
}
/* Left edge blend — smooth fade into hero background */
.tnt-arsha-home .hero .hero-img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to left,
        transparent 60%,
        rgba(45,106,159,0.6) 80%,
        rgba(45,106,159,1) 100%
    );
    pointer-events: none;
}
/* Right edge blend — fade to match hero bg beyond container */
.tnt-arsha-home .hero .hero-img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to right,
        transparent 65%,
        rgba(45,106,159,0.7) 85%,
        rgba(45,106,159,1) 100%
    );
    pointer-events: none;
}
.tnt-arsha-home .hero h1 {
    color: var(--tnt-hero-heading-color, #ffffff) !important;
    font-size: var(--tnt-hero-heading-size, 48px);
}
.tnt-arsha-home .hero .btn-get-started {
    background: var(--tnt-hero-btn-bg, #47b2e4);
    color: var(--tnt-hero-btn-color, #ffffff);
}
.tnt-arsha-home .hero .btn-get-started:hover {
    background: color-mix(in srgb, var(--tnt-hero-btn-bg, #47b2e4), black 15%);
    color: var(--tnt-hero-btn-color, #ffffff);
}
.tnt-arsha-home .hero .hero-subheading,
.tnt-arsha-home .hero .hero-subheading p {
    color: var(--tnt-hero-sub-color, rgba(255,255,255,.8)) !important;
    margin: 5px 0 30px 0;
    font-size: var(--tnt-hero-sub-size, 22px);
    line-height: 1.5;
    font-weight: 400;
}
@media (max-width: 640px) {
    .tnt-arsha-home .hero h1 {
        font-size: calc(var(--tnt-hero-heading-size, 48px) * 0.6);
        color: var(--tnt-hero-heading-color, #ffffff) !important;
    }
    .tnt-arsha-home .hero .hero-subheading,
    .tnt-arsha-home .hero .hero-subheading p {
        font-size: calc(var(--tnt-hero-sub-size, 22px) * 0.82);
        color: var(--tnt-hero-sub-color, rgba(255,255,255,.8)) !important;
    }
    .tnt-arsha-home .hero .hero-img {
        margin: 0;
        max-height: 300px;
        overflow: hidden;
        border-radius: 8px;
    }
    .tnt-arsha-home .hero .hero-img img {
        width: 100%;
        margin-left: 0;
        filter: none;
    }
    .tnt-arsha-home .hero .hero-img::before,
    .tnt-arsha-home .hero .hero-img::after {
        display: none;
    }
}

/* ── Ensure Arsha sections pick up correct fonts ─────────────────────── */
body {
    font-family: var(--default-font);
    color:       var(--default-color);
    background:  var(--background-color);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color:       var(--heading-color);
}