/*
 Theme Name:   BASE Theme 2026
 Theme URI:    https://generatepress.com
 Description:  BASE theme based on GeneratePress
 Author:       Sascha Liem
 Author URI:   https://solitairedesign.de
 Template:     generatepress
 Version:      0.9.20
 Changes:      Design-System applied for BASE Relaunch 2026
*/

/* Site Wrapper */
.site-wrapper {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
}

/* Optimize Header for responsive screens */
header.site-header {
    padding-inline: 1rem;
}
header.site-header .inside-header {
    max-width: 1200px;
    padding-inline: 0;
}

/* Remove bottom margin on last paragraph - source check functions.php */
.gb-container p:last-child:last-of-type {
    margin-bottom: 0px;
}
.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0px;
}

/* ==========================================================================
   ENERGY-BASE.ORG – RELAUNCH 2026
   Child Theme Styles for GeneratePress + GenerateBlocks Pro
   ========================================================================== 
   
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   1.  PRIMITIVES – Color Palette
   2.  PRIMITIVES – Typography
   3.  PRIMITIVES – Spacing
   4.  SEMANTICS – Colors
   5.  SEMANTICS – Typography
   6.  SEMANTICS – Spacing & Layout
   7.  BASE TYPOGRAPHY – Fluid Type Scale
   8.  GLOBAL ELEMENTS – Links, Buttons, Lists
   9.  SECTION STYLES – Background Variants
   10. UTILITY CLASSES
   
   NOTES
   --------------------------------------------------------------------------
   - Fluid values via clamp() use 375px (mobile) → 1120px (desktop)
     Formula: clamp(min, calc(min + (max - min) * ((100vw - 375px) / (1120 - 375))), max)
     Simplified: clamp(min, preferred, max)
   - BEM naming: block__element--modifier
   - GP/GB namespace: eb- (energy-base) prefix for custom properties
   - Font: "Brandon Text" (to be confirmed with designer – may be "Brandon Grotesque")
   - Container Width in Customizer: 1120px
   - Site Wrapper: 1440px
   
   TODO
   --------------------------------------------------------------------------
   - [ ] Confirm font with designer: "Brandon Text" vs "Brandon Grotesque"
   - [ ] Add @font-face declarations once .woff/.woff2 files are received
   - [ ] Adjust --eb-font-family value if font name differs
   ========================================================================== */


/* ==========================================================================
   1. PRIMITIVES – Color Palette
   ========================================================================== */

:root {

  /* --- Blue Family --- */
  --eb-blue-900: #005C8B;       /* Dunkelblau – Hero/Header Gradient Start */
  --eb-blue-700: #0079B7;       /* Primärblau – Headlines, Buttons, Akzente */
  --eb-blue-500: #62A4CE;       /* Mittelblau – Sub-Navigation, sekundäre Buttons */
  --eb-blue-400: #68A7C6;       /* Mittelblau hell – Desktop Sub-Nav */
  --eb-blue-300: #90D0F0;       /* Hellblau – Akzente, Hover-States */

  /* --- Gray / Neutral Family --- */
  --eb-neutral-900: #221F20;    /* Fast Schwarz */
  --eb-neutral-800: #2A2F33;    /* Anthrazit – Fließtext, dunkle Sections */
  --eb-neutral-700: #393D40;    /* Dunkelgrau */
  --eb-neutral-600: #484B4D;    /* Mittelgrau dunkel – WHAT Section Text */
  --eb-neutral-400: #989897;    /* Mittelgrau – Subtext auf dunklem Hintergrund */
  --eb-neutral-100: #F2F2F2;    /* Hellgrau – Section-Hintergründe */
  --eb-neutral-0: #FFFFFF;      /* Weiß */

  /* --- Teal / Green Family --- */
  --eb-teal-600: #46988A;       /* Teal dunkel – Landmark Gradient Start */
  --eb-teal-400: #5AC6B3;       /* Teal hell – Landmark Gradient End, Akzent */

  /* --- Accent / Utility Colors --- */
  --eb-accent-red: #ED5555;     /* Rot – Karten-Border, Error */
  --eb-accent-orange: #FC9E4D;  /* Orange – Karten-Border, Warning */
  --eb-accent-yellow: #FCD73D;  /* Gelb – Karten-Border, Hinweis */
  --eb-accent-green: #5AC6B3;   /* Grün/Teal – Karten-Border, Success */
  --eb-accent-blue: #0079B7;    /* Blau – Karten-Border, Info */
  --eb-accent-purple: #9E6BEA;  /* Violett – Karten-Border, Spezial */

  /* --- Functional / UI Colors --- */
  --eb-accent-error: #D65200;   /* Error-Zustand (aus XD) */
}


/* ==========================================================================
   2. PRIMITIVES – Typography
   ========================================================================== */

:root {

  /* --- Font Family --- */
  --eb-font-family: "BrandonGrotW02-Black", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- Font Weights --- */
  --eb-fw-regular: 400;
  --eb-fw-medium: 500;
  --eb-fw-bold: 700;

  /* --- Fluid Font Sizes ---
     Mobile min (375px) → Desktop max (1120px)
     Tablet values fall naturally within the fluid range.
     
     Naming: --eb-fs-{scale-name}
     
     XD Reference:
     H1: m=35px → d=50px
     H2: m=22px → d=26px
     H3: m=18px → d=20px
     H4: m=14px → d=17px
     H5: m=14px → d=15px (italic, uppercase)
     H6: m=12px → d=14px
     H7: m=11px → d=11px (italic, uppercase, caption)
     T1: m=21px → d=26px (tagline/intro, italic)
     C1: m=16px → d=17px (body copy)
     C2: m=11px → d=14px (small copy / labels)
     C3: m=17px → d=20px (medium copy, accent color)
     N1: m=16px → d=18px (main navigation)
     N2: m=13px → d=15px (sub navigation)
  */

  --eb-fs-h1: clamp(2.1875rem, 1.69rem + 2.12vw, 3.125rem);
                /* 35px → 50px */

  --eb-fs-h2: clamp(1.375rem, 1.24rem + 0.54vw, 1.625rem);
                /* 22px → 26px */

  --eb-fs-h3: clamp(1.125rem, 1.06rem + 0.27vw, 1.25rem);
                /* 18px → 20px */

  --eb-fs-h4: clamp(0.875rem, 0.77rem + 0.4vw, 1.0625rem);
                /* 14px → 17px */

  --eb-fs-h5: clamp(0.875rem, 0.84rem + 0.13vw, 0.9375rem);
                /* 14px → 15px */

  --eb-fs-h6: clamp(0.75rem, 0.68rem + 0.27vw, 0.875rem);
                /* 12px → 14px */

  --eb-fs-h7: 0.6875rem;
                /* 11px – fixed, zu klein für fluid */

  --eb-fs-tagline: clamp(1.3125rem, 1.14rem + 0.67vw, 1.625rem);
                /* 21px → 26px */

  --eb-fs-body: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
                /* 16px → 17px */

  --eb-fs-body-sm: clamp(0.6875rem, 0.59rem + 0.4vw, 0.875rem);
                /* 11px → 14px */

  --eb-fs-body-lg: clamp(1.0625rem, 0.96rem + 0.4vw, 1.25rem);
                /* 17px → 20px */

  --eb-fs-nav: clamp(1rem, 0.93rem + 0.27vw, 1.125rem);
                /* 16px → 18px */

  --eb-fs-nav-sub: clamp(0.8125rem, 0.74rem + 0.27vw, 0.9375rem);
                /* 13px → 15px */

  /* --- Line Heights (relative) --- */
  --eb-lh-tight: 1.1;       /* Headlines */
  --eb-lh-snug: 1.2;        /* Sub-Headlines, Taglines */
  --eb-lh-normal: 1.3;      /* Body Copy, allgemein */
  --eb-lh-relaxed: 1.5;     /* Fließtext, längere Absätze */

  /* --- Letter Spacing --- */
  --eb-ls-none: 0;
  --eb-ls-tight: 0.01em;    /* Navigation, Uppercase-Elemente */
  --eb-ls-wide: 0.02em;     /* Kleine Uppercase-Labels */
}


/* ==========================================================================
   3. PRIMITIVES – Spacing
   ========================================================================== */

:root {

  /* --- Fluid Spacing Scale ---
     Used for section padding, gaps, margins.
     Mobile min → Desktop max
  */

  --eb-space-2xs: clamp(0.25rem, 0.2rem + 0.13vw, 0.5rem);
                /* 4px → 8px */

  --eb-space-xs: clamp(0.5rem, 0.37rem + 0.54vw, 0.75rem);
                /* 8px → 12px */

  --eb-space-sm: clamp(0.75rem, 0.62rem + 0.54vw, 1rem);
                /* 12px → 16px */

  --eb-space-md: clamp(1rem, 0.73rem + 1.08vw, 1.5rem);
                /* 16px → 24px */

  --eb-space-lg: clamp(1.5rem, 1.1rem + 1.61vw, 2rem);
                /* 24px → 32px */

  --eb-space-xl: clamp(2rem, 1.33rem + 2.68vw, 3rem);
                /* 32px → 48px */

  --eb-space-2xl: clamp(3rem, 2.33rem + 2.68vw, 4rem);
                /* 48px → 64px */

  --eb-space-3xl: clamp(4rem, 2.66rem + 5.37vw, 6rem);
                /* 64px → 96px */

  --eb-space-4xl: clamp(5rem, 3.33rem + 6.71vw, 8rem);
                /* 80px → 128px */

  /* --- Grid --- */
  --eb-grid-columns: 12;
  --eb-grid-gap: 2rem;          /* 32px */
  --eb-container-width: 1120px;
  --eb-site-width: 1440px;
}


/* ==========================================================================
   4. SEMANTICS – Colors
   ========================================================================== */

:root {

  /* --- Global Text --- */
  --eb-color-text: var(--eb-neutral-800);
  --eb-color-text-muted: var(--eb-neutral-400);
  --eb-color-text-heading: var(--eb-blue-700);
  --eb-color-text-tagline: var(--eb-blue-700);
  --eb-color-text-on-dark: var(--eb-neutral-0);
  --eb-color-text-on-dark-muted: var(--eb-neutral-400);
  --eb-color-text-on-gradient: var(--eb-neutral-0);

  /* --- Links --- */
  --eb-color-link: var(--eb-blue-700);
  --eb-color-link-hover: var(--eb-blue-900);
  --eb-color-link-on-dark: var(--eb-neutral-0);
  --eb-color-link-on-dark-hover: var(--eb-blue-300);

  /* --- Backgrounds --- */
  --eb-color-bg: var(--eb-neutral-0);
  --eb-color-bg-alt: var(--eb-neutral-100);
  --eb-color-bg-dark: var(--eb-neutral-800);
  --eb-color-bg-darker: var(--eb-neutral-700);

  /* --- Section Gradients --- */
  --eb-gradient-hero: linear-gradient(180deg, var(--eb-blue-900) 0%, var(--eb-blue-700) 50%, var(--eb-blue-500) 100%);
  --eb-gradient-landmark: linear-gradient(0deg, var(--eb-teal-600) 0%, var(--eb-teal-400) 100%);

  /* --- Buttons: Primary --- */
  --eb-color-btn-primary-bg: var(--eb-blue-700);
  --eb-color-btn-primary-bg-hover: var(--eb-blue-900);
  --eb-color-btn-primary-text: var(--eb-neutral-0);
  --eb-color-btn-primary-text-hover: var(--eb-neutral-0);

  /* --- Buttons: Secondary --- */
  --eb-color-btn-secondary-bg: var(--eb-blue-500);
  --eb-color-btn-secondary-bg-hover: var(--eb-blue-700);
  --eb-color-btn-secondary-text: var(--eb-neutral-0);
  --eb-color-btn-secondary-text-hover: var(--eb-neutral-0);

  /* --- Buttons: Ghost / Outline --- */
  --eb-color-btn-ghost-bg: transparent;
  --eb-color-btn-ghost-bg-hover: var(--eb-blue-700);
  --eb-color-btn-ghost-border: var(--eb-blue-700);
  --eb-color-btn-ghost-text: var(--eb-blue-700);
  --eb-color-btn-ghost-text-hover: var(--eb-neutral-0);

  /* --- Buttons: Ghost on dark background --- */
  --eb-color-btn-ghost-dark-bg: transparent;
  --eb-color-btn-ghost-dark-bg-hover: var(--eb-neutral-0);
  --eb-color-btn-ghost-dark-border: var(--eb-neutral-0);
  --eb-color-btn-ghost-dark-text: var(--eb-neutral-0);
  --eb-color-btn-ghost-dark-text-hover: var(--eb-blue-700);

  /* --- Navigation --- */
  --eb-color-nav: var(--eb-blue-700);
  --eb-color-nav-hover: var(--eb-blue-900);
  --eb-color-nav-sub: var(--eb-blue-500);
  --eb-color-nav-sub-hover: var(--eb-blue-700);
  --eb-color-nav-on-dark: var(--eb-neutral-0);

  /* --- Borders --- */
  --eb-color-border: var(--eb-neutral-100);
  --eb-color-border-subtle: var(--eb-neutral-100);
  --eb-color-border-strong: var(--eb-neutral-400);

  /* --- Card Accent Borders --- */
  --eb-color-card-border-red: var(--eb-accent-red);
  --eb-color-card-border-orange: var(--eb-accent-orange);
  --eb-color-card-border-yellow: var(--eb-accent-yellow);
  --eb-color-card-border-green: var(--eb-accent-green);
  --eb-color-card-border-blue: var(--eb-accent-blue);
  --eb-color-card-border-purple: var(--eb-accent-purple);

  /* --- Alerts / Notifications --- */
  --eb-color-success: var(--eb-accent-green);
  --eb-color-warning: var(--eb-accent-orange);
  --eb-color-error: var(--eb-accent-red);
  --eb-color-info: var(--eb-accent-blue);

  /* --- Footer --- */
  --eb-color-footer-bg: var(--eb-neutral-800);
  --eb-color-footer-text: var(--eb-neutral-400);
  --eb-color-footer-heading: var(--eb-neutral-0);
  --eb-color-footer-link: var(--eb-neutral-400);
  --eb-color-footer-link-hover: var(--eb-neutral-0);
}


/* ==========================================================================
   5. SEMANTICS – Typography
   ========================================================================== */

:root {

  /* --- Headings --- */
  --eb-typo-h1-size: var(--eb-fs-h1);
  --eb-typo-h1-weight: var(--eb-fw-bold);
  --eb-typo-h1-lh: var(--eb-lh-tight);
  --eb-typo-h1-ls: var(--eb-ls-none);
  --eb-typo-h1-transform: uppercase;
  --eb-typo-h1-color: var(--eb-color-text-heading);

  --eb-typo-h2-size: var(--eb-fs-h2);
  --eb-typo-h2-weight: var(--eb-fw-bold);
  --eb-typo-h2-lh: var(--eb-lh-snug);
  --eb-typo-h2-ls: var(--eb-ls-none);
  --eb-typo-h2-transform: uppercase;
  --eb-typo-h2-color: var(--eb-color-text-heading);

  --eb-typo-h3-size: var(--eb-fs-h3);
  --eb-typo-h3-weight: var(--eb-fw-bold);
  --eb-typo-h3-lh: var(--eb-lh-snug);
  --eb-typo-h3-ls: var(--eb-ls-none);
  --eb-typo-h3-transform: uppercase;
  --eb-typo-h3-color: var(--eb-color-text-heading);

  --eb-typo-h4-size: var(--eb-fs-h4);
  --eb-typo-h4-weight: var(--eb-fw-bold);
  --eb-typo-h4-lh: var(--eb-lh-snug);
  --eb-typo-h4-ls: var(--eb-ls-none);
  --eb-typo-h4-transform: uppercase;
  --eb-typo-h4-color: var(--eb-color-text-heading);

  --eb-typo-h5-size: var(--eb-fs-h5);
  --eb-typo-h5-weight: var(--eb-fw-regular);
  --eb-typo-h5-lh: var(--eb-lh-snug);
  --eb-typo-h5-ls: var(--eb-ls-none);
  --eb-typo-h5-transform: uppercase;
  --eb-typo-h5-style: italic;
  --eb-typo-h5-color: var(--eb-color-text);

  --eb-typo-h6-size: var(--eb-fs-h6);
  --eb-typo-h6-weight: var(--eb-fw-bold);
  --eb-typo-h6-lh: var(--eb-lh-snug);
  --eb-typo-h6-ls: var(--eb-ls-wide);
  --eb-typo-h6-transform: uppercase;
  --eb-typo-h6-color: var(--eb-color-text-heading);

  /* --- Body / Copy --- */
  --eb-typo-body-size: var(--eb-fs-body);
  --eb-typo-body-weight: var(--eb-fw-regular);
  --eb-typo-body-lh: var(--eb-lh-normal);
  --eb-typo-body-color: var(--eb-color-text);

  /* --- Tagline / Intro --- */
  --eb-typo-tagline-size: var(--eb-fs-tagline);
  --eb-typo-tagline-weight: var(--eb-fw-regular);
  --eb-typo-tagline-lh: var(--eb-lh-snug);
  --eb-typo-tagline-style: italic;
  --eb-typo-tagline-color: var(--eb-color-text-tagline);

  /* --- Navigation --- */
  --eb-typo-nav-size: var(--eb-fs-nav);
  --eb-typo-nav-weight: var(--eb-fw-bold);
  --eb-typo-nav-ls: var(--eb-ls-tight);
  --eb-typo-nav-transform: uppercase;

  --eb-typo-nav-sub-size: var(--eb-fs-nav-sub);
  --eb-typo-nav-sub-weight: var(--eb-fw-bold);
  --eb-typo-nav-sub-ls: var(--eb-ls-tight);
  --eb-typo-nav-sub-transform: uppercase;
}


/* ==========================================================================
   6. SEMANTICS – Spacing & Layout
   ========================================================================== */

:root {

  /* --- Section Padding (vertical) --- */
  --eb-section-padding-y: var(--eb-space-3xl);
  --eb-section-padding-y-sm: var(--eb-space-2xl);

  /* --- Section Padding (horizontal / inner safety) --- */
  --eb-section-padding-x: var(--eb-space-md);

  /* --- Content Gaps --- */
  --eb-content-gap: var(--eb-space-lg);
  --eb-content-gap-sm: var(--eb-space-md);
  --eb-content-gap-lg: var(--eb-space-xl);

  /* --- Card Spacing --- */
  --eb-card-padding: var(--eb-space-lg);
  --eb-card-gap: var(--eb-grid-gap);
  --eb-card-border-width: 3px;
  --eb-card-border-radius: 0;

  /* --- Button Spacing --- */
  --eb-btn-padding-y: var(--eb-space-xs);
  --eb-btn-padding-x: var(--eb-space-lg);
  --eb-btn-border-radius: 0;
  --eb-btn-border-width: 2px;
}


/* ==========================================================================
   7. BASE TYPOGRAPHY – Fluid Type Scale
   Applied globally via element selectors.
   ========================================================================== */

body {
  font-family: var(--eb-font-family);
  font-weight: var(--eb-typo-body-weight);
  font-size: var(--eb-typo-body-size);
  line-height: var(--eb-typo-body-lh);
  color: var(--eb-typo-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .eb-h1 {
  font-family: var(--eb-font-family);
  font-size: var(--eb-typo-h1-size);
  font-weight: var(--eb-typo-h1-weight);
  line-height: var(--eb-typo-h1-lh);
  letter-spacing: var(--eb-typo-h1-ls);
  text-transform: var(--eb-typo-h1-transform);
  color: var(--eb-typo-h1-color);
}

h2, .eb-h2 {
  font-family: var(--eb-font-family);
  font-size: var(--eb-typo-h2-size);
  font-weight: var(--eb-typo-h2-weight);
  line-height: var(--eb-typo-h2-lh);
  letter-spacing: var(--eb-typo-h2-ls);
  text-transform: var(--eb-typo-h2-transform);
  color: var(--eb-typo-h2-color);
}

h3, .eb-h3 {
  font-family: var(--eb-font-family);
  font-size: var(--eb-typo-h3-size);
  font-weight: var(--eb-typo-h3-weight);
  line-height: var(--eb-typo-h3-lh);
  letter-spacing: var(--eb-typo-h3-ls);
  text-transform: var(--eb-typo-h3-transform);
  color: var(--eb-typo-h3-color);
}

h4, .eb-h4 {
  font-family: var(--eb-font-family);
  font-size: var(--eb-typo-h4-size);
  font-weight: var(--eb-typo-h4-weight);
  line-height: var(--eb-typo-h4-lh);
  letter-spacing: var(--eb-typo-h4-ls);
  text-transform: var(--eb-typo-h4-transform);
  color: var(--eb-typo-h4-color);
}

h5, .eb-h5 {
  font-family: var(--eb-font-family);
  font-size: var(--eb-typo-h5-size);
  font-weight: var(--eb-typo-h5-weight);
  font-style: var(--eb-typo-h5-style);
  line-height: var(--eb-typo-h5-lh);
  letter-spacing: var(--eb-typo-h5-ls);
  text-transform: var(--eb-typo-h5-transform);
  color: var(--eb-typo-h5-color);
}

h6, .eb-h6 {
  font-family: var(--eb-font-family);
  font-size: var(--eb-typo-h6-size);
  font-weight: var(--eb-typo-h6-weight);
  line-height: var(--eb-typo-h6-lh);
  letter-spacing: var(--eb-typo-h6-ls);
  text-transform: var(--eb-typo-h6-transform);
  color: var(--eb-typo-h6-color);
}

p, .eb-body {
  font-size: var(--eb-typo-body-size);
  font-weight: var(--eb-typo-body-weight);
  line-height: var(--eb-typo-body-lh);
  color: var(--eb-typo-body-color);
}


/* ==========================================================================
   8. GLOBAL ELEMENTS – Links, Buttons, Lists
   ========================================================================== */

/* --- Links --- */

a {
  color: var(--eb-color-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
  color: var(--eb-color-link-hover);
}

/* --- Buttons: BEM Block --- */

.eb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eb-space-xs);
  font-family: var(--eb-font-family);
  font-size: var(--eb-fs-h6);
  font-weight: var(--eb-fw-bold);
  line-height: var(--eb-lh-snug);
  letter-spacing: var(--eb-ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--eb-btn-padding-y) var(--eb-btn-padding-x);
  border: var(--eb-btn-border-width) solid transparent;
  border-radius: var(--eb-btn-border-radius);
  cursor: pointer;
  transition: background-color 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease;
}

/* Primary */
.eb-btn--primary {
  background-color: var(--eb-color-btn-primary-bg);
  color: var(--eb-color-btn-primary-text);
  border-color: var(--eb-color-btn-primary-bg);
}

.eb-btn--primary:hover,
.eb-btn--primary:focus-visible {
  background-color: var(--eb-color-btn-primary-bg-hover);
  color: var(--eb-color-btn-primary-text-hover);
  border-color: var(--eb-color-btn-primary-bg-hover);
}

/* Secondary */
.eb-btn--secondary {
  background-color: var(--eb-color-btn-secondary-bg);
  color: var(--eb-color-btn-secondary-text);
  border-color: var(--eb-color-btn-secondary-bg);
}

.eb-btn--secondary:hover,
.eb-btn--secondary:focus-visible {
  background-color: var(--eb-color-btn-secondary-bg-hover);
  color: var(--eb-color-btn-secondary-text-hover);
  border-color: var(--eb-color-btn-secondary-bg-hover);
}

/* Ghost / Outline */
.eb-btn--ghost {
  background-color: var(--eb-color-btn-ghost-bg);
  color: var(--eb-color-btn-ghost-text);
  border-color: var(--eb-color-btn-ghost-border);
}

.eb-btn--ghost:hover,
.eb-btn--ghost:focus-visible {
  background-color: var(--eb-color-btn-ghost-bg-hover);
  color: var(--eb-color-btn-ghost-text-hover);
  border-color: var(--eb-color-btn-ghost-bg-hover);
}

/* Ghost on dark background */
.eb-btn--ghost-dark {
  background-color: var(--eb-color-btn-ghost-dark-bg);
  color: var(--eb-color-btn-ghost-dark-text);
  border-color: var(--eb-color-btn-ghost-dark-border);
}

.eb-btn--ghost-dark:hover,
.eb-btn--ghost-dark:focus-visible {
  background-color: var(--eb-color-btn-ghost-dark-bg-hover);
  color: var(--eb-color-btn-ghost-dark-text-hover);
  border-color: var(--eb-color-btn-ghost-dark-bg-hover);
}

/* Button with arrow icon (→) */
.eb-btn__icon {
  display: inline-flex;
  transition: transform 0.2s ease;
}

.eb-btn:hover .eb-btn__icon {
  transform: translateX(4px);
}


/* ==========================================================================
   9. SECTION STYLES – Background Variants (BEM)
   ========================================================================== */

/* --- Section Block --- */

.eb-section {
  padding-block: var(--eb-section-padding-y);
  padding-inline: var(--eb-section-padding-x);
}

.eb-section--compact {
  padding-block: var(--eb-section-padding-y-sm);
}

/* Inner Container (Global Style in GenerateBlocks) */
.eb-section__inner {
  width: 100%;
  max-width: var(--eb-container-width);
  margin-inline: auto;
}

/* --- Hero / Header Gradient Section --- */

.eb-section--hero {
  background: var(--eb-gradient-hero);
  color: var(--eb-color-text-on-gradient);
}

.eb-section--hero h1,
.eb-section--hero h2,
.eb-section--hero h3,
.eb-section--hero h4,
.eb-section--hero h5,
.eb-section--hero h6,
.eb-section--hero .eb-h1,
.eb-section--hero .eb-h2,
.eb-section--hero .eb-h3 {
  color: var(--eb-color-text-on-gradient);
}

.eb-section--hero a:not(.eb-btn) {
  color: var(--eb-color-link-on-dark);
}

.eb-section--hero a:not(.eb-btn):hover {
  color: var(--eb-color-link-on-dark-hover);
}

/* --- Dark Section (WHAT WE DO, Image/Text Split) --- */

.eb-section--dark {
  background-color: var(--eb-color-bg-dark);
  color: var(--eb-color-text-on-dark-muted);
}

.eb-section--dark h1,
.eb-section--dark h2,
.eb-section--dark h3,
.eb-section--dark h4,
.eb-section--dark h5,
.eb-section--dark h6 {
  color: var(--eb-color-text-on-dark);
}

.eb-section--dark p {
  color: var(--eb-color-text-on-dark-muted);
}

.eb-section--dark a:not(.eb-btn) {
  color: var(--eb-color-link-on-dark);
}

.eb-section--dark a:not(.eb-btn):hover {
  color: var(--eb-color-link-on-dark-hover);
}

/* --- Landmark / Teal Gradient Section --- */

.eb-section--landmark {
  background: var(--eb-gradient-landmark);
  color: var(--eb-color-text-on-gradient);
}

.eb-section--landmark h1,
.eb-section--landmark h2,
.eb-section--landmark h3,
.eb-section--landmark h4,
.eb-section--landmark h5,
.eb-section--landmark h6 {
  color: var(--eb-color-text-on-gradient);
}

.eb-section--landmark a:not(.eb-btn) {
  color: var(--eb-color-link-on-dark);
}

.eb-section--landmark a:not(.eb-btn):hover {
  color: var(--eb-color-link-on-dark-hover);
}

/* --- Light Gray Section (LET'S COLLABORATE) --- */

.eb-section--alt {
  background-color: var(--eb-color-bg-alt);
  color: var(--eb-color-text);
}

/* --- White Section (default) --- */

.eb-section--light {
  background-color: var(--eb-color-bg);
  color: var(--eb-color-text);
}


/* ==========================================================================
   10. UTILITY CLASSES
   ========================================================================== */

/* --- Text Styles --- */

.eb-tagline {
  font-size: var(--eb-typo-tagline-size);
  font-weight: var(--eb-typo-tagline-weight);
  font-style: var(--eb-typo-tagline-style);
  line-height: var(--eb-typo-tagline-lh);
  color: var(--eb-typo-tagline-color);
}

.eb-tagline--bold {
  font-weight: var(--eb-fw-medium);
}

.eb-caption {
  font-size: var(--eb-fs-h7);
  font-style: italic;
  font-weight: var(--eb-fw-regular);
  line-height: var(--eb-lh-snug);
  text-transform: uppercase;
  color: var(--eb-color-text);
}

.eb-label {
  font-size: var(--eb-fs-body-sm);
  font-weight: var(--eb-fw-medium);
  line-height: var(--eb-lh-snug);
  color: var(--eb-color-text-heading);
}

.eb-body-lg {
  font-size: var(--eb-fs-body-lg);
  font-weight: var(--eb-fw-medium);
  line-height: var(--eb-lh-normal);
  color: var(--eb-blue-500);
}

/* --- Text Colors (context overrides) --- */

.eb-text--white { color: var(--eb-neutral-0); }
.eb-text--blue { color: var(--eb-blue-700); }
.eb-text--muted { color: var(--eb-neutral-400); }
.eb-text--dark { color: var(--eb-neutral-800); }

/* --- Heading Colors (context overrides) --- */

.eb-heading--white { color: var(--eb-neutral-0); }
.eb-heading--blue { color: var(--eb-blue-700); }
.eb-heading--dark { color: var(--eb-neutral-800); }

/* --- Background Utilities --- */

.eb-bg--white { background-color: var(--eb-neutral-0); }
.eb-bg--light { background-color: var(--eb-neutral-100); }
.eb-bg--dark { background-color: var(--eb-neutral-800); }
.eb-bg--blue { background-color: var(--eb-blue-700); }

/* --- Card with colored top border --- */

.eb-card {
  padding: var(--eb-card-padding);
  background-color: var(--eb-color-bg);
  border-top: var(--eb-card-border-width) solid transparent;
}

.eb-card--red { border-top-color: var(--eb-color-card-border-red); }
.eb-card--orange { border-top-color: var(--eb-color-card-border-orange); }
.eb-card--yellow { border-top-color: var(--eb-color-card-border-yellow); }
.eb-card--green { border-top-color: var(--eb-color-card-border-green); }
.eb-card--blue { border-top-color: var(--eb-color-card-border-blue); }
.eb-card--purple { border-top-color: var(--eb-color-card-border-purple); }

/* --- Spacing Utilities --- */

.eb-mt-0 { margin-top: 0; }
.eb-mb-0 { margin-bottom: 0; }
.eb-mt-sm { margin-top: var(--eb-space-sm); }
.eb-mb-sm { margin-bottom: var(--eb-space-sm); }
.eb-mt-md { margin-top: var(--eb-space-md); }
.eb-mb-md { margin-bottom: var(--eb-space-md); }
.eb-mt-lg { margin-top: var(--eb-space-lg); }
.eb-mb-lg { margin-bottom: var(--eb-space-lg); }
.eb-mt-xl { margin-top: var(--eb-space-xl); }
.eb-mb-xl { margin-bottom: var(--eb-space-xl); }

/* --- Visibility / Screen Reader --- */

.eb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}