/* Sacred Roux — shared mobile + viewport stylesheet
   Loads on every page. Tablet breakpoint < 900px, phone < 640px.
   Strategy: targeted overrides of the React-rendered inline styles so we don't
   have to refactor the component tree. !important is used where inline styles
   would otherwise win.
*/

/* ---------- Base ---------- */
html, body { margin: 0; padding: 0; background: #0d1412; }
* { box-sizing: border-box; }

/* Kill horizontal scroll from oversized decorative SVGs */
body { overflow-x: hidden; }

img, svg { max-width: 100%; height: auto; }

/* Input focus styles used on donate form */
input::placeholder { color: rgba(244,237,224,0.35); font-family: 'EB Garamond', serif; font-style: italic; font-size: 17px; }
input:focus { border-color: #b8814a !important; }
button:focus-visible { outline: 2px solid #b8814a; outline-offset: 2px; }

/* ---------- Tablet ≤ 900px ---------- */
@media (max-width: 900px) {
  /* Header padding tightens everywhere */
  header { padding: 20px 28px !important; }

  /* Section padding across all pages (they all use 56px side, 100-200px top/bottom) */
  section { padding-left: 28px !important; padding-right: 28px !important; }

  /* Hero/heading type scales down */
  h1 { font-size: 60px !important; line-height: 1.08 !important; }
  h2 { font-size: 44px !important; line-height: 1.1 !important; }

  /* Any 2+ column CSS Grid collapses to a single column */
  section div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Preserve the 2- and 3-column preset button grids on the donate page */
  section form div[style*="repeat(3, 1fr)"],
  section form div[style*="1fr 1fr"],
  section form div[style*="repeat(2, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  section form div[style*="1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Sticky donate sidebar stops being sticky when stacked */
  aside[style*="sticky"] { position: static !important; top: auto !important; }

  /* Remove the vertical rule between stacked columns */
  section div[style*="border-left"] {
    border-left: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------- Phone ≤ 640px ---------- */
@media (max-width: 640px) {
  /* Header becomes a centered stack */
  header {
    padding: 16px 20px !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  header nav {
    gap: 14px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  header nav a {
    font-size: 10px !important;
    padding-bottom: 2px !important;
  }
  /* Donate pill button in header */
  header nav a[style*="border-radius: 999"] {
    padding: 8px 16px !important;
  }

  /* Section top/bottom padding tightens */
  section { padding-top: 80px !important; padding-bottom: 80px !important; padding-left: 20px !important; padding-right: 20px !important; }

  /* Big type — force down */
  h1 { font-size: 44px !important; letter-spacing: -0.02em !important; }
  h2 { font-size: 32px !important; }
  h3 { font-size: 22px !important; }

  /* Any inline style with a fontSize bigger than 48 gets capped */
  [style*="font-size: 96px"], [style*="fontSize: 96"] { font-size: 44px !important; }
  [style*="font-size: 88px"], [style*="fontSize: 88"] { font-size: 40px !important; }
  [style*="font-size: 72px"], [style*="fontSize: 72"] { font-size: 36px !important; }
  [style*="font-size: 64px"], [style*="fontSize: 64"] { font-size: 32px !important; }
  [style*="font-size: 56px"], [style*="fontSize: 56"] { font-size: 30px !important; }
  [style*="font-size: 48px"], [style*="fontSize: 48"] { font-size: 28px !important; }
  [style*="font-size: 40px"], [style*="fontSize: 40"] { font-size: 26px !important; }
  [style*="font-size: 34px"], [style*="fontSize: 34"] { font-size: 22px !important; }
  [style*="font-size: 28px"], [style*="fontSize: 28"] { font-size: 20px !important; }

  /* Body text doesn't shrink as aggressively */
  p { font-size: 16px !important; line-height: 1.65 !important; }

  /* Donate form preset grid: 3-col → 2-col on phones */
  section form div[style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Hero decorative flower-of-life doesn't push layout */
  section > div:first-child[style*="absolute"] { transform: translate(-50%, -50%) scale(0.55) !important; }

  /* Footer column stacks (it's already grid)
     and any huge centered buttons wrap */
  div[style*="display: flex"][style*="gap: 20"] { flex-wrap: wrap !important; justify-content: center !important; }

  /* Side-scrolling artifacts from negative-margin decorations */
  [style*="position: absolute"][style*="right: -"] { right: -40px !important; }
  [style*="position: absolute"][style*="left: -"] { left: -40px !important; }
}