/*
  Theme Name:   Bricks Child Theme
  Theme URI:    https://bricksbuilder.io/
  Description:  Pinewood Landscapes — Bricks child theme.
  Author:       Waveline Marketing
  Author URI:   https://bricksbuilder.io/
  Template:     bricks
  Version:      1.1
  Text Domain:  bricks
*/


/* ═══════════════════════════════════════════════
   THEME CONTEXTS
   ═══════════════════════════════════════════════ */
.theme--light {
    background-color: var(--c-sand);
    color: var(--text-default);
    --text-default: var(--c-ink);
    --text-muted: var(--c-ink-muted);
    --fw-body: var(--fw-400);
    --fw-heading: var(--fw-400);
    --border-color: var(--color-border);
    --divider-thickness: var(--divider-size);
}

.theme--dark {
    background-color: var(--c-forest);
    color: var(--text-default);
    --text-default: var(--c-sand);
    --text-muted: var(--c-sand-muted);
    --fw-body: var(--fw-300);
    --fw-heading: var(--fw-300);
    --border-color: var(--color-border-dark);
    --divider-thickness: var(--divider-size-dark);
}

:where(.theme--light, .theme--dark) {
    font-weight: var(--fw-body);
}

:where(.theme--light, .theme--dark) :is(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--fw-heading);
}


/* ═══════════════════════════════════════════════
   DIVIDER COMPONENT
   ═══════════════════════════════════════════════ */
.c-divider {
    background: var(--border-color);
}

.c-divider--h {
    height: var(--divider-thickness);
    width: 100%;
}

.c-divider--v {
    width: var(--divider-thickness);
    height: 100%;
}


/* ═══════════════════════════════════════════════
   RESPONSIVE UTILITIES
   ═══════════════════════════════════════════════ */
@media (max-width: 670px) {
    .c-review-metric {
        flex-direction: column;
        align-items: center;
    }
}


/* ═══════════════════════════════════════════════
   GLOBAL ANIMATION VARIABLES
   ═══════════════════════════════════════════════ */
:root {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ═══════════════════════════════════════════════
   GLOBAL REDUCED MOTION
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}


/* ═══════════════════════════════════════════════
   OUTLINE FILL BUTTON (.c-btn--outline-fill)
   ═══════════════════════════════════════════════ */
.c-btn--outline-fill {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.4s var(--ease-out-expo), font-weight 0.4s var(--ease-out-expo);
}

.c-btn--outline-fill::before,
.c-btn--outline-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.c-btn--outline-fill::before {
    background: var(--c-sand);
    transform: translateX(-101%);
    transition: transform 0.65s var(--ease-out-expo);
    z-index: -1;
}

.c-btn--outline-fill::after {
    box-shadow: inset 0 0 0 0.3rem var(--c-sand);
    z-index: 0;
}

.c-btn--outline-fill .brxe-button__text,
.c-btn--outline-fill .btn-label,
.c-btn--outline-fill .brxe-button__icon,
.c-btn--outline-fill .brxe-icon,
.c-btn--outline-fill svg {
    position: relative;
    z-index: 1;
    color: inherit;
}

.c-btn--outline-fill svg {
    fill: currentColor;
    stroke: currentColor;
}

.c-btn--outline-fill:hover::before,
.c-btn--outline-fill:focus-visible::before {
    transform: translateX(0);
}

.c-btn--outline-fill:hover,
.c-btn--outline-fill:focus-visible {
    color: var(--c-ink);
    font-weight: var(--fw-400);
}


/* ═══════════════════════════════════════════════
   UNDERLINE BUTTON (.c-btn--underline)
   ═══════════════════════════════════════════════ */
.c-btn--underline {
    position: relative;
    display: inline-flex;
    padding: 0;
}

.c-btn--underline::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.15em;
    width: 65%;
    height: 0.12em;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.65s var(--ease-out-expo);
}

.c-btn--underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.4em;
    width: 85%;
    height: 0.12em;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.65s var(--ease-out-expo);
}

.c-btn--underline:hover::before,
.c-btn--underline:focus-visible::before,
.c-btn--underline:hover::after,
.c-btn--underline:focus-visible::after {
    transform: scaleX(1);
}


/* ═══════════════════════════════════════════════
   UNDERLINE SWEEP UTILITY (.u-underline-sweep)
   ═══════════════════════════════════════════════ */
.u-underline-sweep {
    position: relative;
    display: inline-block;
}

.u-underline-sweep::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.1em;
    height: 0.12em;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.65s var(--ease-out-expo);
}

.u-underline-sweep:hover::after,
.u-underline-sweep:focus-visible::after {
    transform: scaleX(1);
}


/* ═══════════════════════════════════════════════
   GSAP UNDERLINE ANIMATION (.u-link-anim)
   ═══════════════════════════════════════════════ */
.u-link-anim {
    position: relative;
    text-decoration: none;
    width: fit-content;
    display: inline-flex;
    --line-scale: 0;
}

.u-link-anim::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.1em;
    width: 100%;
    height: 0.15em;
    background-color: currentColor;
    transform: scaleX(var(--line-scale));
    transform-origin: left;
    will-change: transform;
}

/* Active page state */
.u-link-anim[aria-current="page"],
.brxe-active.u-link-anim {
    --line-scale: 1 !important;
}


/* ═══════════════════════════════════════════════
   HEADER & NAV STYLES
   ═══════════════════════════════════════════════ */

/* Frosted glass background */
.nav-bg::after {
    content: "";
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: transparent;
    inset: 0;
    mask: linear-gradient(0deg, transparent, #fff 50%);
    -webkit-mask: linear-gradient(0deg, transparent, #fff 50%);
    position: absolute;
    top: -0.5rem;
    z-index: -1;
}

/* Base state */
.site-header svg.brxe-svg polygon {
    fill: var(--c-forest);
    transition: fill 0.4s ease;
}

.site-header .brxe-heading,
.site-header .brxe-nav-nested a {
    color: var(--c-ink);
    transition: color 0.4s ease;
}

/* Scrolled / dark-section state */
.site-header.header--light svg.brxe-svg polygon {
    fill: var(--c-sand) !important;
}

.site-header.header--light .brxe-heading,
.site-header.header--light .brxe-nav-nested a {
    color: var(--c-sand) !important;
}


/* ═══════════════════════════════════════════════
   DIVIDER SLIDE-IN (CHILD LINE VERSION)
   ═══════════════════════════════════════════════ */
.u-slide-line-left .line,
.u-slide-line-left > div {
    transform-origin: left center !important;
    transform: scaleX(0) !important;
}


/* ═══════════════════════════════════════════════
   PILL HEADER — Fixed compact mobile header
   ═══════════════════════════════════════════════ */

/* Pill colour transitions for dark section inversion */
.header-logo-pill,
.header-menu-pill {
    transition: background-color 0.4s ease;
}

.header-logo-pill svg polygon,
.header-logo-pill svg path,
.header-logo-pill svg rect,
.header-logo-pill svg circle {
    transition: fill 0.4s ease;
}

.header-menu-icon {
    transition: color 0.4s ease, fill 0.4s ease;
}

.header-menu-label {
    transition: color 0.4s ease;
}

@media (max-width: 850px) {

    /* Kill frosted glass on mobile */
    .nav-bg::after {
        display: none;
    }

    /* --- Dark Section Pill Inversion --- */
    /* On dark backgrounds: pill bg → sand, icons → ink */
    .pill-header.header--light .header-logo-pill,
    .pill-header.header--light .header-menu-pill {
        background-color: var(--c-sand) !important;
    }
	
	.pill-header.header--light .header-menu-icon path,
.pill-header.header--light .header-menu-icon polygon,
.pill-header.header--light .header-menu-icon rect {
    fill: var(--c-ink) !important;
}

    .pill-header.header--light .header-logo-pill svg polygon,
    .pill-header.header--light .header-logo-pill svg path,
    .pill-header.header--light .header-logo-pill svg rect,
    .pill-header.header--light .header-logo-pill svg circle {
        fill: var(--c-ink) !important;
    }

    .pill-header.header--light .header-menu-icon {
        color: var(--c-ink) !important;
        fill: var(--c-ink) !important;
    }

    .pill-header.header--light .header-menu-label {
        color: var(--c-ink) !important;
    }
}

/* ==========================================================================
   Project Cursor Follower (Global - used on homepage carousel + projects archive)
   ========================================================================== */

.view-project-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
}

.view-project-cursor .cursor-label {
  background-color: var(--c-forest);
  color: var(--c-sand);
  padding: 6px 12px;
  border-radius: 0;
  white-space: nowrap;
  font-family: inherit;
  font-size: var(--fs-s);
  font-weight: 400;
  line-height: 1;
}

@media (hover: none) {
  .view-project-cursor { display: none !important; }
}