/*
Theme Name: WPSH Child
Template: generatepress
Author: WPSiteHelper
Author URI: https://www.wpsitehelper.com
Description: Description: This is a child theme of the GeneratePress framework, customized for [client organization name] by WPSiteHelper.
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.1.1781229911
Updated: 2026-06-11 21:05:11

*/

/*
|| CSS Architecture

B.E.M. Naming System [block__element--modifier]: (ex. .footer__cta-button, .footer__cta-button--outline )
     > Block = stand-alone, reusable component: .container-hero, .card-product
     > Element = child of block, parent block referenced in name: .container-hero__tagline, .card-product__title
     > Modifier = variation/state of block or element: .card-product--featured, .card-product__title--highlighted

Misc
     > Utility Classes = .u-bg-primary, .u-text-center (each should have only ONE job)
     > State Classes = prefixed with .is- and .has- (scoped to component or sub-element, never global)

Guidelines:
     * Limit nesting to 1 level. (.card-product__title OK, .card-product__form__label NOT OK)
     * Separate content patterns from display patterns
     * Avoid location dependent styles; use classes instead
     * Grids control width, content controls height
     * Separate spacing system from components
     * If block margins must be set, use margin-bottom (single-direction) only
     * Color notation: use modern syntax rgb(31 41 59 / 0.26), not legacy rgba()
     * Write media queries smallest to largest
*/


/*
|| CSS Organization

1. ROOT SELECTORS
     Layer 1 - Scale primitives: spacing and typography clamp() scales
     Layer 2 - Role primitives: brand color aliases and derived shade scales
     Layer 3 - Semantic tokens: purpose-named tokens referencing Layer 2
     Layer 4 - Component tokens: component-specific tokens referencing Layer 3
2. THEME
     Typography
     General / Body
     Header
     Navigation
     Sidebar
     Footer
     Buttons
     GP Overrides
3. CUSTOM CLASSES
     Pages
     Layouts
     Components
4. UTILITIES
*/



/*-------------------------------*\
|| 1. ROOT SELECTORS
\*-------------------------------*/

:root {

    /*
     * ── LAYER 1: SCALE PRIMITIVES ──────────────────────────────────────────────
     *
     * These are raw scale values. They describe position on a scale,
     * not purpose. Do not reference these directly in components —
     * reference Layer 3 semantic tokens instead.
     *
     * Note: Core Framework generates and owns these tokens when active.
     * In CF-free builds, use Utopia.fyi to generate and paste here.
     */

    /* Spacing scale */
    /* https://utopia.fyi/space/calculator/?c=360,16,1.2,1280,32,1.25,5,2 */
    --space-2xs: clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem);
    --space-xs:  clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem);
    --space-s:   clamp(1rem, 0.6087rem + 1.7391vw, 2rem);
    --space-m:   clamp(1.5rem, 0.913rem + 2.6087vw, 3rem);
    --space-l:   clamp(2rem, 1.2174rem + 3.4783vw, 4rem);
    --space-xl:  clamp(3rem, 1.8261rem + 5.2174vw, 6rem);
    --space-2xl: clamp(4rem, 2.4348rem + 6.9565vw, 8rem);
    --space-3xl: clamp(6rem, 3.6522rem + 10.4348vw, 12rem);

    /* Typography scale */
    /* https://utopia.fyi/type/calculator/?c=360,16,1.125,1280,20,1.25,5,2 */
    --font-size-xs:  clamp(0.7901rem, 0.7863rem + 0.0172vw, 0.8rem);    /* 12.6 → 12.8px */
    --font-size-s:   clamp(0.8889rem, 0.8454rem + 0.1932vw, 1rem);      /* 14.2 → 16px */
    --font-size-m:   clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem);        /* 16 → 20px — body text */
    --font-size-l:   clamp(1.125rem, 0.9538rem + 0.7609vw, 1.5625rem);  /* 18 → 25px */
    --font-size-xl:  clamp(1.2656rem, 0.9966rem + 1.1957vw, 1.9531rem); /* 20.25 → 31.25px */
    --font-size-2xl: clamp(1.4238rem, 1.0256rem + 1.7697vw, 2.4414rem); /* 22.78 → 39.06px */
    --font-size-3xl: clamp(1.6018rem, 1.0344rem + 2.5217vw, 3.0518rem); /* 25.63 → 48.83px */
    --font-size-4xl: clamp(1.802rem, 1.0145rem + 3.5003vw, 3.8147rem);  /* 28.83 → 61.04px */

    /* Typography config */
    font-size: 100%;
    --text-line-height:    1.5;
    --heading-line-height: 1.2;
    --heading-font-weight: 400;



    /*
     * ── LAYER 2: ROLE PRIMITIVES / BRAND ALIASES ───────────────────────────────
     *
     * Set --color-primary, --color-secondary, and optionally --color-tertiary
     * per project. All shade variants are auto-derived via oklch relative syntax.
     * Surface scale is neutral by default; override --color-surface-050 to tint.
     *
     * Set these values per project — everything else cascades automatically.
     */

    /* Brand colors — SET THESE PER PROJECT */
    /* --color-primary:   oklch(0.45 0.18 260); */
    /* --color-secondary: oklch(0.55 0.16 160); */
    /* --color-tertiary:  oklch(0.60 0.14 40);  */

    /*
     * Fixed-lightness scale — positions on an absolute lightness axis.
     * Use for palette display, background fills, and large surface areas.
     * Do NOT use directly for interactive states (hover, focus, active) —
     * use the relative nudge variants below for those instead.
     */

    /* Primary — fixed scale */
    --color-primary-ultra-light: oklch(from var(--color-primary) 0.95 c h);
    --color-primary-light:       oklch(from var(--color-primary) 0.85 c h);
    --color-primary-semi-light:  oklch(from var(--color-primary) 0.65 c h);
    --color-primary-semi-dark:   oklch(from var(--color-primary) 0.35 c h);
    --color-primary-dark:        oklch(from var(--color-primary) 0.25 c h);
    --color-primary-ultra-dark:  oklch(from var(--color-primary) 0.10 c h);

    /*
     * Relative nudge variants — proportional steps from the source lightness.
     * Use for interactive states (hover, focus, active) where the step should
     * feel consistent regardless of how light or dark the source color is.
     * Note: very light source colors (L > 0.87) may clamp to white on *-lighter-2x.
     * Very dark source colors (L < 0.18) may produce near-black on *-darker-2x.
     * These are implementation details — reference via Layer 3 semantic tokens,
     * not directly in component classes.
     */

    /* Primary — relative nudge */
    --color-primary-lighter:    oklch(from var(--color-primary) calc(l * 1.15) c h);
    --color-primary-lighter-2x: oklch(from var(--color-primary) calc(l * 1.30) c h);
    --color-primary-darker:     oklch(from var(--color-primary) calc(l / 1.15) c h);
    --color-primary-darker-2x:  oklch(from var(--color-primary) calc(l / 1.30) c h);

    /* Secondary — fixed scale */
    --color-secondary-ultra-light: oklch(from var(--color-secondary) 0.95 c h);
    --color-secondary-light:       oklch(from var(--color-secondary) 0.85 c h);
    --color-secondary-semi-light:  oklch(from var(--color-secondary) 0.65 c h);
    --color-secondary-semi-dark:   oklch(from var(--color-secondary) 0.35 c h);
    --color-secondary-dark:        oklch(from var(--color-secondary) 0.25 c h);
    --color-secondary-ultra-dark:  oklch(from var(--color-secondary) 0.10 c h);

    /* Secondary — relative nudge */
    --color-secondary-lighter:    oklch(from var(--color-secondary) calc(l * 1.15) c h);
    --color-secondary-lighter-2x: oklch(from var(--color-secondary) calc(l * 1.30) c h);
    --color-secondary-darker:     oklch(from var(--color-secondary) calc(l / 1.15) c h);
    --color-secondary-darker-2x:  oklch(from var(--color-secondary) calc(l / 1.30) c h);

    /* Tertiary — fixed scale and relative nudge (uncomment if project uses tertiary) */
    /*
    --color-tertiary-ultra-light: oklch(from var(--color-tertiary) 0.95 c h);
    --color-tertiary-light:       oklch(from var(--color-tertiary) 0.85 c h);
    --color-tertiary-semi-light:  oklch(from var(--color-tertiary) 0.65 c h);
    --color-tertiary-semi-dark:   oklch(from var(--color-tertiary) 0.35 c h);
    --color-tertiary-dark:        oklch(from var(--color-tertiary) 0.25 c h);
    --color-tertiary-ultra-dark:  oklch(from var(--color-tertiary) 0.10 c h);

    --color-tertiary-lighter:    oklch(from var(--color-tertiary) calc(l * 1.15) c h);
    --color-tertiary-lighter-2x: oklch(from var(--color-tertiary) calc(l * 1.30) c h);
    --color-tertiary-darker:     oklch(from var(--color-tertiary) calc(l / 1.15) c h);
    --color-tertiary-darker-2x:  oklch(from var(--color-tertiary) calc(l / 1.30) c h);
    */

    /* Surface scale — neutral gray by default, auto-derived from base */
    /* Override --color-surface-050 with a tinted value to add warmth or cool */
    --color-surface-050: oklch(0.985 0 0);
    --color-surface-100: oklch(from var(--color-surface-050) 0.970 c h);
    --color-surface-200: oklch(from var(--color-surface-050) 0.922 c h);
    --color-surface-300: oklch(from var(--color-surface-050) 0.870 c h);
    --color-surface-400: oklch(from var(--color-surface-050) 0.708 c h);
    --color-surface-500: oklch(from var(--color-surface-050) 0.556 c h);
    --color-surface-600: oklch(from var(--color-surface-050) 0.439 c h);
    --color-surface-700: oklch(from var(--color-surface-050) 0.371 c h);
    --color-surface-800: oklch(from var(--color-surface-050) 0.269 c h);
    --color-surface-900: oklch(from var(--color-surface-050) 0.205 c h);
    --color-surface-950: oklch(from var(--color-surface-050) 0.145 c h);



    /*
     * ── LAYER 3: SEMANTIC TOKENS ────────────────────────────────────────────────
     *
     * These tokens carry purpose. They describe WHAT a color or spacing value
     * is FOR, not what it IS. Components reference these, never Layer 1 or 2
     * directly. Changing a semantic token updates every component that uses it.
     *
     * Override these per project if the brand requires different mappings.
     */

    /* -- Color: text -- */
    --color-text:         var(--color-surface-950);
    --color-text-muted:   var(--color-surface-600);
    --color-text-inverse: var(--color-surface-050);
    --color-heading:      var(--color-surface-950);

    /* -- Color: backgrounds -- */
    --color-bg-body:     var(--color-surface-050);
    --color-bg-surface:  var(--color-surface-100);
    --color-bg-elevated: var(--color-surface-200);

    /* -- Color: interactive / action -- */
    /*
     * Hover and focus states use relative nudge variants (--color-primary-darker)
     * rather than fixed scale variants (--color-primary-dark) so the step feels
     * proportional regardless of source lightness.
     */
    --color-action:                  var(--color-primary);
    --color-action-hover:            var(--color-primary-darker);
    --color-action-focus:            var(--color-primary-darker-2x);
    --color-action-text:             var(--color-surface-050);
    --color-action-secondary:        var(--color-secondary);
    --color-action-secondary-hover:  var(--color-secondary-darker);
    --color-action-secondary-focus:  var(--color-secondary-darker-2x);

    /* -- Color: borders -- */
    --color-border:       var(--color-surface-300);
    --color-border-focus: var(--color-primary);

    /* -- Color: semantic states -- */
    /* Uncomment and set values per project */
    /*
    --color-success: oklch(0.72 0.195 148);
    --color-warning: oklch(0.82 0.18 85);
    --color-error:   oklch(0.65 0.22 25);
    --color-info:    oklch(0.65 0.15 240);
    */

    /* -- Spacing: sections -- */
    --spacing-section-inline:   var(--space-xl);  /* universal inline padding — same on all sections */
    --spacing-section-block:    var(--space-xl);  /* default section vertical padding */
    --spacing-section-block-s:  var(--space-m);   /* compact: footers, tight content blocks */
    --spacing-section-block-l:  var(--space-2xl); /* generous: hero, feature, CTA sections */

    /* -- Spacing: layout -- */
    --spacing-grid-gap:    var(--space-m);
    --spacing-content-gap: var(--space-s);

    /* -- Spacing: components -- */
    --spacing-card:      var(--space-s);
    --spacing-component: var(--space-s);



    /*
     * ── LAYER 4: COMPONENT TOKENS ───────────────────────────────────────────────
     *
     * These are specific to individual components. They reference Layer 3
     * semantic tokens wherever color is involved. Padding uses em so it scales
     * with the component's own font size rather than the root.
     *
     * Two sizes: default and large.
     * Four style variations: primary, secondary, outline-primary, outline-secondary.
     */

    /* -- Button: structure -- */
    --button-border-radius:    0.5rem;
    --button-border-width:     2px;
    --button-font-weight:      700;

    /* Default size */
    --button-padding-block:    0.75em;
    --button-padding-inline:   1.5em;

    /* Large size */
    --button-padding-block-l:  1em;
    --button-padding-inline-l: 2em;

    /* -- Button: primary -- */
    --button-primary-bg:           var(--color-action);
    --button-primary-bg-hover:     var(--color-action-hover);
    --button-primary-text:         var(--color-action-text);
    --button-primary-text-hover:   var(--color-action-text);
    --button-primary-border:       var(--color-action);
    --button-primary-border-hover: var(--color-action-hover);

    /* -- Button: secondary -- */
    --button-secondary-bg:           var(--color-action-secondary);
    --button-secondary-bg-hover:     var(--color-action-secondary-hover);
    --button-secondary-text:         var(--color-action-text);
    --button-secondary-text-hover:   var(--color-action-text);
    --button-secondary-border:       var(--color-action-secondary);
    --button-secondary-border-hover: var(--color-action-secondary-hover);

    /* -- Button: outline primary -- */
    /* On hover: fills with action color, text inverts to action-text */
    --button-outline-primary-bg:           transparent;
    --button-outline-primary-bg-hover:     var(--color-action);
    --button-outline-primary-text:         var(--color-action);
    --button-outline-primary-text-hover:   var(--color-action-text);
    --button-outline-primary-border:       var(--color-action);
    --button-outline-primary-border-hover: var(--color-action-hover);

    /* -- Button: outline secondary -- */
    /* On hover: fills with secondary action color, text inverts */
    --button-outline-secondary-bg:           transparent;
    --button-outline-secondary-bg-hover:     var(--color-action-secondary);
    --button-outline-secondary-text:         var(--color-action-secondary);
    --button-outline-secondary-text-hover:   var(--color-action-text);
    --button-outline-secondary-border:       var(--color-action-secondary);
    --button-outline-secondary-border-hover: var(--color-action-secondary-hover);

    /* -- Container widths -- */
    --container-width-m:   var(--gb-container-width, 1300px);
    --container-width-l:   calc(var(--container-width-m) * 1.125);
    --container-width-xl:  calc(var(--container-width-m) * 1.25);
    --container-width-2xl: calc(var(--container-width-m) * 1.375);
    --container-width-3xl: calc(var(--container-width-m) * 1.5);
    --container-width-4xl: calc(var(--container-width-m) * 1.625);
    --container-width-5xl: calc(var(--container-width-m) * 1.75);

}



/*=======================================================================*\
 *
 *  GENERATEBLOCKS COMPONENT CLASS REFERENCE
 *  ─────────────────────────────────────────────────────────────────────
 *  These classes are defined and managed in GB > Global Styles > Classes
 *  or imported via GB JSON. They are documented here so team members
 *  understand the full token chain in one place, and so classes can be rebuilt 
 * if they are somehow deleted in the GB interface.
 *
 *  Token chain:
 *  Layer 1 (scale primitives)
 *    Layer 2 (role primitives / brand aliases)
 *      Layer 3 (semantic tokens)
 *        Layer 4 (component tokens)
 *          GB component classes  <-- YOU ARE HERE
 *
 *  Rules:
 *  - Reference Layer 4 component tokens or Layer 3 semantic tokens only
 *  - Never reference Layer 1 or Layer 2 directly in a component class
 *  - Never hardcode color values or spacing values
 *  - Use em for padding inside components (scales with component font size)
 *  - Use rem for layout-level spacing (anchored to root)
 *
 *  How to add a new class:
 *  1. Define a Layer 4 component token in :root if needed
 *  2. Create the class in GB > Global Styles > Classes
 *  3. Reference Layer 3 or Layer 4 tokens only
 *  4. Document it here following the patterns below
 *
 *
 *  ── BUTTONS ─────────────────────────────────────────────────────────
 *
 *  GP default uses static px values and hardcoded hex.
 *  Our version uses component tokens throughout.
 *  display:inline-flex is set globally on all button-like elements
 *  in the base button rule in Section 2, so it is not repeated here.
 *
 *
 *  .gbp-button--primary
 *  Solid fill, primary brand color. Default interactive button.
 *
 *  .gbp-button--primary {
 *      font-size: var(--font-size-m);
 *      padding-block: var(--button-padding-block);
 *      padding-inline: var(--button-padding-inline);
 *      border-width: var(--button-border-width);
 *      border-style: solid;
 *      border-radius: var(--button-border-radius);
 *      background-color: var(--button-primary-bg);
 *      color: var(--button-primary-text);
 *      border-color: var(--button-primary-border);
 *  }
 *  .gbp-button--primary:hover {
 *      background-color: var(--button-primary-bg-hover);
 *      color: var(--button-primary-text-hover);
 *      border-color: var(--button-primary-border-hover);
 *  }
 *
 *
 *  .gbp-button--secondary
 *  Solid fill, secondary brand color. Used for supporting CTAs.
 *
 *  .gbp-button--secondary {
 *      font-size: var(--font-size-m);
 *      padding-block: var(--button-padding-block);
 *      padding-inline: var(--button-padding-inline);
 *      border-width: var(--button-border-width);
 *      border-style: solid;
 *      border-radius: var(--button-border-radius);
 *      background-color: var(--button-secondary-bg);
 *      color: var(--button-secondary-text);
 *      border-color: var(--button-secondary-border);
 *  }
 *  .gbp-button--secondary:hover {
 *      background-color: var(--button-secondary-bg-hover);
 *      color: var(--button-secondary-text-hover);
 *      border-color: var(--button-secondary-border-hover);
 *  }
 *
 *
 *  Additional button modifiers (see Section 2 for full rules):
 *  .gbp-button--outline-primary     Transparent bg, primary border + text
 *  .gbp-button--outline-secondary   Transparent bg, secondary border + text
 *  .gbp-button--l                   Large size via --button-padding-*-l tokens
 *
 *
 *  ── SECTIONS ────────────────────────────────────────────────────────
 *
 *  GP default uses static 7rem / 40px values with media query overrides.
 *  Our version uses fluid semantic tokens — no media queries needed.
 *  The fluid clamp() values in the spacing scale already handle the
 *  range from mobile to desktop.
 *
 *
 *  .gbp-section
 *  Outer section wrapper. Sets fluid block and inline padding.
 *  Apply to the outermost GB Container of a full-width section.
 *
 *  .gbp-section {
 *      padding-block: var(--spacing-section-block);
 *      padding-inline: var(--spacing-section-inline);
 *  }
 *
 *  Size modifiers:
 *  .gbp-section--s { padding-block: var(--spacing-section-block-s); }
 *  .gbp-section--l { padding-block: var(--spacing-section-block-l); }
 *
 *
 *  .gbp-section__inner
 *  Content width constrainer inside a section. Centers content,
 *  sets max-width, and positions above any background layers.
 *  GP default uses var(--gb-container-width) directly.
 *  We reference --container-width-m for consistency with our scale.
 *
 *  .gbp-section__inner {
 *      margin-inline: auto;
 *      max-width: var(--container-width-m);
 *      position: relative;
 *      z-index: 1;
 *  }
 *
 *
 *  .gbp-section__tagline
 *  Small label above the headline. Typically uppercase or weighted text
 *  that signals the section topic before the main heading.
 *  GP default: 1rem, font-weight 600, margin-bottom 0.75rem.
 *  Our version: uses font-size-s (slightly smaller than body) and
 *  color-text-muted to visually subordinate it to the headline.
 *
 *  .gbp-section__tagline {
 *      font-size: var(--font-size-s);
 *      font-weight: 600;
 *      color: var(--color-text-muted);
 *      margin-bottom: var(--spacing-component);
 *      text-transform: uppercase;
 *      letter-spacing: 0.06em;
 *  }
 *
 *
 *  .gbp-section__headline
 *  Primary heading of a section. GP default adds only margin-bottom.
 *  We inherit font-size from the heading element itself (h1-h4 rules
 *  in Section 2) and only control the bottom margin here.
 *
 *  .gbp-section__headline {
 *      margin-bottom: var(--spacing-component);
 *  }
 *
 *
 *  .gbp-section__text
 *  Introductory body text below the headline. GP default: 1.125rem.
 *  Our version: uses font-size-l, one step above body, to give the
 *  intro text presence without reaching headline scale.
 *
 *  .gbp-section__text {
 *      font-size: var(--font-size-l);
 *      color: var(--color-text);
 *      max-width: 65ch;
 *  }
 *
 *
 *  ── CARDS ───────────────────────────────────────────────────────────
 *
 *  GP default uses static rem values. Our version uses component tokens
 *  and fluid font-size scale. Cards use em-based padding so they scale
 *  with the card's own font size if it is overridden.
 *
 *
 *  .gbp-card
 *  Card container. Sets internal padding and surface background.
 *  Apply to the GB Container that wraps card content.
 *
 *  .gbp-card {
 *      padding: var(--spacing-card);
 *      background-color: var(--color-bg-surface);
 *  }
 *
 *
 *  .gbp-card__title
 *  Card heading. GP default: 1.25rem. Our version: font-size-l for
 *  slightly more presence, with heading color for visual hierarchy.
 *
 *  .gbp-card__title {
 *      font-size: var(--font-size-l);
 *      color: var(--color-heading);
 *      margin-bottom: 0.5em;
 *  }
 *
 *
 *  .gbp-card__text
 *  Card body text. GP default removes margin-bottom entirely.
 *  Our version matches body text size and removes bottom margin
 *  so the card padding handles all internal spacing.
 *
 *  .gbp-card__text {
 *      font-size: var(--font-size-m);
 *      color: var(--color-text);
 *      margin-bottom: 0;
 *  }
 *
 *
 *  .gbp-card__meta-text
 *  Small secondary text: dates, categories, author names.
 *  GP default: 0.875rem. Our version: font-size-xs for clear
 *  subordination, muted color to reduce visual weight.
 *
 *  .gbp-card__meta-text {
 *      font-size: var(--font-size-xs);
 *      color: var(--color-text-muted);
 *      margin-bottom: 0.5em;
 *  }
 *
 *
 *  .gbp-card--border
 *  Modifier that adds a visible border to a card. Applied alongside
 *  .gbp-card. GP default: 1px solid #000000.
 *  Our version: references the semantic border token.
 *
 *  .gbp-card--border {
 *      border: 1px solid var(--color-border);
 *      border-radius: var(--button-border-radius);
 *  }
 *
 *
 *  ── FOOTER ──────────────────────────────────────────────────────────
 *
 *  GP default uses static rem and px values with media query overrides.
 *  Our version uses fluid semantic tokens. The footer typically sits
 *  on a dark background — ensure color tokens resolve correctly when
 *  a dark background class is applied to the parent section.
 *
 *
 *  .gbp-footer
 *  Footer section outer wrapper. Sets fluid padding and base font size.
 *  GP default: 5rem / 40px with media query overrides.
 *
 *  .gbp-footer {
 *      padding-block: var(--spacing-section-block);
 *      padding-inline: var(--spacing-section-inline);
 *      font-size: var(--font-size-s);
 *  }
 *  .gbp-footer a {
 *      font-size: var(--font-size-s);
 *  }
 *
 *
 *  .gbp-footer__title
 *  Footer column heading. GP default: 1rem, weight 700, margin-bottom 1rem.
 *  Our version: font-size-m keeps it readable at the footer's smaller
 *  base size, heading color for visual hierarchy.
 *
 *  .gbp-footer__title {
 *      font-size: var(--font-size-m);
 *      font-weight: 700;
 *      color: var(--color-text-inverse);
 *      margin-bottom: var(--spacing-component);
 *  }
 *
 *
 *  .gbp-footer__link
 *  Individual footer nav link. GP default: display:block with
 *  top/bottom padding for comfortable tap target.
 *  Our version keeps the same pattern using component spacing.
 *
 *  .gbp-footer__link {
 *      display: block;
 *      padding-block: 0.375em;
 *      color: var(--color-text-inverse);
 *  }
 *  .gbp-footer__link:hover {
 *      color: var(--color-text);
 *  }
 *
 *
 *  ── OVERLAY / POP-UP ────────────────────────────────────────────────
 *
 *  GP default uses hardcoded white and rgba shadow values.
 *  Our version maps to semantic surface tokens.
 *  Note: overlay panels typically require z-index management in
 *  the context of your specific GP/GB header setup.
 *
 *
 *  .gbp-overlay-panel
 *  The modal/popup container surface. GP default: white background
 *  with a two-layer box shadow for depth.
 *
 *  .gbp-overlay-panel {
 *      background-color: var(--color-bg-elevated);
 *      box-shadow:
 *          0 2px 4px rgb(0 0 0 / 0.06),
 *          0 8px 16px rgb(0 0 0 / 0.10);
 *      border-radius: var(--button-border-radius);
 *  }
 *
 *
 *  .gbp-overlay-panel__close
 *  The close button inside an overlay panel. GP default uses
 *  var(--base-3) — an ACSS variable. Our version uses surface tokens.
 *  The SVG icon inherits color via currentColor.
 *
 *  .gbp-overlay-panel__close {
 *      display: inline-flex;
 *      align-items: center;
 *      column-gap: 0.5em;
 *      padding: 0.5em;
 *      background-color: var(--color-bg-surface);
 *      color: var(--color-text);
 *      border-radius: var(--button-border-radius);
 *  }
 *  .gbp-overlay-panel__close:is(:hover, :focus) {
 *      background-color: var(--color-action);
 *      color: var(--color-action-text);
 *  }
 *  .gbp-overlay-panel__close .gb-shape svg {
 *      width: 1em;
 *      height: 1em;
 *      fill: currentColor;
 *  }
 *
\*=======================================================================*/

/*-------------------------------------*\
 * || #2. THEME
 * Typography, Colors, Header,
 * Navigation, Footer, Overrides
\*-------------------------------------*/

/* -- Typography ----------------------------------------- */

:is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-heading);
    font-weight: var(--heading-font-weight);
}

:is(h1) { font-size: var(--font-size-2xl); line-height: 1.5em; margin-bottom: 0.50em; }
:is(h2) { font-size: var(--font-size-xl);  line-height: 1.5em; margin-bottom: 0.55em; }
:is(h3) { font-size: var(--font-size-l);   line-height: 1.5em; margin-bottom: 0.60em; }
:is(h4) { font-size: var(--font-size-m);   line-height: 1.7em; margin-bottom: 0.65em; }
:is(h5) { font-size: clamp(0.75rem, var(--font-size-s), 1.5rem); line-height: 1.7em; margin-bottom: 0.70em; }
:is(h6) { font-size: clamp(0.75rem, var(--font-size-xs), 1.5rem); line-height: 1.7em; margin-bottom: 0.75em; }

:is(p) {
    font-size: var(--font-size-m);
    line-height: 1.7em;
    margin-bottom: 1.25em;
    color: var(--color-text);
}

p, blockquote, li, .text-pretty {
    text-wrap-style: pretty;
}

p:last-child:last-of-type {
    margin-block-end: 0;
}

::selection {
    background: var(--color-action);
    color: var(--color-action-text);
}


/* -- General / Body ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

html {
    min-height: 100%;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--color-text);
    background-color: var(--color-bg-body);
}

.site.grid-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
}

body, button, input, select, textarea {
    font-size: var(--font-size-m, inherit);
    min-height: 0vw; /* Safari fix */
}


/* -- Sidebars ------------------------------------------- */



/* -- Footer --------------------------------------------- */



/* -- Buttons -------------------------------------------- */
/*
 * Note: do NOT set a color in GP Global Colors for Content > Link
 * or it will overwrite button text color on gb-button elements.
 */

:is(
    button,
    a.button,
    input[type=button],
    input[type=reset],
    input[type=submit],
    .fluentform .frm-fluent-form .ff-btn,
    [class*="btn--"],
    [class*="button--"],
    .gb-button[class*="button--"],
    [class*="gbp-button--"],
    [class*="gb-button--"]
) {
    width: fit-content;
    padding-block: var(--button-padding-block);
    padding-inline: var(--button-padding-inline);
    border-radius: var(--button-border-radius);
    border-width: var(--button-border-width);
    border-style: solid;
    font-weight: var(--button-font-weight);
    line-height: var(--heading-line-height);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    &:hover {
        transition: all 0.3s ease-out;
        text-decoration: none;
    }
}

/* Size: large */
:is(
    [class*="button--l"],
    [class*="gbp-button--l"],
    [class*="gb-button--l"]
) {
    padding-block: var(--button-padding-block-l);
    padding-inline: var(--button-padding-inline-l);
}

/* Style: primary */
.gbp-button--primary,
.gb-button--primary,
.button--primary {
    background-color: var(--button-primary-bg);
    color:            var(--button-primary-text);
    border-color:     var(--button-primary-border);

    &:hover {
        background-color: var(--button-primary-bg-hover);
        color:            var(--button-primary-text-hover);
        border-color:     var(--button-primary-border-hover);
    }
}

/* Style: secondary */
.gbp-button--secondary,
.gb-button--secondary,
.button--secondary {
    background-color: var(--button-secondary-bg);
    color:            var(--button-secondary-text);
    border-color:     var(--button-secondary-border);

    &:hover {
        background-color: var(--button-secondary-bg-hover);
        color:            var(--button-secondary-text-hover);
        border-color:     var(--button-secondary-border-hover);
    }
}

/* Style: outline primary */
.gbp-button--outline-primary,
.gb-button--outline-primary,
.button--outline-primary {
    background-color: var(--button-outline-primary-bg);
    color:            var(--button-outline-primary-text);
    border-color:     var(--button-outline-primary-border);

    &:hover {
        background-color: var(--button-outline-primary-bg-hover);
        color:            var(--button-outline-primary-text-hover);
        border-color:     var(--button-outline-primary-border-hover);
    }
}

/* Style: outline secondary */
.gbp-button--outline-secondary,
.gb-button--outline-secondary,
.button--outline-secondary {
    background-color: var(--button-outline-secondary-bg);
    color:            var(--button-outline-secondary-text);
    border-color:     var(--button-outline-secondary-border);

    &:hover {
        background-color: var(--button-outline-secondary-bg-hover);
        color:            var(--button-outline-secondary-text-hover);
        border-color:     var(--button-outline-secondary-border-hover);
    }
}


/* -- GP Section / gbp-section component classes --------- */

.gbp-section,
.gb-section {
    padding-block:  var(--spacing-section-block);
    padding-inline: var(--spacing-section-inline);
}

.gbp-section--s,
.gb-section--s {
    padding-block: var(--spacing-section-block-s);
}

.gbp-section--l,
.gb-section--l {
    padding-block: var(--spacing-section-block-l);
}


/* -- GP Overrides --------------------------------------- */
/*
 * GP Customizer only accepts static px values.
 * These rules replace GP defaults with fluid variable-based values.
 * Replace any remaining --space-* references with semantic equivalents
 * as the token system matures.
 */

.site-header {
    padding-inline: var(--spacing-section-inline);

    & .inside-header {
        padding-block: var(--space-2xs);
        padding-inline: 0;
    }
}

.one-container .site-content {
    padding: var(--spacing-section-block) var(--spacing-section-inline);
}

.site-footer {
    & .site-info {
        padding-block:  var(--spacing-section-block-s);
        padding-inline: var(--spacing-section-inline);

        & .inside-site-info {
            padding-inline: 0;
        }
    }
}



/*---------------------------------------*\
  #3. CUSTOM CLASSES
      Pages, Layouts, Components
\*---------------------------------------*/

/* -- Grid Layouts -- */
.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-grid-gap);
}


/* -- Forms -- */

/* Avoid form input padding impeding text */
select.ff-el-form-control:not([size]):not([multiple]) {
    height: auto;
}

/* Success / Warning messages */
.fluentform .ff-message-success {
    border-left: 0.5em solid var(--color-success, green);
}
.fluentform .ff-message-warning {
    border-left: 0.5em solid var(--color-warning, red);
}



/*-----------------------------------------*\
 * || 4. UTILITY CLASSES
\*-----------------------------------------*/

.transition {
    transition: all 0.25s ease-in-out;
}

.alignfull {
    /* ref: https://generatepress.com/forums/topic/styling-for-gutenberg-alignfull-and-alignwide/ */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    text-align: center;
}
.alignfull img {
    width: 100%;
}

.text-wrap-balance  { text-wrap-style: balance; }
.text-pretty        { text-wrap-style: pretty; }
.place-content-center { place-content: center; }

.no-underline,
.no-underline a {
    text-decoration: none;
}

/* Content visibility — HTML lazy loading for long pages */
/* See: https://kinsta.com/blog/css-tips-wordpress/#5-improve-performance-on-long-pages-with-contentvisibility */
.article-card {
    content-visibility: auto;
    contain-intrinsic-size: 400px;
}

.hidden {
    display: none !important;
}

.visually-hidden:not(:focus):not(:active),
.screen-reader-only {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(0 0 99.9% 99.9%);
    clip-path: inset(0 0 99.9% 99.9%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    border: 0;
}

/* Aspect ratios */
[class^="aspect-ratio-"],
[class*=" aspect-ratio-"] {
    object-fit: cover;
}
.aspect-ratio-16-9 { aspect-ratio: 16 / 9; }
.aspect-ratio-9-16 { aspect-ratio: 9 / 16; }
.aspect-ratio-4-3  { aspect-ratio: 4 / 3;  }
.aspect-ratio-1-1  { aspect-ratio: 1 / 1;  }

/* Accessible clickable card pattern
 * Apply .position-relative to the card parent
 * and .make-parent-clickable to the anchor inside */
.position-relative:has(.make-parent-clickable) {
    position: relative;
}
a.make-parent-clickable::before,
.make-parent-clickable a::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* Accessibility: focus styles */
:where(.wp-site-blocks *:focus) {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-border-focus);
}

/* Troubleshooting: uncomment to debug missing alt tags */
/* img:not([alt]) { border: 1rem solid red; } */



/*
 * ── DEV: Color Palette Preview Page ──────────────────────────────────────────
 * Used on the internal /dev/colors page to preview the full token system.
 * Not needed in production builds.
 */
.palette-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    padding: var(--spacing-section-block) var(--spacing-section-inline);
    row-gap: var(--spacing-grid-gap);
}
.palette-grid > div {
    aspect-ratio: 1 / 1;
    width: 100%;
}
.palette-grid > div:nth-of-type(odd)  { margin-inline: 16% -16%; }
.palette-grid > div:nth-of-type(even) {
    margin-inline: -16% 16%;
    margin-block: calc(33% + var(--spacing-grid-gap)) calc(0% - (33% + var(--spacing-grid-gap)));
}