/*
 * Customized Technology — brand refresh (§5 of customizetech-webupdate-plan.md)
 * Veteran-owned IT / Web / Custom Dev — Spokane, CdA, North Idaho
 *
 * Scoped to .ct-* classes so it does NOT override the existing dark-mode
 * "AI agency" styling until Phase 1 rewrites the homepage to use these.
 */

:root {
  /* Brand palette (§5) */
  --ct-navy: #1F3864;
  --ct-navy-700: #16294A;
  --ct-navy-50: #EAEEF6;
  --ct-red: #C00000;
  --ct-red-700: #8E0000;
  --ct-gray: #595959;
  --ct-light-bg: #F2F2F2;
  --ct-red-bg: #FBEDED;
  --ct-dark-text: #1A1A1A;
  --ct-white: #FFFFFF;

  /* Typography (§5: Arial body, with optional Inter via Google Fonts) */
  --ct-font-body: "Inter", "Arial", "Helvetica Neue", Helvetica, sans-serif;
  --ct-font-heading: "Inter", "Arial", "Helvetica Neue", Helvetica, sans-serif;

  /* Sizing */
  --ct-container-max: 1200px;
  --ct-radius: 6px;
  --ct-radius-lg: 12px;
  --ct-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ct-shadow-md: 0 4px 12px rgba(31, 56, 100, 0.10);
}

/* ── Container ────────────────────────────────────────────────── */

.ct-brand-container {
  max-width: var(--ct-container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Section base (light-mode brand sections) ─────────────────── */

.ct-section--brand {
  background: var(--ct-white);
  color: var(--ct-dark-text);
  font-family: var(--ct-font-body);
  padding: 80px 0;
}

.ct-section--brand.ct-section--tinted {
  background: var(--ct-light-bg);
}

.ct-section--brand.ct-section--navy {
  background: var(--ct-navy);
  color: var(--ct-white);
}

/* ── Headings (§5: navy, bold, generous spacing) ─────────────── */

.ct-h1,
.ct-h2,
.ct-h3,
.ct-h4 {
  font-family: var(--ct-font-heading);
  color: var(--ct-navy);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
}

.ct-section--navy .ct-h1,
.ct-section--navy .ct-h2,
.ct-section--navy .ct-h3,
.ct-section--navy .ct-h4 {
  color: var(--ct-white);
}

.ct-h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.01em; }
.ct-h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.ct-h3 { font-size: 1.25rem; }
.ct-h4 { font-size: 1.0625rem; }

/* ── Subhead with 2px red underline (§5) ─────────────────────── */

.ct-subhead {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ct-red);
  font-family: var(--ct-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ct-navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 24px;
}

.ct-section--navy .ct-subhead {
  color: var(--ct-white);
}

/* ── Buttons (§5: primary navy fill / secondary navy outline) ── */

.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ct-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--ct-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ct-btn--primary {
  background: var(--ct-navy);
  color: var(--ct-white);
  border: 2px solid var(--ct-navy);
}

.ct-btn--primary:hover,
.ct-btn--primary:focus {
  background: var(--ct-navy-700);
  border-color: var(--ct-navy-700);
  color: var(--ct-white);
}

.ct-btn--secondary {
  background: transparent;
  color: var(--ct-navy);
  border: 2px solid var(--ct-navy);
}

.ct-btn--secondary:hover,
.ct-btn--secondary:focus {
  background: var(--ct-navy);
  color: var(--ct-white);
}

.ct-btn--red {
  background: var(--ct-red);
  color: var(--ct-white);
  border: 2px solid var(--ct-red);
}

.ct-btn--red:hover,
.ct-btn--red:focus {
  background: var(--ct-red-700);
  border-color: var(--ct-red-700);
}

/* On navy sections, flip outline button to white */
.ct-section--navy .ct-btn--secondary {
  color: var(--ct-white);
  border-color: var(--ct-white);
}

.ct-section--navy .ct-btn--secondary:hover {
  background: var(--ct-white);
  color: var(--ct-navy);
}

/* ── Veteran-Owned badge (§5 D3) ─────────────────────────────── */

.ct-vet-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ct-white);
  border: 2px solid var(--ct-navy);
  border-radius: var(--ct-radius);
  padding: 8px 14px;
  font-family: var(--ct-font-body);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ct-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
}

.ct-vet-badge__flag {
  width: 22px;
  height: 14px;
  flex-shrink: 0;
  display: inline-block;
  background:
    linear-gradient(
      to bottom,
      var(--ct-red) 0 14.28%,
      #FFFFFF 14.28% 28.57%,
      var(--ct-red) 28.57% 42.85%,
      #FFFFFF 42.85% 57.14%,
      var(--ct-red) 57.14% 71.42%,
      #FFFFFF 71.42% 85.71%,
      var(--ct-red) 85.71% 100%
    );
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}

.ct-vet-badge__flag::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  height: 57.14%;
  background: var(--ct-navy);
}

/* Hero variant — larger badge for above-the-fold (§5)
   `display: flex` + `width: max-content` makes the badge claim its own line
   so following inline-block elements (like `.ct-subhead`) wrap below it. */
.ct-vet-badge--hero {
  display: flex;
  width: max-content;
  font-size: 1rem;
  padding: 10px 18px;
  margin-bottom: 16px;
}

.ct-vet-badge--hero .ct-vet-badge__flag {
  width: 28px;
  height: 18px;
}

/* Header variant — compact for persistent site header */
.ct-vet-badge--header {
  font-size: 0.75rem;
  padding: 6px 10px;
  border-width: 1px;
}

.ct-vet-badge--header .ct-vet-badge__flag {
  width: 18px;
  height: 12px;
}

/* On navy sections, invert badge */
.ct-section--navy .ct-vet-badge {
  background: transparent;
  color: var(--ct-white);
  border-color: var(--ct-white);
}

/* ── Trust strip (4-icon row, §4.1) ──────────────────────────── */

.ct-trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  padding: 32px 0;
  text-align: center;
  font-family: var(--ct-font-body);
  color: var(--ct-dark-text);
}

.ct-trust-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ct-navy);
}

.ct-trust-strip__icon {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin: 0;
}

/* ── Lane cards (3-up grid, §4.1 / §4.2) ─────────────────────── */

.ct-lane-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.ct-lane-card {
  background: var(--ct-white);
  border: 1px solid #E5E7EB;
  border-top: 4px solid var(--ct-navy);
  border-radius: var(--ct-radius-lg);
  padding: 28px;
  box-shadow: var(--ct-shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  font-family: var(--ct-font-body);
  color: var(--ct-dark-text);
}

.ct-lane-card:hover {
  box-shadow: var(--ct-shadow-md);
  transform: translateY(-2px);
}

/* When a lane card itself is a link (whole-card anchor), strip default link styling */
a.ct-lane-card,
a.ct-lane-card:hover,
a.ct-lane-card:focus {
  text-decoration: none;
  color: inherit;
  display: block;
}

.ct-lane-card__title {
  color: var(--ct-navy);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px;
}

.ct-lane-card__subline {
  color: var(--ct-gray);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ct-lane-card__price {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 10px;
  background: var(--ct-navy-50);
  color: var(--ct-navy);
  font-weight: 700;
  font-size: 0.8125rem;
  border-radius: var(--ct-radius);
}

/* ── "Important" callout — red bg (§4.5) ─────────────────────── */

.ct-important-callout {
  background: var(--ct-red-bg);
  border-left: 4px solid var(--ct-red);
  border-radius: var(--ct-radius);
  padding: 16px 20px;
  margin: 24px 0;
  color: var(--ct-dark-text);
  font-family: var(--ct-font-body);
}

.ct-important-callout__title {
  display: block;
  color: var(--ct-red);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  margin-bottom: 4px;
}

/* ── Pricing table (lane pages, §4.3) ────────────────────────── */

.ct-pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ct-font-body);
  font-size: 0.9375rem;
  margin: 24px 0;
}

.ct-pricing-table th,
.ct-pricing-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid #E5E7EB;
}

.ct-pricing-table thead th {
  background: var(--ct-navy);
  color: var(--ct-white);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.ct-pricing-table tbody tr:hover {
  background: var(--ct-light-bg);
}

.ct-pricing-table .ct-price {
  color: var(--ct-navy);
  font-weight: 700;
  white-space: nowrap;
}

/* ── Testimonial card (§4.1) ─────────────────────────────────── */

.ct-testimonial {
  background: var(--ct-white);
  border: 1px solid #E5E7EB;
  border-radius: var(--ct-radius-lg);
  padding: 24px;
  font-family: var(--ct-font-body);
  color: var(--ct-dark-text);
}

.ct-testimonial__quote {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0 0 16px;
  color: var(--ct-dark-text);
}

.ct-testimonial__author {
  font-weight: 700;
  color: var(--ct-navy);
  font-size: 0.9375rem;
}

.ct-testimonial__location {
  color: var(--ct-gray);
  font-size: 0.875rem;
}

/* ── Footer mention strip (§5) ───────────────────────────────── */

.ct-footer-vetline {
  font-family: var(--ct-font-body);
  font-size: 0.9375rem;
  color: var(--ct-navy);
  text-align: center;
  padding: 12px 0;
  background: var(--ct-light-bg);
}

/* ── Utility ─────────────────────────────────────────────────── */

.ct-text-navy { color: var(--ct-navy); }
.ct-text-red  { color: var(--ct-red); }
.ct-bg-light  { background: var(--ct-light-bg); }
.ct-bg-navy   { background: var(--ct-navy); color: var(--ct-white); }

/* ── Hero background image (per-page via _ct_hero_bg_id meta) ──────────────
   functions.php emits <style id="ct-hero-bg"> setting --ct-hero-bg-url
   on the current page. If unset, the var resolves to `none` and the hero
   keeps its tinted-grey background. */

/* Specificity note: `.ct-section--brand.ct-section--tinted` (used by every
   hero) sets `background:` as a shorthand, which clobbers background-image.
   Chaining `.ct-section--brand` here matches its specificity (0,2,0) and we
   win on source order. */
.ct-section--brand.ct-page-hero,
.ct-section--brand.ct-home-hero {
  position: relative;
  overflow: hidden;
  background-image: var(--ct-hero-bg-url, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--ct-light-bg); /* fallback if image not set */
  isolation: isolate;
}

/* Light tint overlay — only paints when an image is set.
   `var(--ct-hero-bg-url, none)` resolves to `none` (no image) when unset;
   the overlay still paints, but rgba(242,242,242,0.85) over the
   underlying .ct-section--tinted (#F2F2F2) is visually identical, so
   no-image pages look unchanged. */
.ct-page-hero::before,
.ct-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(242, 242, 242, 0.85);
  z-index: 0;
  pointer-events: none;
}

/* Hero content sits above the overlay */
.ct-page-hero > .ct-brand-container,
.ct-home-hero > .ct-brand-container {
  position: relative;
  z-index: 1;
}

/* ── Responsive tweaks ───────────────────────────────────────── */

/* Defensive: never let any child overflow the viewport horizontally */
html, body { max-width: 100%; overflow-x: hidden; }

/* Tablet + small-screen */
@media (max-width: 960px) {
  .ct-section--brand { padding: 64px 0; }
  .ct-brand-container { padding: 0 20px; }
  .ct-home-hero__ctas,
  .ct-page-cta__contact {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* Phone */
@media (max-width: 640px) {
  .ct-section--brand { padding: 48px 0; }
  .ct-trust-strip { padding: 20px 0; gap: 16px; }
  .ct-brand-container { padding: 0 16px; }

  /* Hero typography breathing room */
  .ct-h1 { font-size: clamp(1.625rem, 7vw, 2.125rem); letter-spacing: -0.005em; }
  .ct-h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  .ct-page-hero,
  .ct-home-hero { padding: 48px 0 40px; }
  .ct-page-hero__sub,
  .ct-home-hero__sub { font-size: 1rem; }

  /* Buttons stretch to container, wrap their text */
  .ct-btn {
    white-space: normal;
    word-break: break-word;
    text-align: center;
    max-width: 100%;
    line-height: 1.25;
    padding: 12px 18px;
  }
  .ct-home-hero__ctas .ct-btn,
  .ct-page-cta__contact .ct-btn { width: 100%; }

  /* Pricing table → stacked cards (no markup changes; uses cell order) */
  .ct-pricing-table { display: block; font-size: 0.9375rem; margin: 16px 0; }
  .ct-pricing-table thead { display: none; }
  .ct-pricing-table tbody { display: block; }
  .ct-pricing-table tr {
    display: block;
    border: 1px solid #E5E7EB;
    border-radius: var(--ct-radius);
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--ct-white);
  }
  .ct-pricing-table tr:hover { background: var(--ct-white); }
  .ct-pricing-table td {
    display: block;
    border: none;
    padding: 4px 0;
    text-align: left;
  }
  .ct-pricing-table td:first-child {
    font-size: 1.0625rem;
    padding-top: 0;
    margin-bottom: 4px;
  }
  /* Re-label the price + timeline cells with CSS-generated tags
     (no markup data-label needed — order is fixed: service / price / timeline / desc) */
  .ct-pricing-table td:nth-child(2)::before {
    content: "Price: ";
    color: var(--ct-gray);
    font-weight: 400;
  }
  .ct-pricing-table td:nth-child(3)::before {
    content: "Timeline: ";
    color: var(--ct-gray);
    font-weight: 400;
  }
  .ct-pricing-table .ct-price { white-space: normal; display: inline; }

  /* Lane grid: ensure single column even when content min-width unmet */
  .ct-lane-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Footer + header padding tighten */
  body .site-header .ct-container,
  .ct-site-footer .ct-container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Long emails inside navy CTA shouldn't overflow */
  .ct-page-cta__contact .ct-btn[href^="mailto:"] { font-size: 0.875rem; }
}

/* Very narrow phones (older / small Androids) */
@media (max-width: 380px) {
  .ct-h1 { font-size: 1.5rem; }
  .ct-page-hero__sub,
  .ct-home-hero__sub { font-size: 0.9375rem; }
  .ct-btn { font-size: 0.875rem; padding: 12px 14px; }
}

/* ── Header overrides (override dark-mode rules in global.css) ───────────── */
/* Higher specificity via body prefix + matching !important on rules that need it. */

body .site-header,
body .site-header.header-scrolled {
  background: var(--ct-white) !important;
  border-bottom: 1px solid #E5E7EB;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

body .site-header,
body .site-header a,
body .site-header .site-title,
body .site-header .site-title a,
body .site-header .site-description,
body .site-header .main-navigation a {
  color: var(--ct-dark-text) !important;
}

body .site-header .site-title,
body .site-header .site-title a {
  font-family: var(--ct-font-heading);
  font-weight: 700;
  color: var(--ct-navy) !important;
}

body .site-header .main-navigation a {
  color: var(--ct-navy) !important;
  font-family: var(--ct-font-body);
  font-weight: 600;
}

body .site-header .main-navigation a:hover,
body .site-header .main-navigation li.current-menu-item > a {
  color: var(--ct-red) !important;
}

/* Repaint the existing CTA pill (.menu-item-cta) into a navy/red brand button */
body .site-header .menu-item-cta > a,
body .site-header li.menu-item-cta > a {
  background: var(--ct-red) !important;
  color: var(--ct-white) !important;
  border: 1px solid var(--ct-red) !important;
  border-radius: var(--ct-radius) !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
}

body .site-header .menu-item-cta > a:hover,
body .site-header li.menu-item-cta > a:hover {
  background: var(--ct-red-700) !important;
  border-color: var(--ct-red-700) !important;
  color: var(--ct-white) !important;
}

/* Submenu dropdowns — match brand */
body .site-header .main-navigation .sub-menu,
body .site-header .main-navigation ul ul {
  background: var(--ct-white) !important;
  border: 1px solid #E5E7EB;
  box-shadow: 0 6px 18px rgba(31, 56, 100, 0.10);
}

body .site-header .main-navigation .sub-menu a {
  color: var(--ct-navy) !important;
}

body .site-header .main-navigation .sub-menu a:hover {
  background: var(--ct-light-bg) !important;
  color: var(--ct-red) !important;
}

/* Mobile menu toggle stays visible on the now-light header */
body .site-header .menu-toggle,
body .site-header .menu-toggle-icon,
body .site-header .menu-toggle-icon svg {
  color: var(--ct-navy) !important;
  fill: var(--ct-navy) !important;
}

/* Hide the noisy "AI agency" entry-hero on all pages we're rewriting,
   not just .home — keeps duplicate <h1> away. global.css only hid it on .home. */
.page-template-default .entry-hero.page-hero-section { display: none; }

/* When Kadence per-page title is set to hide, also drop the wrapper padding */
.entry-hero[data-kad-post-title="hide"] { display: none; }