/* Shared pill styling */
.eden-share .btn {
  border-width: 2px;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Default resting tint so they don't look “washed” */
.eden-share .btn {
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.015));
  box-shadow: 0 .125rem .375rem rgba(0,0,0,.08);
}

/* Generic hover/active/focus feel */
.eden-share .btn:hover { transform: translateY(-1px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.eden-share .btn:active { transform: translateY(0); box-shadow: 0 .3rem .75rem rgba(0,0,0,.12) inset; }
.eden-share .btn:focus { outline: none; box-shadow: 0 0 0 .2rem rgba(229,66,66,.25); }

/* Per-network accents (no HTML changes needed) */
.eden-share a[href*="twitter.com"] { border-color:#0F1419; color:#0F1419; }
.eden-share a[href*="twitter.com"]:hover { background:#0F1419; color:#fff; }

.eden-share a[href*="facebook.com"] { border-color:#1877F2; color:#1877F2; }
.eden-share a[href*="facebook.com"]:hover { background:#1877F2; color:#fff; }

.eden-share a[href*="linkedin.com"] { border-color:#0A66C2; color:#0A66C2; }
.eden-share a[href*="linkedin.com"]:hover { background:#0A66C2; color:#fff; }

.eden-share a[href*="whatsapp.com"] { border-color:#25D366; color:#128C7E; }
.eden-share a[href*="whatsapp.com"]:hover { background:#25D366; color:#0B3D2E; }

.eden-share a[href^="mailto:"] { border-color:#6B7280; color:#374151; }
.eden-share a[href^="mailto:"]:hover { background:#6B7280; color:#fff; }

/* Eden Phone Number Style: */
.eden-phone {
  font-weight: bold;
  font-size: 1.1rem;
  color: #b00000;          /* Eden red */
  text-decoration: none;
}

.eden-phone:hover {
  color: #ff3333;
  text-decoration: underline;
}

.eden-email {
  font-weight: normal;
  font-size: 1rem;
  color: #0066cc;          /* Eden blue */
  text-decoration: none;
}

.eden-email:hover {
  color: #004c99;
  text-decoration: underline;
}

/* Test for IE fix: */
.TestButton {
border: 2px solid #666;
padding: 6px 0;
text-align: center; width: 160px;
text-decoration: none;
display: inline-block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
font-family: Arial,Helvetica,Geneva,sans-serif;
    	font-size: 12px;
    	font-weight: bold; color: white;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
/* background: #3A7CBE;*/
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#3A7CBE), to(#9FDAEE));
background: -webkit-linear-gradient(#3A7CBE, #9FDAEE);
background: -moz-linear-gradient(#3A7CBE, #9FDAEE);
background: -ms-linear-gradient(#3A7CBE, #9FDAEE);
background: -o-linear-gradient(#3A7CBE, #9FDAEE);
background: linear-gradient(#3A7CBE, #9FDAEE);
-pie-background: linear-gradient(#9FDAEE, #3A7CBE);
behavior: url(http://www.edenusa.com/includefiles/css/edenstyle/pie.htc);
}

/***********************************************************
  EDEN — Animated gradient border for cards (future-proof)
  Usage:
    <div class="card eden-hover-border ..."> ... </div>
  Optional section wrappers for shadow tuning:
    <section class="pricing-cards"> … (primary cards) …
    <section class="addon-cards">   … (supporting cards) …
***********************************************************/

/* Base animated gradient border — applies wherever the class is used */
.card.eden-hover-border,
.card.eden-hover-border.shadow-sm {                 /* keep working even with Bootstrap's shadow-sm */
  position: relative;
  border-radius: 1rem;
  border: 2px solid transparent;                   /* the "border" is drawn via background layers */
  background:
    /* inner fill (card content) */
    linear-gradient(#ffffff, #ffffff) padding-box,
    /* outer animated ring (the visible border) */
    linear-gradient(90deg,
      /* heavier bias toward Eden red */
      #e54242, #e54242, #e54242,
      #ffb703, #36b37e, #3b82f6, #a855f7,
      #e54242, #e54242
    ) border-box !important;                        /* win against theme background overrides */
  background-size: auto, 400% 400% !important;      /* large so movement looks smooth */
  background-position: 0 0, 0% 50% !important;
  transition: box-shadow .3s ease, transform .3s ease;
  overflow: hidden;
  will-change: background-position;
}

/* Hover/active animation */
.card.eden-hover-border:hover,
.card.eden-hover-border:focus-within,
.card.eden-hover-border:active,
.card.eden-hover-border.shadow-sm:hover,
.card.eden-hover-border.shadow-sm:focus-within,
.card.eden-hover-border.shadow-sm:active {
  animation: edenBorderShift 12s linear infinite;   /* slower vibe */
}

/* Gradient slide creates the color-changing ring */
@keyframes edenBorderShift {
  0%   { background-position: 0 0,   0% 50%; }
  100% { background-position: 0 0, 100% 50%; }
}

/* Accessibility: if user prefers reduced motion, keep border static by default */
@media (prefers-reduced-motion: reduce) {
  .card.eden-hover-border,
  .card.eden-hover-border.shadow-sm {
    animation: none;
    background-position: 0 0, 50% 50%;
  }
}

/* ---------------------------------------------------------
   SECTION TUNING — give different shadow/halo per section
   Add to your HTML:
     <section class="pricing-cards">…big “Typical Ranges” cards…</section>
     <section class="addon-cards">…3 smaller “Popular Add-Ons” cards…</section>
--------------------------------------------------------- */

/* PRICING (big, primary cards): stronger lift + brighter halo */
.pricing-cards .card.eden-hover-border {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);        /* stronger base shadow */
}
.pricing-cards .card.eden-hover-border:hover,
.pricing-cards .card.eden-hover-border:focus-within,
.pricing-cards .card.eden-hover-border:active {
  box-shadow:
    0 0 0 .35rem rgba(229,66,66,.18),              /* brighter Eden-red halo */
    0 1rem 2rem rgba(0,0,0,.30);                   /* deeper drop shadow */
  transform: translateY(-3px);                     /* subtle lift */
}

/* ADD-ONS (supporting cards): lighter base + softer halo */
.addon-cards .card.eden-hover-border {
  box-shadow: 0 .25rem .5rem rgba(0,0,0,.10);      /* lighter base shadow */
}
.addon-cards .card.eden-hover-border:hover,
.addon-cards .card.eden-hover-border:focus-within,
.addon-cards .card.eden-hover-border:active {
  box-shadow:
    0 0 0 .2rem rgba(229,66,66,.12),               /* softer halo */
    0 .5rem 1rem rgba(0,0,0,.15);                  /* moderate lift */
  transform: translateY(-2px);
}

/* Optional utility if you ever want a consistent subtle shadow elsewhere */
.eden-card-shadow { box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); }


/* ==========================================================================
   EDEN — Utility Classes (global)
   - Hover border + shadow (eden-hover-border)
   - Section variants (pricing-cards, addon-cards)
   - Image/Text vertical separator (eden-sep-left / eden-sep-right)
   - Card body flex helpers (keep CTAs aligned)
   ========================================================================== */

:root { --eden-red:#e54242; }

/* Base hover-border: subtle red border + noticeable shadow + smooth hover */
.eden-hover-border{
  border:1px solid rgba(229,66,66,.35) !important;
  box-shadow:0 0.5rem 1rem rgba(0,0,0,.15) !important;
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.eden-hover-border:hover{
  border-color:var(--eden-red) !important;
  box-shadow:
    0 0.75rem 1.25rem rgba(229,66,66,.35),
    0 0.25rem 0.75rem rgba(0,0,0,.15) !important;
  transform:translateY(-2px);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .eden-hover-border{ transition:none; }
  .eden-hover-border:hover{ transform:none; }
}

/* Section variants
   - pricing-cards: strongest glow/lift
   - addon-cards: medium glow
   (Apply by wrapping cards in <div class="pricing-cards"> or <div class="addon-cards">)
*/
.pricing-cards .card.eden-hover-border:hover{
  box-shadow:
    0 1rem 1.75rem rgba(229,66,66,.40),
    0 .35rem 1rem rgba(0,0,0,.18) !important;
  transform:translateY(-3px);
}
.addon-cards .card.eden-hover-border{
  box-shadow:0 0.45rem 0.9rem rgba(0,0,0,.13) !important;
}
.addon-cards .card.eden-hover-border:hover{
  box-shadow:
    0 0.65rem 1.15rem rgba(229,66,66,.28),
    0 .25rem .85rem rgba(0,0,0,.14) !important;
}

/* Image/Text vertical separator (desktop/tablet only)
   Usage:
     <div class="row no-gutters">
       <div class="col-md-5 eden-sep-left">…image…</div>
       <div class="col-md-7 eden-sep-right">…text…</div>
     </div>
*/
@media (min-width:768px){
  .eden-sep-left{ padding-right:1rem; }
  .eden-sep-right{
    padding-left:1rem;
    border-left:1px solid rgba(229,66,66,.35);
  }
}

/* Card body helpers (keep CTA buttons aligned at bottom across cards) */
.eden-card-body-flex{
  display:flex;
  flex-direction:column;
  height:100%;
}
.eden-card-body-flex .eden-spacer{ margin-top:auto; } /* place before CTA to push it down */

/* Optional: tidy BS4 gutters when needed (use on .row if you want “g-0” behavior) */
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"]{ padding-right:0; padding-left:0; }


/* ========================================================================== */
/* Eden Featured listing:                                                     */
/* ========================================================================== */
.eden-featured-list li { margin-bottom:.5rem; }

.eden-featured-link{
  display:flex; align-items:center;
  justify-content:space-between;
  padding:.625rem .75rem;
  border:1px solid rgba(229,66,66,.25);
  border-left:4px solid var(--eden-red);
  border-radius:.5rem;
  background:#fff;
  text-decoration:none; color:#212529;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075); /* Bootstrp shadow-sm vibe */
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.eden-featured-link:hover{
  transform:translateY(-1px);
  box-shadow:0 .25rem .75rem rgba(0,0,0,.12);
  background:rgba(229,66,66,.03);
  color:var(--eden-red);
}
.eden-item-name{ font-weight:600; margin-right:.5rem; flex:1 1 auto; }
.eden-price{ margin-right:.5rem; flex:0 0 auto; }
.eden-cta{ font-weight:600; opacity:.85; flex:0 0 auto; }

/* small screens: keep the tap target chunky */
@media (max-width: 575.98px){
  .eden-featured-link{ padding:.75rem .875rem; }
}

/* ==========================================================================
   Simple red border variant (safe: does NOT change .eden-hover-border)
   Usage: <div class="card eden-border-simple">…</div>
   ========================================================================== */
:root { --eden-red:#e54242; }

.card.eden-border-simple{
  background:#fff !important;
  background-image:none !important;  /* prevents any layered ring */
  border:1px solid rgba(229,66,66,.35) !important;
  box-shadow:0 0.5rem 1rem rgba(0,0,0,.15) !important;
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.card.eden-border-simple:hover{
  border-color:var(--eden-red) !important;
  box-shadow:0 0.75rem 1.25rem rgba(229,66,66,.35),
             0 0.25rem 0.75rem rgba(0,0,0,.15) !important;
  transform:translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  .card.eden-border-simple{ transition:none; }
  .card.eden-border-simple:hover{ transform:none; }
}

/* Make the card title adopt Eden red on hover (simple variant) */
.card.eden-border-simple:hover .card-title,
.card.eden-border-simple:hover .card-title a {
  color: var(--eden-red) !important;
}

/* Equal-height cards with bottom-aligned CTA (opt-in container) */
.eden-equal-cta .card { height: 100%; }
.eden-equal-cta .card .card-body {
  display: flex;
  flex-direction: column;
}
.eden-equal-cta .card .btn {
  margin-top: auto; /* push CTA to bottom */
}

/* Section variants (match your existing glow tuning) */
.pricing-cards .card.eden-border-simple:hover{
  box-shadow:0 1rem 1.75rem rgba(229,66,66,.40),
             0 .35rem 1rem rgba(0,0,0,.18) !important;
  transform:translateY(-3px);
}
.addon-cards .card.eden-border-simple{
  box-shadow:0 0.45rem 0.9rem rgba(0,0,0,.13) !important;
}
.addon-cards .card.eden-border-simple:hover{
  box-shadow:0 0.65rem 1.15rem rgba(229,66,66,.28),
             0 .25rem .85rem rgba(0,0,0,.14) !important;
}

/* Safety net: if both classes are ever present, force the simple look */
.card.eden-hover-border.eden-border-simple{
  background:#fff !important; background-image:none !important; animation:none !important;
  border:1px solid rgba(229,66,66,.35) !important;
  box-shadow:0 0.5rem 1rem rgba(0,0,0,.15) !important;
}

/* ==========================================================================
/* ADDED on 09/28/25: */
/* ==========================================================================

/* Eden card polish (no JS) */
.ea-card {
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ea-card:hover {
transform: translateY(-2px);
box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12);
border-color: #b30000; /* Eden red border on hover */
}
/* Title/link color shift on hover */
.ea-card:hover .card-title,
.ea-card:hover .card-title a {
color: #b30000;
}
/* Ensure equal heights and bottom-aligned CTA without JS */
.ea-card .card-body {
display: flex;
flex-direction: column;
}
.ea-card .btn {
margin-top: auto;  /* pushes CTA to the bottom of the card-body */
}

/* Eden red */
:root { --eden-red: #b30000; }

/* Card polish + strong hover */
.card.ea-card {
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
border: 1px solid var(--bs-border-color); /* ensure visible border */
}
.card.ea-card:hover,
.card.ea-card:focus-within {
transform: translateY(-2px);
box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12);
border-color: var(--eden-red) !important;  /* Eden red border */
}

/* Title color shift on hover */
.card.ea-card:hover .card-title,
.card.ea-card:hover .card-title a,
.card.ea-card:focus-within .card-title,
.card.ea-card:focus-within .card-title a {
color: var(--eden-red) !important;
}

/* Equal heights + bottom-aligned buttons */
.card.ea-card .card-body { 
display: flex; 
flex-direction: column; 
}
.card.ea-card .btn { 
margin-top: auto; /* push button to bottom */
}

/* Eden hover border/halo */
.eden-hover-border {
transition: all 0.3s ease;
border: 2px solid transparent;
border-radius: 0.75rem; /* match card rounding */
}

.eden-hover-border:hover {
border-color: #b30000; /* Eden red */
box-shadow: 0 0 18px rgba(179, 0, 0, 0.45); /* red halo */
transform: translateY(-3px);
}

/* Title turns Eden red on card hover (simple variant) */
.card.eden-border-simple:hover .card-title,
.card.eden-border-simple:hover .card-title a {
  color: var(--eden-red) !important; /* uses your existing :root --eden-red */
}

/* Equal-height cards + bottom-aligned CTA (opt-in container) */
.eden-equal-cta .card { height: 100%; }
.eden-equal-cta .card .card-body { display:flex; flex-direction:column; }
.eden-equal-cta .card .btn { margin-top:auto; }

/* Remove underline from card titles */
.card.eden-border-simple .card-title a {
  text-decoration: none !important;
}
.card.eden-border-simple .card-title a:hover {
  text-decoration: none !important;
}

/* Add spacing between stacked cards on mobile */
@media (max-width: 576px) {
  .eden-equal-cta .col {
    margin-bottom: 1rem;
  }
}


/* ==========================================================================
   REGIONAL COVERAGE STATEMENT (Global Footer)
   Added: 2025-10-04 — Eden USA
   --------------------------------------------------------------------------
   Styles the "Serving All of Southern California" card in eden-global-footer.asp
   ========================================================================== */

.footer-regional-card {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    text-align: center;
    border-radius: 1rem;
}

.footer-regional-card p {
    margin-bottom: 0.4rem;
}

.footer-regional-card .headline {
    color: #e54242;                /* Eden red */
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Mobile optimization */
@media (max-width: 576px) {
    .footer-regional-card {
        padding: 1.25rem 0.75rem;
    }

    .footer-regional-card p {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .footer-regional-card .headline {
        font-size: 0.9rem;
        letter-spacing: 0.5px;
    }
}

/* =========================================================
   Mobile Typography Lift + Lead tweak (single, safe block)
   Paste AFTER Bootstrap & theme CSS
   ========================================================= */
@media (max-width: 576px) {
  html { 
    font-size: 17px;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
                 "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
                 "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  p, li { margin-bottom: 0.9rem; }

  h1, .h1 { font-weight: 700; font-size: clamp(1.6rem, 4.8vw, 2.0rem); line-height: 1.25; letter-spacing: -0.01em; }
  h2, .h2 { font-weight: 700; font-size: clamp(1.35rem, 4.2vw, 1.6rem); line-height: 1.3; }
  h3, .h3 { font-weight: 600; font-size: clamp(1.2rem, 3.8vw, 1.4rem); line-height: 1.35; }

  small, .small { font-size: 0.98rem; }

  .btn { font-size: 1rem; padding: 0.75rem 1rem; line-height: 1.2; }
  .btn-sm { font-size: 0.95rem; padding: 0.6rem 0.9rem; }
  .nav-link, .breadcrumb, .page-link { font-size: 1rem; }

  input, select, textarea { font-size: 1rem; line-height: 1.4; }

  /* Lead intro: smaller on phones, keep body font */
  .lead, p.lead {
    font-size: 1.05rem;     /* gentle, readable */
    line-height: 1.55;
    font-weight: 400;
    font-family: inherit;   /* ensure it uses body’s stack */
    letter-spacing: 0;
    margin-bottom: 0.95rem;
  }
  /* Optional: make the first lead slightly larger */
  .lead:first-of-type { font-size: 1.12rem; }
}
/* ===== END Mobile block ===== */


/* =========================================================
   SITE-WIDE TYPOGRAPHY + GUTTERS (Backline rules, generalized)
   Apply within the single wrapper opened in startofcontent.asp
   ========================================================= */

/* 1) Default text column child spacing (headings, paragraphs, lists) */
.ea-text-column > h1,
.ea-text-column > h2,
.ea-text-column > h3,
.ea-text-column > h4,
.ea-text-column > h5,
.ea-text-column > h6 { 
  display: block;
  margin-top: .75rem;
  margin-bottom: .75rem;
}

/* Narrower headings visually (nice rhythm) */
.ea-text-column h1, .ea-text-column h2, .ea-text-column h3,
.ea-text-column h4, .ea-text-column h5, .ea-text-column h6 {
  max-width: 28em;
  margin-left: auto; margin-right: auto;
}

.ea-text-column > p,
.ea-text-column > ul,
.ea-text-column > ol { 
  margin-bottom: 1rem;
}

/* Row-to-row breathing room when rows appear inside the text column */
.ea-text-column .row + .row { margin-top: 1rem; }

/* IMPORTANT: Eden convention says .ea-gap is a CR/LF spacer and empty.
   Do NOT add padding to .ea-gap globally. If you used it for spacing
   on Backline, replace with .ea-gap-lg below. */
.ea-gap-lg { padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* Cards sitting inside long-form copy should have a modest bottom margin */
.ea-text-column .card { margin-bottom: 1.25rem; }

/* List indent *inside cards* (Backline behavior, now universal) */
.ea-text-column .card .card-body ul {
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 0; 
  padding-left: 1.25rem;   /* real indent */
}
.ea-text-column .card .card-body ul > li {
  margin-left: 0;
  padding-left: 0;
}
.ea-text-column .card .card-body ul.small {
  font-size: 0.875rem;
  line-height: 1.35;
}

/* 2) Mobile edge padding (Backline phone inset, generalized)
   This recreates your #backline-page { padding-inline } on all pages */
@media (max-width: 576px) {
  .ea-text-column {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* 3) Figure + image sizing utilities (hero caps, centered) */
.ea-figure-center { text-align: center; margin-left: auto; margin-right: auto; }
.ea-figure-center img { display: block; margin: 0 auto; width: 100%; max-width: 520px; }

@media (max-width: 576px) {
  .ea-figure-center img {
    max-width: 420px;
    width: 92%;
  }
}

/* Universal “image sizer” box you can wrap any hero in (Backline’s eden-image-sizer) */
.eden-image-sizer { max-width: 380px; margin-left: auto; margin-right: auto; }
@media (min-width: 577px) { .eden-image-sizer { max-width: 520px; } }

/* Simple hero image cap (Backline’s backline-hero → generalized) */
.ea-hero-img {
  display: block;
  margin-left: auto; margin-right: auto;
  width: 100%;
  max-width: 520px;
  height: auto;
}
@media (max-width: 576px) {
  .ea-hero-img { max-width: 380px; width: 92%; }
}

/* Optional: true full-bleed rows on phones (your .eden-fullbleed idea) */
@media (max-width: 576px) {
  .ea-fullbleed { margin-left: -12px; margin-right: -12px; }
}

/* 4) Guardrails: media never blows up the column, no horizontal jiggle */
.ea-text-column img,
.ea-text-column video,
.ea-text-column iframe { max-width: 100%; height: auto; }
html, body { overflow-x: hidden; }


/* =========================================================
   HEADINGS WIDTH CORRECTION
   - Let H1 span the available text column width
   - Keep optional, softer caps for subheads
   ========================================================= */

/* Undo any previous heading cap for H1 */
.ea-text-column h1 { 
  max-width: none;        /* no artificial narrow column */
}

/* (Optional) Subheads can stay a bit narrower for readability */
.ea-text-column h2,
.ea-text-column h3,
.ea-text-column h4,
.ea-text-column h5,
.ea-text-column h6 {
  max-width: 40em;        /* was 28em; relax it or remove if you prefer */
  margin-left: auto;
  margin-right: auto;
}

/* Keep the mobile gutters on the H1 so it doesn't kiss the edges */
.ea-text-column > h1 {
  padding-left: 12px;
  padding-right: 12px;
}
@media (min-width: 577px) {
  .ea-text-column > h1 { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* === Headings: flush-left within the text column (no centering) === */
.ea-text-column h1,
.ea-text-column h2,
.ea-text-column h3,
.ea-text-column h4,
.ea-text-column h5,
.ea-text-column h6 {
  max-width: none;      /* let headings use the column width */
  margin-left: 0;       /* no auto-centering */
  margin-right: 0;
  text-align: left;     /* guardrail in case something set center/right elsewhere */
}

/* Keep reasonable vertical rhythm only (not width) */
.ea-text-column > h1,
.ea-text-column > h2,
.ea-text-column > h3,
.ea-text-column > h4,
.ea-text-column > h5,
.ea-text-column > h6 {
  margin-top: .75rem;
  margin-bottom: .75rem;
  /* retain the mobile gutters so headings don't kiss edges */
  padding-left: 12px;
  padding-right: 12px;
}
@media (min-width: 577px) {
  .ea-text-column > h1,
  .ea-text-column > h2,
  .ea-text-column > h3,
  .ea-text-column > h4,
  .ea-text-column > h5,
  .ea-text-column > h6 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Site-wide: keep the top black bar actually black */
header .navbar.navbar-dark:first-of-type {
  background-color: #000 !important;
  background-image: none !important; /* just in case a theme gradient sneaks in */
}


/* =========================================
   JUSTIFIED TEXT (Eden utilities)
   ========================================= */
/* Opt-in container for justified paragraphs */
.eden-justified {
  max-width: 65ch;           /* keeps line length sane */
  line-height: 1.55;
  margin-left: auto;
  margin-right: auto;
}

/* Paragraph defaults when inside .eden-justified */
.eden-justified p {
  text-align: justify;
  text-align-last: left;      /* avoid stretched last line */
  hyphens: auto;              /* real hyphenation */
  overflow-wrap: normal;      /* prefer hyphenation over brute wraps */
  word-break: normal;
  font-kerning: normal;       /* keep kerning pairs */
  font-variant-ligatures: common-ligatures;
  text-wrap: pretty;          /* nicer breaks (modern) */
}

/* Headings benefit from balanced wrapping */
.eden-justified h1,
.eden-justified h2,
.eden-justified h3 {
  text-wrap: balance;
}

/* Mobile: justification often looks worse—opt out gracefully */
@media (max-width: 640px) {
  .eden-justified p { text-align: left; }
}

/* Desktop: let justified blocks span full column width */
@media (min-width: 992px) {          /* Bootstrap 4's lg breakpoint */
  .eden-justified {
    max-width: none;                 /* or 100% */
  }
}


/* =========================================
   Eden justify variants
   ========================================= */

/* 1) Tighter measure for dense copy (mobile/tablet only).
   Desktop stays full-width due to your lg+ override. */
.eden-justified--tight {
  max-width: 52ch;                 /* narrower on small screens */
}
@media (min-width: 992px) {
  .eden-justified--tight { max-width: none; }
}

/* 2) No hyphenation (product names, legal, proper nouns) */
.eden-justified--nohyphen p {
  hyphens: manual;                  /* ignore auto hyphenation */
  overflow-wrap: normal;
  word-break: normal;
}

/* ========================================================
  Home H1 sizing (desktop stays default; mobile steps down) 
  ========================================================= */
.ea-home-canvas h1 {
  line-height: 1.2;
}

/* ≤ 768px (tablets & small screens) */
@media (max-width: 767.98px) {
  .ea-home-canvas h1 {
    font-size: 1.75rem; /* ~28px */
  }
}

/* ≤ 576px (phones) */
@media (max-width: 575.98px) {
  .ea-home-canvas h1 {
    font-size: 1.5rem;  /* ~24px */
  }
}

/* =========================================================
   Global H1 sizing (Bootstrap 4 friendly)
   - Keeps desktop default (~2.5rem)
   - Steps down on tablets and phones
   - Does NOT affect .display-* hero headings
   ========================================================= */
h1:not(.display-1):not(.display-2):not(.display-3):not(.display-4) {
  line-height: 1.0;
}

/* ≤ 992px (lg and down): gentle step-down */
@media (max-width: 991.98px) {
  h1:not(.display-1):not(.display-2):not(.display-3):not(.display-4) {
    font-size: 2.25rem; /* ~36px */
  }
}

/* ≤ 768px (md and down): more step-down */
@media (max-width: 767.98px) {
  h1:not(.display-1):not(.display-2):not(.display-3):not(.display-4) {
    font-size: 2rem; /* ~32px */
  }
}

/* ≤ 576px (sm and down): phone size */
@media (max-width: 575.98px) {
  h1:not(.display-1):not(.display-2):not(.display-3):not(.display-4) {
    font-size: 1.75rem; /* ~28px */
  }
}


/* ========================================================= */
/* START: Eden Standard Form Styling                         */
/*   - Scoped to .eden-form-standard so we don't affect      */
/*     legacy or third-party forms.                          */
/* ========================================================= */
/*  ADDED ON: 11/19/25                                       */
/* ========================================================= */

.eden-form-standard {
  background-color: #ffffff;
  border-radius: 0.5rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 0.35rem 0.85rem rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e5e5;
}

/* Tighten vertical rhythm a bit */
.eden-form-standard .form-group {
  margin-bottom: 0.9rem;
}

.eden-form-standard label {
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.25rem;
}

/* Base input styling */
.eden-form-standard .form-control,
.eden-form-standard .custom-select {
  border-radius: 0.25rem;
  border: 1px solid #ced4da;
  font-size: 0.95rem;
  padding: 0.45rem 0.6rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Focus ring with subtle color accent (works with your red H2s) */
.eden-form-standard .form-control:focus,
.eden-form-standard .custom-select:focus {
  border-color: #dc3545; /* Bootstrap "danger" red, close to your headings */
  box-shadow: 0 0 0 0.14rem rgba(220, 53, 69, 0.25);
}

/* Checkbox / radio alignment */
.eden-form-standard .form-check {
  margin-bottom: 0.25rem;
}

.eden-form-standard .form-check-input {
  margin-top: 0.25rem;
}

.eden-form-standard .form-check-label {
  margin-left: 0.1rem;
  font-size: 0.92rem;
}

/* Textarea height */
.eden-form-standard textarea.form-control {
  min-height: 120px;
}

/* Submit button styling – use your existing .btn-primary, just tweak spacing */
.eden-form-standard .btn {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  font-weight: 600;
}

/* Extra breathing room above the button on small screens */
@media (max-width: 576px) {
  .eden-form-standard {
    padding: 1.15rem 1.25rem;
  }

  .eden-form-standard .btn {
    width: 100%;
  }
}

/* =========================================================
   Eden Standard Form – Stabilize hover so card doesn't move
   Apply to cards/forms that also use .eden-hover-border
   ========================================================= */

.eden-standard-form.eden-hover-border,
.eden-standard-form.eden-hover-border:hover {
  /* Reserve consistent border so hover doesn't change layout */
  border-width: 2px;
  border-style: solid;
}

/* Default state: invisible border, same thickness as hover */
.eden-standard-form.eden-hover-border {
  border-color: transparent;
}

/* Hover state: keep geometry identical; only change visuals */
.eden-standard-form.eden-hover-border:hover {
  /* If .eden-hover-border previously used translate/offset, neutralize it here */
  transform: none;
  margin-top: 0;
  margin-bottom: 0;
}

/* Global non-shifting hover effect for cards/forms */
.eden-hover-border,
.eden-standard-form .card {
    border-width: 2px;          /* same width as hover */
    border-style: solid;
    border-color: transparent;  /* invisible until hover */
    transition:
        border-color 0.25s ease,
        box-shadow   0.25s ease,
        transform    0.25s ease;
}

/* Hover: no layout change, just visuals */
.eden-hover-border:hover,
.eden-standard-form .card:hover {
    border-color: #e54242;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
    transform: translate3d(0, -2px, 0); /* small lift without "jump" */
}

/* ========================================================= */
/* END: Eden Standard Form Styling                           */
/* ========================================================= */

/* =========================================================
   Site-wide H1 title sizing (covers both template variants)
   ========================================================= */

/* Desktop/base */
h1.ea-title,
h1.eden-h1 {
  line-height: 1.2;
  font-size: 2.5rem !important;
}

/* ≤ 992px (lg and down) */
@media (max-width: 991.98px) {
  h1.ea-title,
  h1.eden-h1 {
    font-size: 2.5rem !important;
  }
}

/* ≤ 768px (md and down) */
@media (max-width: 767.98px) {
  h1.ea-title,
  h1.eden-h1 {
    font-size: 1.75rem !important;
  }
}

/* ≤ 576px (sm and down) — phones */
@media (max-width: 575.98px) {
  h1.ea-title,
  h1.eden-h1 {
    font-size: 1.5rem !important;
  }
}

/* ============================================================
   GLOBAL CONTENT TYPOGRAPHY — Consistent <h2> and <h3> Headings
   Applies site-wide inside STARTOFCONTENT.ASP
   ============================================================ */
.ea-box h2,
.ea-box h3 {
    color: #e54242;      /* Eden Red */
    font-weight: 600;
    margin-top: 1.4rem;
}

/* Justify all lead paragraphs (Bootstrap .lead) */
.ea-text-column p.lead,
p.lead {
    text-align: justify;
    text-justify: inter-word; /* helps spacing in some browsers */
    hyphens: auto;
}

/* =========================================================
   Eden Standard Form – stabilize hover so card doesn't move
   Applies to any .eden-hover-border inside .eden-standard-form
   ========================================================= */

/* Base: reserve consistent border so hover doesn't change layout */
.eden-standard-form .eden-hover-border {
    border-width: 2px;
    border-style: solid;
    border-color: transparent; /* invisible by default */
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

/* Hover: keep geometry identical; only change visuals */
.eden-standard-form .eden-hover-border:hover {
    border-color: #e54242;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);

    /* Kill any “lift” or nudge from earlier rules */
    transform: none;
    margin-top: 0;
    margin-bottom: 0;
}

/* =========================================================
   GLOBAL: Eden hover cards – stop layout shift on hover
   Targets cards like: <div class="card eden-hover-border h-100">
   ========================================================= */

/* Base state: reserve the border and lock margins */
.card.eden-hover-border {
    border-width: 2px;
    border-style: solid;
    border-color: transparent;      /* invisible border, same width as hover */
    margin-top: 0;
    margin-bottom: 0;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

/* Hover: same geometry, just visuals */
.card.eden-hover-border:hover {
    border-color: #e54242;          /* show the border, same 2px thickness */
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
    transform: none;                /* kill any lift that might cause “jump” */
    margin-top: 0;
    margin-bottom: 0;
}