/*
Theme Name: JSGC Unibiz Child
Template: unibiz
Description: JSGC child theme aligned to Business_Plan specs and brand tokens.
Version: 0.2.0
Text Domain: jsgc-unibiz-child
*/

/* ── Unibiz Parent Color Neutralization ─────────────────────────────────────
   Remap all gv-color-* CSS custom properties to JSGC brand equivalents.
   This catches any block markup or parent theme styles that still reference
   Unibiz color slugs. Safe to remove after WP exit (Feb 2027).
   ────────────────────────────────────────────────────────────────────────── */

body {
  /* Primary / Accent → JSGC Primary (#146b69 teal) */
  --wp--preset--color--gv-color-primary: #146b69;
  --wp--preset--color--gv-color-secondary: #1f516d;
  --wp--preset--color--gv-color-accent: #146b69;
  --wp--preset--color--gv-color-accent-hover: #1f516d;

  /* Text → JSGC Text / Muted */
  --wp--preset--color--gv-color-text-primary: #0f2133;
  --wp--preset--color--gv-color-text-secondary: #3f5468;
  --wp--preset--color--gv-color-text-placeholder: #3f546866;

  /* Backgrounds → JSGC Surface / Neutral */
  --wp--preset--color--gv-color-background-primary: #0f2133;
  --wp--preset--color--gv-color-background-secondary: #f8fafc;
  --wp--preset--color--gv-color-background-tertiary: #deeff0;

  /* Borders → JSGC Border */
  --wp--preset--color--gv-color-border: #CBD5E1;
  --wp--preset--color--gv-color-border-input: #f1f5f9;

  /* Utility */
  --wp--preset--color--gv-color-white: #ffffff;
  --wp--preset--color--gv-color-black: #000000;

  /* Dark mode variants (mapped to same JSGC dark values) */
  --wp--preset--color--gv-color-dark-primary: #146b69;
  --wp--preset--color--gv-color-dark-secondary: #1f516d;
  --wp--preset--color--gv-color-dark-accent: #146b69;
  --wp--preset--color--gv-color-dark-accent-hover: #1f516d;
  --wp--preset--color--gv-color-dark-text-primary: #ffffff;
  --wp--preset--color--gv-color-dark-text-secondary: #ffffff99;
  --wp--preset--color--gv-color-dark-text-placeholder: #ffffff66;
  --wp--preset--color--gv-color-dark-background-primary: #0f2133;
  --wp--preset--color--gv-color-dark-background-secondary: #162537;
  --wp--preset--color--gv-color-dark-background-tertiary: #1e3347;
  --wp--preset--color--gv-color-dark-border: #ffffff26;
  --wp--preset--color--gv-color-dark-border-input: #1e3347;
}

/* ── Link Hover Override ────────────────────────────────────────────────────
   Parent theme.json sets link:hover to gv-color-secondary. Override with
   JSGC secondary so all links hover correctly even if theme.json merge
   doesn't catch the :hover pseudo-class.
   ────────────────────────────────────────────────────────────────────────── */

a:hover {
  color: var(--wp--preset--color--jsgc-secondary);
}

/* ── Button Normalization ───────────────────────────────────────────────────
   Ensure WP buttons use JSGC primary regardless of inherited Unibiz styles.
   ────────────────────────────────────────────────────────────────────────── */

.wp-block-button__link {
  background-color: var(--wp--preset--color--jsgc-primary);
  color: #ffffff;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.wp-block-button__link:hover {
  background-color: var(--wp--preset--color--jsgc-secondary);
  color: #ffffff;
}

/* ── Text Alignment Normalization ─────────────────────────────────────────
   Parent theme (Unibiz) applies inconsistent text alignment to blocks.
   Force left-alignment for body copy, headings, and block content, then
   allow explicit WP alignment classes to override where intended.
   ────────────────────────────────────────────────────────────────────────── */

/* Default block content to left */
.wp-site-blocks .wp-block-group,
.wp-site-blocks .wp-block-column,
.wp-site-blocks .wp-block-columns,
.wp-site-blocks .entry-content,
.wp-site-blocks .wp-block-post-content {
  text-align: left;
}

/* Headings and paragraphs inherit from parent (left) */
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4,
.wp-site-blocks p {
  text-align: inherit;
}

/* Preserve explicit WP alignment classes */
.has-text-align-center { text-align: center !important; }
.has-text-align-right  { text-align: right !important; }
.has-text-align-left   { text-align: left !important; }

/* ── Intentional Centering ────────────────────────────────────────────────
   Specific sections that should be centered by design.
   ────────────────────────────────────────────────────────────────────────── */

/* Hero cover block — center headline + subtext */
.jsg-hero .wp-block-cover__inner-container {
  text-align: center;
}

/* Thesis band — centered statement */
.jsg-thesis-band {
  text-align: center;
}

/* Proof strip items — centered badges */
.jsg-proof-strip .wp-block-column {
  text-align: center;
}

/* Footer — centered */
body .wp-block-template-part[data-slug="footer"],
body .wp-block-template-part[data-slug="footer"] .wp-block-group {
  text-align: center;
}

/* ── Card Consistency ─────────────────────────────────────────────────────
   All grouped cards left-align consistently.
   ────────────────────────────────────────────────────────────────────────── */

.jsg-card,
.jsg-capabilities .wp-block-column .wp-block-group,
.jsg-case-studies .wp-block-column .wp-block-group {
  text-align: left;
}

/* ── Blog / Query Loop Normalization ──────────────────────────────────────
   Post cards in query loops are always left-aligned.
   ────────────────────────────────────────────────────────────────────────── */

.wp-block-query .wp-block-post-template,
.wp-block-query .wp-block-post-template .wp-block-group,
.wp-block-query .wp-block-post-title,
.wp-block-query .wp-block-post-excerpt,
.wp-block-query .wp-block-post-date {
  text-align: left;
}

/* Single post — left-align content body */
.single .wp-block-post-content {
  text-align: left;
}

/* ── W-007: Skip-to-content link (WCAG 2.4.1) ──────────────────────────
   Hidden off-screen by default. Visible on keyboard focus so keyboard
   users can skip past the nav. Contrast: white on #146b69 (7.06:1).
   ────────────────────────────────────────────────────────────────────── */

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100000;
  padding: 12px 24px;
  background-color: #146b69;
  color: #ffffff;
  font-family: var(--wp--preset--font-family--jsgc-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.skip-to-content:focus {
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  overflow: visible;
  outline: 2px solid #0f2133;
  outline-offset: 2px;
}

/* ── W-007: Contrast fixes ────────────────────────────────────────────────
   Ensure muted text meets WCAG AA 4.5:1 ratio against white backgrounds.
   #3f5468 on white = 5.84:1 (passes AA). Footer meta text same.
   ────────────────────────────────────────────────────────────────────── */

.jsgc-footer-meta {
  color: #3f5468;
}

.jsgc-footer-brand-blurb {
  color: #3f5468;
}

/* ── Edge-to-Edge Layout ─────────────────────────────────────────────
   Body padding is 0 so section backgrounds go full-bleed edge to edge.
   has-global-padding sections contain text. Mobile gets tighter padding.
   ────────────────────────────────────────────────────────────────────── */

/* ── List Bullet Restoration ────────────────────────────────────────────
   Unibiz parent theme strips list-style from ul/ol blocks. Restore
   standard bullets and numbers for content readability.
   ──────────────────────────────────────────────────────────────────────── */

.wp-site-blocks ul:not(.wp-block-navigation__container):not(.wp-block-post-template) {
  list-style-type: disc;
  padding-left: 1.5em;
}

.wp-site-blocks ol:not(.wp-block-navigation__container) {
  list-style-type: decimal;
  padding-left: 1.5em;
}

.wp-site-blocks ul ul {
  list-style-type: circle;
}

.wp-site-blocks ul ul ul {
  list-style-type: square;
}

.wp-site-blocks li {
  margin-bottom: 0.35em;
}

/* ── Image Constraint Baseline ──────────────────────────────────────────
   Prevent oversized/portrait images from blowing out desktop layout.
   WordPress does NOT enforce max-width on all images by default.
   Fixes: 1210x1815px portrait hero overflows 1120px content column.
   ──────────────────────────────────────────────────────────────────────── */

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

.wp-block-image {
  max-width: 100%;
  overflow: hidden;
}

.wp-block-image img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Cover / hero blocks — clamp height so portrait images don't stretch page */
.wp-block-cover {
  max-height: clamp(320px, 50vh, 600px);
  overflow: hidden;
}

.wp-block-cover img {
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
}

/* Featured images in post templates */
.wp-block-post-featured-image img {
  max-width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 10px;
}

/* ── Mobile Edge-to-Edge Layout ────────────────────────────────────
   Body padding is 0 so section backgrounds go full-bleed edge to edge.
   has-global-padding sections contain text. Mobile gets tighter padding.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .wp-site-blocks .has-global-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .jsgc-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .jsg-card {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}