/* DF Headings — lock to theme defaults, no dynamic sizing */
h1,
h1.page-hero-style {
  font-size: 55px !important;
  line-height: 1.2 !important;
  font-weight: 700;            /* matches your desired weight */
  margin: 0 0 20px;
}

h2,
h2.page-hero-style {
  font-size: 45px !important;
  line-height: 1.2 !important;
  font-weight: 700;
  margin: 0 0 20px;
}

h3,
h3.page-hero-style {
  font-size: 35px !important;
  line-height: 1.2 !important;
  font-weight: 700;
  margin: 0 0 20px;
}

/* Neutralize any leftover hero tweaks that could shrink text */
h1.page-hero-style,
h2.page-hero-style,
h3.page-hero-style {
  transform: none !important;
  letter-spacing: 0 !important;
}

/* White box hero title (use the same 55px) */
.section-wrapper.white.page-hero h1.page-title {
  font-size: 55px !important;
  line-height: 1.2 !important;
  margin: 0;
}

/* ===== Page Hero Style 2 (dark-gray family, no size overrides) ===== */
h1.page-hero-style2,
h2.page-hero-style2,
h3.page-hero-style2{
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin: 0 0 0.45em;
  text-align: center;
  color: #000;
  /* Base: clearly visible but not heavy */
  text-shadow:
    1px 1px 0 rgba(0,0,0,0.22),
    0 2px 6px rgba(0,0,0,0.16);
}

/* Softer: very light, almost flat */
.page-hero-style2.softer{
  text-shadow:
    0 1px 0 rgba(0,0,0,0.08),
    0 1px 3px rgba(0,0,0,0.08);
}

/* Stronger: heavier stack for busy backgrounds */
.page-hero-style2.stronger{
  text-shadow:
    2px 2px 2px rgba(0,0,0,0.32),
    3px 3px 6px rgba(0,0,0,0.22);
}

/* Optional: no shadow at all (for quick A/B checks) */
.page-hero-style2.flat{
  text-shadow: none !important;
}

/* Icon alignment when using <i> inside the heading */
.page-hero-style2 i{
  margin-right: 0.35em;
  vertical-align: -0.03em;
  line-height: 1;
}

/* Dark-image helper: flip to light shadows when container has .hero--dark */
.hero--dark .page-hero-style2{
  text-shadow:
    1px 1px 0 rgba(255,255,255,0.28),
    0 2px 6px rgba(255,255,255,0.22);
}
.hero--dark .page-hero-style2.softer{
  text-shadow:
    0 1px 0 rgba(255,255,255,0.16),
    0 1px 3px rgba(255,255,255,0.14);
}
.hero--dark .page-hero-style2.stronger{
  text-shadow:
    2px 2px 0 rgba(255,255,255,0.38),
    0 3px 9px rgba(255,255,255,0.28);
}

/* Underline: pair with page-hero-style2 stronger when it appears just after the H tag */
h1.page-hero-style2.stronger + .h2-underline,
h2.page-hero-style2.stronger + .h2-underline,
h3.page-hero-style2.stronger + .h2-underline{
  background: #333;                    /* swap cyan bar for a dark bar */
  border-radius: 2px;
  /* stacked shade to mirror the stronger text-shadow */
  box-shadow:
    2px 2px 2px rgba(0,0,0,0.32),
    3px 3px 6px rgba(0,0,0,0.22);
}

/* Optional: make it a touch darker in gray sections */
.section-wrapper.gray h1.page-hero-style2.stronger + .h2-underline,
.section-wrapper.gray h2.page-hero-style2.stronger + .h2-underline,
.section-wrapper.gray h3.page-hero-style2.stronger + .h2-underline{
  background: #222;
}

/* Shaded underline after either page-hero-style2.stronger OR page-hero-style */
h1.page-hero-style2.stronger + .h2-underline,
h2.page-hero-style2.stronger + .h2-underline,
h3.page-hero-style2.stronger + .h2-underline,
h1.page-hero-style + .h2-underline,
h2.page-hero-style + .h2-underline,
h3.page-hero-style + .h2-underline{
  background: #333;
  box-shadow:
    2px 2px 2px rgba(0,0,0,0.32),
    3px 3px 6px rgba(0,0,0,0.22);
}

/* Force it inside WHITE sections where older gradient/currentColor might win */
.section-wrapper.white h1.page-hero-style2.stronger + .h2-underline,
.section-wrapper.white h2.page-hero-style2.stronger + .h2-underline,
.section-wrapper.white h3.page-hero-style2.stronger + .h2-underline,
.section-wrapper.white h1.page-hero-style + .h2-underline,
.section-wrapper.white h2.page-hero-style + .h2-underline,
.section-wrapper.white h3.page-hero-style + .h2-underline{
  background: #222 !important;
  box-shadow:
    2px 2px 2px rgba(0,0,0,0.32),
    3px 3px 6px rgba(0,0,0,0.22) !important;
}


/* Center the [about_right] subtitle "button" within its column */
.section-wrapper .about-right .section_sub_title{
  display: inline-block;         /* shrink to content width */
  width: auto !important;        /* undo any 100% width rules */
  max-width: 100%;
  margin: 0 auto .6rem !important; /* center horizontally */
  text-align: center !important; /* center multi-line text */
  float: none !important;        /* ignore theme floats */
}

/* If the theme forces block-level centering quirks, use this stricter fallback */
.section-wrapper .about-right{
  text-align: center;            /* center the subtitle as a fallback */
}
.section-wrapper .about-right .section_title,
.section-wrapper .about-right p{
  text-align: inherit;           /* keeps your current behavior */
}


.section-wrapper .about-right > .section_sub_title{
  display:inline-block; width:auto!important; margin:0 auto .6rem!important;
  text-align:center!important; float:none!important;
}



/* Ensure page-hero-style sticks on single posts */
body.single h1.page-hero-style,
body.single h2.page-hero-style,
body.single h3.page-hero-style {
  text-shadow: 2px 2px 2px rgba(0,0,0,.32), 3px 3px 6px rgba(0,0,0,.22);
}


/* ===== DF: normalize hero heading styles everywhere ===== */

/* A) Correct selectors (no leading dot) */
h1.page-hero-style,
h2.page-hero-style,
h3.page-hero-style {
  /* keep theme sizes; only add effects */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-align: center;
  /* your preferred subtle stack */
  text-shadow:
    2px 2px 2px rgba(0,0,0,0.32),
    3px 3px 6px rgba(0,0,0,0.22) !important;
}

/* B) Our alt variant stays available */
h1.page-hero-style2,
h2.page-hero-style2,
h3.page-hero-style2 {
  text-align: center;
  text-shadow:
    1px 1px 1px rgba(0,0,0,0.20),
    2px 2px 4px rgba(0,0,0,0.18) !important;
}
h1.page-hero-style2.stronger,
h2.page-hero-style2.stronger,
h3.page-hero-style2.stronger {
  text-shadow:
    2px 2px 2px rgba(0,0,0,0.32),
    3px 3px 6px rgba(0,0,0,0.22) !important;
}

/* C) If a heading accidentally has BOTH classes, prefer the base look */
h1.page-hero-style.page-hero-style2,
h2.page-hero-style.page-hero-style2,
h3.page-hero-style.page-hero-style2 {
  text-shadow:
    2px 2px 2px rgba(0,0,0,0.32),
    3px 3px 6px rgba(0,0,0,0.22) !important;
}

/* D) Underline — default and section-aware tweak */
.h2-underline {
  display: block;
  width: 80%;
  max-width: 200px;
  height: 3px;
  margin: 12px auto 18px;
  background: #00ccff; /* brand cyan */
  border-radius: 2px;
}
.section-wrapper.gray .h2-underline {
  background: #0077aa; /* darker accent on gray sections */
}
.section-wrapper.white .h2-underline {
  background: #00ccff; /* cyan on white sections */
}

/* Center + cyan glow (default look) */
h1.page-hero-style,
h2.page-hero-style,
h3.page-hero-style{
  text-align: center;
  color: #000;
  text-shadow:
    2px 2px 2px rgba(0,204,255,1),
    3px 3px 5px rgba(0,0,0,1),
    3px 3px 6px rgba(51,214,255,1) !important;
  margin: 0 0 .4em;
}

