/*
 Theme Name:   ExportBali Child
 Theme URI:    https://www.exportbali.com
 Description:  ExportBali Sourcing Agency — Kadence child theme v1.5
 Author:       ExportBali Sourcing Agency
 Author URI:   https://www.exportbali.com
 Template:     kadence
 Version:      1.5.0
 Text Domain:  exportbali-child
*/

/*
 ══════════════════════════════════════════════════════
 EXPORTBALI BRAND SYSTEM — verified against brand docs
 ══════════════════════════════════════════════════════
 Bali Teal    #006B7D  Primary. Buttons, links, accents, borders
 Deep Navy    #1A2B4A  Navigation, footer, H1 display text
 Amber Gold   #D97706  Warnings & callouts ONLY — never background
 Light Teal   #E0F2F7  Info boxes, alternating section backgrounds
 Body Text    #374151  All paragraph text — never pure black
 Light Text   #6B7280  Captions, meta, secondary info
 Light BG     #F5F5F5  Card backgrounds, alternating sections
 White        #FFFFFF  Main page background

 TYPOGRAPHY (from brand communications document):
 H1           Playfair Display, Bold — authority, premium
 H2, H3       Inter, SemiBold 600 — clean, clear hierarchy
 Body         Inter, Regular 400 — consistent, legible
 ══════════════════════════════════════════════════════
*/

/* ── KADENCE CSS VARIABLE OVERRIDES ─────────────────────── */
:root {
  --global-palette1: #006B7D;
  --global-palette2: #005A6A;
  --global-palette3: #1A2B4A;
  --global-palette4: #D97706;
  --global-palette5: #374151;
  --global-palette6: #6B7280;
  --global-palette7: #9CA3AF;
  --global-palette8: #F5F5F5;
  --global-palette9: #FFFFFF;
  --global-font-size-body: 16px;

  /* ExportBali design tokens */
  --eb-teal:       #006B7D;
  --eb-teal-dark:  #005A6A;
  --eb-teal-light: #E0F2F7;
  --eb-navy:       #1A2B4A;
  --eb-gold:       #D97706;
  --eb-body:       #374151;
  --eb-light:      #6B7280;
  --eb-lightest:   #9CA3AF;
  --eb-bg-alt:     #F8FAFB;
  --eb-bg-teal:    #E0F2F7;
  --eb-bg-light:   #F5F5F5;
  --eb-white:      #FFFFFF;

  /* Fonts */
  --eb-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --eb-sans:    'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing & layout */
  --eb-radius:  6px;
  --eb-max:     1160px;
  --eb-trans:   0.2s ease;
}

/* ── BASE RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--eb-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--eb-body);
  background: var(--eb-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--eb-teal);
  text-decoration: none;
  transition: color var(--eb-trans);
}
a:hover { color: var(--eb-teal-dark); text-decoration: underline; }

/* ── TYPOGRAPHY HIERARCHY ────────────────────────────────── */

/* H1: Playfair Display — brand display font, authority feel */
h1, .wp-block-heading.is-style-display {
  font-family: var(--eb-serif);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--eb-navy);
  margin-bottom: 1.25rem;
}

/* H2 + H3: Inter SemiBold — clean, structured hierarchy */
h2, h3, h4, h5, h6 {
  font-family: var(--eb-sans);
  font-weight: 600;
  line-height: 1.3;
  color: var(--eb-navy);
  margin-bottom: 1rem;
}

h2 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.375rem); margin-bottom: 0.75rem; }
h4 { font-size: 1.125rem; margin-bottom: 0.625rem; }

.wp-block-heading { color: var(--eb-navy); }

p {
  margin-bottom: 1.25rem;
  max-width: 72ch;
}
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--eb-navy); }

/* Eyebrow label: small all-caps in teal above headings */
.eb-eyebrow {
  display: block;
  font-family: var(--eb-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eb-teal);
  margin-bottom: 0.75rem;
  max-width: none;
}

/* ── HEADER & NAVIGATION ─────────────────────────────────── */

/* Force Deep Navy on the header */
.site-header,
#masthead,
.kadence-header,
header.site-header {
  background-color: var(--eb-navy) !important;
  border-bottom: 3px solid var(--eb-teal) !important;
}

/* ── SITE BRANDING — bulletproof against Kadence specificity ──
   Covers every markup variant Kadence uses for the title. */
.site-header .site-branding,
.site-header .site-branding * {
  color: #FFFFFF !important;
}
.site-title,
.site-title a,
.site-branding .site-title,
.site-branding .site-title a,
.site-header .site-title,
.site-header .site-title a,
h1.site-title, p.site-title,
.kadence-logo-links a,
a.brand {
  font-family: var(--eb-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(1.25rem, 3.4vw, 1.85rem) !important;
  line-height: 1.2 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
@media (min-width: 1200px) {
  .site-title, .site-title a,
  .site-branding .site-title a,
  .site-header .site-title a {
    font-size: 2rem !important;
  }
}
.site-title a:hover,
.site-branding .site-title a:hover {
  color: var(--eb-teal-light) !important;
}
.site-branding .site-description,
.site-header .site-description {
  font-family: var(--eb-sans) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
  margin: 2px 0 0 !important;
}
/* Header vertical padding so branding breathes */
.site-header .site-branding { padding: 14px 0; }

/* Nav links */
.main-navigation a,
.kadence-navigation a,
#site-navigation a,
.primary-navigation a {
  font-family: var(--eb-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.82) !important;
  letter-spacing: 0.01em;
  padding: 8px 14px !important;
  transition: color var(--eb-trans) !important;
  text-decoration: none !important;
}
.main-navigation a:hover,
.kadence-navigation a:hover {
  color: var(--eb-white) !important;
}

/* Active/current nav item */
.main-navigation .current-menu-item > a,
.kadence-navigation .current-menu-item > a {
  color: var(--eb-white) !important;
  border-bottom: 2px solid var(--eb-teal);
}

/* Header CTA button */
.menu-item-cta a,
.nav-cta a {
  background: var(--eb-teal) !important;
  color: var(--eb-white) !important;
  border-radius: var(--eb-radius) !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  transition: background var(--eb-trans) !important;
}
.menu-item-cta a:hover { background: var(--eb-teal-dark) !important; }

/* Mobile hamburger */
.menu-toggle, .kadence-menu-toggle,
.menu-toggle-open, .mobile-toggle-open,
.site-header button[aria-label*="menu" i],
.site-header .menu-toggle-icon {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}
.site-header button:hover .menu-toggle-icon { color: var(--eb-teal-light) !important; }

/* ── BUTTONS ─────────────────────────────────────────────── */

.wp-block-button__link,
.wp-element-button {
  font-family: var(--eb-sans) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  border-radius: var(--eb-radius) !important;
  padding: 14px 28px !important;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--eb-trans), color var(--eb-trans),
              border-color var(--eb-trans), box-shadow var(--eb-trans) !important;
  letter-spacing: 0.01em;
}

/* Primary: teal fill */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--eb-teal) !important;
  color: var(--eb-white) !important;
  border: 2px solid var(--eb-teal) !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--eb-teal-dark) !important;
  border-color: var(--eb-teal-dark) !important;
  box-shadow: 0 4px 14px rgba(0,107,125,0.3);
  text-decoration: none !important;
}

/* Secondary: outline */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--eb-teal) !important;
  border: 2px solid var(--eb-teal) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--eb-teal) !important;
  color: var(--eb-white) !important;
  text-decoration: none !important;
}

/* White outline variant (used on dark backgrounds) */
.wp-block-button.is-style-outline .wp-block-button__link[style*="color:#FFFFFF"],
.wp-block-button.is-style-outline .wp-block-button__link[style*="color: #FFFFFF"] {
  border-color: rgba(255,255,255,0.6) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link[style*="color:#FFFFFF"]:hover {
  background: rgba(255,255,255,0.12) !important;
}

/* ── HERO SECTION ────────────────────────────────────────── */

/* Subtle diagonal texture — craft/texture nod without being obvious */
.eb-hero,
.wp-block-cover.eb-hero {
  position: relative;
  overflow: hidden;
}
.eb-hero::before,
.wp-block-cover.eb-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 48px,
    rgba(0,107,125,0.035) 48px,
    rgba(0,107,125,0.035) 49px
  );
  pointer-events: none;
  z-index: 0;
}

/* Teal accent rule under H1 in hero sections */
.wp-block-cover.eb-hero h1::after,
.eb-hero h1::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--eb-teal);
  margin-top: 20px;
  margin-bottom: 28px;
}

/* ── CARDS ───────────────────────────────────────────────── */

.eb-card {
  background: var(--eb-white);
  border: 1px solid rgba(0,107,125,0.13);
  border-radius: var(--eb-radius);
  padding: 28px 24px;
  height: 100%;
  transition: box-shadow var(--eb-trans), border-color var(--eb-trans),
              transform var(--eb-trans);
}
.eb-card:hover {
  box-shadow: 0 8px 28px rgba(26,43,74,0.1);
  border-color: rgba(0,107,125,0.35);
  transform: translateY(-2px);
}
.eb-card-icon {
  width: 48px;
  height: 48px;
  background: var(--eb-bg-teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  margin-bottom: 1rem;
  line-height: 1;
}
.eb-card h3 {
  font-family: var(--eb-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--eb-navy);
  margin-bottom: 0.5rem;
}
.eb-card p {
  font-size: 0.9375rem;
  color: var(--eb-light);
  margin-bottom: 0.5rem;
  max-width: none;
}
.eb-card a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--eb-teal);
}

/* Make columns equal height so cards line up */
.wp-block-columns {
  align-items: stretch !important;
}
.wp-block-column {
  display: flex;
  flex-direction: column;
}
.wp-block-column > .eb-card {
  flex: 1;
}

/* ── PROCESS STEPS ───────────────────────────────────────── */

.eb-steps { counter-reset: eb-step; list-style: none; padding: 0; margin: 0; }
.eb-steps li {
  counter-increment: eb-step;
  padding-left: 64px;
  position: relative;
  margin-bottom: 2rem;
}
.eb-steps li::before {
  content: counter(eb-step);
  position: absolute;
  left: 0; top: 0;
  width: 42px; height: 42px;
  background: var(--eb-teal);
  color: var(--eb-white);
  border-radius: 50%;
  font-family: var(--eb-serif);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── STATS STRIP ─────────────────────────────────────────── */

.eb-stat-number {
  font-family: var(--eb-serif);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--eb-teal-light);
  line-height: 1;
  display: block;
}
.eb-stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-top: 6px;
}

/* ── FAQ ─────────────────────────────────────────────────── */

.eb-faq-item {
  border-bottom: 1px solid rgba(0,107,125,0.12);
  padding: 22px 0;
}
.eb-faq-item:first-of-type { border-top: 1px solid rgba(0,107,125,0.12); }
.eb-faq-q {
  font-family: var(--eb-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--eb-navy);
  margin-bottom: 0.625rem;
  max-width: none;
}
.eb-faq-a {
  color: var(--eb-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 0;
  max-width: none;
}

/* ── TABLES ──────────────────────────────────────────────── */

.wp-block-table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  overflow-x: auto;
  display: block;
}
.wp-block-table thead th {
  background: var(--eb-navy);
  color: var(--eb-white);
  font-family: var(--eb-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
}
.wp-block-table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid #E5E7EB;
  vertical-align: top;
  color: var(--eb-body);
}
.wp-block-table tbody tr:nth-child(even) td {
  background: var(--eb-bg-teal);
}
.wp-block-table tbody tr:hover td { background: #f0f8fa; }

/* ── BLOCKQUOTES & PULLQUOTES ────────────────────────────── */

blockquote,
.wp-block-quote {
  border-left: 4px solid var(--eb-teal);
  background: var(--eb-bg-teal);
  padding: 24px 28px;
  border-radius: 0 var(--eb-radius) var(--eb-radius) 0;
  margin: 2rem 0;
  font-style: italic;
  color: var(--eb-navy);
}
blockquote cite,
.wp-block-quote cite {
  display: block;
  margin-top: 12px;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--eb-light);
}

/* ── SEPARATOR ───────────────────────────────────────────── */

.wp-block-separator, hr {
  border: none;
  border-top: 1px solid rgba(0,107,125,0.14);
  margin: 44px 0;
}

/* ── FORMS (WPForms) ─────────────────────────────────────── */

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="url"],
.wpforms-form textarea,
.wpforms-form select {
  border: 1.5px solid #D1D5DB !important;
  border-radius: var(--eb-radius) !important;
  padding: 11px 15px !important;
  font-family: var(--eb-sans) !important;
  font-size: 1rem !important;
  color: var(--eb-body) !important;
  background: var(--eb-white) !important;
  width: 100% !important;
  transition: border-color var(--eb-trans), box-shadow var(--eb-trans) !important;
}
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
  border-color: var(--eb-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,107,125,0.1) !important;
}
.wpforms-form label {
  font-family: var(--eb-sans) !important;
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
  color: var(--eb-navy) !important;
  margin-bottom: 5px !important;
  display: block !important;
}
.wpforms-form .wpforms-submit,
.wpforms-submit-container .wpforms-submit {
  background: var(--eb-teal) !important;
  color: var(--eb-white) !important;
  border: none !important;
  border-radius: var(--eb-radius) !important;
  padding: 13px 32px !important;
  font-family: var(--eb-sans) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: background var(--eb-trans) !important;
}
.wpforms-form .wpforms-submit:hover { background: var(--eb-teal-dark) !important; }

/* ── FOOTER ──────────────────────────────────────────────── */

.site-footer,
#colophon,
.kadence-footer {
  background-color: var(--eb-navy) !important;
  color: rgba(255,255,255,0.72) !important;
  border-top: 3px solid var(--eb-teal) !important;
  padding-top: 52px;
  padding-bottom: 32px;
}
.site-footer a { color: rgba(255,255,255,0.88); transition: color var(--eb-trans); font-weight: 500; }
.site-footer a:hover { color: var(--eb-white); text-decoration: underline; }

/* Footer navigation menu specifically (Kadence's nav block) */
.site-footer nav a,
.site-footer .kadence-navigation a,
footer nav a {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
}
.site-footer nav a:hover,
footer nav a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}
.site-footer h3,
.site-footer h4,
.footer-widget-title,
.widget-title {
  font-family: var(--eb-sans) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--eb-white) !important;
  margin-bottom: 1rem !important;
}
.footer-bottom-wrap,
.site-footer .site-info {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 40px;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
}
.footer-bottom-wrap a { color: rgba(255,255,255,0.45); }

/* ── BREADCRUMBS ─────────────────────────────────────────── */

.rank-math-breadcrumb,
.kadence-breadcrumbs,
.breadcrumb-trail {
  font-size: 0.8125rem;
  color: var(--eb-light);
  padding: 10px 0;
  max-width: none;
}
.rank-math-breadcrumb a,
.kadence-breadcrumbs a { color: var(--eb-teal); }
.rank-math-breadcrumb .separator { margin: 0 7px; color: var(--eb-lightest); }

/* ── WHATSAPP FLOATING BUTTON ────────────────────────────── */

.eb-whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
  z-index: 9999;
  text-decoration: none !important;
  transition: transform var(--eb-trans), box-shadow var(--eb-trans);
}
.eb-whatsapp-float:hover {
  transform: scale(1.07);
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
}
.eb-whatsapp-float svg { width: 30px; height: 30px; fill: #FFFFFF; }

/* ── LISTS ───────────────────────────────────────────────── */

.wp-block-list {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}
.wp-block-list li {
  margin-bottom: 0.5rem;
  color: var(--eb-body);
  line-height: 1.65;
}
.wp-block-list li::marker { color: var(--eb-teal); }

/* ── IMAGES ──────────────────────────────────────────────── */

.eb-rounded img,
.wp-block-image.eb-rounded img { border-radius: var(--eb-radius); }
.wp-block-image figcaption {
  font-size: 0.8125rem;
  color: var(--eb-light);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* ── UTILITY CLASSES ─────────────────────────────────────── */

.text-teal  { color: var(--eb-teal); }
.text-navy  { color: var(--eb-navy); }
.text-gold  { color: var(--eb-gold); }
.text-light { color: var(--eb-light); }
.text-white { color: var(--eb-white); }
.bg-navy    { background: var(--eb-navy); }
.bg-teal-lt { background: var(--eb-bg-teal); }
.bg-alt     { background: var(--eb-bg-alt); }
.max-w-prose { max-width: 65ch; margin-left: auto; margin-right: auto; }

/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 768px) {
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.125rem; }

  .wp-block-columns {
    flex-direction: column !important;
    gap: 20px;
  }
  .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
  .wp-block-column > .eb-card { height: auto; }

  .eb-whatsapp-float { bottom: 20px; right: 20px; width: 52px; height: 52px; }
  .eb-whatsapp-float svg { width: 26px; height: 26px; }

  .wp-block-table table { font-size: 0.8125rem; }
  .wp-block-table thead th,
  .wp-block-table tbody td { padding: 9px 11px; }

  .wp-block-button__link { width: 100%; text-align: center; padding: 13px 20px !important; }
  .wp-block-buttons { flex-direction: column; }
  .wp-block-buttons .wp-block-button { width: 100%; }
}

@media (max-width: 480px) {
  body { font-size: 0.9375rem; }
  p { font-size: 0.9375rem; }
  h1 { font-size: 1.625rem; }
}

/* ── ACCESSIBILITY ───────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--eb-teal);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .eb-card:hover { transform: none; }
}

/* Skip to content */
.skip-link:focus {
  background: var(--eb-teal);
  color: var(--eb-white);
  padding: 8px 16px;
  position: fixed;
  top: 0; left: 0;
  z-index: 99999;
}



/* ══════════════════════════════════════════════════════
   v1.2 DESIGN POLISH
   ══════════════════════════════════════════════════════ */

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

/* Brand-colored text selection — small detail, feels intentional */
::selection { background: var(--eb-teal); color: #FFFFFF; }

/* Footer credit line: neutral until you edit it in
   Customizer > Footer (free Kadence feature). Kept legible. */
.site-footer .footer-credits,
.site-footer .site-info,
.footer-html-inner {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.4) !important;
}
.site-footer .footer-credits a { color: rgba(255,255,255,0.4) !important; }

/* Link polish: cleaner underlines on hover */
.entry-content a:not(.wp-block-button__link):hover {
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* Hero depth: subtle gradient instead of flat navy */
.wp-block-cover.eb-hero,
.eb-hero {
  background: linear-gradient(160deg, #1A2B4A 0%, #16253F 55%, #12304A 100%) !important;
}

/* Card link arrows nudge on hover */
.eb-card a { transition: padding-left var(--eb-trans); display: inline-block; }
.eb-card:hover a { padding-left: 3px; }

/* Table wrapper: prevent layout break on narrow screens */
.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sticky header support (enable in Customizer > Header > Sticky) */
.site-header.item-is-fixed,
#masthead.item-is-fixed {
  background-color: rgba(26,43,74,0.97) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
}

/* Mobile drawer menu: keep it navy + readable */
.mobile-navigation,
.popup-drawer,
#mobile-drawer {
  background-color: var(--eb-navy) !important;
}
.mobile-navigation a,
.popup-drawer a,
#mobile-drawer a {
  color: rgba(255,255,255,0.85) !important;
  font-family: var(--eb-sans) !important;
  font-size: 1rem !important;
  padding: 12px 0 !important;
}
.mobile-navigation a:hover,
#mobile-drawer a:hover { color: #FFFFFF !important; }

/* Slightly larger tap targets on mobile */
@media (max-width: 768px) {
  .main-navigation a, .mobile-navigation a { min-height: 44px; display: flex; align-items: center; }
  .site-header .site-branding { padding: 10px 0; }
}


/* ══════════════════════════════════════════════════════
   v1.3 CRITICAL FIX — universal side padding
   Some Kadence content blocks (e.g. plain wp-block-group
   without explicit padding, like "How It Works" sections)
   were rendering flush against the viewport edge, cutting
   off text on mobile. This guarantees minimum breathing
   room on every content section site-wide, at every width.
   ══════════════════════════════════════════════════════ */

.entry-content > *,
.content-container > .wp-block-group,
main .wp-block-group:not(.eb-hero):not(.wp-block-cover) {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  box-sizing: border-box;
}

/* Full-bleed sections (colored backgrounds meant to touch
   the edge) get generous INNER padding instead, so text
   never sits flush against the browser edge */
main .wp-block-group[style*="background-color"] {
  padding-left: max(24px, calc((100vw - var(--eb-max)) / 2 + 24px));
  padding-right: max(24px, calc((100vw - var(--eb-max)) / 2 + 24px));
}

@media (max-width: 600px) {
  main .wp-block-group[style*="background-color"] {
    padding-left: 20px;
    padding-right: 20px;
  }
  .entry-content > *,
  main .wp-block-group:not(.eb-hero):not(.wp-block-cover) {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* ══════════════════════════════════════════════════════
   v1.4 — CTA BAND DEPTH
   Full-width colored sections (teal "Ready to source" CTA,
   navy quote sections) previously had no texture and no
   width constraint on their text, so on wide screens they
   read as empty. This adds the same subtle diagonal texture
   used in the hero, tightens text measure, and adds a thin
   accent border top/bottom for definition.
   ══════════════════════════════════════════════════════ */

main .wp-block-group[style*="background-color:#006B7D"],
main .wp-block-group[style*="background-color: #006B7D"],
main .wp-block-group[style*="background-color:#1A2B4A"],
main .wp-block-group[style*="background-color: #1A2B4A"] {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

main .wp-block-group[style*="background-color:#006B7D"]::before,
main .wp-block-group[style*="background-color: #006B7D"]::before,
main .wp-block-group[style*="background-color:#1A2B4A"]::before,
main .wp-block-group[style*="background-color: #1A2B4A"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 44px,
    rgba(255,255,255,0.035) 44px,
    rgba(255,255,255,0.035) 45px
  );
  pointer-events: none;
  z-index: 0;
}

/* Constrain text so it doesn't float loosely on wide screens */
main .wp-block-group[style*="background-color:#006B7D"] > *,
main .wp-block-group[style*="background-color: #006B7D"] > * {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tighten vertical rhythm slightly so the band feels intentional, not padded-out */
main .wp-block-group[style*="background-color:#006B7D"] {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* Subtle glow behind the button for a bit of polish */
main .wp-block-group[style*="background-color:#006B7D"] .wp-block-buttons {
  margin-top: 8px;
}
main .wp-block-group[style*="background-color:#006B7D"] .wp-block-button__link {
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}


/* ══════════════════════════════════════════════════════
   v1.5 FIXES
   ══════════════════════════════════════════════════════ */

/* FIX 1 — Force inline text-align:center to actually apply.
   Kadence's own paragraph styles were overriding our
   deliberately-centered intro paragraphs (e.g. "Most clients
   mix categories..."), pushing them left despite the inline
   style. This guarantees any element we intentionally
   centered stays centered, everywhere, on every page. */
p[style*="text-align:center"],
p[style*="text-align: center"],
.wp-block-paragraph[style*="text-align:center"],
.wp-block-paragraph[style*="text-align: center"] {
  text-align: center !important;
}

/* FIX 2 — Hero texture was being muted by Kadence's own
   Cover-block overlay span, which sits between our ::before
   texture and the visible surface. Raise texture opacity and
   force explicit stacking so it reads clearly, matching the
   visibility of the same texture on plain-group sections
   further down the page. */
.wp-block-cover.eb-hero .wp-block-cover__background {
  z-index: 0 !important;
}
.wp-block-cover.eb-hero::before {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 44px,
    rgba(0,180,205,0.09) 44px,
    rgba(0,180,205,0.09) 45px
  ) !important;
  z-index: 1 !important;
}
.wp-block-cover.eb-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}