/* ============================================================
   Watch Altars — global responsive (mobile + tablet) fixes
   Loaded on every campus page after the viewport meta.
   Only narrows/repairs small-screen layout; desktop untouched.
   ============================================================ */

/* --- Never allow accidental horizontal scrolling / clipping --- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, canvas { max-width: 100%; }

/* ============================================================
   TOP ECOSYSTEM STRIP
   Structure: <div ecosystem-bar> <div=links> <div.absolute=chapter label> </div>
   On narrow screens the 6 centred links + the absolutely-positioned
   chapter label collide. Hide the (redundant) chapter label and let
   the links scroll horizontally instead of overlapping.
   ============================================================ */
@media (max-width: 1279px){
  [data-design-id^="ecosystem-bar"] > div.absolute { display: none !important; }
  [data-design-id^="ecosystem-bar"] > div:first-child{
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-design-id^="ecosystem-bar"] > div:first-child::-webkit-scrollbar{ display: none; }
  [data-design-id^="ecosystem-bar"] > div:first-child > *{ flex: 0 0 auto; }
}

/* ============================================================
   DECORATIVE FLOATING 3D BADGE LAYER
   Purely decorative (pointer-events:none). On phones/tablets the
   percentage-positioned badges (React/AWS/NPM/Go/…) drift on top of
   real content, so hide the whole layer on small screens.
   ============================================================ */
@media (max-width: 1024px){
  #float-layer-global { display: none !important; }
}

/* ============================================================
   HOME PAGE SECTION FIXES (mobile + tablet)
   These target custom-CSS grids that the generic Tailwind-class
   overrides do NOT reach, plus the calendar's 7-day grid that the
   generic override wrongly collapsed to a single column.
   Scoped by data-design-id so they apply on all three campuses
   without touching desktop.
   ============================================================ */

/* ---------- Events Calendar (calendar-aa40) ---------- */
@media (max-width: 1023px){
  /* Stack the 5-col outer grid (calendar card + event detail) into one column */
  [data-design-id="calendar-aa40"] .grid.grid-cols-5{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [data-design-id="calendar-aa40"] .col-span-3,
  [data-design-id="calendar-aa40"] .col-span-2{
    grid-column: 1 / -1 !important;
  }
}
/* The month day-grid must ALWAYS stay 7 columns — override the generic
   grid-cols-7 -> 1col collapse that destroyed the calendar on phones. */
[data-design-id="calendar-aa40"] .grid.grid-cols-7{
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
@media (max-width: 767px){
  /* Stack the header so the "Subscribe" button no longer overlaps the text */
  [data-design-id="calendar-aa40"] > .seg-panel > .flex.items-end.justify-between{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  [data-design-id="calendar-aa40"] [data-design-id="cal-subscribe-aa41"]{
    width: 100%;
    justify-content: center;
  }
  /* Tighten day cells so 7 columns fit comfortably on small screens */
  [data-design-id="calendar-aa40"] .cal-cell{
    height: 42px !important;
    padding: 4px !important;
    font-size: 11px !important;
  }
  [data-design-id="calendar-aa40"] .grid.grid-cols-7{ gap: 4px !important; }
}
@media (max-width: 400px){
  [data-design-id="calendar-aa40"] .cal-cell{ height: 36px !important; }
}

/* ---------- Teams Spotlight (committee-showcase-ac10) ---------- */
@media (max-width: 900px){
  /* 6-col chip grid is far too dense; drop to 3 readable columns */
  [data-design-id="committee-showcase-ac10"] .cs-grid{
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Stack the fixed 300px + 1fr detail panel so nothing clips off-screen */
  [data-design-id="committee-showcase-ac10"] .cs-detail{
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  [data-design-id="committee-showcase-ac10"] .cs-detail-art{
    padding: 26px !important;
  }
}
@media (max-width: 479px){
  [data-design-id="committee-showcase-ac10"] .cs-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ---------- Latest News & Articles (news-showcase-ac40) ---------- */
@media (max-width: 900px){
  /* Featured panel + list stack instead of being crushed into 2 columns */
  [data-design-id="news-showcase-ac40"] .nw-layout{
    grid-template-columns: 1fr !important;
  }
  [data-design-id="news-showcase-ac40"] .nw-feat{
    min-height: 320px !important;
  }
}

/* ---------- AI Workspace advert (advert-aa55) ---------- */
@media (max-width: 767px){
  /* The CTA row cramps "Watch the tour" into 3 lines; let buttons size
     naturally and wrap, then go full-width on very small screens. */
  [data-design-id="advert-aa55"] .flex.gap-3.mt-7{
    flex-wrap: wrap !important;
  }
  [data-design-id="advert-aa55"] .flex.gap-3.mt-7 > button{
    flex: 1 1 auto;
    white-space: nowrap;
  }
}
@media (max-width: 479px){
  [data-design-id="advert-aa55"] .flex.gap-3.mt-7 > button{
    flex: 1 1 100%;
  }
}

/* ---------- Featured Programs header (programs-aa50) ---------- */
@media (max-width: 767px){
  /* Stack the heading text above the carousel arrows instead of letting
     the arrows float beside the paragraph. */
  [data-design-id="programs-aa50"] .flex.items-end.justify-between{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
}

/* ---------- This Week 3D coverflow carousel (this-week-carousel-ab92) ---------- */
@media (max-width: 767px){
  /* The coverflow positions fixed 460px cards absolutely and centres them with
     a negative margin, so on a phone the active card (wider than the viewport)
     was clipped off the LEFT edge while neighbours bled in from the right.
     On phones: show ONE centred card sized to the screen; hide the rest. */
  #tw-stage.tw-stage{ height: 540px !important; }
  #tw-track .tw-card{
    width: 90vw !important;
    max-width: 360px !important;
    left: 50% !important;
    top: 0 !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    filter: none !important;
  }
  #tw-track .tw-card.is-active{
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
    pointer-events: auto !important;
  }
  /* Detail panel is always expanded for the visible card on phones. */
  #tw-track .tw-card.is-active .tw-detail{ max-height: 320px !important; }
}

/* ============================================================
   GLOBAL GENERIC GRID STACKING SAFETY-NET (added v4)
   The site is built desktop-first with bare Tailwind grid-cols-*
   utilities (no md:/lg: prefixes), so multi-column grids never stacked
   on phones/tablets. Collapse the common column counts on small screens.
   Component-specific rules above use higher specificity + !important and
   still win where defined (e.g. the 7-day events calendar).
   ============================================================ */
@media (max-width: 1023px){
  .grid.grid-cols-12{ grid-template-columns: repeat(6, minmax(0,1fr)) !important; }
}
@media (max-width: 767px){
  .grid.grid-cols-12,
  .grid.grid-cols-6,
  .grid.grid-cols-5,
  .grid.grid-cols-4,
  .grid.grid-cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .grid.grid-cols-2{ grid-template-columns: 1fr !important; }
  /* A bare col-span-* on a collapsed grid would overflow its row. */
  [class*="col-span-"]{ grid-column: auto !important; }
}
@media (max-width: 479px){
  .grid.grid-cols-12,
  .grid.grid-cols-6,
  .grid.grid-cols-5,
  .grid.grid-cols-4,
  .grid.grid-cols-3,
  .grid.grid-cols-2{ grid-template-columns: 1fr !important; }
  /* Downscale desktop-first display headings so they fit a phone. */
  .text-7xl{ font-size: 2.5rem !important; line-height:1.08 !important; }
  .text-6xl{ font-size: 2.25rem !important; line-height:1.1 !important; }
  .text-5xl{ font-size: 2rem !important; line-height:1.1 !important; }
  .text-4xl{ font-size: 1.75rem !important; line-height:1.15 !important; }
}

/* ============================================================
   MATURE / PROFESSIONAL PASS (added v5)
   Fixes: full-bleed end-to-end spanning, huge hero column gaps,
   cartoonish decoration, and inconsistent rainbow colors.
   Brand palette = cyan (#7BD6F0 / #5BC8E8) + purple (#A78BFA).
   ============================================================ */

/* 1 — CONTENT WIDTH: rein runaway full-bleed CONTENT into a centered
   professional column. Section-level bands (section.wa-fullbleed) keep
   full width because their inner container is already capped; only the
   content DIVs that broke out to 100vw are constrained. */
div.wa-fullbleed:not(.navbar-wrap):not(.marquee-wrap){
  max-width: 1280px !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 40px) !important;
  padding-right: clamp(20px, 4vw, 40px) !important;
}
/* Unify the very wide section containers to the same centered column. */
.max-w-\[1560px\], .max-w-\[1600px\], .max-w-\[1680px\], .max-w-\[1720px\]{
  max-width: 1280px !important;
}

/* 2 — DE-CARTOONIFY (all widths) */
[data-design-id^="float-layer"]{ display: none !important; } /* confetti/badge decoration */
.script-el{ display: none !important; }                       /* faint floating script text */
.avt{ display: none !important; }                             /* fake initial social-proof bubbles */
.grad-shift{ animation: none !important; }                    /* stop gimmicky animated gradient */
.cta-pulse{ animation: none !important; }                     /* stop pulsing buttons */
.spin, .spin-r, .glow, .script-glow{ animation: none !important; }
.font-hand{ font-family: inherit !important; font-style: normal !important; } /* drop handwriting look */

/* 3 — COLOR CONSISTENCY: fold off-brand pastel accents onto brand cyan.
   Cool brand-adjacent tones (violet/purple/sky/blue/indigo) are kept. */
.text-pink-100,.text-pink-200,.text-pink-300,.text-pink-400,
.text-rose-200,.text-rose-300,.text-rose-400,
.text-emerald-100,.text-emerald-200,.text-emerald-300,.text-emerald-400,
.text-green-200,.text-green-300,.text-green-400,
.text-orange-200,.text-orange-300,.text-orange-400,
.text-amber-200,.text-amber-300,.text-amber-400,
.text-yellow-200,.text-yellow-300,.text-yellow-400,
.text-lime-300,.text-lime-400,
.text-fuchsia-300,.text-fuchsia-400,
.text-teal-300,.text-teal-400{ color: #7BD6F0 !important; }

.bg-pink-400,.bg-pink-500,
.bg-rose-400,.bg-rose-500,
.bg-emerald-400,.bg-emerald-500,
.bg-green-400,.bg-green-500,
.bg-orange-400,.bg-orange-500,
.bg-amber-400,.bg-amber-500,
.bg-yellow-400,.bg-yellow-500,
.bg-lime-400,.bg-lime-500,
.bg-fuchsia-400,.bg-fuchsia-500,
.bg-teal-400,.bg-teal-500{ background-color: #5BC8E8 !important; }

/* ============================================================
   KILL GIMMICKY HERO WORD-REVEAL ANIMATION (added v6)
   The .hw animation started each word at opacity:0 and flew it in
   blurred; on several pages the final words stayed stuck invisible
   (e.g. broken "Pull up a chair —" headline). Render headlines as
   plain, static, fully-visible text everywhere.
   ============================================================ */
.hw{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }

/* ============================================================
   MOBILE OVERFLOW / CLIPPING FIXES (added v7)
   Root cause the earlier grid-stacking pass missed: several fixed
   single-row flex bars (the top ecosystem bar) and long headings
   exceeded the viewport. body already has overflow-x:hidden, so
   those items were CLIPPED off-screen and untappable on phones
   rather than scrollable. Let them wrap; let headings break.
   ============================================================ */
@media (max-width: 767px){
  /* Top ecosystem bar (CAMPUS | CHURCH | ...) — wrap to multiple
     rows on small screens so every destination stays visible & tappable */
  [data-design-id^="ecosystem-bar"] > div{
    flex-wrap: wrap !important;
    height: auto !important;
    row-gap: 4px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
  /* headings must never force horizontal overflow on phones */
  h1, h2, h3, h4{ overflow-wrap: break-word; word-break: break-word; }
}

/* ============================================================
   HEADER INTEGRITY FIX (added v8)
   Regression: the v5 "mature pass" capped .max-w-[1560px] to 1280px,
   which over-constrained the top header rows. The utility row is
   dense (logo + language + New-to-Faith + Receive Jesus on the left;
   6 social icons + Partner + search + Log in + Become a member +
   Mind Workspace on the right). Once over-constrained, flexbox
   collapsed the LOGO image to width:0 (logo disappeared) and pushed
   "Receive Jesus" flush against the social icons.
   Fix: exempt the header bars from the 1280 cap, never let the logo
   shrink, and tighten inner-group spacing so the two groups keep a
   clear gap on common laptop widths.
   ============================================================ */
[data-design-id^="utility-row"] .max-w-\[1560px\],
[data-design-id^="ecosystem-bar"] .max-w-\[1560px\]{ max-width: 1560px !important; }

/* Logo must always be visible and at its natural size. */
[data-design-id^="utility-row"] img{ flex-shrink: 0 !important; min-width: max-content; }

/* Keep the left and right header groups from butting together on
   tighter desktops/laptops by trimming the generous inner gaps. */
@media (max-width: 1500px){
  [data-design-id^="utility-row"] .gap-6{ gap: 1rem !important; }
  [data-design-id^="utility-row"] .gap-5{ gap: 0.85rem !important; }
  [data-design-id^="utility-row"] .gap-4{ gap: 0.6rem !important; }
}


/* ============================================================
   NO DECORATIVE ANIMATION — SITEWIDE (added v9)
   User directive: remove every childish/decorative animation on
   every page. Kills all CSS keyframe animation, motion transitions,
   hover lifts/zooms/tilts, parallax drift, particles, custom cursor
   and scroll-reveal slide/fade-ins. Content is always shown in its
   final, static state. Colour/background hover feedback is kept.
   ============================================================ */
*, *::before, *::after{
  animation: none !important;
  scroll-behavior: auto !important;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, box-shadow, opacity, visibility !important;
}
html{ scroll-behavior: auto !important; }

/* Scroll-reveal / word-reveal elements: always fully visible, no motion. */
.rv, .rv-bounce, .rv-left, .rv-right, .rv-scale, .reveal, .reveal-up,
.hw, .word, .cascade, .gs-rise, .wave-up, .draw-node, .scale-rot, .bio-up,
.scale-in, .rot-in, .dr, .lt, .tl-item, .wanav-card,
.map-card, .vc-eyebrow, .vc-statement .vc-w, .vc-divider,
.slide-l, .slide-r, .fade-st, .elastic, .guide-item, .cal-pop, .lead-up, .step,
.rv-up, .rv-l, .rv-r, .rv-s, .ev-in, .imago, .tline, .m-rv, .srv, .srv-bounce, .srv-diag{
  opacity: 1 !important; transform: none !important; filter: none !important;
}
.pl-event.writein{ opacity: 1 !important; transform: none !important; }
.pl-event.writein.past{ opacity: .42 !important; }

/* Tilt / parallax / drift effects (CSS hover and JS inline transforms). */
.tilt, .tilt:hover, .tilt-card, .tilt-card:hover, .team-card, .team-card:hover,
.app-tile:hover, [data-par], [data-par-img], [data-tilt], .float-layer,
[id^="float-layer"]{ transform: none !important; }

/* Tailwind hover/group-hover lifts, zooms and rotations -> static. */
[class*="hover:scale"]:hover, .group:hover [class*="group-hover:scale"]{ --tw-scale-x: 1 !important; --tw-scale-y: 1 !important; }
[class*="hover:-translate-y"]:hover, [class*="hover:translate-y"]:hover,
.group:hover [class*="group-hover:-translate-y"], .group:hover [class*="group-hover:translate-y"]{ --tw-translate-y: 0 !important; }
[class*="hover:translate-x"]:hover, [class*="hover:-translate-x"]:hover,
.group:hover [class*="group-hover:translate-x"], .group:hover [class*="group-hover:-translate-x"]{ --tw-translate-x: 0 !important; }
[class*="hover:rotate"]:hover, [class*="hover:-rotate"]:hover,
.group:hover [class*="group-hover:rotate"], .group:hover [class*="group-hover:-rotate"]{ --tw-rotate: 0 !important; }

/* Decorative particles, mouse-follow glows and custom cursors. */
.ptcl, #particle-field, #cur, .cur, .cursor-dot, .cursor-ring,
.spot::before, .fg-card .fg-glow, .ambx-card .ambx-glow{ display: none !important; }
.cursor-zone{ cursor: auto !important; }
/* Rotation/autoplay controls that no longer do anything. */
#globePause{ display: none !important; }

/* ===== STATIC ROWS — former marquees shown as still, wrapped rows (added v10) ===== */
.wa-static-row{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;width:auto!important;max-width:100%!important;transform:none!important;animation:none!important;gap:12px!important;}
:has(> .wa-static-row){overflow:visible!important;height:auto!important;-webkit-mask-image:none!important;mask-image:none!important;}

/* ===== DARK THEME FOR FORMERLY-LIGHT PAGES (added v11) — pages opt in with body[data-wa-dark] ===== */
html:has(body[data-wa-dark]){background:#0B1029}
body[data-wa-dark]{background:#0B1029 !important;color:#E6ECFA !important}
body[data-wa-dark] .bg-white,body[data-wa-dark] .bg-gray-50,body[data-wa-dark] .bg-slate-50,body[data-wa-dark] .bg-blue-50,body[data-wa-dark] .bg-indigo-50,body[data-wa-dark] [class*="bg-[#F"],body[data-wa-dark] [class*="bg-[#f"],body[data-wa-dark] [class*="bg-[#E"],body[data-wa-dark] [class*="bg-[#e"]{background-color:#121A3C !important}
body[data-wa-dark] .bg-gray-100,body[data-wa-dark] .bg-slate-100{background-color:#161F47 !important}
body[data-wa-dark] .bg-gray-200,body[data-wa-dark] .bg-slate-200{background-color:#1C2652 !important}
body[data-wa-dark] .bg-gray-300,body[data-wa-dark] .bg-slate-300{background-color:#25305F !important}
body[data-wa-dark] .bg-white\/80,body[data-wa-dark] .bg-white\/90,body[data-wa-dark] .bg-white\/95{background-color:rgba(18,26,60,.92) !important}
body[data-wa-dark] header.bg-white,body[data-wa-dark] nav.bg-white{background-color:#0E1534 !important}
body[data-wa-dark] [class*="text-[#1D2A4D]"],body[data-wa-dark] [class*="text-[#1d2a4d]"],body[data-wa-dark] [class*="text-[#0F172A]"],body[data-wa-dark] [class*="text-[#334155]"],body[data-wa-dark] .text-gray-900,body[data-wa-dark] .text-gray-800,body[data-wa-dark] .text-slate-900,body[data-wa-dark] .text-slate-800,body[data-wa-dark] .text-black{color:#EEF2FF !important}
body[data-wa-dark] .text-gray-700,body[data-wa-dark] .text-slate-700,body[data-wa-dark] .text-gray-600,body[data-wa-dark] .text-slate-600,body[data-wa-dark] [class*="text-[#475569]"],body[data-wa-dark] [class*="text-[#64748B]"],body[data-wa-dark] [class*="text-[#64748b]"]{color:rgba(230,236,250,.78) !important}
body[data-wa-dark] .text-gray-500,body[data-wa-dark] .text-slate-500,body[data-wa-dark] .text-gray-400,body[data-wa-dark] .text-slate-400,body[data-wa-dark] [class*="text-[#94A3B8]"]{color:rgba(230,236,250,.6) !important}
body[data-wa-dark] .text-blue-600,body[data-wa-dark] .text-blue-700,body[data-wa-dark] .text-indigo-600,body[data-wa-dark] [class*="text-[#5B9BD5]"]{color:#7BD6F0 !important}
body[data-wa-dark] [class*="border-gray-"],body[data-wa-dark] [class*="border-slate-"],body[data-wa-dark] .border-blue-200{border-color:rgba(255,255,255,.12) !important}
body[data-wa-dark] .shadow-sm,body[data-wa-dark] .shadow,body[data-wa-dark] .shadow-md,body[data-wa-dark] .shadow-lg{box-shadow:0 10px 30px -14px rgba(0,0,0,.7) !important}
body[data-wa-dark] input,body[data-wa-dark] select,body[data-wa-dark] textarea{background-color:#0E1534 !important;color:#EEF2FF !important;border-color:rgba(255,255,255,.18) !important}
body[data-wa-dark] input::placeholder,body[data-wa-dark] textarea::placeholder{color:rgba(230,236,250,.45) !important}
body[data-wa-dark] img[src*="watch-altars-logo"]{filter:brightness(0) invert(1)}

/* ============================================================
   CONSISTENT CONTENT COLUMN (added v12)
   One column for every page body and the footer: 1280px max,
   same side padding on desktop, tablet and phone.
   ============================================================ */
.wx-wrap, .a5-wrap,
main > section > div.mx-auto[class*="max-w-[1"],
main > section > div.mx-auto.max-w-7xl,
main > section > div.mx-auto.max-w-6xl,
main > div.mx-auto[class*="max-w-[1"],
main > nav.mx-auto,
footer > div.mx-auto, footer > div.relative.mx-auto{
  max-width: 1280px !important;
  padding-left: clamp(20px, 4vw, 40px) !important;
  padding-right: clamp(20px, 4vw, 40px) !important;
}