/* ===========================================================================
   Cheri Foundation, site overrides.

   Loaded after style.css so template updates can be dropped in without
   losing these changes. Keep everything site-specific here rather than
   editing the vendor stylesheet.
   ======================================================================== */

/* ---- Main menu sits on the right of the green bar -------------------------
   The template gives .header-notice `margin-left: auto`, which pushes the
   notice to the far right and strands the menu on the left, leaving a wide
   empty band between the two. Moving the auto margin onto the menu keeps the
   navigation, the notice and the Donate button grouped together on the right.
   Below 1500px the notice is hidden by the template, so the menu simply sits
   right-aligned on its own, which still reads correctly. */
@media (min-width: 992px) {
  .header-default .main-menu {
    margin-left: auto;
  }

  .header-default .header-notice {
    margin-left: 28px;
  }
}

/* ---- Donation campaign, currently paused ----------------------------------
   The campaign is not running, so every route into it is hidden. Nothing has
   been deleted: the markup, the amount selector, the UPI modal and the QR
   image are all still in index.html exactly as they were.

   TO BRING IT BACK: delete this whole block. That is the only change needed.
   The hero buttons are the one exception, see the note at the bottom.

   Hidden here:
     - the Donate Now button in the header bar
     - the Donate item in the desktop menu, the mobile menu and the footer
     - the entire Donate section, including the amount selector and UPI CTA
     - anything else that opens the donation modal

   The modal itself is left alone. With nothing able to trigger it, it simply
   never opens, and leaving it untouched means one less thing to restore. */

[data-bs-toggle="modal"][data-bs-target="#donateModal"],
li:has(> a[href="#Donate"]),
a[href="#Donate"],
#Donate {
  display: none !important;
}

/* The two hero buttons were the only call to action in either slide, so
   hiding them would have left the hero with nothing to click. They now point
   at #volunteer and read "Become a Volunteer". When the campaign restarts,
   change those two back in index.html; they are marked data-donate-was="modal"
   to make them easy to find. */

/* ---- Email addresses stay on one line -------------------------------------
   The contact column is narrow and the template lets long words break
   anywhere, so connect@cherifoundation.com was splitting after the "c" of
   .com and wrapping "om" onto its own line.

   Two parts to the fix. Stop the mid-word break, then let the text shrink a
   little on narrow screens so it still fits rather than overflowing the card.
   The clamp floor is high enough to stay readable on a small phone. */
a[href^="mailto:"] {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.contact-feature .box-text a[href^="mailto:"],
.media-body .box-text a[href^="mailto:"] {
  display: inline-block;
  max-width: 100%;
  font-size: clamp(0.8rem, 3.2vw, 1rem);
}

/* The header bar version has more room, but not on smaller laptops. */
.header-info a[href^="mailto:"],
.header-top a[href^="mailto:"] {
  font-size: clamp(0.85rem, 1.4vw, 1.125rem);
}

/* ---- Header contact cards -------------------------------------------------
   Phone and email now sit one above the other rather than side by side, so
   the email gets the full column width instead of competing with the phone
   number for it.

   Stacking alone was not enough. The template gives every card after the
   first a 2px left border and 40px of left padding, which is the divider
   between two cards in a row. Once stacked, that became a stray vertical line
   beside the email and pushed it 40px further right than the phone above it.
   Both are cleared here. */
.info-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.info-card-wrap .info-card,
.info-card-wrap .info-card:first-child {
  border-left: 0;
  padding-left: 0;
}

@media (max-width: 1199.98px) {
  .info-card-wrap { gap: 8px; }
}

/* ---- Simple contact icons -------------------------------------------------
   The template builds each icon from two mask-image blobs layered behind the
   glyph, which reads as decoration competing with the number beside it. A
   plain circle in the brand colour says the same thing more quietly and drops
   two image requests per icon. */
.info-card .box-icon .bg-shape1,
.info-card .box-icon .bg-shape2 {
  display: none;
}

.info-card .box-icon {
  height: 30px;
  width: 30px;
  line-height: 30px;
  font-size: 12px;
  border-radius: 50%;
  background: var(--theme-color);
  color: var(--white-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The labels above each number are gone, so the number itself carries the
   line. Kept at a readable size without shouting. */
.info-card .box-title {
  font-size: 1rem;
  line-height: 1.3;
}

/* The second card is email; give it the accent so the two are tellable apart
   at a glance without the blob shapes doing that job. */
.info-card-wrap .info-card:nth-child(2) .box-icon {
  background: var(--theme-color2);
  color: var(--black-color2);
}

/* ---- Registration details in the header -----------------------------------
   Sits between the logo and the contact details, filling space that was empty
   and putting the registration number somewhere people actually look, rather
   than only in the footer. Hidden below xl, where the row has no room for a
   third block. */
.header-reg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Matches .info-card .box-title, so the registration lines sit at the same
     size as the phone number and email beside them rather than reading as a
     footnote. */
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--title-color);
  padding-left: 20px;
  border-left: 2px solid var(--th-border-color);
}

.header-reg i {
  color: var(--theme-color);
  width: 16px;
  text-align: center;
}