/* =========================================================
   ODYSSEY HELLO CHILD — FOUNDATION
   Global design tokens, typography, spacing, and utilities
   ========================================================= */


/* =========================================================
   1. GLOBAL DESIGN TOKENS
   ========================================================= */

:root {
  /* Brand colors */
  --obh-primary: #204e88;
  --obh-primary-deep: #183a5e;
  --obh-navy: #102a4d;
  --obh-blue: #0d3f5c;
  --obh-blue-deep: #062f4a;
  --obh-purple: #874993;
  --obh-purple-fill: #5b3261;
  --obh-purple-deep: #3b2242;
  --obh-accent: #7bd4f4;
  --obh-white: #ffffff;
  --obh-off-white: #f8f7f4;
	
  --obh-link-hover: var(--obh-purple);

  /* Global font families */
  --obh-font-body: "LT Superior", Arial, sans-serif;
  --obh-font-heading: "Shippori Mincho", Georgia, serif;

  /* General spacing */
  --obh-content-gap: 24px;
  --obh-list-gap: 8px;
  --obh-heading-gap: 28px;
  --obh-section-button-gap: 36px;
	
  /* Section heading relationships */
  --obh-section-eyebrow-gap: 24px;
  --obh-section-note-gap: 56px;

  /*
   * Internal content-container padding.
   * Use these for component padding.
   */
  --obh-section-padding-block: 36px;
  --obh-section-padding-inline: 36px;

  /*
   * Section-to-section spacing.
   * Do not use these for internal component padding.
   */
  --obh-section-space: clamp(64px, 7vw, 112px);

  /*
   * Outer page gutters.
   * Do not use these when a component needs exact internal padding.
   */
  --obh-inline-gutter: clamp(20px, 4vw, 64px);

  /* Standard layout gaps */
  --obh-section-column-gap: 80px;
  --obh-section-row-gap: 56px;

  /* Content widths */
  --obh-content-width: 90%;
  --obh-content-max-width: 1440px;
  --obh-reading-width: 760px;

  /* Buttons */
  --obh-button-radius: 99px;
  --obh-button-padding-y: 8px;
  --obh-button-padding-x: 16px;

  /* Motion */
  --obh-transition-fast: 0.28s ease;
  --obh-transition-slow: 0.55s ease;
}


/* =========================================================
   2. GLOBAL BASE STYLES
   ========================================================= */

body {
  color: var(--obh-navy);
  font-family: var(--obh-font-body);
  font-size: 1.17rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.25px;
}


/* =========================================================
   3. GLOBAL ELEMENT TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3 {
  color: var(--obh-primary);
  font-family: var(--obh-font-heading);
  font-weight: 700;
}

h4,
h5,
h6 {
  color: var(--obh-primary-deep);
  font-family: var(--obh-font-body);
}

h1 {
  font-size: clamp(2.35rem, 5vw, 3rem);
  line-height: 1.13;
  letter-spacing: -1.5px;
}

h2 {
  font-size: clamp(2.1rem, 3.6vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -1px;
}

h3 {
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.8px;
}

h4 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.9px;
}

h5 {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

h6 {
  font-size: 1.17rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}


/* =========================================================
   4. TYPOGRAPHY TOKENS
   ========================================================= */

:root {
  /* System: Primary */
  --obh-type-primary-family: var(--obh-font-body);
  --obh-type-primary-size: 1.3rem;
  --obh-type-primary-weight: 400;
  --obh-type-primary-line-height: 1.15;
  --obh-type-primary-letter-spacing: -0.2px;

  /* System: Secondary */
  --obh-type-secondary-family: var(--obh-font-heading);
  --obh-type-secondary-size: clamp(1.17rem, 1.6vw, 1.2rem);
  --obh-type-secondary-weight: 700;
  --obh-type-secondary-line-height: 1.33;
  --obh-type-secondary-letter-spacing: -0.8px;

  /* System: Text */
  --obh-type-text-family: var(--obh-font-body);
  --obh-type-text-size: 1.17rem;
  --obh-type-text-weight: 400;
  --obh-type-text-line-height: 1.55;
  --obh-type-text-letter-spacing: -0.25px;

  /* System: Accent */
  --obh-type-accent-family: var(--obh-font-body);
  --obh-type-accent-size: 0.93rem;
  --obh-type-accent-weight: 600;
  --obh-type-accent-line-height: 1.15;
  --obh-type-accent-letter-spacing: 0.3px;
  --obh-type-accent-transform: uppercase;

  /* Custom: Subhead */
  --obh-type-subhead-family: var(--obh-font-body);
  --obh-type-subhead-size: clamp(1.25rem, 1.7vw, 1.4rem);
  --obh-type-subhead-weight: 400;
  --obh-type-subhead-line-height: 1.4;
  --obh-type-subhead-letter-spacing: -0.3px;

  /* Custom: Smaller H2 */
  --obh-type-smaller-h2-family: var(--obh-font-heading);
  --obh-type-smaller-h2-size: clamp(1.68rem, 2.2vw, 1.68rem);
  --obh-type-smaller-h2-weight: 700;
  --obh-type-smaller-h2-line-height: 1.27;
  --obh-type-smaller-h2-letter-spacing: -0.8px;

  /* Custom: Small Paragraph */
  --obh-type-small-paragraph-family: var(--obh-font-body);
  --obh-type-small-paragraph-size: 0.95rem;
  --obh-type-small-paragraph-weight: 500;
  --obh-type-small-paragraph-line-height: 1.55;
  --obh-type-small-paragraph-letter-spacing: -0.1px;

  /* Custom: Shippori Header Alt */
  --obh-type-shippori-alt-family: var(--obh-font-heading);
  --obh-type-shippori-alt-size: clamp(2rem, 3vw, 2.4rem);
  --obh-type-shippori-alt-weight: 700;
  --obh-type-shippori-alt-line-height: 1.25;
  --obh-type-shippori-alt-letter-spacing: -1.2px;

  /* Custom: Accent Preheader */
  --obh-type-accent-preheader-family: var(--obh-font-body);
  --obh-type-accent-preheader-size: clamp(0.88rem, 1.1vw, 0.96rem);
  --obh-type-accent-preheader-weight: 700;
  --obh-type-accent-preheader-line-height: 1.17;
  --obh-type-accent-preheader-letter-spacing: 0.3px;
  --obh-type-accent-preheader-transform: uppercase;

  /* Custom: Site Page H1 */
  --obh-type-site-h1-family: var(--obh-font-heading);
  --obh-type-site-h1-size: clamp(2.35rem, 5vw, 3.2rem);
  --obh-type-site-h1-weight: 700;
  --obh-type-site-h1-line-height: 1.25;
  --obh-type-site-h1-letter-spacing: -1.2px;

  /* Custom: Breadcrumbs */
  --obh-type-breadcrumbs-family: var(--obh-font-body);
  --obh-type-breadcrumbs-size: 0.72rem;
  --obh-type-breadcrumbs-weight: 600;
  --obh-type-breadcrumbs-line-height: 1.1;
  --obh-type-breadcrumbs-letter-spacing: 0.5px;
  --obh-type-breadcrumbs-transform: uppercase;

  /* Custom: Shippori Subhead */
  --obh-type-shippori-subhead-family: var(--obh-font-heading);
  --obh-type-shippori-subhead-size: 1.45rem;
  --obh-type-shippori-subhead-weight: 700;
  --obh-type-shippori-subhead-line-height: 1.33;
  --obh-type-shippori-subhead-letter-spacing: -0.8px;
}


/* =========================================================
   5. LEGACY TYPOGRAPHY ALIASES
   ========================================================= */

.shippori-header-alt {
  font-family: var(--obh-type-shippori-alt-family) !important;
  font-size: var(--obh-type-shippori-alt-size) !important;
  font-weight: var(--obh-type-shippori-alt-weight) !important;
  line-height: var(--obh-type-shippori-alt-line-height) !important;
  letter-spacing: var(--obh-type-shippori-alt-letter-spacing) !important;
}

.small-paragraph {
  font-family: var(--obh-type-small-paragraph-family) !important;
  font-size: var(--obh-type-small-paragraph-size) !important;
  font-weight: var(--obh-type-small-paragraph-weight) !important;
  line-height: var(--obh-type-small-paragraph-line-height) !important;
  letter-spacing: var(--obh-type-small-paragraph-letter-spacing) !important;
}


/* =========================================================
   6. RESPONSIVE DESIGN TOKENS
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --obh-section-column-gap: 56px;
  }
}

@media (max-width: 767px) {
  :root {
    --obh-content-gap: 24px;
    --obh-heading-gap: 22px;

    /*
     * Standard mobile component padding:
     * 44px top/bottom
     * 28px left/right
     */
    --obh-section-padding-block: 44px;
    --obh-section-padding-inline: 28px;

    /* Mobile layout gaps */
    --obh-section-column-gap: 0;
    --obh-section-row-gap: 44px;

    /* Mobile content width */
    --obh-content-width: 93%;

    /* Mobile body text */
    --obh-type-text-size: 1.13rem;

    /* Mobile accent preheader */
    --obh-type-accent-preheader-size: 0.93rem;
    --obh-type-accent-preheader-line-height: 1.25;
  }

  body {
    font-size: 1.13rem;
  }
}


/* =========================================================
   7. COMPLETE TYPOGRAPHY UTILITY CLASSES
   ========================================================= */

.obh-type-primary {
  font-family: var(--obh-type-primary-family) !important;
  font-size: var(--obh-type-primary-size) !important;
  font-weight: var(--obh-type-primary-weight) !important;
  line-height: var(--obh-type-primary-line-height) !important;
  letter-spacing: var(--obh-type-primary-letter-spacing) !important;
}

.obh-type-secondary {
  font-family: var(--obh-type-secondary-family) !important;
  font-size: var(--obh-type-secondary-size) !important;
  font-weight: var(--obh-type-secondary-weight) !important;
  line-height: var(--obh-type-secondary-line-height) !important;
  letter-spacing: var(--obh-type-secondary-letter-spacing) !important;
}

.obh-type-text {
  font-family: var(--obh-type-text-family) !important;
  font-size: var(--obh-type-text-size) !important;
  font-weight: var(--obh-type-text-weight) !important;
  line-height: var(--obh-type-text-line-height) !important;
  letter-spacing: var(--obh-type-text-letter-spacing) !important;
}

.obh-type-accent {
  font-family: var(--obh-type-accent-family) !important;
  font-size: var(--obh-type-accent-size) !important;
  font-weight: var(--obh-type-accent-weight) !important;
  line-height: var(--obh-type-accent-line-height) !important;
  letter-spacing: var(--obh-type-accent-letter-spacing) !important;
  text-transform: var(--obh-type-accent-transform) !important;
}

.obh-type-subhead {
  font-family: var(--obh-type-subhead-family) !important;
  font-size: var(--obh-type-subhead-size) !important;
  font-weight: var(--obh-type-subhead-weight) !important;
  line-height: var(--obh-type-subhead-line-height) !important;
  letter-spacing: var(--obh-type-subhead-letter-spacing) !important;
}

.obh-type-smaller-h2 {
  font-family: var(--obh-type-smaller-h2-family) !important;
  font-size: var(--obh-type-smaller-h2-size) !important;
  font-weight: var(--obh-type-smaller-h2-weight) !important;
  line-height: var(--obh-type-smaller-h2-line-height) !important;
  letter-spacing: var(--obh-type-smaller-h2-letter-spacing) !important;
}

.obh-type-small-paragraph {
  font-family: var(--obh-type-small-paragraph-family) !important;
  font-size: var(--obh-type-small-paragraph-size) !important;
  font-weight: var(--obh-type-small-paragraph-weight) !important;
  line-height: var(--obh-type-small-paragraph-line-height) !important;
  letter-spacing: var(--obh-type-small-paragraph-letter-spacing) !important;
}

.obh-type-shippori-alt {
  font-family: var(--obh-type-shippori-alt-family) !important;
  font-size: var(--obh-type-shippori-alt-size) !important;
  font-weight: var(--obh-type-shippori-alt-weight) !important;
  line-height: var(--obh-type-shippori-alt-line-height) !important;
  letter-spacing: var(--obh-type-shippori-alt-letter-spacing) !important;
}

.obh-type-accent-preheader {
  font-family: var(--obh-type-accent-preheader-family) !important;
  font-size: var(--obh-type-accent-preheader-size) !important;
  font-weight: var(--obh-type-accent-preheader-weight) !important;
  line-height: var(--obh-type-accent-preheader-line-height) !important;
  letter-spacing: var(--obh-type-accent-preheader-letter-spacing) !important;
  text-transform: var(--obh-type-accent-preheader-transform) !important;
}

.obh-type-site-h1 {
  font-family: var(--obh-type-site-h1-family) !important;
  font-size: var(--obh-type-site-h1-size) !important;
  font-weight: var(--obh-type-site-h1-weight) !important;
  line-height: var(--obh-type-site-h1-line-height) !important;
  letter-spacing: var(--obh-type-site-h1-letter-spacing) !important;
}

.obh-type-breadcrumbs {
  font-family: var(--obh-type-breadcrumbs-family) !important;
  font-size: var(--obh-type-breadcrumbs-size) !important;
  font-weight: var(--obh-type-breadcrumbs-weight) !important;
  line-height: var(--obh-type-breadcrumbs-line-height) !important;
  letter-spacing: var(--obh-type-breadcrumbs-letter-spacing) !important;
  text-transform: var(--obh-type-breadcrumbs-transform) !important;
}

.obh-type-shippori-subhead {
  font-family: var(--obh-type-shippori-subhead-family) !important;
  font-size: var(--obh-type-shippori-subhead-size) !important;
  font-weight: var(--obh-type-shippori-subhead-weight) !important;
  line-height: var(--obh-type-shippori-subhead-line-height) !important;
  letter-spacing: var(--obh-type-shippori-subhead-letter-spacing) !important;
}


/* =========================================================
   8. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* =========================================================
   TYPOGRAPHY UTILITIES — DESCENDANT PROPAGATION

   Odyssey typography utility classes may be applied either
   directly to text elements or to wrappers rendered by
   Elementor, ACF, and reusable shortcode components.

   Explicit typography on descendant p/heading/span elements
   must not override the selected Odyssey typography system.
   ========================================================= */

/* Subhead */
.obh-type-subhead p,
.obh-type-subhead h1,
.obh-type-subhead h2,
.obh-type-subhead h3,
.obh-type-subhead h4,
.obh-type-subhead h5,
.obh-type-subhead h6,
.obh-type-subhead span {
  font-family: var(--obh-type-subhead-family) !important;
  font-size: var(--obh-type-subhead-size) !important;
  font-weight: var(--obh-type-subhead-weight) !important;
  line-height: var(--obh-type-subhead-line-height) !important;
  letter-spacing: var(--obh-type-subhead-letter-spacing) !important;
}

/* Smaller H2 */
.obh-type-smaller-h2 p,
.obh-type-smaller-h2 h1,
.obh-type-smaller-h2 h2,
.obh-type-smaller-h2 h3,
.obh-type-smaller-h2 h4,
.obh-type-smaller-h2 h5,
.obh-type-smaller-h2 h6,
.obh-type-smaller-h2 span {
  font-family: var(--obh-type-smaller-h2-family) !important;
  font-size: var(--obh-type-smaller-h2-size) !important;
  font-weight: var(--obh-type-smaller-h2-weight) !important;
  line-height: var(--obh-type-smaller-h2-line-height) !important;
  letter-spacing: var(--obh-type-smaller-h2-letter-spacing) !important;
}

/* Small Paragraph */
.obh-type-small-paragraph p,
.obh-type-small-paragraph h1,
.obh-type-small-paragraph h2,
.obh-type-small-paragraph h3,
.obh-type-small-paragraph h4,
.obh-type-small-paragraph h5,
.obh-type-small-paragraph h6,
.obh-type-small-paragraph span {
  font-family: var(--obh-type-small-paragraph-family) !important;
  font-size: var(--obh-type-small-paragraph-size) !important;
  font-weight: var(--obh-type-small-paragraph-weight) !important;
  line-height: var(--obh-type-small-paragraph-line-height) !important;
  letter-spacing: var(--obh-type-small-paragraph-letter-spacing) !important;
}

/* Shippori Header Alt */
.obh-type-shippori-alt p,
.obh-type-shippori-alt h1,
.obh-type-shippori-alt h2,
.obh-type-shippori-alt h3,
.obh-type-shippori-alt h4,
.obh-type-shippori-alt h5,
.obh-type-shippori-alt h6,
.obh-type-shippori-alt span {
  font-family: var(--obh-type-shippori-alt-family) !important;
  font-size: var(--obh-type-shippori-alt-size) !important;
  font-weight: var(--obh-type-shippori-alt-weight) !important;
  line-height: var(--obh-type-shippori-alt-line-height) !important;
  letter-spacing: var(--obh-type-shippori-alt-letter-spacing) !important;
}

/* Accent Preheader */
.obh-type-accent-preheader p,
.obh-type-accent-preheader h1,
.obh-type-accent-preheader h2,
.obh-type-accent-preheader h3,
.obh-type-accent-preheader h4,
.obh-type-accent-preheader h5,
.obh-type-accent-preheader h6,
.obh-type-accent-preheader span {
  font-family: var(--obh-type-accent-preheader-family) !important;
  font-size: var(--obh-type-accent-preheader-size) !important;
  font-weight: var(--obh-type-accent-preheader-weight) !important;
  line-height: var(--obh-type-accent-preheader-line-height) !important;
  letter-spacing: var(--obh-type-accent-preheader-letter-spacing) !important;
  text-transform: var(--obh-type-accent-preheader-transform) !important;
}

/* Site Page H1 */
.obh-type-site-h1 p,
.obh-type-site-h1 h1,
.obh-type-site-h1 h2,
.obh-type-site-h1 h3,
.obh-type-site-h1 h4,
.obh-type-site-h1 h5,
.obh-type-site-h1 h6,
.obh-type-site-h1 span {
  font-family: var(--obh-type-site-h1-family) !important;
  font-size: var(--obh-type-site-h1-size) !important;
  font-weight: var(--obh-type-site-h1-weight) !important;
  line-height: var(--obh-type-site-h1-line-height) !important;
  letter-spacing: var(--obh-type-site-h1-letter-spacing) !important;
}

/* Breadcrumbs */
.obh-type-breadcrumbs p,
.obh-type-breadcrumbs h1,
.obh-type-breadcrumbs h2,
.obh-type-breadcrumbs h3,
.obh-type-breadcrumbs h4,
.obh-type-breadcrumbs h5,
.obh-type-breadcrumbs h6,
.obh-type-breadcrumbs span {
  font-family: var(--obh-type-breadcrumbs-family) !important;
  font-size: var(--obh-type-breadcrumbs-size) !important;
  font-weight: var(--obh-type-breadcrumbs-weight) !important;
  line-height: var(--obh-type-breadcrumbs-line-height) !important;
  letter-spacing: var(--obh-type-breadcrumbs-letter-spacing) !important;
  text-transform: var(--obh-type-breadcrumbs-transform) !important;
}

/* Shippori Subhead */
.obh-type-shippori-subhead p,
.obh-type-shippori-subhead h1,
.obh-type-shippori-subhead h2,
.obh-type-shippori-subhead h3,
.obh-type-shippori-subhead h4,
.obh-type-shippori-subhead h5,
.obh-type-shippori-subhead h6,
.obh-type-shippori-subhead span {
  font-family: var(--obh-type-shippori-subhead-family) !important;
  font-size: var(--obh-type-shippori-subhead-size) !important;
  font-weight: var(--obh-type-shippori-subhead-weight) !important;
  line-height: var(--obh-type-shippori-subhead-line-height) !important;
  letter-spacing: var(--obh-type-shippori-subhead-letter-spacing) !important;
}