/*
Theme Name:   Building Ground Child
Theme URI:    https://buildingground.ca
Description:  Kadence child theme for Building Ground — the personal brand and
              forthcoming consultancy of Redjino Mompremier, M.Sc., P.Ag.
              Establishes brand color palette, typography, and base layout
              that all Elementor sections will inherit.
Author:       Redjino Mompremier
Author URI:   https://buildingground.ca
Template:     kadence
Version:      1.0.0
Text Domain:  buildingground-child
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/


/* ============================================================
   SECTION 1 — CSS CUSTOM PROPERTIES (DESIGN TOKENS)

   All brand colors and spacing values live here as variables.
   Never use raw hex codes elsewhere in this stylesheet —
   reference these variables so the palette can be updated
   in a single place.
   ============================================================ */

:root {

    /* Primary palette */
    --color-navy:          #0E2240; /* Headers, key text, primary buttons, footer */
    --color-cream:         #F4EFE6; /* Page backgrounds, hero surfaces, text on dark */
    --color-white:         #FFFFFF; /* Cards, overlays where higher contrast is needed */

    /* Secondary / accent palette — use with restraint */
    --color-gold:          #B8935A; /* Warm earthy accent: link underlines, CTA highlights */
    --color-forest:        #2D4A2B; /* Very sparse: secondary buttons, future categories */
    --color-grey:          #8A8780; /* Captions, metadata, dividers, footer secondary text */

    /* Text colors */
    --color-text-dark:     #1A1A1A; /* Body text on light backgrounds (not pure black) */
    --color-text-muted:    #5C5C5C; /* Muted / secondary copy */
    --color-text-light:    #F4EFE6; /* Body text on navy / dark backgrounds */

    /* Font families */
    --font-heading:        'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --font-body:           'Inter', 'Source Sans 3', system-ui, sans-serif;

    /* Type scale — mobile-first base values */
    --text-h1:             2.25rem;  /* 36px */
    --text-h2:             1.75rem;  /* 28px */
    --text-h3:             1.375rem; /* 22px */
    --text-body:           1.0625rem;/* 17px */
    --text-small:          0.875rem; /* 14px */

    /* Line heights */
    --lh-h1:               1.15;
    --lh-h2:               1.20;
    --lh-h3:               1.25;
    --lh-body:             1.60;
    --lh-small:            1.50;

    /* Letter spacing */
    --ls-heading:          -0.02em; /* Slight tightening for serif headings */
    --ls-body:              0em;
    --ls-label:             0.08em; /* Uppercase UI labels only */

    /* Spacing — base unit 8px = 0.5rem; all multiples of 8 */
    --space-1:              0.5rem;  /*  8px */
    --space-2:              1rem;    /* 16px */
    --space-3:              1.5rem;  /* 24px */
    --space-4:              2rem;    /* 32px */
    --space-6:              3rem;    /* 48px */
    --space-8:              4rem;    /* 64px */
    --space-10:             5rem;    /* 80px  — mobile section padding */
    --space-15:             7.5rem;  /* 120px — desktop section padding */

    /* Layout containers */
    --container-max:        75rem;   /* 1200px — full-width sections */
    --container-text:       45rem;   /* 720px  — text-heavy reading sections */
    --container-narrow:     35rem;   /* 560px  — newsletter / narrow CTAs */
    --max-line-length:      68ch;    /* ~65–75 characters; enforced on paragraphs */
}


/* ============================================================
   SECTION 2 — GLOBAL BASE STYLES

   Light-touch rules that layer on top of Kadence's own
   normalization. Do not replicate a full CSS reset here.
   ============================================================ */

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

html {
    scroll-behavior: smooth; /* Enables anchor-based smooth scrolling for section nav */
}

body {
    font-family:              var(--font-body);
    font-size:                var(--text-body);
    line-height:              var(--lh-body);
    color:                    var(--color-text-dark);
    background-color:         var(--color-cream);
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
}

/* Enforce maximum line length on all paragraph text */
p {
    max-width:        var(--max-line-length);
    margin-block-end: 1em;
}

/* Headings — serif, tightened tracking */
h1, h2, h3, h4, h5, h6 {
    font-family:      var(--font-heading);
    letter-spacing:   var(--ls-heading);
    color:            var(--color-navy);
    margin-block-end: 0.5em;
}

h1 { font-size: var(--text-h1); line-height: var(--lh-h1); font-weight: 600; }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); font-weight: 600; }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: 400; }

/* Links — gold underline as accent, never garish */
a {
    color:                    var(--color-navy);
    text-decoration:          underline;
    text-decoration-color:    var(--color-gold);
    text-underline-offset:    0.2em;
    transition:               color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover,
a:focus {
    color:                    var(--color-gold);
    text-decoration-color:    var(--color-gold);
}

/* Focus ring — visible keyboard navigation indicator (WCAG 2.1 AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:        2px solid var(--color-gold);
    outline-offset: 3px;
    border-radius:  2px;
}

small,
.text-small {
    font-size:   var(--text-small);
    line-height: var(--lh-small);
    color:       var(--color-grey);
}

blockquote {
    border-left:      3px solid var(--color-gold);
    padding-left:     var(--space-3);
    margin-inline:    0;
    font-style:       italic;
    color:            var(--color-text-muted);
}


/* ============================================================
   SECTION 3 — LAYOUT UTILITIES

   Reusable container and section classes. Kadence's own
   container handles most layout; these are available for
   custom HTML blocks and future custom page templates.
   ============================================================ */

/* Full-width wrapper with centred content */
.bg-container {
    width:          100%;
    max-width:      var(--container-max);
    margin-inline:  auto;
    padding-inline: var(--space-4);
}

.bg-container--text {
    max-width: var(--container-text);
}

.bg-container--narrow {
    max-width: var(--container-narrow);
}

/* Section base — mobile padding */
.bg-section {
    padding-block: var(--space-10);
}

.bg-section--centered {
    text-align: center;
}

/* Centre paragraph text in centered sections */
.bg-section--centered p {
    margin-inline: auto;
}


/* ============================================================
   SECTION 4 — SURFACE COLOUR MODIFIERS

   Apply to Elementor sections (or custom blocks) to set the
   correct background and automatically flip all child text
   and heading colours to match.
   ============================================================ */

/* Navy surface — used in Hero, First Series, Connect, Footer */
.bg-navy {
    background-color: var(--color-navy);
    color:            var(--color-text-light);
}

.bg-navy h1,
.bg-navy h2,
.bg-navy h3,
.bg-navy h4,
.bg-navy h5,
.bg-navy h6 {
    color: var(--color-cream);
}

.bg-navy p,
.bg-navy li {
    color: var(--color-cream);
}

.bg-navy a {
    color:                 var(--color-cream);
    text-decoration-color: var(--color-gold);
}

.bg-navy a:hover,
.bg-navy a:focus {
    color:                 var(--color-gold);
    text-decoration-color: var(--color-gold);
}

/* Cream surface — used in Channel Description, Future Series */
.bg-cream {
    background-color: var(--color-cream);
    color:            var(--color-text-dark);
}

/* White surface — used in About, Newsletter */
.bg-white {
    background-color: var(--color-white);
    color:            var(--color-text-dark);
    border-top:       1px solid var(--color-navy); /* subtle top border per spec */
}


/* ============================================================
   SECTION 5 — BUTTON STYLES

   Two variants: outlined (Hero) and primary filled (First
   Series CTA). These classes serve as reference styles and
   for any custom HTML blocks; apply them via Elementor's
   Custom CSS field on individual button widgets as needed.
   ============================================================ */

.bg-btn {
    display:          inline-block;
    font-family:      var(--font-body);
    font-size:        var(--text-small);
    font-weight:      600;
    letter-spacing:   var(--ls-label);
    text-transform:   uppercase;
    text-decoration:  none;
    padding:          0.75em 1.75em;
    border-radius:    2px;
    cursor:           pointer;
    border:           2px solid transparent;
    transition:       background-color 0.2s ease,
                      color 0.2s ease,
                      border-color 0.2s ease;
}

/* Outlined — cream border on navy background (Hero subscribe button) */
.bg-btn--outline {
    background-color: transparent;
    color:            var(--color-cream);
    border-color:     var(--color-cream);
}

.bg-btn--outline:hover,
.bg-btn--outline:focus {
    background-color: var(--color-cream);
    color:            var(--color-navy);
    text-decoration:  none;
}

/* Primary filled — gold on navy (First Series "Watch on YouTube") */
.bg-btn--primary {
    background-color: var(--color-gold);
    color:            var(--color-navy);
    border-color:     var(--color-gold);
}

.bg-btn--primary:hover,
.bg-btn--primary:focus {
    background-color: transparent;
    color:            var(--color-gold);
    border-color:     var(--color-gold);
    text-decoration:  none;
}

/* Navy filled — navy background, cream text (Newsletter subscribe) */
.bg-btn--navy {
    background-color: var(--color-navy);
    color:            var(--color-cream);
    border-color:     var(--color-navy);
}

.bg-btn--navy:hover,
.bg-btn--navy:focus {
    background-color: transparent;
    color:            var(--color-navy);
    border-color:     var(--color-navy);
    text-decoration:  none;
}


/* ============================================================
   SECTION 6 — HERO (Section 1)

   Full viewport height on desktop, minimum 80vh on mobile.
   Typography-only: no imagery. All content centred.
   ============================================================ */

.bg-hero {
    min-height:       80vh;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    text-align:       center;
    padding-block:    var(--space-10);
    padding-inline:   var(--space-4);
    background-color: var(--color-navy);
}

/* clamp() provides fluid scaling between mobile (56px) and desktop (96px) */
.bg-hero__wordmark {
    font-family:      var(--font-heading);
    font-size:        clamp(3.5rem, 10vw, 6rem);
    font-weight:      600;
    line-height:      1.05;
    letter-spacing:   var(--ls-heading);
    color:            var(--color-cream);
    margin-block-end: 0.4em;
}

.bg-hero__tagline {
    font-family:      var(--font-body);
    font-size:        clamp(1rem, 2.5vw, 1.25rem);
    font-weight:      400;
    color:            var(--color-cream);
    margin-block-end: 0.75em;
    max-width:        40ch;
}

/* Reduced-opacity cream for the descriptor sentence below the tagline */
.bg-hero__descriptor {
    font-family:      var(--font-body);
    font-size:        var(--text-small);
    color:            rgba(244, 239, 230, 0.65);
    max-width:        52ch;
    margin-inline:    auto;
    margin-block-end: 2em;
    line-height:      var(--lh-body);
}


/* ============================================================
   SECTION 7 — FUTURE SERIES CARDS (Section 5)

   Single column on mobile, three-column grid on desktop.
   Gold top border signals content category at a glance.
   ============================================================ */

.bg-series-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-4);
    margin-block-start:    var(--space-4);
}

.bg-series-card {
    padding:          var(--space-4);
    border-top:       3px solid var(--color-gold);
    background-color: var(--color-white);
}

.bg-series-card h3 {
    font-size:        var(--text-h3);
    margin-block-end: 0.5em;
}

.bg-series-card p {
    font-size:   var(--text-small);
    color:       var(--color-text-muted);
    max-width:   none; /* Cards are already width-constrained by the grid */
    margin:      0;
}


/* ============================================================
   SECTION 8 — FOOTER (Section 8)

   Three-row layout: motto, founder credit, legal links.
   Will Durant attribution is structural — it must never be
   altered to read as a direct Aristotle quote.
   ============================================================ */

.bg-footer {
    background-color: var(--color-navy);
    color:            var(--color-cream);
    padding-block:    var(--space-10);
    text-align:       center;
}

.bg-footer__motto {
    font-family:      var(--font-heading);
    font-style:       italic;
    font-size:        var(--text-body);
    color:            var(--color-cream);
    max-width:        var(--container-text);
    margin-inline:    auto;
    margin-block-end: var(--space-1);
    line-height:      var(--lh-body);
}

.bg-footer__attribution {
    font-size:        var(--text-small);
    color:            var(--color-grey);
    margin-block-end: var(--space-4);
}

.bg-footer__credit {
    font-size:        var(--text-small);
    color:            var(--color-grey);
    margin-block-end: var(--space-2);
}

.bg-footer__legal {
    font-size: 0.8125rem; /* ~13px — below the small scale */
    color:     var(--color-grey);
}

.bg-footer__legal a {
    color:                 var(--color-grey);
    text-decoration-color: transparent;
}

.bg-footer__legal a:hover,
.bg-footer__legal a:focus {
    color:                 var(--color-cream);
    text-decoration-color: var(--color-gold);
}


/* ============================================================
   SECTION 9 — KADENCE THEME OVERRIDES

   Targeted corrections for Kadence defaults that conflict
   with the Building Ground visual identity. Keep these
   surgical — add a comment for each override explaining
   which Kadence behavior is being corrected.
   ============================================================ */

/* Kadence applies a default blue link color globally — reset to navy */
.wp-site-blocks a,
.entry-content a {
    color:                 var(--color-navy);
    text-decoration-color: var(--color-gold);
}

/* Kadence adds a bottom border/shadow to the site header — remove it */
.site-header {
    box-shadow: none;
    border-bottom: none;
}

/* Kadence's default body background is white — align to brand cream */
.wp-site-blocks {
    background-color: var(--color-cream);
}

/* Kadence outputs a page title / entry-hero area at the top of every page.
   On the landing page this creates an unwanted "Home" header above the hero
   section. Hidden here; the real page title lives inside each section's own
   heading hierarchy. */
.entry-hero,
.inside-entry-hero,
.page-above-header-wrap {
    display: none !important;
}

/* Remove the top gap that Kadence adds above the content area when the
   site header is hidden. Left/right padding is preserved intentionally —
   it provides the editorial whitespace the design calls for. */
body {
    padding-top: 0 !important;
}

.content-container,
.content-wrap,
.site-main,
#primary,
.entry-content {
    padding-top: 0 !important;
    margin-top:  0 !important;
}

/* Prevent child theme link color reset from overriding button text colors.
   Buttons use cream or gold text against dark backgrounds; the broad
   .entry-content a rule would make them invisible otherwise. */
.entry-content a.bg-btn,
.wp-site-blocks a.bg-btn {
    text-decoration: none;
}


/* ============================================================
   SECTION 10 — RESPONSIVE OVERRIDES (desktop ≥ 1024px)

   Mobile-first: all rules above apply to all screen widths.
   This block upgrades typography scale, layout, and hero
   height for larger screens only.
   ============================================================ */

@media (min-width: 64em) { /* 1024px */

    /* Upgrade CSS custom properties to desktop type scale */
    :root {
        --text-h1:    3.5rem;    /* 56px */
        --text-h2:    2.5rem;    /* 40px */
        --text-h3:    1.75rem;   /* 28px */
        --text-body:  1.125rem;  /* 18px */
        --text-small: 0.9375rem; /* 15px */
    }

    /* Desktop section padding */
    .bg-section {
        padding-block: var(--space-15);
    }

    /* Hero: full viewport height on desktop */
    .bg-hero {
        min-height: 100vh;
    }

    /* Future Series: three-column grid on desktop */
    .bg-series-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ============================================================
   SECTION 11 — LANDING PAGE COMPONENT CLASSES

   Utility classes used directly in the home-page-content.html
   Custom HTML block. Keeping them here (not inline in the page)
   means WordPress KSES sanitization can never strip them —
   theme files are never touched by the editor save pipeline.

   Pattern:
     .bg           — root wrapper (font + color reset)
     .bg-sec       — section container with responsive padding
     .bg-sec--n/c/w — surface modifiers: navy / cream / white
     .bg-wrap      — inner content container (max-width variants)
     .bg-h2/h3     — headings at brand type scale
     .bg-p         — paragraph at brand type scale
     .bg-btn--out  — outlined button (Hero: cream on navy)
     .bg-btn--gold — filled gold button (Series CTA)
     .bg-cards     — three-column card grid (Coming Next)
     .bg-card      — individual card with gold top accent + hover
     .bg-links     — horizontal link row (Connect section)
     .bg-ft        — footer with motto / credit / legal rows
     .bg-nl-form   — newsletter form wrapper
   ============================================================ */

/* Root wrapper */
.bg {
    font-family: var(--font-body);
    color:       var(--color-text-dark);
}

.bg a {
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.bg a:focus-visible {
    outline:        2px solid var(--color-gold);
    outline-offset: 3px;
}

/* Hero inner text — page HTML uses short names (__mark/__tag/__desc).
   Section 6 above defines the long-name variants (__wordmark/__tagline/
   __descriptor) for theoretical Elementor use; these are the live ones. */
.bg-hero__mark {
    font-family:    var(--font-heading);
    font-size:      clamp(3.5rem, 10vw, 6.5rem);
    font-weight:    600;
    line-height:    1.05;
    letter-spacing: -0.02em;
    color:          var(--color-cream);
    margin:         0 0 0.4em;
}

.bg-hero__tag {
    font-family: var(--font-body);
    font-size:   clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 400;
    font-style:  italic;
    color:       var(--color-cream);
    margin:      0 0 0.75em;
    max-width:   40ch;
}

.bg-hero__desc {
    font-family: var(--font-body);
    font-size:   0.875rem;
    color:       rgba(244, 239, 230, 0.65);
    max-width:   52ch;
    margin:      0 auto 2em;
    line-height: 1.6;
}

/* Section container — mobile-first padding */
.bg-sec {
    padding: 5rem 2rem;
}

@media (min-width: 64em) {
    .bg-sec {
        padding: 8rem 2rem;
    }
}

/* Surface color modifiers */
.bg-sec--n {
    background: var(--color-navy);
    color:      var(--color-text-light);
}

.bg-sec--c {
    background: var(--color-cream);
    color:      var(--color-text-dark);
}

.bg-sec--w {
    background:  var(--color-white);
    color:       var(--color-text-dark);
    border-top:  1px solid var(--color-navy);
}

/* Inner content wrappers */
.bg-wrap {
    max-width: 75rem;
    margin:    0 auto;
}

.bg-wrap--t {
    max-width: 45rem;
    margin:    0 auto;
}

.bg-wrap--s {
    max-width:  35rem;
    margin:     0 auto;
    text-align: center;
}

/* Headings */
.bg-h2 {
    font-family:    var(--font-heading);
    font-size:      clamp(1.75rem, 4vw, 2.5rem);
    font-weight:    600;
    line-height:    1.15;
    letter-spacing: -0.02em;
    margin:         0 0 1.25rem;
}

.bg-h2--c { color: var(--color-cream); }
.bg-h2--n { color: var(--color-navy);  }

.bg-h3 {
    font-family:    var(--font-heading);
    font-size:      clamp(1.375rem, 2.5vw, 1.75rem);
    font-weight:    400;
    line-height:    1.25;
    letter-spacing: -0.02em;
    color:          var(--color-navy);
    margin:         0 0 0.5em;
}

/* Paragraphs */
.bg-p {
    font-family: var(--font-body);
    font-size:   clamp(1.0625rem, 1.5vw, 1.125rem);
    line-height: 1.65;
    max-width:   68ch;
    margin:      0 0 1em;
}

.bg-p--l { color: var(--color-text-light); }
.bg-p--d { color: var(--color-text-dark);  }

.bg-p:last-child { margin-bottom: 0; }

/* Buttons — landing page variants */
.bg-btn {
    display:         inline-block;
    font-family:     var(--font-body);
    font-size:       0.8125rem;
    font-weight:     600;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    text-decoration: none;
    padding:         0.75em 2em;
    border-radius:   2px;
    border:          2px solid transparent;
    cursor:          pointer;
    transition:      background-color 0.25s ease,
                     color 0.25s ease,
                     border-color 0.25s ease;
}

/* Outlined — cream border on navy (Hero subscribe) */
.bg-btn--out {
    background:   transparent;
    color:        var(--color-cream) !important;
    border-color: var(--color-cream);
}

.bg-btn--out:hover,
.bg-btn--out:focus {
    background:      var(--color-cream) !important;
    color:           var(--color-navy) !important;
    text-decoration: none;
}

/* Gold filled — gold background, navy text (Series CTA) */
.bg-btn--gold {
    background:   var(--color-gold);
    color:        var(--color-navy) !important;
    border-color: var(--color-gold);
}

.bg-btn--gold:hover,
.bg-btn--gold:focus {
    background:      transparent;
    color:           var(--color-gold) !important;
    border-color:    var(--color-gold);
    text-decoration: none;
}

/* Cards grid — Coming Next section */
.bg-cards {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   2.5rem;
    margin-top:            3rem;
}

@media (min-width: 64em) {
    .bg-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.bg-card {
    padding:    2.25rem 2rem;
    border-top: 3px solid var(--color-gold);
    background: var(--color-white);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bg-card:hover {
    transform:  translateY(-4px);
    box-shadow: 0 10px 28px rgba(14, 34, 64, 0.12);
}

.bg-card p {
    font-family: var(--font-body);
    font-size:   0.9375rem;
    line-height: 1.5;
    color:       var(--color-text-muted);
    margin:      0;
    max-width:   none;
}

/* Connect section — horizontal link row */
.bg-links {
    font-family: var(--font-body);
    font-size:   clamp(1rem, 2vw, 1.125rem);
    font-weight: 500;
    text-align:  center;
    margin:      0;
}

.bg-links a {
    color:           var(--color-cream);
    text-decoration: none;
    border-bottom:   1px solid transparent;
    padding-bottom:  2px;
    transition:      color 0.2s ease, border-color 0.2s ease;
}

.bg-links a:hover,
.bg-links a:focus {
    color:        var(--color-gold);
    border-color: var(--color-gold);
}

.bg-sep {
    color:  var(--color-grey);
    margin: 0 1em;
}

/* Newsletter form wrapper */
.bg-nl-form {
    margin-top: 1.5rem;
    text-align: left;
}

/* Footer — three rows: motto, founder credit, legal links */
.bg-ft {
    background: #091833;
    padding:    5rem 2rem;
    text-align: center;
}

@media (min-width: 64em) {
    .bg-ft {
        padding: 8rem 2rem;
    }
}

.bg-ft__q {
    font-family: var(--font-heading);
    font-style:  italic;
    font-size:   clamp(1.125rem, 1.5vw, 1.25rem);
    color:       var(--color-cream);
    max-width:   45rem;
    margin:      0 auto 0.5em;
    line-height: 1.65;
}

.bg-ft__at {
    font-size:     0.875rem;
    color:         var(--color-grey);
    margin:        0 auto 2.5rem;
    text-align:    center;
    max-width:     none;
}

.bg-ft__cr {
    font-size:     0.875rem;
    color:         var(--color-grey);
    margin:        0 auto 1.5rem;
    text-align:    center;
    max-width:     none;
    line-height:   1.7;
}

.bg-ft__lg {
    font-size:  0.8125rem;
    color:      var(--color-grey);
    margin:     0 auto;
    text-align: center;
    max-width:  none;
}

.bg-ft__lg a {
    color:           var(--color-grey) !important;
    text-decoration: none;
}

.bg-ft__lg a:hover,
.bg-ft__lg a:focus {
    color: var(--color-cream) !important;
}