/*
  Mobile & tablet layout fixes.
  Apart from the line-breaking block just below, every rule lives inside a max-width
  media query, so nothing here can affect the desktop layout. Most of the site's
  layout is inline styles, which is why these rules need !important to win.
*/

/* ---------- All widths: line breaking ---------- */
/* Text that wraps splits into even lines, so no line is left with just a word or two
   (browsers only balance up to ~6 lines; longer paragraphs wrap normally) */
body { text-wrap: balance; }
/* ---------- All widths: gentle motion (nav.js adds these classes) ---------- */
/* Headings and cards fade up as they scroll into view */
/* (uses `translate`, not `transform`, so it never fights an element's own transform -
   e.g. .wide-head is centred with transform and used to jump sideways while fading in) */
.rv { opacity: 0; translate: 0 18px; transition: opacity 0.6s ease, translate 0.6s ease; }
.rv.rv-in { opacity: 1; translate: none; }
/* The arrow on buttons and links nudges right on hover */
.arw { display: inline-block; transition: transform 0.2s ease; }
a:hover .arw, a:focus-visible .arw, button:hover .arw { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .arw { transition: none; } }

/* The dropdown triggers (About Us, Ministries) reset their padding, which pulled their hover
   underline up against the text; give them the same gap as the plain nav links */
.nav-link.nav-dropdown-trigger { padding-bottom: 3px; line-height: inherit; }

/* ---------- All widths: "Live now" (nav.js shows these during the Saturday service) ---------- */
.live-pop { position: fixed; right: 20px; bottom: 20px; z-index: 200; width: min(330px, calc(100vw - 32px)); background: #2F2C29; color: white; padding: 18px 20px; border-top: 3px solid #FF8200; border-radius: 6px; box-shadow: 0 12px 32px rgba(0,0,0,0.35); opacity: 0; transform: translateY(24px); transition: opacity 0.4s ease, transform 0.4s ease; }
.live-pop.in { opacity: 1; transform: none; }
.live-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 4px 10px; border-radius: 3px; background: #FF8200; color: white; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: white; animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: 0.25; } }
.live-title { font-size: 0.95rem; font-weight: 700; line-height: 1.45; margin: 0 0 14px; padding-right: 18px; }
.live-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.live-watch { display: inline-block; background: #FF8200; color: white; padding: 10px 18px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; }
.live-yt { color: #CFC9C2; font-size: 0.8rem; text-decoration: underline; }
.live-close { position: absolute; top: 6px; right: 8px; padding: 4px 8px; background: none; border: 0; color: #A39D96; font-size: 22px; line-height: 1; cursor: pointer; }
.live-close:hover, .live-close:focus-visible { color: white; }
@media (max-width: 560px) { .live-pop { left: 16px; right: 16px; bottom: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .live-pop { transition: none; } .live-dot { animation: none; } }

/* Dropdown menu items stay on one line however long the label */
.nav-dropdown-item { white-space: nowrap; }
/* A heading allowed to run wider than the narrow text column it sits in (capped to the screen) */
.wide-head { width: min(960px, calc(100vw - 48px)); position: relative; left: 50%; transform: translateX(-50%); }

/* ---------- Tablet and below (nav collapses to the hamburger here) ---------- */
@media (max-width: 860px) {

  /* The desktop menus carry inline display:flex, which beat the old hide rule */
  .nav-desktop { display: none !important; }

  /* Logo sits centred absolutely, which only gives it half the bar's width to grow
     into, and WebKit (all iPhone browsers) will squeeze it there. Give it an explicit
     width at its true 6:1 proportions so every browser draws it the same. */
  nav a[href="index.html"] { width: 230px !important; }
  nav a[href="index.html"] img {
    width: 230px !important;
    height: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
  }

  /* Top info bar: let it wrap and stack instead of forcing the page wider */
  body > div:first-of-type > div {
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 16px !important;
    text-align: center;
  }
  body > div:first-of-type p,
  body > div:first-of-type div {
    white-space: normal !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    line-height: 1.6;
  }
  /* "Give" and the address wrap onto separate lines here, so drop the divider between them */
  body > div:first-of-type div > span { display: none !important; }
  body > div:first-of-type div { column-gap: 14px; }

  /* Anything else marked no-wrap may wrap on small screens */
  [style*="white-space:nowrap"] { white-space: normal !important; }

  /* Long words and URLs should never push the page wider
     (break-word only splits a word that can't fit on a line by itself) */
  h1, h2, h3, h4, p, a, li, span, figcaption { overflow-wrap: break-word; }

  img, iframe, video { max-width: 100%; }
}

/* ---------- Phones ---------- */
@media (max-width: 700px) {

  /* Collapse every multi-column card/text grid into a single column.
     Image strips with a fixed height (";height:", not min-height) stay as rows. */
  [style*="grid-template-columns"]:not([style*=";height:"]) {
    grid-template-columns: 1fr !important;
  }

  /* Image strips: keep them as rows but shorter so they stay in proportion */
  [style*="grid-template-columns"][style*=";height:280px"] { height: 160px !important; }
  [style*="grid-template-columns"][style*=";height:240px"] { height: 150px !important; }
  [style*="grid-template-columns"][style*=";height:300px"] { height: 190px !important; }

  /* Home page: stacked photo pair beside the schedule - give it a definite height once stacked */
  [style*="grid-template-rows:1fr 4px 1fr"] { height: 420px; }
  [style*="padding:64px 56px"] { padding: 44px 24px !important; }

  /* Large internal padding squeezes text into a narrow column on phones */
  [style*="padding:40px;"] { padding: 24px !important; }
  [style*="padding:60px 64px"] { padding: 40px 24px !important; }
  [style*="padding:56px 48px"] { padding: 40px 24px !important; }
  [style*="padding:40px 32px"] { padding: 28px 22px !important; }
  [style*="padding:32px;"] { padding: 22px !important; }

  /* Side-by-side image + text panels stack vertically */
  section[style*="display:flex;min-height"] { flex-direction: column !important; }
  section[style*="display:flex;min-height"] > div { flex: 1 1 auto !important; min-height: 240px; }

  /* Fixed-width sidebar columns (cover images etc.) shouldn't stretch full width */
  [style*="grid-template-columns:180px 1fr"] > img {
    max-width: 200px;
    justify-self: center;
  }

  /* Footer: logo centred on top, sections in a balanced 2x2 grid below
     (instead of logo left + everything squeezed into a narrow right column) */
  footer [style*="display:flex;gap:40px;flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 28px !important;
  }
  footer [style*="flex:1;display:flex;flex-wrap:wrap;gap:36px"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px !important;
    width: 100%;
    text-align: center;
    align-items: start !important;
  }
  footer [style*="flex:1;display:flex;flex-wrap:wrap;gap:36px"] > * { min-width: 0 !important; justify-self: center; }
  footer [style*="flex:1;display:flex;flex-wrap:wrap;gap:36px"] > [style*="height:1px"] { grid-column: 1 / -1; justify-self: stretch; }
  footer [style*="flex:1;display:flex;flex-wrap:wrap;gap:36px"] > a.footer-link { grid-column: 1 / -1; }
  /* Address + Service Times share a row; Follow Us gets its own row below */
  footer [style*="flex:1;display:flex;flex-wrap:wrap;gap:36px"] > :last-child { grid-column: 1 / -1; }
  footer li[style*="display:flex"] { flex-direction: column; align-items: center; gap: 0 !important; }
  footer li[style*="display:flex"] span { min-width: 0 !important; }
  footer ul[style*="display:flex"] { flex-direction: column; align-items: center; gap: 10px !important; }
  footer [style*="justify-content:space-between"] { justify-content: center !important; text-align: center; }

  /* Tighten the generous desktop section spacing a little */
  section[style*="padding:72px 24px"],
  section[style*="padding:76px 24px"] { padding-top: 52px !important; padding-bottom: 52px !important; }
}

/* ---------- Very narrow phones ---------- */
@media (max-width: 360px) {
  /* shrink the logo slightly so it clears the menu button */
  nav a[href="index.html"] { width: 196px !important; }
  nav a[href="index.html"] img { width: 196px !important; }
}