:root {
    --Primary: #0A0A0A;
    --Secondary: #1B263B;
    --font-main: "Plus Jakarta Sans", sans-serif;
    --font-main2: "Space Grotesk", sans-serif;
    --font-main3: 'Rift', sans-serif;
}

body {
    color: var(--Text-secondary);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    color: var(--Text-primary);
    font-family: var(--font-main2);
    font-weight: 400;
}

/* The heading rule above colours .h1–.h6 near-black, and those class selectors
   are (0,1,0) — exactly the same specificity as the theme's text colour
   utilities in styles.css. Because this file loads last, the heading colour was
   silently beating every one of them.

   That broke any element carrying both a heading class and a colour utility:
   the hero eyebrows (h6 + text_white) rendered black on the hero photo, and the
   footer brand line (h4 + text_white) was black on the black footer, i.e.
   invisible. 198 elements across the site combine the two.

   Restating the utilities here fixes all of them at once. No !important needed —
   equal specificity, and these now come later. Bootstrap's own .text-white is
   unaffected either way; it ships with !important.

   If you add a colour utility to the theme, add it here too. */
.text_white {
    color: var(--White);
}

/* Note the theme's naming is counterintuitive: .text_primary maps to
   --Text-primary, while .text_primary-color maps to --Primary. Copied from
   styles.css rather than inferred — do not "tidy" these. */
.text_primary {
    color: var(--Text-primary);
}

.text_secondary {
    color: var(--Text-secondary);
}

.text_primary-color {
    color: var(--Primary);
}

.text_secondary-color {
    color: var(--Secondary);
}

.text_muted {
    color: var(--Text-muted);
}

.text_on-suface-1 {
    color: var(--On-Suface-1);
}

.text_on-suface-2 {
    color: var(--On-Suface-2);
}

.text_placehover {
    color: var(--Placehover);
}

.font-main {
    font-family: var(--font-main);
}

.font-3 {
    font-family: var(--font-main3);
}

.main-menu .navigation>li:hover>a {
    color: var(--Primary);
}

.navigation .submenu li:hover>a {
    color: var(--Primary);
}


/* Active nav item. The theme paints it --Primary (#0A0A0A) / --Secondary
   (#1B263B), both invisible against our dark header — the item vanished and only
   its underline showed.

   Specificity matters here. styles.css has
       .main-menu.style-2 .current-menu > a { color: var(--Primary) !important }
   at (0,3,1). A plainer `.main-menu .current-menu > a` at (0,2,1) loses to it even
   with !important and even though this file loads later, because specificity is
   compared before source order. So the selectors below deliberately mirror the
   theme's, winning on source order at equal specificity.

   The underline is separate — .current-menu > a::before, further down. */
.main-menu.style-1 .current-menu > a,
.main-menu.style-2 .current-menu > a,
.main-menu.style-1 .current-menu-item > a,
.main-menu.style-2 .current-menu-item > a,
.main-menu .current-menu > a,
.main-menu .current-menu-item > a {
    color: var(--White) !important;
}

.navigation li>a {
    color: var(--White);
}

.navigation li.has-child::after {
    color: var(--White);
}

.main-menu.style-1 .navigation>li>a::before {
    background-color: var(--White);
}

.main-menu.style-1 .current-menu>a {
    color: var(--White) !important;
}

.main-menu .current-menu::after {
    color: var(--White) !important;
}

.main-menu .navigation>li:hover>a {
    color: var(--White) !important;
}

/* Active/hover underline. The theme leaves it at bottom:0, which lands it 8px
   below the baseline — far enough that it reads as a detached rule and makes the
   active item look like it sits lower than its neighbours. Raised to sit 4px off
   the baseline so it binds to the word.
   Same specificity as the theme's rule, so this wins on source order. */
.main-menu.style-2 .navigation>li>a::before {
    background-color: var(--White);
    bottom: 4px;
}

.main-menu .navigation > li:hover::after {
    color: var(--White);
}

#menu-mobile-menu li.active > a {
    color: var(--White);
    opacity: 1;
}

#menu-mobile-menu li > a {
    color: var(--White);
    opacity: 0.7;
}

/* Header variant for pages with no dark hero behind it.

   .header.style-19 is built to overlay the homepage hero: it has no background
   and pulls the next section up under itself with margin-bottom: -120px. On an
   inner page the content starts immediately and is light, so the white nav text
   landed on a white background and vanished until you scrolled (at which point
   .header-fixed.style-19 supplies its own dark background).

   This gives those pages a solid bar and puts the header back in normal flow.
   Applied by scripts/build.js to every page except index.html. */
.header.style-19.header-solid {
    background-color: var(--Text-primary);
    margin-bottom: 0;
}

/* Section eyebrows ("About Tano Homes", "Our process", "Portfolio", …).
   The theme sets .text-label to 12px, which reads as fine print next to the
   display-size headline underneath it. Bumped so it registers as a label.
   Affects all five section eyebrows on index, keeping them consistent. */
.tag-line.text-label {
    font-size: 16px;
    line-height: 24px;
}

/* Footer height. The theme's tf-spacing-1 puts 100px top and bottom on the
   footer — 200px of padding before any content, which made the footer read as
   long as a content section. Halved.

   Compound selector on purpose: .footer-style-18 alone ties with .tf-spacing-1
   at (0,1,0), and per §14.1 source order is not something to rely on. This wins
   at (0,2,0) without !important.

   The theme drops every tf-spacing-* to 80/80 below 991px, so the mobile value
   is restated to keep the same proportion there. */
.footer-style-18.tf-spacing-1 {
    padding-top: 48px;
    padding-bottom: 40px;
}

@media (max-width: 991px) {
    .footer-style-18.tf-spacing-1 {
        padding-top: 40px;
        padding-bottom: 32px;
    }
}

/* The !important override that used to sit here for the footer brand line is
   gone. Its real cause was the heading-colour rule at the top of this file
   beating .text_white on source order — fixed there, generally, so the footer
   needs nothing of its own. */

/* ---------------------------------------------------------------------------
   Reduced motion

   The theme animates heavily (WOW, GSAP/ScrollTrigger, SplitText, Swiper) and
   none of it checks the visitor's motion preference. Several classes also start
   at opacity:0 or behind a clip-path and are only revealed once JS runs, so it
   is not enough to switch animation off — anything hidden has to be forced
   visible, or the page renders blank for these users.

   GSAP writes inline styles, hence !important throughout.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        animation-delay: 0s !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    /* Hidden until JS reveals them — show immediately instead. */
    .tf-animateCLP-left,
    .tf-animateCLP-right,
    .tf-animateCLP-up,
    .tf-animateCLP-down,
    .effect-item,
    .split-text,
    .split-text *,
    .reveal-type,
    .reveal-type *,
    .scroll-effect .text-change-color,
    .wow {
        clip-path: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation-name: none !important;
    }

    /* Ken Burns / hover zoom on imagery. */
    .img-zoom,
    .effect-img-zoom img {
        transform: none !important;
    }

    /* .progress-wrap is deliberately left alone: it is meant to stay hidden
       until the visitor scrolls, and revealing it here would just add clutter. */
}