/* ============================================================
   CWOB custom styles (site-wide)
   Referenced by _inc/head.asp. Put site-specific CSS here
   (NOT in vendor files like careox-icons/style.css).
   ============================================================ */
/* Footer background image */
footer.main-footer.background-black div.main-footer__bg.background-black {
	background-image: url(/assets/images/backgrounds/footer-bg-1-1.jpg);
}

/* Rounded image helper (used on why-mexico, ech, r9-25, etc.) */
.rounded-img {
  border-radius: 15px;     /* smooth rounded corners */
  width: 400px;            /* optional fixed width */
  max-width: 100%;         /* responsive fallback */
  height: auto;
}

/* Float helpers with spacing */
.rounded-img.float-left {
  float: left;
  margin: 0 15px 15px 0;
}

.rounded-img.float-right {
  float: right;
  margin: 0 0 15px 15px;
}

/* Responsive override: remove floats on small screens */
@media (max-width: 768px) {
  .rounded-img.float-left,
  .rounded-img.float-right {
    float: none;               /* no float */
    display: block;            /* block element */
    margin: 0 auto 20px auto;  /* center with bottom space */
  }
}


/* ============================================================
   SITE HEADER — Donate / Adopt buttons + mobile nav bar
   Overrides careox.css (loaded before this file). Markup lives in
   _inc/nav-main.asp (also _inc/header.asp, _inc/nav.asp).
   ============================================================ */

/* --- Icon-to-word gap inside the pill buttons -------------------
   careox.css:539 sets margin-right:20px, which reads as ~22-25px
   next to the icon glyph's own side bearing. 11px is the target. */
.careox-btn2 i {
  margin-right: 11px;
}

/* --- Desktop spacing (>=992px) ---------------------------------- */
@media (min-width: 992px) {
  /* ~10px between the Donate and Adopt pills (careox.css gives them
     none; flex kills the inline-block whitespace gap). */
  .main-header__right .careox-btn2 + .careox-btn2 {
    margin-left: 10px;
  }

  /* Shift the pill pair ~30px left by widening the gap to whatever follows
     them at the right edge. That used to be the search icon; the 2026-07-18
     staging round removed it, so this now targets the orange sidebar tile
     (careox.css:4410 = 55px). */
  .main-header--four__toggler {
    margin-left: 85px;
  }

  /* That +30px widens the whole right-hand block, which would otherwise
     be taken out of the main menu's width and wrap it onto extra lines
     around 1200-1366px. Hand the 30px back (careox.css:4360 = 50px);
     the pills are positioned from the right edge, so they do not move. */
  .main-header--four .main-header__right {
    margin-left: 20px;
  }
}

/* --- 992-1199px: hamburger is visible but everything still fits on
   one row. Since the hamburger is now a logo sibling, give it room so
   it does not crowd the logo. ---------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .main-header--four .mobile-nav__btn {
    margin-left: 30px;
    margin-right: auto;
  }
}

/* --- Mobile / small tablet (<=991px) ----------------------------
   Two rows inside .main-header__inner:
     row 1 -> logo (left) + hamburger (upper right)
     row 2 -> smaller Donate/Adopt pills + search, right-aligned
   Depends on the hamburger being a SIBLING of .main-header__right
   (moved there in _inc/nav-main.asp, _inc/header.asp, _inc/nav.asp) —
   as a child it could not hold row 1 while the pills wrapped below.
   careox.css only hides the orange square toggler at <=767px, which
   left it overflowing the viewport at 768-991px; hidden here too. */
@media (max-width: 991px) {
  .main-header--four .main-header__inner {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .main-header--four .main-header__logo {
    margin-right: auto;   /* pushes the hamburger to the right edge */
  }

  .main-header--four .mobile-nav__btn {
    margin-left: 0;
    margin-right: 0;
    align-self: center;
  }

  /* width:100% comes from careox.css at <=1199px; this puts the pills
     on their own full-width row beneath the logo/hamburger row. */
  .main-header--four .main-header__right {
    justify-content: flex-end;
  }

  .main-header--four .main-header__right .careox-btn2 {
    font-size: 14px;
    padding: 8px 20px;
  }

  .main-header--four .main-header__right .careox-btn2 + .careox-btn2 {
    margin-left: 10px;
  }

  .main-header--four .main-header__right .careox-btn2 i {
    font-size: 16px;
    margin-right: 8px;
  }

  .main-header--four__toggler {
    display: none;
  }
}


/* =========================================================================
   Stories navigation
   ========================================================================= */

#nav-stories { margin-top: 33px; }
#nav-stories h4 { margin-bottom: 1rem; }
#nav-stories ul { list-style: none; margin: 0; padding: 0; }
#nav-stories li { margin-bottom: .9rem; line-height: 1.35; }
#nav-stories a { color: var(--careox-base, #ff5528); font-size: 1.0rem; }
#nav-stories a:hover { color: var(--careox-black, #122f2a); }
#nav-stories small { color: var(--careox-text, #636363); }


/* =========================================================================
   Story cards — /stories/index.asp
   Grid is generated by scripts/build_stories_index.py. Masonry (isotope), so
   card heights vary with the excerpt and the image keeps its native aspect.
   ========================================================================= */

.cc-story {
  background: #fff;
  box-shadow: 0 10px 30px rgba(18, 47, 42, .08);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 30px;
}

.cc-story__thumb {
  display: block;
  line-height: 0;
}

.cc-story__thumb img {
  width: 100%;
  height: auto;                 /* native aspect: masonry absorbs the variation */
  transition: transform .4s ease;
}

.cc-story:hover .cc-story__thumb img {
  transform: scale(1.05);
}

/* The theme indents any <p> inside a gallery card (careox.css: .gallery-one__card p
   { padding: 15px }), which left the title and read-more link 15px out of line with
   the body copy. Neutralise it and carry the whole inset on the body instead, so every
   child of the card lines up. */
.cc-story p {
  padding: 0;
}

.cc-story__body {
  padding: 32px 40px 30px;      /* top gap = the breathing room under the image */
}

.cc-story__title {
  font-size: 20px;              /* scoped to these cards only */
  line-height: 1.3;
  margin: 0 0 12px;
}

.cc-story__title a {
  color: var(--careox-black, #122f2a);
}

.cc-story__title a:hover {
  color: var(--careox-base, #ff5528);
}

.cc-story__text {
  color: var(--careox-text, #636363);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 15px;
}

.cc-story__more {
  color: var(--careox-base, #ff5528);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .05em;
}

.cc-story__more:hover {
  color: var(--careox-black, #122f2a);
}


/* ------------------------------------------------ */
/* PAGE HEADERS------------------------------------ */
/* ------------------------------------------------ */

.page-header__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.page-header__bg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------- */
/* Individual Page Headers --------------------- */
/* --------------------------------------------- */

/* Each section has a class and an id added to the body tag. */		
/* If you want to use a photo for the header throughout an entire section, use the body class. (example body.about) */
/* If you want to use a photo for an individual page header, use the body class + id. (example: body.about#faq) */

/* ---------------------------------------------- */
/* ABOUT Section Headers ------------------------ */
/* ---------------------------------------------- */
body.about .page-header__bg { background-image: url(../images/backgrounds/page-header-bg-1-1.jpg); }
body.about#mission .page-header__bg { }
body.about#people .page-header__bg { }
body.about#stories .page-header__bg { }
body.about#why-mexico .page-header__bg { }
body.about#faq .page-header__bg { }

/* ---------------------------------------------- */
/* PROGRAMS Section Headers --------------------- */
/* ---------------------------------------------- */
body.programs .page-header__bg { background-image: url(../images/backgrounds/page-header-bg-1-2.jpg); }
body.programs#index .page-header__bg { }
body.programs#adoption .page-header__bg { }
body.programs#wellness .page-header__bg { }
body.programs#spay-neuter .page-header__bg { }
body.programs#rescue .page-header__bg { }
body.programs#tribal .page-header__bg { }

/* ---------------------------------------------- */
/* GET INVOLVED Section Headers ----------------- */
/* ---------------------------------------------- */
body.involved .page-header__bg { background-image: url(../images/backgrounds/page-header-bg-1-3.jpg); }
body.involved#adopt .page-header__bg { }
body.involved#foster .page-header__bg { }
body.involved#volunteer .page-header__bg { }

/* ---------------------------------------------- */
/* WAYS TO GIVE Section Headers ----------------- */
/* ---------------------------------------------- */
body.give .page-header__bg { background-image: url(../images/backgrounds/page-header-bg-1-4.jpg); }
body.give#donate .page-header__bg { }
body.give#monthly .page-header__bg { }
body.give#tribute .page-header__bg { }
body.give#memorial .page-header__bg { }
body.give#legacy .page-header__bg { }
body.give#supplies .page-header__bg { }

/* ---------------------------------------------- */
/* STORIES Section Headers ---------------------- */
/* ---------------------------------------------- */
body.about-stories .page-header__bg { background-image: url(../images/backgrounds/page-header-bg-1-5.jpg); }
body.about-stories#story-01 .page-header__bg { }
body.about-stories#story-02 .page-header__bg { }
body.about-stories#story-03 .page-header__bg { }
body.about-stories#story-04 .page-header__bg { }
body.about-stories#story-05 .page-header__bg { }
body.about-stories#story-06 .page-header__bg { }
body.about-stories#story-07 .page-header__bg { }
body.about-stories#story-08 .page-header__bg { }
body.about-stories#story-09 .page-header__bg { }
body.about-stories#story-10 .page-header__bg { }
/* Continue as needed per individual story header */


/* ---------------------------------------------- */
/* DONATE Section Headers ---------------------- */
/* ---------------------------------------------- */
body.donate .page-header__bg { background-image: url(../images/backgrounds/page-header-bg-1-30.jpg); }