/* Repo-side fixes layered on the Claude Design export (repo-owned; kept across imports).
   Each rule is temporary: once design adopts it in the source, delete it here.
   Linked from every page by scripts/post_import.py. The pages use inline styles, hence !important.
   Selectors on [style*=...] must match the style text as the BROWSER serializes it after the design runtime
   renders (spaces after commas and colons; Safari also expands the `font` shorthand), e.g.
   "clamp(44px, 7.5vw, 84px)" and "width: 318px; height: 638px", not the export's compact source text. */

/* 1. Header nav strip. The export centres the links in a scrolling strip; when they do not fit, a centred
      flex row spills off both sides and the left part cannot be scrolled to. "safe center" keeps the
      design's centring when they fit and starts at the left (scrollable) when they do not.
      Browsers without "safe" ignore this line and keep the export's behaviour. */
header nav[aria-label="Main"] { justify-content: safe center !important; }

/* 2. Phones and small tablets: the 64px single-row header cannot fit logo + 4 links + GET THE APP, so the
      links slid under the button and "About Us" was cut off. Below 768px: logo and GET THE APP on row 1,
      the four links across the full width on row 2. Desktop layout is unchanged. */
@media (max-width: 767px) {
  header { height: auto !important; }
  header > div { height: auto !important; flex-wrap: wrap !important; row-gap: 0 !important; padding-top: 10px !important; padding-bottom: 2px !important; }
  header > div > a:first-child { margin-right: auto; }
  header nav[aria-label="Main"] { order: 3; flex: 1 0 100% !important; }
  header nav[aria-label="Main"] a { padding: 15px 8px !important; font-size: 14px !important; }
}
/* Smallest phones (under 400px): tighter spacing so all four links fit from 360px up (at 320px the row scrolls). Links stay about 44px tall for touch. */
@media (max-width: 399px) {
  header nav[aria-label="Main"] a { padding: 15px 6px !important; font-size: 13px !important; }
}

/* Smallest phones (under 340px, e.g. 320px): one more step so all four header links fit. */
@media (max-width: 339px) {
  header nav[aria-label="Main"] a { padding: 15px 5px !important; font-size: 12px !important; }
}

/* 3. Fixed sizes left over from the design canvas. The Foundation footer heading has width:680px and
      height:147px inline, so on phones it was cropped to "DY TO FIND YOUR PEO". Let it shrink and wrap. */
h2[style*="width: 680px"] { width: auto !important; max-width: 100% !important; height: auto !important; }

/* 4. Features: the interactive phone mock-ups are 318x638px with a 16px offset shadow and are built in px
      inside, so on small phones they ran off the right edge. Scale the whole phone proportionally
      (zoom keeps taps aligned). Full size from 400px up. */
@media (max-width: 399px) {
  div[style*="width: 318px; height: 638px"], div[style*="width: 318px; min-height: 638px"], div[style*="width:318px;height:638px"], div[style*="width:318px;min-height:638px"] { zoom: 0.86; }
}
@media (max-width: 359px) {
  div[style*="width: 318px; height: 638px"], div[style*="width: 318px; min-height: 638px"], div[style*="width:318px;height:638px"], div[style*="width:318px;min-height:638px"] { zoom: 0.74; }
}

/* 5. Two-column heroes (Impact Partners, About): the headline scales with the window (7-7.5vw) but sits in
      a column ~42% wide, so between ~900 and 1279px "NONPROFIT?" outgrew its column. Slightly smaller
      there only; unchanged below 900px and from 1280px up. */
@media (min-width: 900px) and (max-width: 1279px) {
  h1[style*="clamp(44px, 7.5vw, 84px)"], h1[style*="clamp(44px, 7vw, 88px)"], h1[style*="clamp(44px,7.5vw,84px)"], h1[style*="clamp(44px,7vw,88px)"] { font-size: clamp(44px, 6.6vw, 84px) !important; }
}

/* 6. Press: the hashtag pills never go below 28px type, too wide for small phones. */
@media (max-width: 399px) {
  span[style*="border-radius: 9999px"][style*="clamp(28px, 4.5vw, 48px)"], span[style*="border-radius:9999px"][style*="clamp(28px,4.5vw,48px)"] { font-size: 22px !important; padding: 12px 18px !important; max-width: 100%; }
}

/* 7. Small phones: a single long word (a surname, a hashtag) may break instead of running off the edge.
      Only affects words wider than their box; normal text is unchanged. */
@media (max-width: 399px) {
  body { overflow-wrap: break-word; }
}

/* 8. Footer menus on phones: links were 27px tall; make them comfortable thumb targets (~41px). */
@media (max-width: 767px) {
  footer nav[aria-label="Explore"] a, footer nav[aria-label="Get involved"] a { padding: 10px 0 !important; }
}

/* 9. Home "Except a village": the Get Busy screenshot is a fixed 277x566px inside a card with 30px side padding,
      so on small phones its frame ran ~15px off the right edge. Shrink it to fit, same proportions. */
@media (max-width: 399px) {
  img[style*="width: 277px"][style*="height: 566px"], img[style*="width:277px"][style*="height:566px"] { width: 100% !important; max-width: 277px !important; height: auto !important; aspect-ratio: 277 / 566; }
}

/* 10. About founders on small phones: a long surname ("Chaturantabut") ran past the screen edge; let it break. */
@media (max-width: 399px) {
  a[href*="linkedin.com/in/"] { overflow-wrap: anywhere; }
}

/* 11. MomBassador hero on wide screens: "MOMBASSADOR" at the 92px maximum is ~84px wider than its column
       (from ~1540px up). Cap the maximum at 80px; smaller screens are unchanged. */
h1[style*="clamp(40px, 5.2vw, 92px)"], h1[style*="clamp(40px,5.2vw,92px)"] { font-size: clamp(40px, 5.2vw, 80px) !important; }