/*
Theme Name:        Faith & Physics
Theme URI:         https://faithandphysics.tech
Description:       Divi child theme for Faith & Physics — Pillar 3: Outreach, Amplified.
Author:            Faith & Physics
Author URI:        https://faithandphysics.tech
Template:          Divi
Version:           1.0.0
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       faithandphysics-child
*/

/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * FAITH & PHYSICS — BRAND TOKEN SYSTEM
 * Source: Corporate Identity Guidelines v1.1
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * CANONICAL COLORS (hex values are locked — do not alter without brand approval)
 *
 *   Blue   #133580   Brand primary — headlines, CTAs, nav, dark surfaces
 *   Gold   #DAB504   Accent — rules, highlights, taglines (≤ 20% of any surface)
 *   White  #FFFFFF   Primary background, reverse type
 *   Black  #000000   Body copy ONLY — never in marks, backgrounds, or chrome
 *   Red    #F41800   Alerts / errors / critical warnings — UI & data contexts ONLY
 *   Purple #8F44FF   Advanced features / OK states — UI & data contexts ONLY
 *
 * Red and Purple do NOT appear in brand marks, proposals, or print materials.
 * Black does NOT appear in brand marks, backgrounds, UI chrome, or decorative elements.
 * Tints/shades: use color-mix() with white or black only — never a new hex.
 * Drop-shadow on photos: rgba(0,0,0,0.18) is a rendering convention, not a brand color.
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */

:root {

  /* ── Canonical Brand Colors ─────────────────────────────────────────────── */
  --fp-blue:   #133580;
  --fp-gold:   #DAB504;
  --fp-white:  #FFFFFF;
  --fp-black:  #000000;   /* Body copy only */
  --fp-red:    #F41800;   /* UI/alerts only */
  --fp-purple: #8F44FF;   /* UI/advanced features only */

  /* ── Semantic Aliases ───────────────────────────────────────────────────── */
  --fp-color-primary:  var(--fp-blue);
  --fp-color-accent:   var(--fp-gold);
  --fp-color-bg:       var(--fp-white);
  --fp-color-text:     var(--fp-black);
  --fp-color-text-rev: var(--fp-white);   /* Reverse text on dark backgrounds */
  --fp-color-alert:    var(--fp-red);
  --fp-color-ok:       var(--fp-purple);

  /* ── Callout Tints (color-mix only — never a new hex) ───────────────────── */
  --fp-tint-gold:   color-mix(in oklch, #DAB504  6%, white);
  --fp-tint-blue:   color-mix(in oklch, #133580  5%, white);
  --fp-tint-red:    color-mix(in oklch, #F41800  5%, white);
  --fp-tint-purple: color-mix(in oklch, #8F44FF  5%, white);

  /* ── Typography Stacks ──────────────────────────────────────────────────── */
  /* Note: Cinzel Decorative is NEVER loaded as a webfont.                    */
  /* Taglines and the shield lockup are pre-rendered graphic assets only.      */
  --fp-font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --fp-font-body:    'Space Grotesk', 'Inter', system-ui, sans-serif;
  --fp-font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ── Spacing Scale (8px base) ───────────────────────────────────────────── */
  --fp-space-2xs:  0.25rem;   /*  4px */
  --fp-space-xs:   0.5rem;    /*  8px */
  --fp-space-sm:   1rem;      /* 16px */
  --fp-space-md:   1.5rem;    /* 24px */
  --fp-space-lg:   2rem;      /* 32px */
  --fp-space-xl:   3rem;      /* 48px */
  --fp-space-2xl:  4rem;      /* 64px */
  --fp-space-3xl:  6rem;      /* 96px */

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --fp-max-width:          1280px;
  --fp-max-width-content:   900px;
  --fp-border-radius:         4px;
  --fp-border-radius-lg:      8px;
  --fp-border-callout:        3px solid;

  /* ── Transitions ────────────────────────────────────────────────────────── */
  --fp-transition-fast: 150ms ease;
  --fp-transition-base: 250ms ease;
  --fp-transition-slow: 400ms ease;

}


/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * BASE TYPOGRAPHY
 * ═══════════════════════════════════════════════════════════════════════════════
 */

body {
  font-family: var(--fp-font-body);
  color:        var(--fp-color-text);
  background:   var(--fp-color-bg);
}

/* Display headings — Cinzel with OpenType features explicitly suppressed.     */
/* font-feature-settings prevents Cinzel Decorative glyph forms from rendering. */
h1, h2, h3, h4, h5, h6 {
  font-family:           var(--fp-font-display);
  color:                 var(--fp-color-primary);
  font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0;
}

/* Mono — data, chrome, labels, footers, cost figures, code */
code, pre, kbd, samp,
.fp-mono {
  font-family:          var(--fp-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Space Grotesk has no italic cut — use weight for emphasis */
em, i {
  font-style:  normal;
  font-weight: 600;
}


/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * UTILITY CLASSES — BRAND TOKENS
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* Color */
.fp-text-blue   { color: var(--fp-blue);  }
.fp-text-gold   { color: var(--fp-gold);  }
.fp-text-white  { color: var(--fp-white); }
.fp-bg-blue     { background-color: var(--fp-blue);  color: var(--fp-white); }
.fp-bg-gold     { background-color: var(--fp-gold);  color: var(--fp-blue);  }
.fp-bg-white    { background-color: var(--fp-white); color: var(--fp-black); }

/* Font families */
.fp-display { font-family: var(--fp-font-display); font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0; }
.fp-body    { font-family: var(--fp-font-body);    }
.fp-mono    { font-family: var(--fp-font-mono);    font-variant-numeric: tabular-nums; }

/* Chrome label — uppercase mono, tracked (footers, page numbers, nav labels) */
.fp-label,
.fp-chrome {
  font-family:          var(--fp-font-mono);
  text-transform:       uppercase;
  letter-spacing:       0.12em;
  font-size:            0.75rem;
  font-variant-numeric: tabular-nums;
}

/* Data / cost figures — tabular mono */
.fp-data {
  font-family:          var(--fp-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight:          500;
  letter-spacing:       0.06em;
}


/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * CALLOUT COMPONENTS
 * Source: Corporate Identity Guidelines v1.1
 *
 *   .fp-callout-gold    Best-practice notes, production reminders, guidance
 *   .fp-callout-blue    Factual notes, tech specs, mission-register content
 *   .fp-callout-red     Prohibitions, emergency restrictions — genuine only
 *   .fp-demo-box        Inline specimen demos and data tables
 * ═══════════════════════════════════════════════════════════════════════════════
 */

.fp-callout-gold,
.fp-callout-blue,
.fp-callout-red,
.fp-demo-box {
  padding:       var(--fp-space-md);
  border-radius: var(--fp-border-radius);
  margin-block:  var(--fp-space-md);
}

.fp-callout-gold {
  border-left:      var(--fp-border-callout) var(--fp-gold);
  background-color: var(--fp-tint-gold);
}

.fp-callout-blue {
  border-left:      var(--fp-border-callout) var(--fp-blue);
  background-color: var(--fp-tint-blue);
}

.fp-callout-red {
  border-left:      var(--fp-border-callout) var(--fp-red);
  background-color: var(--fp-tint-red);
}

.fp-demo-box {
  border:           none;
  background-color: var(--fp-tint-blue);
}


/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * DIVI BUILDER COMPONENT OVERRIDES
 * ─────────────────────────────────────────────────────────────────────────────
 * Add Divi module-specific CSS below, organized by component.
 * Prefix all selectors with the Divi module class to avoid cascade bleed.
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* Add component-specific overrides below this line ↓ */

/* ── Buttons: strip inherited link text-decoration ──────────────────────────
   Divi renders buttons as <a> tags. The parent theme's link styles add
   text-decoration: underline which shows as a black bar under text-style
   buttons. This override removes it cleanly at the component level.        */
.et_pb_button,
a.et_pb_button,
.et_pb_button:hover,
a.et_pb_button:hover,
.et_pb_button:visited,
.et_pb_button:focus {
    text-decoration: none;
}



/* ── Slider: vertical stack — text above, full-width image below ─────────────
   Divi renders .et_pb_slide_image BEFORE .et_pb_container in the DOM, so
   display:flex !important overrides Divi's display:none on inactive slides
   (making all slides visible simultaneously). Instead a JS snippet in
   functions.php moves the image element after the container on
   DOMContentLoaded — before first paint — and simple normal-flow CSS does
   the rest with no display changes to the slide element itself.               */

/* Reset table layout so container stacks in normal block flow */
.et_pb_slider .et_pb_slide_with_image .et_pb_container {
    display: block !important;
}
.et_pb_slider .et_pb_slide_with_image .et_pb_slider_container_inner {
    display: block !important;
    width: 100% !important;
}
.et_pb_slider .et_pb_slide_with_image .et_pb_slide_description {
    float: none !important;
    width: 100% !important;
}

/* Pull image out of absolute positioning into normal flow (full width, below text) */
.et_pb_slider .et_pb_slide_with_image .et_pb_slide_image,
.et_pb_slider .et_pb_slide_with_image .et_pb_slide_video {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-right: 0 !important;
    transform: none !important;
    display: block !important;
}

.et_pb_slider .et_pb_slide_with_image .et_pb_slide_image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Fix image top-crop ────────────────────────────────────────────────────────
   Divi's slider JS fixes the slide height based on the old text-only layout.
   With the image now in normal flow the container overflows and overflow:hidden
   clips it. Also clear any residual height/offset on the image wrapper itself. */

.et_pb_slider .et_pb_slide_with_image {
    overflow: visible !important;
}

.et_pb_slider .et_pb_slide_with_image .et_pb_slide_image {
    height: auto !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.et_pb_slider .et_pb_slide_with_image .et_pb_slide_image img {
    object-fit: unset !important;
    object-position: unset !important;
}