/*
  REV Solar theme layer.
  Loads after bootstrap.min.css and style.css. Rebrands Bootstrap 5.3 via its
  CSS custom properties, plus a few explicit overrides where Bootstrap bakes
  literal color values instead of referencing variables (buttons) and where
  style.css itself hardcodes a color. See docs/design-direction.md.

  2026-10 re-theme (Mohan direction): navy / teal / amber / cream. The --rev-*
  token NAMES are kept identical to the previous palette so every page that
  reads them (home, projects, blog, getquote) re-themes at once from this one
  file — only the VALUES changed.

  2026-10-21 typography update: display + body + UI now use self-hosted
  Plus Jakarta Sans (modern, premium geometric humanist sans). The brand
  wordmark stays on Montserrat. No font CDN — see docs/design-direction.md.
*/

/* ---------- Self-hosted Plus Jakarta Sans (no font CDN) ----------
   One variable woff2 per subset covers every weight (400–800), so a single
   @font-face with a font-weight range serves body (400/500), semibold UI (600)
   and headings (700/800). latin-ext is kept so the ₹ sign (U+20B9) renders. */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Self-hosted Montserrat (brand wordmark only; no font CDN) ----------
   A light geometric sans used for the premium "REV SOLAR" wordmark (nav + intro).
   Body/headings stay on Lato. */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-300.woff2") format("woff2");
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-400.woff2") format("woff2");
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-500.woff2") format("woff2");
}

/* Reusable premium wordmark: medium-weight, uppercase, widely tracked, with an
   amber "SOLAR" accent. Used in the nav brand and (restyled) the intro cover.
   Montserrat 500 (was 300 — too thin against the deep-navy nav text). */
.rev-wordmark {
    font-family: "Montserrat", var(--rev-font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .34em;
    color: var(--rev-navy);
    white-space: nowrap;
    line-height: 1;
}
.rev-wordmark .rev-wordmark__solar { color: var(--rev-amber); margin-left: .28em; }
/* nav size */
.navbar-brand.rev-wordmark {
    font-family: "Montserrat", var(--rev-font-display);   /* beat the generic .navbar-brand rule */
    font-weight: 500;
    white-space: nowrap;
    font-size: 1.22rem;
    letter-spacing: .3em;
    padding-left: .1em;   /* optical balance for the wide tracking */
}
@media (max-width: 400px) {
    .navbar-brand.rev-wordmark { font-size: 1.02rem; letter-spacing: .24em; }
}

:root {
    /* Bootstrap theme variables */
    --bs-primary: #F2B544;
    --bs-primary-rgb: 242, 181, 68;
    --bs-secondary: #148A80;
    --bs-secondary-rgb: 20, 138, 128;
    --bs-success: #1E8E5A;
    --bs-success-rgb: 30, 142, 90;
    --bs-dark: #14284B;
    --bs-dark-rgb: 20, 40, 75;
    --bs-light: #FFF8EA;
    --bs-light-rgb: 255, 248, 234;
    --bs-body-color: #28344D;
    --bs-body-bg: #FFF8EA;
    --bs-link-color: #0E6F67;
    --bs-link-color-rgb: 14, 111, 103;
    --bs-link-hover-color: #14284B;
    --bs-link-hover-color-rgb: 20, 40, 75;
    --bs-border-color: #D5DAE3;
    --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Legacy template variables (wwwroot/css/style.css reads these directly) */
    --primary: #F2B544;
    --light: #FFF8EA;
    --dark: #14284B;

    /* REV Solar tokens — names kept from the old palette so every page's CSS
       re-themes from here; values are the new navy/teal/amber/cream. */
    --rev-marigold: #F2B544;        /* primary accent / CTA fill (amber) */
    --rev-marigold-hover: #E7A82F;
    --rev-marigold-active: #D99A1F;
    --rev-indigo: #14284B;          /* dark sections, nav, footer (navy) */
    --rev-slate: #148A80;           /* secondary brand / data (teal) */
    --rev-limestone: #FFF8EA;       /* base background (cream) */
    --rev-leaf: #1E8E5A;            /* success / WhatsApp affordance (green) */
    --rev-ink: #14284B;             /* headings */

    /* New-direction tokens, used by new markup (home.css etc.) */
    --rev-navy: #14284B;
    --rev-navy-soft: #1E3560;
    --rev-teal: #148A80;
    --rev-teal-dark: #0E6F67;
    --rev-amber: #F2B544;
    --rev-amber-soft: #FBE6BE;
    --rev-amber-text: #8A4F08;      /* amber-brown text ON cream/white only */
    --rev-cream: #FFF8EA;
    --rev-mist: #DCEBE8;            /* soft green-grey panel */
    --rev-border: #D5DAE3;
    --rev-muted: #5B6577;
    --rev-muted-strong: #3E4A60;

    --rev-font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rev-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --rev-radius: 16px;             /* cards */
    --rev-radius-sm: 12px;          /* inputs, small chips */
    --rev-mobile-bar-height: 60px;

    /* Soft, multi-layered ambient elevation (navy-tinted rather than pure black
       so it reads premium on the cream/navy palette). Used by cards site-wide. */
    --rev-shadow-sm: 0 2px 6px rgba(20, 40, 75, .05);
    --rev-shadow: 0 10px 30px rgba(20, 40, 75, .06), 0 2px 8px rgba(20, 40, 75, .04);
    --rev-shadow-lg: 0 18px 44px rgba(20, 40, 75, .12), 0 6px 14px rgba(20, 40, 75, .06);
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--rev-font-body);
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand, .btn, .nav-link, .section-title {
    font-family: var(--rev-font-display);
}

h1, h2, h3, .display-1, .display-2, .display-3, .display-4 {
    color: var(--rev-navy);
    font-weight: 800;              /* Plus Jakarta Sans tops at 800 */
    letter-spacing: -0.015em;      /* tighter tracking reads premium at this weight */
}

/* Sub-headings keep the strong, authoritative look one step down. */
h4, h5, h6 {
    color: var(--rev-navy);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---------- Buttons (pill, per the new direction) ---------- */
.btn {
    --bs-btn-border-radius: 2rem;
    font-weight: 700;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease,
                box-shadow .2s ease, transform .15s ease;
}

/* Square icon buttons stay square */
.btn-square,
.btn-lg-square {
    --bs-btn-border-radius: 0;
    border-radius: 0;
}

/* Bootstrap's .text-primary / .bg-primary etc. already read --bs-primary-rgb,
   so they rebrand automatically. Buttons bake literal hex values and need
   explicit overrides. Text on amber is navy (contrast AAA); never amber-text
   or white on the amber fill. */
.btn-primary {
    --bs-btn-color: var(--rev-navy);
    --bs-btn-bg: var(--rev-amber);
    --bs-btn-border-color: var(--rev-amber);
    --bs-btn-hover-color: var(--rev-navy);
    --bs-btn-hover-bg: var(--rev-marigold-hover);
    --bs-btn-hover-border-color: var(--rev-marigold-hover);
    --bs-btn-active-color: var(--rev-navy);
    --bs-btn-active-bg: var(--rev-marigold-active);
    --bs-btn-active-border-color: var(--rev-marigold-active);
    --bs-btn-disabled-color: var(--rev-navy);
    --bs-btn-disabled-bg: var(--rev-amber);
    --bs-btn-disabled-border-color: var(--rev-amber);
}

.btn-outline-primary {
    --bs-btn-color: var(--rev-amber-text);
    --bs-btn-border-color: var(--rev-amber);
    --bs-btn-hover-color: var(--rev-navy);
    --bs-btn-hover-bg: var(--rev-amber);
    --bs-btn-hover-border-color: var(--rev-amber);
    --bs-btn-active-color: var(--rev-navy);
    --bs-btn-active-bg: var(--rev-amber);
    --bs-btn-active-border-color: var(--rev-amber);
}

/* Teal secondary button (new brand action colour) */
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--rev-teal);
    --bs-btn-border-color: var(--rev-teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rev-teal-dark);
    --bs-btn-hover-border-color: var(--rev-teal-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--rev-teal-dark);
    --bs-btn-active-border-color: var(--rev-teal-dark);
}

.btn-outline-secondary {
    --bs-btn-color: var(--rev-teal-dark);
    --bs-btn-border-color: var(--rev-teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rev-teal);
    --bs-btn-hover-border-color: var(--rev-teal);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--rev-teal);
    --bs-btn-active-border-color: var(--rev-teal);
}

/* style.css hardcodes .btn.btn-primary / .btn.btn-outline-primary:hover to
   white text with plain (non-variable) declarations, which otherwise wins. */
.btn.btn-primary,
.btn.btn-outline-primary:hover {
    color: var(--rev-navy) !important;
}

/* ---------- Filled CTA polish (subtle gradient + lift micro-interaction) ----------
   The gradient is a very soft vertical sheen on the existing flat fill, so the
   button reads crafted without changing its brand colour or the navy-on-amber
   AAA contrast. Hover lifts 2px with a colour-matched ambient glow; press
   settles back. Amber primary ("See my savings" / calculator CTAs) + teal
   secondary (WhatsApp). */
.btn-primary {
    background-image: linear-gradient(180deg, #F7C45C 0%, var(--rev-amber) 55%, #ECB03F 100%);
    box-shadow: 0 6px 16px rgba(242, 181, 68, .26);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background-image: linear-gradient(180deg, #F8C861 0%, var(--rev-marigold-hover) 55%, #E3A52E 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(242, 181, 68, .36);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(242, 181, 68, .28);
}

.btn-secondary {
    background-image: linear-gradient(180deg, #1A9E93 0%, var(--rev-teal) 55%, #0F7E75 100%);
    box-shadow: 0 6px 16px rgba(20, 138, 128, .24);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-image: linear-gradient(180deg, #169089 0%, var(--rev-teal-dark) 55%, #0C655E 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(20, 138, 128, .32);
}
.btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(20, 138, 128, .26);
}

/* Outline CTAs lift too, but keep their transparent fill (no gradient). */
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    transform: translateY(-2px);
}

/* ---------- Cards (site-wide elevation) ----------
   Every Bootstrap .card across the site (blog posts, any view using cards)
   picks up the same rounded, softly-elevated, hairline-bordered treatment used
   on the homepage, so the look is consistent on every page. Page-specific
   custom cards (.projects-card, .blog-index-card, .trust__item, etc.) set the
   same tokens in their own stylesheets. */
.card {
    --bs-card-border-radius: var(--rev-radius);
    --bs-card-inner-border-radius: calc(var(--rev-radius) - 1px);
    --bs-card-border-color: var(--rev-border);
    box-shadow: var(--rev-shadow);
}

.form-control,
.form-select {
    border-radius: var(--rev-radius-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--rev-teal);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-secondary-rgb), .2);
}

/* style.css adds a Font Awesome glyph via ::before on footer quick links;
   Font Awesome is no longer loaded, so drop the glyph. */
.footer .btn.btn-link::before {
    content: none;
}

/* ---- Sticky header ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    background-color: var(--rev-limestone);
    transition: box-shadow .25s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 2px 12px rgba(20, 40, 75, .12);
}

/* ---- Back to top ---- */
.back-to-top {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background-color: var(--rev-navy);
    color: #fff;
    border: none;
    z-index: 1035;
}

.back-to-top.is-visible {
    display: flex;
}

/* Cookie consent banner (sitewide; shown by cookie-consent.js until a choice is made) */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1090;                 /* above the mobile action bar (1030), below the intro cover (2000) */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .7rem 1.5rem;
    padding: .9rem 1.1rem calc(.9rem + env(safe-area-inset-bottom, 0px));
    background: var(--rev-navy);
    color: #fff6e7;
    box-shadow: 0 -6px 24px rgba(10, 20, 35, .28);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text {
    margin: 0;
    flex: 1 1 28rem;
    max-width: 70ch;
    font-size: .9rem;
    line-height: 1.5;
}
.cookie-banner__text a { color: #fff; text-decoration: underline; }
.cookie-banner__actions {
    display: flex;
    gap: .5rem;
    flex: 0 0 auto;
}
/* Clear the fixed mobile Call/WhatsApp bar on phones/tablets */
@media (max-width: 991.98px) {
    .cookie-banner { bottom: var(--rev-mobile-bar-height); }
}
@media (max-width: 575.98px) {
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__actions .btn { flex: 1 1 50%; }
}

@media (max-width: 991.98px) {
    .back-to-top {
        bottom: calc(var(--rev-mobile-bar-height) + 16px);
    }
}

/* ---- Mobile call/WhatsApp bar ---- */
.mobile-action-bar {
    display: none;
}

@media (max-width: 991.98px) {
    .mobile-action-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--rev-mobile-bar-height);
        z-index: 1030;
        box-shadow: 0 -2px 12px rgba(20, 40, 75, .15);
    }

    .mobile-action-bar a {
        flex: 1 1 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        font-family: var(--rev-font-display);
        font-weight: 700;
        text-decoration: none;
    }

    .mobile-action-bar .call-btn {
        background-color: var(--rev-navy);
        color: #fff;
    }

    .mobile-action-bar .whatsapp-btn {
        background-color: var(--rev-leaf);
        color: #fff;
    }

    body {
        padding-bottom: var(--rev-mobile-bar-height);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header {
        transition: none;
    }
    .btn {
        transition: color .15s ease, background-color .15s ease, border-color .15s ease;
    }
    .btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active,
    .btn-secondary:hover, .btn-secondary:focus-visible, .btn-secondary:active,
    .btn-outline-primary:hover, .btn-outline-secondary:hover {
        transform: none;
    }
}