/*
 * 4TRAC CONSULTING — Additional CSS
 * Paste this entire block into:
 *   WordPress Admin → Appearance → Customize → Additional CSS
 * Then click "Publish" in the top-left corner.
 *
 * What this fixes:
 *   1. Removes gradient from "Trusted by industry leaders" logo bar
 *   2. Aligns sub-page (About, Solutions, Contact, Privacy) colors to the
 *      homepage theme: navy #1A1A2E, gold #C8960C, Sora font
 *   3. Styles Gutenberg block buttons to match homepage gold CTA style
 *   4. Unifies section backgrounds, headings, and card styles site-wide
 */


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 1 — FONT IMPORT (Sora — same as homepage headings)
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2 — THEME TOKENS (mirrored from 4trac-final/style.css)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --navy:        #1A1A2E;
  --navy2:       #0F1923;
  --gold:        #C8960C;
  --gold-l:      #F0B429;
  --slate:       #4A5568;
  --body-color:  #2D3748;
  --lgray:       #F7F8FA;
  --mgray:       #E2E8F0;
  --radius:      12px;
  --shadow:      0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.14);
  --transition:  all 0.25s ease;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3 — TRUSTED BY / LOGO BAR GRADIENT FIX
   Removes any gradient, mask, or fade applied to the logos section
   ═══════════════════════════════════════════════════════════════════════════ */

/* Target the logos section by ID */
#logos {
  background: var(--navy2) !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Remove any pseudo-element gradients on the logos section */
#logos::before,
#logos::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Remove mask/gradient on the logos grid wrapper */
.logos-grid,
.logos-grid::before,
.logos-grid::after {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-image: none !important;
}

/* Remove any fade overlay on individual logo items */
.logo-item::before,
.logo-item::after {
  display: none !important;
}

/* Also target if it's rendered as a Gutenberg block group */
.wp-block-group:has(.logos-grid) {
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Fallback: if the logos section uses a generic class selector */
[id*="logo"],
[class*="logo-bar"],
[class*="clients"],
[class*="trusted"] {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4 — INNER PAGE BODY & BASE TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

/* Apply theme body font to all inner pages */
.page body,
.page .entry-content,
.single body,
.single .entry-content {
  font-family: 'Inter', sans-serif;
  color: var(--body-color);
}

/* Apply Sora to ALL headings site-wide to match homepage */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.entry-title {
  font-family: 'Sora', sans-serif !important;
  letter-spacing: -0.02em;
}

/* Heading color defaults */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--navy);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5 — INNER PAGE HERO / COVER BLOCKS
   Replaces Gamma blue (#1F4E79) with the theme's true navy (#1A1A2E)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cover blocks used as page heroes */
.wp-block-cover {
  font-family: 'Sora', sans-serif;
  position: relative;
  overflow: hidden;
}

/* Override the old Gamma blue (#1F4E79) to theme navy (#1A1A2E) */
.wp-block-cover[style*="background-color:#1F4E79"],
.wp-block-cover[style*="background-color: #1F4E79"],
.wp-block-cover[style*="background-color:#1f4e79"] {
  background-color: var(--navy) !important;
}

/* Subtle gold radial glow to match homepage hero feel */
.wp-block-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 70% 50%,
    rgba(200, 150, 12, 0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Push cover content above the pseudo glow */
.wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
}

/* Page hero H1 — match homepage h1 weight and size */
.wp-block-cover h1,
.wp-block-cover .wp-block-heading {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

/* Subtitle text inside cover blocks */
.wp-block-cover p {
  line-height: 1.7;
  font-size: clamp(16px, 2vw, 19px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6 — BUTTON STYLES
   Replaces blue/white block buttons with homepage gold primary style
   ═══════════════════════════════════════════════════════════════════════════ */

/* All WP block buttons — base style */
.wp-block-button__link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 16px 32px !important;
  font-size: 16px !important;
  letter-spacing: 0.01em !important;
  transition: var(--transition) !important;
  border: 2px solid transparent !important;
}

/* White buttons on dark backgrounds → gold shadow to match homepage feel */
.wp-block-button__link[style*="background-color:#ffffff"],
.wp-block-button__link[style*="background-color: #ffffff"],
.wp-block-button__link[style*="background:#fff"] {
  background-color: var(--gold) !important;
  color: var(--navy) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 4px 16px rgba(200, 150, 12, 0.35) !important;
}
.wp-block-button__link[style*="background-color:#ffffff"]:hover,
.wp-block-button__link[style*="background-color: #ffffff"]:hover {
  background-color: var(--gold-l) !important;
  border-color: var(--gold-l) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(200, 150, 12, 0.45) !important;
}

/* Outline buttons on dark backgrounds */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border-color: rgba(255,255,255,0.45) !important;
  color: #ffffff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: #ffffff !important;
}

/* Navy-colored buttons → convert to gold primary */
.wp-block-button__link[style*="background-color:#1F4E79"],
.wp-block-button__link[style*="background-color:#1f4e79"],
.wp-block-button__link[style*="background-color: #1F4E79"] {
  background-color: var(--gold) !important;
  color: var(--navy) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 4px 16px rgba(200,150,12,0.35) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7 — SECTION BACKGROUNDS
   Replaces old Gamma blue-tinted backgrounds with theme palette
   ═══════════════════════════════════════════════════════════════════════════ */

/* Gamma's light blue (#F0F6FC) → theme light gray (#F7F8FA) */
.wp-block-group[style*="background-color:#F0F6FC"],
.wp-block-group[style*="background-color:#f0f6fc"],
.wp-block-group[style*="background-color: #F0F6FC"] {
  background-color: var(--lgray) !important;
}

/* Gamma's Gutenberg navy (#1F4E79) sections → true theme navy (#1A1A2E) */
.wp-block-group[style*="background-color:#1F4E79"],
.wp-block-group[style*="background-color:#1f4e79"],
.wp-block-group[style*="background-color: #1F4E79"] {
  background-color: var(--navy) !important;
}

/* Gamma's dark gray (#1F2937) → theme navy2 (#0F1923) for dark sections */
.wp-block-group[style*="background-color:#1F2937"],
.wp-block-group[style*="background-color:#1f2937"],
.wp-block-group[style*="background-color: #1F2937"] {
  background-color: var(--navy2) !important;
}

/* Gamma blue column cards */
.wp-block-column[style*="background-color:#1F4E79"],
.wp-block-column[style*="background-color:#1f4e79"] {
  background-color: var(--navy) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8 — TEXT COLORS ON DARK BACKGROUNDS
   Ensures text inside navy sections is white/readable (not blue-tinted)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Body text on navy groups */
.wp-block-group[style*="background-color:#1A1A2E"] p,
.wp-block-group[style*="background-color:#1F4E79"] p,
.wp-block-group[style*="background-color:#0F1923"] p {
  color: rgba(255,255,255,0.72);
}

/* Headings on navy groups */
.wp-block-group[style*="background-color:#1A1A2E"] h1,
.wp-block-group[style*="background-color:#1A1A2E"] h2,
.wp-block-group[style*="background-color:#1A1A2E"] h3,
.wp-block-group[style*="background-color:#1F4E79"] h2,
.wp-block-group[style*="background-color:#1F4E79"] h3 {
  color: #ffffff;
}

/* Eyebrow labels — apply gold color to uppercase tracking labels */
.wp-block-heading[style*="font-size:13px"],
h6.wp-block-heading {
  color: var(--gold) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9 — CARD & GROUP BORDER RADIUS
   Matches the theme's --radius: 12px for cards and blocks
   ═══════════════════════════════════════════════════════════════════════════ */

.wp-block-group[style*="border-radius"],
.wp-block-column[style*="border-radius"] {
  border-radius: var(--radius) !important;
}

/* Service/feature cards */
.wp-block-group[style*="padding:32px"],
.wp-block-group[style*="padding: 32px"] {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.wp-block-group[style*="padding:32px"]:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 10 — STATS / NUMBERS DISPLAY
   Makes stat numbers use Sora 800 to match homepage stat blocks
   ═══════════════════════════════════════════════════════════════════════════ */

/* Large stat numbers (the 20+, 200+, 98% blocks) */
.wp-block-heading[style*="font-size:56px"],
.wp-block-heading[style*="font-size: 56px"],
.wp-block-heading[style*="font-size:40px"],
.wp-block-heading[style*="font-size: 40px"] {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 11 — PAGE HEADER / TITLE AREA
   Hides the default WP page title shown above content (we use the
   wp:cover block as our own styled hero instead)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide the default WP page title that appears before the Gutenberg content */
.page .entry-header,
.page .page-header,
.single .entry-header {
  display: none;
}

/* Remove default top padding that WP adds above the first block */
.page .entry-content,
.single .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Remove WordPress.com "Share this" / "Like this" widgets on pages */
.page .sharedaddy,
.page .jp-relatedposts,
.page .wpl-likebox,
.page #jp-post-flair {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 12 — SEPARATOR / DIVIDER
   Matches homepage's subtle divider color
   ═══════════════════════════════════════════════════════════════════════════ */

.wp-block-separator {
  border-color: var(--mgray) !important;
  opacity: 1 !important;
}

.wp-block-separator[style*="background-color:#1F4E79"],
.wp-block-separator[style*="border-color:#1F4E79"] {
  border-color: var(--gold) !important;
  background-color: var(--gold) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 13 — LINKS
   Matches homepage link/hover color
   ═══════════════════════════════════════════════════════════════════════════ */

.entry-content a:not(.wp-block-button__link) {
  color: var(--gold);
  text-decoration: none;
  transition: var(--transition);
}
.entry-content a:not(.wp-block-button__link):hover {
  color: var(--gold-l);
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 14 — RESPONSIVE CLEANUP
   Ensures blocks stack cleanly on mobile
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .wp-block-cover {
    min-height: 260px !important;
    padding: 48px 24px !important;
  }
  .wp-block-cover h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
  }
  .wp-block-columns {
    flex-direction: column;
  }
  .wp-block-button__link {
    padding: 14px 24px !important;
    font-size: 15px !important;
  }
}