/**
 * ERP Peers — Design System
 * Token-based design system for enterprise-grade visual consistency.
 * Load ORDER: after custom.css so overrides take effect.
 *
 * Architecture:
 *   1. CSS Custom Properties (design tokens)
 *   2. Typography system
 *   3. Spacing helpers
 *   4. Button components
 *   5. Card components
 *   6. Section / layout tokens
 *   7. Header / nav overrides
 *   8. Footer overrides
 *   9. Form overrides
 *  10. Utility overrides
 */

/* ============================================================
   1. DESIGN TOKENS — :root
   ============================================================ */
:root {
  /* ── Brand / Primary ──────────────────────────────────────── */
  --color-primary:          #4f46e5;   /* indigo-600            */
  --color-primary-dark:     #3730a3;   /* indigo-800            */
  --color-primary-light:    #6366f1;   /* indigo-500            */
  --color-primary-subtle:   #eef2ff;   /* indigo-50 pale wash   */

  /* gradient used site-wide */
  --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);

  /* ── Accent / Semantic ────────────────────────────────────── */
  --color-success:          #0abc5f;
  --color-success-dark:     #089c50;
  --color-danger:           #e62415;

  /* ── Neutrals ─────────────────────────────────────────────── */
  --color-bg:               #ffffff;
  --color-surface:          #f8f8fc;   /* card / panel bg       */
  --color-surface-2:        #eef2ff;   /* indigo-50 alt surface */
  --color-border:           #e3e5e5;
  --color-border-subtle:    #f0f0f0;

  /* ── Text ─────────────────────────────────────────────────── */
  --color-text-heading:     #1e1b4b;   /* indigo-950 headings   */
  --color-text-body:        #33475b;   /* paragraphs / body     */
  --color-text-muted:       #6a7a7e;   /* secondary / meta      */
  --color-text-inverse:     #ffffff;

  /* ── Footer ──────────────────────────────────────────────── */
  --color-footer-bg:        #0f0e2a;   /* deep dark indigo bg   */
  --color-footer-text:      rgba(255,255,255,0.82);
  --color-footer-heading:   #ffffff;
  --color-footer-border:    rgba(255,255,255,0.12);

  /* ── Typography ───────────────────────────────────────────── */
  --font-family:            "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;

  /* Type scale — Major Third (1.250) */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-md:    1.125rem;   /*  18px */
  --text-lg:    1.25rem;    /*  20px */
  --text-xl:    1.5rem;     /*  24px */
  --text-2xl:   1.875rem;   /*  30px */
  --text-3xl:   2.25rem;    /*  36px */
  --text-4xl:   2.875rem;   /*  46px */

  /* Heading scale (h1–h6) */
  --h1-size:    2.25rem;    /* 36px */
  --h2-size:    1.75rem;    /* 28px */
  --h3-size:    1.375rem;   /* 22px */
  --h4-size:    1.25rem;    /* 20px */
  --h5-size:    1.125rem;   /* 18px */
  --h6-size:    1rem;       /* 16px */

  --line-height-tight:   1.25;
  --line-height-snug:    1.375;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.625;

  /* ── Spacing (8px grid) ───────────────────────────────────── */
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */

  /* ── Border radius ────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(79,70,229,0.08), 0 1px 3px rgba(79,70,229,0.04);
  --shadow-md:  0 4px 16px rgba(79,70,229,0.12), 0 2px 6px rgba(79,70,229,0.06);
  --shadow-lg:  0 8px 32px rgba(79,70,229,0.14), 0 4px 12px rgba(79,70,229,0.08);
  --shadow-btn: 0 4px 14px rgba(79,70,229,0.30);

  /* ── Transitions ──────────────────────────────────────────── */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.25s ease;
  --transition-slow:   all 0.4s ease;

  /* ── Z-index layers ───────────────────────────────────────── */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-fixed:    1030;
  --z-overlay:  1040;
  --z-modal:    1050;

  /* ── Extended palette — V2 indigo system ─────────────────── */
  /* These tokens complete the design system so all files        */
  /* reference a single source of truth. Existing token values  */
  /* above are unchanged; these are additions only.             */

  /* Electric / accent — indigo-500, used as the bright accent  */
  /* in custom.css for links, focus rings, buttons, highlights  */
  --color-electric:     #6366f1;

  /* Teal — indigo-400, pairs with electric in gradients        */
  /* (name kept for custom.css compatibility)                   */
  --color-teal:         #818cf8;

  /* Light indigo surface — section alt-background              */
  --color-section-alt:  #f0f4ff;

  /* Dark section background — near-black indigo                */
  /* used by testimonials, blog, case studies, CTA sections     */
  --color-dark:         #0f0e2a;

  /* Deeper dark — gradient endpoint for hero/CTA gradients     */
  --color-dark-2:       #0d0c26;

  /* Accent light — indigo-300, light on dark backgrounds       */
  /* 23 uses in blocks/blocks.css; token prep for Phase 1b      */
  --color-accent:       #a5b4fc;

  /* Star rating yellow                                         */
  --color-star:         #FACC15;

  /* ── Breakpoints (Design System Phase 2 — Foundation) ────────
     Canonical scale — matches Bootstrap 5's live grid breakpoints
     (assets/css/bootstrap.min.css) that already drive every
     .container/.row/.col-* on this site. CSS custom properties
     cannot be read inside @media feature queries, so these tokens
     are the documented single source of truth: any NEW @media rule
     should use these literal pixel values rather than invent one.
     Existing @media rules are untouched by this milestone — no
     responsive-behavior changes. */
  --bp-sm:  576px;
  --bp-md:  768px;
  --bp-lg:  992px;
  --bp-xl:  1200px;
  --bp-xxl: 1400px;

  /* ── Container widths (Design System Phase 2 — Foundation) ───
     Mirrors Bootstrap 5's live .container max-widths exactly —
     documentation/reference tokens, not a redefinition. */
  --container-sm:  540px;
  --container-md:  720px;
  --container-lg:  960px;
  --container-xl:  1140px;
  --container-xxl: 1320px;
}


/* ============================================================
   2. TYPOGRAPHY SYSTEM
   ============================================================ */

/* Heading hierarchy — fix h2/h3 collision (both were 1.5rem) */
h1 { font-size: var(--h1-size); line-height: var(--line-height-tight); }
h2 { font-size: var(--h2-size); line-height: var(--line-height-snug); }
h3 { font-size: var(--h3-size); line-height: var(--line-height-snug); }
h4 { font-size: var(--h4-size); line-height: var(--line-height-normal); }
h5 { font-size: var(--h5-size); line-height: var(--line-height-normal); }
h6 { font-size: var(--h6-size); line-height: var(--line-height-normal); }

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-heading);
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  margin-top: 0;
}

body {
  font-family: var(--font-family);
  color: var(--color-text-body);
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
}

/* Banner headline stays at 46px */
.banner-text h1,
.banner-text h2 {
  font-size: var(--text-4xl);
  line-height: var(--line-height-tight);
  color: var(--color-text-inverse);
}

/* Section title pattern used throughout the site */
.leftside-title h3,
.homepage-contactsection .leftside-title h3 {
  font-size: var(--text-2xl);
  line-height: var(--line-height-snug);
  color: var(--color-text-heading);
}

/* Footer fix: "GilroyRegular" (unloaded font) → brand font */
.footer-contact-inner,
.footer-social-section-part .footerttl {
  font-family: var(--font-family);
}


/* ============================================================
   3. BUTTON SYSTEM
   ============================================================ */

/* Primary filled button */
.with-background {
  background: var(--gradient-primary);
  color: var(--color-text-inverse) !important;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 32px;
  border-radius: var(--radius-pill);
  border: none;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  line-height: 1.5;
  transition: var(--transition-base);
  position: relative;
}

.with-background:hover,
.with-background:focus {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  box-shadow: var(--shadow-btn);
  transform: translateY(-2px);
  color: var(--color-text-inverse) !important;
  text-decoration: none;
}

/* Secondary outlined button */
.without-background {
  border: 1.5px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 32px;
  border-radius: var(--radius-pill);
  display: inline-block;
  text-decoration: none;
  text-align: center;
  line-height: 1.5;
  transition: var(--transition-base);
  background: transparent;
}

.without-background:hover,
.without-background:focus {
  background: var(--color-primary);
  color: var(--color-text-inverse) !important;
  box-shadow: var(--shadow-btn);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Fix: navbar CTA pill button — hover was #000 */
.navbar-rightside-btn ul li a {
  background-color: var(--color-primary);
  color: var(--color-text-inverse) !important;
  font-family: var(--font-family);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}

.navbar-rightside-btn ul li a:hover,
.navbar-rightside-btn ul li a:focus {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}

/* Fix: blog load-more button — hover was #000 */
.loadmore-btn-wrapper .blog-load-more-btn {
  background-color: var(--color-primary);
  color: var(--color-text-inverse) !important;
  border-radius: var(--radius-lg);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-base);
}

.loadmore-btn-wrapper .blog-load-more-btn:hover,
.loadmore-btn-wrapper .blog-load-more-btn:focus {
  background-color: var(--color-primary-dark);
  color: var(--color-text-inverse) !important;
  box-shadow: var(--shadow-btn);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Fix: contact form submit hover was #000 */
.service-fourthsection form input[type="submit"],
.contact-form input[type="submit"],
input[type="submit"].wpcf7-submit {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  border: none;
  border-radius: var(--radius-pill);
  transition: var(--transition-base);
  cursor: pointer;
}

.service-fourthsection form input[type="submit"]:hover,
.contact-form input[type="submit"]:hover,
input[type="submit"].wpcf7-submit:hover {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  box-shadow: var(--shadow-btn);
  transform: translateY(-2px);
}

/* Success / green buttons */
.btn-success,
.button-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-inverse);
}

.btn-success:hover {
  background-color: var(--color-success-dark);
  border-color: var(--color-success-dark);
  color: var(--color-text-inverse);
}

/* Blog card read-more button */
.more .btn {
  background: var(--gradient-primary);
  border: none;
  color: var(--color-text-inverse);
  border-radius: var(--radius-pill);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  transition: var(--transition-base);
}

.blog:hover .more .btn {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  box-shadow: var(--shadow-btn);
}


/* ============================================================
   4. CARD SYSTEM
   ============================================================ */

/* Shared card primitive (Design System Phase 2 — Foundation).
   .erpp-card is the reusable foundation class for future component
   work. The legacy selectors below already match these declarations
   exactly, so they're grouped into the same rule as a zero-visual-diff
   extension — nothing about their existing appearance changes. */
.erpp-card,
.blog,
.service-part,
.our-services-main,
.casestudy-card,
.team-card,
.industry-card,
.module-plate,
.areas,
.erpp-team__card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  overflow: hidden;
}

.erpp-card:hover,
.blog:hover,
.service-part:hover,
.our-services-main:hover,
.casestudy-card:hover,
.industry-card:hover,
.module-plate:hover,
.areas:hover,
.erpp-team__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--color-primary-subtle);
}

/* Dark card variant — not yet adopted anywhere; available for future
   dark-surface components (e.g. testimonials) to opt into. */
.erpp-card--dark {
  background: var(--color-footer-bg);
  border: 1px solid var(--color-footer-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--color-footer-text);
  transition: var(--transition-base);
  overflow: hidden;
}

/* Blog card detail strip */
.blog-detail {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.blog-detail h2 a,
.blog-detail h2 a:hover {
  color: var(--color-primary);
}

/* Service card heading */
.service-part h3 {
  color: var(--color-primary);
  font-size: var(--h3-size);
}

/* Stats / highlight cards */
.stats-card,
.highlight-card,
.counter-box {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}


/* ============================================================
   5. SECTION BACKGROUNDS & LAYOUT
   ============================================================ */

/* Primary gradient sections */
.with-background-section,
.cta-section,
.banner-inner,
nav ul.dropdown-menu {
  background: var(--gradient-primary);
}

/* Light surface sections */
.light-section,
.alt-section {
  background: var(--color-surface);
}

/* Spinner — brand color */
.loadmore-spinner {
  border-bottom-color: var(--color-primary);
}

/* Dropdown item hover */
nav .dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--color-primary-light);
  color: var(--color-text-inverse);
}


/* ============================================================
   6. HEADER / NAV
   ============================================================ */

nav {
  box-shadow: var(--shadow-sm);
  background: var(--color-bg);
}

.navbar-light .navbar-nav .nav-link {
  color: var(--color-text-body);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  transition: var(--transition-base);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--color-primary);
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--color-primary);
}

nav ul.dropdown-menu {
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
}

nav .dropdown-item {
  color: var(--color-text-inverse);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-4);
  transition: var(--transition-fast);
}

nav .dropdown-item:hover,
nav .dropdown-item:focus {
  background-color: rgba(255,255,255,0.12);
  color: var(--color-text-inverse);
}


/* ============================================================
   7. FOOTER
   ============================================================ */

/* Fix: footer background was #33475b (body text color) — now deep brand */
footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  font-family: var(--font-family);
}

footer h3,
footer h4,
footer h5,
.footer-part h3 {
  color: var(--color-footer-heading);
  font-family: var(--font-family);
  font-size: var(--h4-size);
  font-weight: var(--font-weight-bold);
  border-bottom: 1px solid var(--color-footer-border);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
}

footer p,
footer a,
footer li,
footer span,
.footer-contact-inner,
.footer-social-section-part .footerttl {
  font-family: var(--font-family);
  color: var(--color-footer-text);
}

footer a:hover {
  color: var(--color-text-inverse);
  text-decoration: none;
}

footer .social-links__icon svg {
  fill: var(--color-footer-text);
}

footer .social-links__link:hover svg {
  fill: var(--color-text-inverse);
}

/* ---------------------------------------------------------------
   Native site footer (.erpp-pf) — Phase 2.8.1 package-foundation
   alignment. Restyled to the approved design-system package's dark
   navy footer direction (References/ERP-Peers-Complete-Website-
   Design-System-Handoff.zip, templates/homepage.html .site-footer /
   .footer-grid). Structure, class names, ARIA/accordion contract and
   erpp_render_site_footer() (inc/template-tags.php) are unchanged —
   this is a visual-only restyle of the same server-rendered markup.
   Previously a light section-alt band (Milestone 15); superseded here,
   not layered on top of it.
   --------------------------------------------------------------- */

.erpp-pf { background: var(--color-footer-bg); color: var(--color-footer-text); font-family: var(--font-family); }
.erpp-pf-inner { max-width: 1320px; margin: 0 auto; padding: 64px 24px 48px; }
.erpp-pf-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px 36px; }

/* Brand column */
.erpp-pf-logo { display: flex; align-items: center; gap: 4px; text-decoration: none; margin-bottom: 14px; }
.erpp-pf-logo-erp { color: var(--color-accent); font-size: 1.45rem; font-weight: 900; letter-spacing: -.04em; }
.erpp-pf-logo-peers { color: var(--color-footer-heading); font-size: 1.45rem; font-weight: 900; letter-spacing: -.04em; }
.erpp-pf-offices { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.erpp-pf-office { display: flex; gap: 10px; }
.erpp-pf-flag { font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.erpp-pf-addr { font-size: .79rem; color: var(--color-footer-text); line-height: 1.55; }
.erpp-pf-addr strong { display: block; color: var(--color-footer-heading); font-size: .8rem; margin-bottom: 1px; }
.erpp-pf-addr a { color: var(--color-accent) !important; text-decoration: none !important; display: block; margin-top: 3px; font-weight: 600; }
.erpp-pf-addr a:hover { color: var(--color-primary-light) !important; }
.erpp-pf-email { display: inline-flex; align-items: center; gap: 7px; color: var(--color-accent) !important; text-decoration: none !important; font-size: .83rem; font-weight: 600; margin-bottom: 20px; }
.erpp-pf-email:hover { color: var(--color-primary-light) !important; }
.erpp-pf-offices-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 28px 0; margin: 4px 0 8px; border-top: 1px solid var(--color-footer-border); border-bottom: 1px solid var(--color-footer-border); }
.erpp-pf-presence-intro { grid-column: 1 / -1; margin: 0 0 14px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-footer-heading); }
.erpp-pf-offices-row .erpp-pf-office { min-width: 0; display: flex; flex-direction: column; gap: 8px; background: #C6D3F4; border: 1px solid #9FB2E9; border-left: 4px solid #5C74D8; border-radius: 10px; padding: 14px 16px; }
.erpp-pf-offices-row .erpp-pf-office[data-country="australia"] { background: #B9C9F2; border-color: #8FA6E5; border-left-color: #4964CE; }
.erpp-pf-office-head { display: flex; align-items: center; gap: 10px; }
.erpp-pf-pin-badge { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(92,116,216,.16); color: #5C74D8; }
.erpp-pf-offices-row .erpp-pf-office[data-country="australia"] .erpp-pf-pin-badge { background: rgba(73,100,206,.16); color: #4964CE; }
.erpp-pf-office-title { font-size: .98rem; font-weight: 700; color: #112954; line-height: 1.3; }
.erpp-pf-office-row { display: flex; gap: 8px; align-items: flex-start; }
.erpp-pf-icon { flex-shrink: 0; margin-top: 2px; color: #5C74D8; }
.erpp-pf-offices-row .erpp-pf-office[data-country="australia"] .erpp-pf-icon { color: #4964CE; }
.erpp-pf-addr-text { font-size: .84rem; line-height: 1.6; color: #263B60; }
.erpp-pf-offices-row .erpp-pf-office[data-country="australia"] .erpp-pf-addr-text { color: #20375E; }
.erpp-pf-office-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 0; padding-top: 8px; border-top: 1px solid rgba(17,41,84,.14); }
.erpp-pf-action { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: .84rem; font-weight: 600; color: #112954 !important; text-decoration: underline; text-underline-offset: 2px; }
.erpp-pf-action:hover { color: #0a1a38 !important; }
.erpp-pf-action .erpp-pf-icon { margin-top: 0; }
.erpp-pf-social { display: flex; gap: 9px; }
.erpp-pf-soc { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; color: var(--color-accent) !important; transition: background .2s, border-color .2s, color .2s; }
.erpp-pf-soc:hover { background: var(--color-primary-light) !important; border-color: var(--color-primary-light) !important; color: var(--color-text-inverse) !important; }

/* Nav columns */
.erpp-pf-col h4 { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-footer-heading); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--color-footer-border); }
.erpp-pf-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.erpp-pf-col li a { color: var(--color-footer-text) !important; text-decoration: none !important; font-size: .83rem; line-height: 1.4; display: block; transition: color .15s, padding-left .15s; }
.erpp-pf-col li a:hover { color: var(--color-footer-heading) !important; padding-left: 4px; }
.erpp-pf-col li.va a { color: var(--color-accent) !important; font-weight: 600; margin-top: 3px; }
.erpp-pf-col li.va a:hover { color: var(--color-primary-light) !important; }
.erpp-pf-col .h4-2 { margin-top: 22px; }

/* Bottom bar */
.erpp-pf-btm { border-top: 1px solid var(--color-footer-border); background: var(--color-footer-bg); }
.erpp-pf-btm-in { max-width: 1320px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.erpp-pf-btm-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.erpp-pf-btm-in p { margin: 0; color: var(--color-footer-text); font-size: .78rem; }
.erpp-pf-badges { display: flex; align-items: center; gap: 12px; }
.erpp-pf-badges img { height: 24px; width: auto; opacity: .82; transition: opacity .2s; background: var(--color-text-inverse); border-radius: 4px; padding: 2px 4px; }
.erpp-pf-badges a:hover img { opacity: 1; }
.erpp-pf-btm-links { display: flex; gap: 20px; }
.erpp-pf-btm-links a { color: var(--color-footer-text) !important; text-decoration: none !important; font-size: .78rem; transition: color .15s; }
.erpp-pf-btm-links a:hover { color: var(--color-footer-heading) !important; }

/* Responsive */
@media (max-width: 1024px) { .erpp-pf-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 1024px) { .erpp-pf-offices-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .erpp-pf-grid { grid-template-columns: 1fr; gap: 28px; }
  .erpp-pf-inner { padding: 44px 18px 32px; }
  .erpp-pf-btm-in { flex-direction: column; align-items: flex-start; }
  .erpp-pf-offices-row { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
}

/* Footer nav accordion — desktop unchanged (columns always open; the
   toggle/caret markup and JS listener stay wired but visually inert). */
.erpp-pf-acc-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; }
.erpp-pf-acc-caret { display: none; }

/* Phase 2.8-L6-P1 — mobile footer polish. The 3 dropdown/accordion
   link groups (Services/Resources/Company) read as an ugly
   select-style UI on mobile and Jagdish flagged them as not premium.
   Below 640px, the sections now render open/compact instead of
   collapsed: the heading stays visible (not clickable-looking, no
   caret), and each section's links lay out in a 2-column grid rather
   than one long stacked list — this keeps every link visible without
   an accordion interaction while roughly halving the vertical height
   each section would take as a single column (Services 5 links →
   3 rows instead of 5; Company 5 links → 3 rows; Resources 4 links →
   2 rows), avoiding excessive mobile scroll. The erpp-pf-acc-toggle
   button element and its JS click listener (blocks-frontend.js) are
   left completely wired for desktop's benefit — only visually
   neutralized here via pointer-events/cursor, so nothing needs to
   change in the template or JS. */
@media (max-width: 640px) {
  .erpp-pf-col h4 { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 10px 0; }
  .erpp-pf-col h4.h4-2 { margin-top: 18px; }
  .erpp-pf-acc-toggle { cursor: default; pointer-events: none; }
  .erpp-pf-acc-caret { display: none; }
  .erpp-pf-acc-panel { display: block !important; padding-bottom: 4px; }
  .erpp-pf-col ul { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
}


/* ============================================================
   8. FORMS
   ============================================================ */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  font-family: var(--font-family);
  font-size: var(--text-base);
  color: var(--color-text-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* ============================================================
   9. ACCORDION / FAQ
   ============================================================ */

#seoservice-faq button.accordion-button.collapsed {
  color: var(--color-text-body);
  background-color: var(--color-bg);
}

#seoservice-faq button.accordion-button,
#seoservice-faq button.accordion-button:not(.collapsed) {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ============================================================
   10. UTILITY OVERRIDES
   ============================================================ */

/* Section headings link color */
a,
a:visited {
  color: var(--color-primary);
  transition: var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

/* Brand-colored SVG fills */
.social-links__icon svg,
.footer-icon svg {
  transition: var(--transition-fast);
}

/* Accessibility: focus ring */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   11. RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {
  :root {
    --h1-size: 1.875rem;
    --h2-size: 1.5rem;
    --h3-size: 1.25rem;
    --text-4xl: 2.25rem;
  }

  .banner-text h1,
  .banner-text h2 {
    font-size: var(--text-3xl);
  }
}

@media (max-width: 767.98px) {
  :root {
    --h1-size: 1.625rem;
    --h2-size: 1.375rem;
    --h3-size: 1.125rem;
    --text-4xl: 1.875rem;
  }

  .with-background,
  .without-background {
    padding: 11px 24px;
    font-size: var(--text-xs);
  }
}


/* ============================================================
   12. RICH CONTENT FOUNDATION (Design System Phase 2 — Foundation)
   ============================================================
   Shared WYSIWYG/long-form typography for the existing
   `erp-peers/rich-content-section` block (blocks/rich-content-section/
   render.php — .erpp-rcs / .erpp-rcs__heading / .erpp-rcs__body).
   That block is already registered but not yet used by any template.
   This is foundation styling only — it is not wired into single.php,
   privacy_policy_page.php, or any other template in this milestone.
   Component adoption is a separate, later migration.
   ============================================================ */

.erpp-rcs {
  padding: var(--space-16) 0;
}

.erpp-rcs__heading {
  color: var(--color-text-heading);
  text-align: center;
  margin-bottom: var(--space-10);
}

/* Readable measure for long-form content — narrower than the
   surrounding Bootstrap .container, which is sized for general
   layout rather than comfortable reading line-length. */
.erpp-rcs__body {
  /* !important: bootstrap.min.css is enqueued last in this theme (verified
     live), so its equal-specificity .container max-width rules otherwise
     win at every breakpoint — the same reason this file's other component
     rules already use !important to override Bootstrap defaults. */
  max-width: var(--container-md) !important;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-text-body);
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
}

.erpp-rcs__body > *:first-child { margin-top: 0; }
.erpp-rcs__body > *:last-child  { margin-bottom: 0; }

.erpp-rcs__body h2,
.erpp-rcs__body h3,
.erpp-rcs__body h4,
.erpp-rcs__body h5,
.erpp-rcs__body h6 {
  color: var(--color-text-heading);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.erpp-rcs__body p {
  margin-top: 0;
  margin-bottom: var(--space-5);
}

.erpp-rcs__body ul,
.erpp-rcs__body ol {
  margin-top: 0;
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}

.erpp-rcs__body li + li {
  margin-top: var(--space-2);
}

.erpp-rcs__body blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  color: var(--color-text-heading);
  font-style: italic;
  border-radius: var(--radius-sm);
}

.erpp-rcs__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-6) 0;
}

/* Brand-aligned link color (Phase 2.8-L4-P3): this shared rich-content
   body class is used by single.php (blog articles),
   case_study_inner_page_template.php, product_page_template.php, and
   privacy_policy_page.php, but never had its own link color — inline
   colors picked in the block editor (including off-brand green on
   some older blog posts) were the only thing determining link color.
   Always wins over any per-post inline/preset color so links stay
   identifiable and on-brand everywhere this component is used. */
.erpp-rcs__body a {
  color: var(--color-primary-dark) !important;
  text-decoration: underline;
  text-decoration-color: rgba(55, 48, 163, .35);
  text-underline-offset: 2px;
  font-weight: 600;
}
.erpp-rcs__body a:hover {
  color: var(--color-primary) !important;
  text-decoration-color: currentColor;
}

/* Table Component System (M4, 2026-07-06): refined from the original
   Foundation Layer version — every cell had its own full border on all
   4 sides (a dense, spreadsheet-like look), no row differentiation,
   and no visual relationship to the card/shadow/radius language used
   everywhere else on the platform. Border-bottom-only + header shading
   + zebra striping + a subtle container treatment brings it in line
   with the Card System (System 4) primitive's own resting shadow.
   Mobile overflow handling (display:block + overflow-x:auto) was
   already correct and is unchanged below. */
.erpp-rcs__body table {
  width: 100%;
  margin: var(--space-6) 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.erpp-rcs__body table th,
.erpp-rcs__body table td {
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.erpp-rcs__body table tr:last-child td {
  border-bottom: none;
}

.erpp-rcs__body table th {
  background: var(--color-surface-2);
  color: var(--color-text-heading);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.erpp-rcs__body table tbody tr:nth-child(even) td {
  background: var(--color-surface);
}

@media (max-width: 767.98px) {
  .erpp-rcs {
    padding: var(--space-10) 0;
  }

  .erpp-rcs__body table {
    display: block;
    overflow-x: auto;
  }
}