/* Sanctuary Community Initiative — shared styles
   The design is built with inline styles on each element (faithful to the
   approved mockups). This file holds the global reset, the responsive
   behaviour, and form states that every page shares. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  color: #16263B;
  background: #FBF8F4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Form fields (Contact page) */
input, select, textarea { font-family: 'Inter', sans-serif; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #1C9FD8 !important;
  box-shadow: 0 0 0 3px rgba(28,159,216,0.12);
}

/* ===== Responsive / mobile =====
   Grid containers are styled inline, so these overrides hook the inline
   `style` string. Browsers differ on whether [style*=] matches the raw
   author string ("columns:repeat(4") or the re-serialized one
   ("columns: repeat(4"), so every rule lists BOTH forms — this makes the
   stacking reliable across mobile Safari, Chrome, and Firefox. */
.sc-navtoggle { display: none; }
.sc-burger { display: none; }


img { max-width: 100%; }

@media (max-width: 920px) {
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2,1fr) !important; }
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2,1fr) !important; }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.05fr"],
  [style*="grid-template-columns: 1.05fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns: 1.1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.15fr"],
  [style*="grid-template-columns: 1.15fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.4fr"],
  [style*="grid-template-columns: 1.4fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.5fr"],
  [style*="grid-template-columns: 1.5fr"] { grid-template-columns: 1fr 1fr !important; }
}

/* ===== Mega menu (desktop) =====
   Brand tokens reused from the existing design: Sanctuary Blue #1C9FD8,
   Canyon Ink #16263B, Desert Sand #FBF8F4, body #3a4a5c, muted #5b6b7d,
   card radius 16-18px, card shadow rgba(22,38,59,…). */
header nav > a:first-child { flex: none; }
.sc-navlinks { display: flex; align-items: center; gap: 34px; flex: 1; min-width: 0; }
.sc-nav-link {
  font-size: 16px; font-weight: 500; color: #3a4a5c; text-decoration: none;
  padding-bottom: 4px; white-space: nowrap; border-bottom: 2px solid transparent;
}
/* Center the link group between the logo and the Donate pill (desktop) */
@media (min-width: 901px) {
  .sc-navlinks > .sc-nav-link:first-child { margin-left: auto; }
  .sc-navlinks > a:last-child { margin-left: auto; }
}
.sc-nav-link.is-current { font-weight: 600; color: #16263B; border-bottom-color: #1C9FD8; }
.sc-mega { position: relative; }
.sc-mega-trigger {
  display: flex; align-items: center; gap: 6px; background: none; border: none;
  cursor: pointer; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500;
  color: #3a4a5c; padding: 0 0 4px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.sc-mega.is-current-section > .sc-mega-trigger { font-weight: 600; color: #16263B; border-bottom-color: #1C9FD8; }
.sc-mega-trigger:hover { color: #16263B; }
.sc-caret { font-size: 10px; line-height: 1; transition: transform 0.18s ease; }
.sc-mega.open .sc-caret { transform: rotate(180deg); }
.sc-mega-panel {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%);
  width: 660px; background: #fff; border: 1px solid rgba(22,38,59,0.08);
  border-radius: 18px; box-shadow: 0 18px 44px rgba(22,38,59,0.14);
  padding: 20px; display: none; grid-template-columns: 230px 1fr; gap: 20px; z-index: 60;
}
.sc-mega-panel::before { /* hover bridge so the pointer can travel to the panel */
  content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px;
}
.sc-mega.open > .sc-mega-panel { display: grid; }
html:not(.js) .sc-mega:hover > .sc-mega-panel,
html:not(.js) .sc-mega:focus-within > .sc-mega-panel { display: grid; }
.sc-mega-feature img { width: 100%; height: 200px; object-fit: cover; border-radius: 12px; display: block; }
.sc-mega-tagline {
  font-family: 'Playfair Display', serif; font-style: italic; font-size: 15.5px;
  line-height: 1.35; color: #16263B; margin: 12px 2px 0;
}
.sc-mega-links { display: flex; flex-direction: column; gap: 4px; }
.sc-mega-row {
  display: flex; align-items: center; gap: 14px; padding: 9px 10px;
  border-radius: 12px; text-decoration: none;
}
.sc-mega-row:hover, .sc-mega-row:focus-visible { background: #FBF8F4; }
.sc-mega-row.is-current { background: #E8F5FB; }
.sc-mega-row img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; display: block; }
.sc-mega-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-mega-row-name { font-size: 14.5px; font-weight: 600; color: #16263B; }
.sc-mega-row.is-current .sc-mega-row-name { color: #1C9FD8; }
.sc-mega-row-desc { font-size: 12.5px; line-height: 1.35; color: #5b6b7d; }
.sc-ext { font-size: 12px; color: #5b6b7d; }
.sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Mobile nav (hamburger + accordion) ===== */
@media (max-width: 900px) {
  header nav { position: relative; flex-wrap: wrap; }
  .sc-burger {
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    font-size: 24px; color: #16263B; width: 44px; height: 44px;
    -webkit-tap-highlight-color: transparent;
  }
  .sc-navlinks {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #FBF8F4; flex-direction: column; align-items: stretch;
    gap: 0; padding: 10px 24px 20px;
    box-shadow: 0 14px 28px rgba(22,38,59,0.12); border-bottom: 1px solid rgba(22,38,59,0.08);
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .sc-navtoggle:checked ~ .sc-navlinks { display: flex; }
  .sc-nav-link { font-size: 16px; padding: 13px 2px; border-bottom: 1px solid rgba(22,38,59,0.07); }
  .sc-nav-link.is-current { border-bottom: 1px solid rgba(22,38,59,0.07); color: #1C9FD8; }
  .sc-mega { width: 100%; }
  .sc-mega-trigger {
    width: 100%; justify-content: space-between; font-size: 16px;
    padding: 13px 2px; border-bottom: 1px solid rgba(22,38,59,0.07); color: #3a4a5c;
  }
  .sc-mega.is-current-section > .sc-mega-trigger { border-bottom: 1px solid rgba(22,38,59,0.07); color: #16263B; }
  .sc-caret { font-size: 11px; }
  .sc-mega-panel {
    position: static; transform: none; width: 100%; display: none;
    border: none; border-radius: 0; box-shadow: none; padding: 4px 0 8px;
  }
  .sc-mega.open > .sc-mega-panel { display: block; }
  html:not(.js) .sc-mega > .sc-mega-panel { display: block; } /* no-JS: sections stay expanded */
  .sc-mega-panel::before { display: none; }
  .sc-mega-feature { display: none; } /* feature image is desktop-only */
  .sc-mega-row { padding: 9px 6px; }
  .sc-mega-row img { width: 40px; height: 40px; }
  .sc-navlinks a[href="Donate.html"]:last-child {
    margin-top: 14px; text-align: center; padding: 13px !important; font-size: 16px !important;
  }
}

@media (max-width: 600px) {
  section > div { padding-left: 22px !important; padding-right: 22px !important; }
  footer > div { padding-left: 22px !important; padding-right: 22px !important; }
  header nav { padding-left: 20px !important; padding-right: 20px !important; }
  h1[style] { font-size: 34px !important; line-height: 1.14 !important; }
  h2[style] { font-size: 27px !important; line-height: 1.2 !important; }
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.5fr"],
  [style*="grid-template-columns: 1.5fr"] { grid-template-columns: 1fr !important; }
  [style*="font-size:60px"], [style*="font-size: 60px"] { font-size: 46px !important; }
  [style*="font-size:58px"], [style*="font-size: 58px"] { font-size: 44px !important; }
  [style*="font-size:54px"], [style*="font-size: 54px"] { font-size: 42px !important; }
  [style*="font-size:52px"], [style*="font-size: 52px"] { font-size: 42px !important; }
}

/* FAQ accordion: answer is toggled by app.js via the [hidden] attribute */
.sc-faq-answer[hidden] { display: none; }

/* Desktop-only blocks (Donorbox donation form + donor wall on the Donate page) */
.sc-desktop-only { display: block; }
@media (max-width: 768px) { .sc-desktop-only { display: none !important; } }

/* Home hero (mobile only): shift the crop in from the far-right edge so the
   father-and-son embrace is centered in frame on narrow phone screens.
   Desktop/tablet keep the designed "right center" framing. */
@media (max-width: 768px) {
  .sc-hero-img { object-position: 80% center !important; }
  /* About hero swaps to a portrait crop on phones (via <picture>); center it. */
  .sc-about-hero { object-position: center !important; }
  /* Board hero swaps to a portrait crop on phones; bias upward to keep the
     office sign and the members' faces in frame. */
  .sc-board-hero { object-position: center 30% !important; }
  /* Donate hero on phones: use the portrait crop, cleanly centered (cover),
     in a taller section so the heart fits fully. */
  .sc-donate-hero { object-position: center !important; }
  .sc-donate-hero-sec { min-height: 560px !important; }
  /* Carry the tint further right on phones so the headline reads clearly
     while the heart stays visible behind it. */
  .sc-donate-tint { background: linear-gradient(100deg, rgba(22,38,59,0.95) 0%, rgba(22,38,59,0.84) 42%, rgba(22,38,59,0.64) 72%, rgba(22,38,59,0.46) 100%) !important; }
}

/* ===== Blog ===== */
.sc-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.sc-pill {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #3a4a5c;
  background: #fff; border: 1.5px solid rgba(22,38,59,0.14); border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
}
.sc-pill[aria-pressed="true"] { background: #1C9FD8; border-color: #1C9FD8; color: #fff; box-shadow: 0 4px 14px rgba(28,159,216,0.28); }
.sc-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sc-post-grid + .sc-post-grid { margin-top: 24px; }
.sc-tier-hidden { display: none; }
html:not(.js) #sc-more-grid { display: grid; }  /* no-JS: show everything */
html:not(.js) #sc-see-more { display: none; }
.sc-post-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(22,38,59,0.06); text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sc-post-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(22,38,59,0.12); }
.sc-post-card > img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.sc-post-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 24px 24px; }
.sc-post-card-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 19px; line-height: 1.3; color: #16263B; }
.sc-post-card-excerpt { font-size: 14px; line-height: 1.55; color: #3a4a5c; }
.sc-post-card-meta { font-size: 12.5px; color: #5b6b7d; margin-top: auto; padding-top: 4px; }
@media (max-width: 920px) { .sc-post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .sc-post-grid { grid-template-columns: 1fr; }
  article h1[style] { font-size: 31px !important; }
}