/* ============================================================
   Wix Layout Fixes - Mobile & Tablet Responsive CSS
   Centralized responsive overrides for Eleventy + Wix export
   ============================================================ */

/* -------------------------
   EXISTING FIX
   ------------------------- */
#BACKGROUND_GROUP {
  height: 0 !important;
}

/* ============================================================
   GLOBAL RESPONSIVE BASE
   - Remove all fixed min-widths that cause horizontal overflow
   - Override --site-width so calc((100% - 980px) * 0.5) formulas
     resolve to calc((100% - 100%) * 0.5) = 0 on mobile
   ============================================================ */

/* Always prevent horizontal overflow — no media query needed.
   Wix sets min-width:980px which can cause overflow at any viewport
   narrower than ~1000px (including when a scrollbar reduces usable width). */
html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ─────────────────────────────────────────────────────────────
   1100px — OVERFLOW PREVENTION ONLY
   Only fixes that stop the page from being wider than the viewport
   at widths just below the Wix 980px fixed canvas. No layout
   changes, so the desktop design is untouched down to 981px.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {

  /* Override --site-width CSS variable.
     Wix uses calc((100% - var(--site-width)) * 0.5) for centering;
     setting it to 100% zeroes those margins so nothing overflows. */
  :root,
  :host {
    --site-width: 100% !important;
  }

  /* Root containers: no fixed min-width, no horizontal overflow */
  #SITE_CONTAINER,
  #site-root,
  #masterPage {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body:not(.responsive) #site-root {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Strip the min-width:980px that is set via inline styles */
  [style*="min-width: 980px"],
  [style*="min-width:980px"] {
    min-width: 0 !important;
  }

  /* Strip min-width from the known fixed-width strip IDs whose
     <style> blocks hard-code min-width:980px */
  #comp-jofvh3zt,
  #comp-joftne92,
  #comp-joftne922,
  #comp-jnn2av1i2,
  #comp-jnn2av1i11,
  #comp-jofwseov,
  #comp-jofwswxp2 {
    min-width: 0 !important;
  }

  .CohWsy,
  .wixui-column-strip {
    min-width: 0 !important;
  }

  .V5AUxf {
    min-width: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   980px — FULL MOBILE/TABLET LAYOUT RESETS
   Everything that changes the actual layout lives here.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {

  /* Strip/column containers: full width, no fixed margins */
  #comp-jofvh3zt,
  #comp-joftne92,
  #comp-joftne922,
  #comp-jnn2av1i2,
  #comp-jnn2av1i11,
  #comp-jofwseov,
  #comp-jofwswxp2 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .CohWsy,
  .wixui-column-strip {
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .V5AUxf {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Grid containers: full width, no fixed min-height (Wix bakes in large
     min-height values like 4166px that create huge blank space once elements
     are reflowed as static on mobile). */
  [data-mesh-id$="-gridContainer"],
  [data-mesh-id$="inlineContent-gridContainer"] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* CRITICAL: grid container direct children have Wix-generated
     margin-left: calc((100%−980px)×0.5) and left: NNNpx.
     On narrow screens these produce massive negative margins / offscreen
     content. Reset them all. */
  [data-mesh-id$="-gridContainer"]>[id^="comp-"],
  [data-mesh-id$="-gridContainer"]>wix-interact-element>[id^="comp-"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  [id^="comp-"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  [data-mesh-id$="inlineContent"] {
    width: 100% !important;
  }

  [id^="comp-"][class] {
    min-width: 0 !important;
  }
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */

/* ----- DESKTOP (>980px): keep original layout ----- */
#SITE_HEADER {
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
}

/* Desktop: centre the header title text.
   The Wix inline style sets text-align:justify on the <p> inside the title
   element. The element itself keeps its original 1036px width (which overflows
   its 239px column into the nav area, as intended by the original Wix design).
   We only override text-align to center for a clean centered appearance.
   DO NOT override width or left — those are needed for correct positioning. */
@media (min-width: 981px) {
  #comp-jofvh3zt3 p {
    text-align: center !important;
  }
}

/* Burger button: always in DOM (injected by JS), hidden on desktop */
#mobile-burger-btn {
  display: none;
}

/* Nav overlay: always in DOM, hidden by default everywhere */
#mobile-nav-overlay {
  display: none;
}

/* ----- TABLET & MOBILE: burger menu approach ----- */
@media (max-width: 980px) {

  /* Header wrapper */
  #SITE_HEADER {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Header inner content: compact height */
  [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    min-height: 52px !important;
    max-height: 60px !important;
    box-sizing: border-box !important;
  }

  [data-mesh-id="SITE_HEADERinlineContent"] {
    width: 100% !important;
    display: block !important;
  }

  /* The column strip inside header */
  #comp-jofvh3zt {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Header strip: title on left, padding-right leaves room for fixed burger.
     Gap = padding_right − 52px.  68px → 16px clearance at any viewport width. */
  #comp-jofvh3zt .V5AUxf {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 68px 0 12px !important;   /* right pad: 42px burger + 10px right + 16px gap */
    box-sizing: border-box !important;
    min-height: 52px !important;
    max-height: 60px !important;
  }

  /* Site title column — take remaining width;
     overflow:hidden prevents the title from bleeding into the burger zone. */
  #comp-jofvh3zt1 {
    width: 100% !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  [data-mesh-id="comp-jofvh3zt1inlineContent"],
  [data-mesh-id="comp-jofvh3zt1inlineContent-gridContainer"] {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Title text — scale down from the hard-coded 38px */
  #comp-jofvh3zt3 {
    display: flex !important;      /* flex so we can vertically centre the text */
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    left: 0 !important;
    margin: 0 !important;          /* clear Wix grid margin: 51px 0px 48px */
    padding: 0 !important;
  }

  #comp-jofvh3zt3 p {
    width: 100% !important;
    font-size: clamp(12px, 3vw, 16px) !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  #comp-jofvh3zt3 p span,
  #comp-jofvh3zt3 p a {
    font-size: inherit !important;
  }

  /* Nav column — collapse it; the burger replaces it */
  #comp-jofvh3zt4 {
    display: none !important;
  }

  /* Hide the desktop dropdown nav */
  #comp-jofvh45y {
    display: none !important;
  }

  /* ---- Burger button (position:fixed, appended to <body> by JS) ---- */
  /* CSS controls visibility so resizing the window shows/hides it
     without any JS resize handler. */
  #mobile-burger-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    position: fixed !important;
    top: 5px !important;
    right: 17px !important;
    width: 42px !important;
    height: 42px !important;
    padding: 7px 7px !important;
    background: rgb(255, 154, 50) !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    z-index: 10002 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
  }

  #mobile-burger-btn span {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background: rgb(65, 30, 100) !important;
    border-radius: 2px !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
  }

  #mobile-burger-btn.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg) !important;
  }

  #mobile-burger-btn.open span:nth-child(2) {
    opacity: 0 !important;
  }

  #mobile-burger-btn.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg) !important;
  }

  /* ---- Nav overlay ---- */
  #mobile-nav-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 154, 50, 0.97) !important;
    z-index: 10001 !important;
    overflow-y: auto !important;
    padding: 72px 0 40px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #mobile-nav-overlay.open {
    display: flex !important;
  }

  #mobile-nav-overlay a {
    color: rgb(65, 30, 100) !important;
    text-decoration: none !important;
    font-size: 18px !important;
    font-family: 'avenir-lt-w01_35-light1475496', sans-serif !important;
    font-weight: bold !important;
    padding: 12px 24px !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(65, 30, 100, 0.15) !important;
    transition: background 0.2s ease !important;
  }

  #mobile-nav-overlay a:hover,
  #mobile-nav-overlay a:active {
    background: rgba(65, 30, 100, 0.15) !important;
  }

  #mobile-nav-overlay .mobile-nav-close {
    position: fixed !important;
    top: 10px !important;
    right: 16px !important;
    background: transparent !important;
    border: none !important;
    font-size: 0 !important;       /* hide × text — burger already shows X */
    cursor: pointer !important;
    color: transparent !important;
    z-index: 10002 !important;
    line-height: 1 !important;
    padding: 0 !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* ============================================================
   GLOBAL: wixui-button links — force relative positioning on mobile
   so absolutely-positioned button <a> elements don't escape their
   container columns and overflow the viewport edge.
   ============================================================ */
@media (max-width: 980px) {
  a.wixui-button {
    position: relative !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   HOMEPAGE HERO SECTION
   (comp-joftne92 = hero strip with background image)
   ============================================================ */
@media (max-width: 980px) {

  /* Hero image container - natural 760px height is too tall on mobile */
  #comp-joftne92,
  #comp-joftne922 {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* The hero column container */
  #comp-joftne921 {
    width: 100% !important;
    min-height: 300px !important;
    max-height: 50vw !important;
  }

  /* Hero column's inline content - min-height is 760px by default */
  [data-mesh-id="comp-joftne921inlineContent"] {
    min-height: 200px !important;
    height: auto !important;
  }
}

@media (max-width: 600px) {
  #comp-joftne921 {
    min-height: 200px !important;
    max-height: 60vw !important;
  }
}

/* ============================================================
   HOMEPAGE: Photo + Quote + Text Row (comp-joftne922)
   Layout: [image] [quote text] [image] on desktop
           Stack vertically on mobile
   ============================================================ */
@media (max-width: 980px) {

  /* The main content column */
  #comp-joftne924 {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Desktop grid of images + text - rework as flex column on mobile */
  [data-mesh-id="comp-joftne924inlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Images in that section */
  #comp-kdukmawa,
  #comp-kdysmm59 {
    position: relative !important;
    margin: 0 auto !important;
    left: 0 !important;
    width: 45% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-area: unset !important;
    align-self: unset !important;
    justify-self: unset !important;
  }

  /* Show images side by side on tablet */
  #comp-kdukmawa img,
  #comp-kdysmm59 img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Quote text between the two images */
  #comp-l1l3o8rd {
    position: relative !important;
    margin: 0 auto !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    grid-area: unset !important;
  }

  #comp-l1l3o8rd h2,
  #comp-l1l3o8rd span {
    font-size: clamp(16px, 4vw, 25px) !important;
  }

  /* Large portrait image */
  #comp-l01fsyad {
    position: relative !important;
    margin: 0 auto !important;
    left: 0 !important;
    width: 80% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-area: unset !important;
  }

  #comp-l01fsyad img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Biography text */
  #comp-joftne926 {
    position: relative !important;
    margin: 0 auto !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    grid-area: unset !important;
    min-height: 0 !important;
  }

  #comp-joftne926 p {
    font-size: clamp(15px, 3.5vw, 20px) !important;
  }

  /* Section title */
  #comp-l0flifwh {
    position: relative !important;
    margin: 0 auto !important;
    left: 0 !important;
    width: 100% !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;
    grid-area: unset !important;
  }

  #comp-l0flifwh h1,
  #comp-l0flifwh span {
    font-size: clamp(18px, 4vw, 30px) !important;
  }
}

@media (max-width: 600px) {

  #comp-kdukmawa,
  #comp-kdysmm59 {
    width: 45% !important;
  }

  #comp-l01fsyad {
    width: 90% !important;
  }
}

/* ============================================================
   HOMEPAGE: Life Story Cards Section (comp-jnn2av1i11)
   5 columns of cards → use responsive grid on mobile
   ============================================================ */
@media (max-width: 980px) {

  #comp-jnn2av1i11 {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* The columns container → responsive grid */
  #comp-jnn2av1i11 .V5AUxf {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-items: center !important;
  }

  /* Individual card columns */
  #comp-jnn2av1i12,
  #comp-jnn2av1i16,
  #comp-jnn2av1i20,
  #comp-jnn2av1j3,
  #comp-krwciaan {
    width: 100% !important;
    min-width: 0 !important;
    left: 0 !important;
    flex: none !important;
  }

  /* Card grid containers: vertical stacking */
  [data-mesh-id="comp-jnn2av1i12inlineContent-gridContainer"],
  [data-mesh-id="comp-jnn2av1i16inlineContent-gridContainer"],
  [data-mesh-id="comp-jnn2av1i20inlineContent-gridContainer"],
  [data-mesh-id="comp-jnn2av1j3inlineContent-gridContainer"],
  [data-mesh-id="comp-krwciaaninlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 8px !important;
    width: 100% !important;
  }

  /* Card headings */
  #comp-jnn2av1i13,
  #comp-jnn2av1i17,
  #comp-kruzmdbw,
  #comp-jnn2av1j,
  #comp-krwciafx {
    position: relative !important;
    margin: 8px 0 4px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* "Childhood" heading fix — unlike the other cards it has no nested
     <span style="font-size:22px"> so the .font_0 clamp rule shrinks it
     to 14px on small phones.  Pin it at 22px to match the other cards. */
  #comp-jnn2av1i13 h3,
  #comp-jnn2av1i13 h3 * {
    font-size: 22px !important;
  }

  /* Card description text */
  #comp-jnn2av1i14,
  #comp-jnn2av1i18,
  #comp-kruzoi2q,
  #comp-jnn2av1j1,
  #comp-krwciagl {
    position: relative !important;
    margin: 0 0 8px !important;
    left: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    text-align: center !important;
  }

  /* Card buttons */
  #comp-kfo9j8bv,
  #comp-kfo9rybl,
  #comp-kykjqfrm,
  #comp-krwdlsbk,
  #comp-kfo9skvo,
  #comp-krv01vrm,
  #comp-krwciagp {
    position: relative !important;
    margin: 4px auto !important;
    left: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  #comp-jnn2av1i11 .V5AUxf {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
  }
}

@media (max-width: 400px) {
  #comp-jnn2av1i11 .V5AUxf {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
  }
}

/* ============================================================
   HOMEPAGE: Quick Nav Buttons Row (comp-jofwseov)  
   6 buttons in a row → wrap on mobile
   ============================================================ */
@media (max-width: 980px) {

  #comp-jofwseov {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* The single column that holds the buttons */
  #comp-jofwseov1 {
    width: 100% !important;
    min-width: 0 !important;
  }

  [data-mesh-id="comp-jofwseov1inlineContent-gridContainer"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Individual fast-nav buttons */
  #comp-jnn2av1i15,
  #comp-jnn2av1i19,
  #comp-jnn2av1j2,
  #comp-jnn2av1j6,
  #comp-kfo9ytlf,
  #comp-kfo9yz34 {
    position: relative !important;
    margin: 0 !important;
    left: 0 !important;
    width: auto !important;
  }
}

/* ============================================================
   HOMEPAGE: Video + Text Row (comp-jofwswxp2)
   2-column layout → stack vertically on mobile
   ============================================================ */
@media (max-width: 980px) {

  #comp-jofwswxp2 {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Make the two column containers stack */
  #comp-jofwswxp2 .V5AUxf {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #comp-jofwswxp3,
  #comp-jofwswxp7 {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  [data-mesh-id="comp-jofwswxp3inlineContent-gridContainer"],
  [data-mesh-id="comp-jofwswxp7inlineContent-gridContainer"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Text in the left column */
  #comp-kfycw2n4 {
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    left: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
  }

  #comp-kfycw2n4 h2,
  #comp-kfycw2n4 span {
    font-size: clamp(14px, 3.5vw, 18px) !important;
  }

  /* Video */
  #comp-kfzr04z9 {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    left: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* Video iframe */
  #comp-kfzr04z9 iframe {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
  }

  #comp-kfzr04z9 .VideoPlayer2054936319__playerContainer {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;
    position: relative !important;
  }

  #comp-kfzr04z9 .VideoPlayer2054936319__playerContainer iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* About button */
  #comp-kfoa5fhj {
    width: auto !important;
    position: relative !important;
    margin: 8px auto !important;
    left: 0 !important;
    max-width: 90% !important;
  }
}

/* ============================================================
   EARLY YEARS PAGE — Video (comp-kfzqltko)
   ============================================================ */
@media (max-width: 980px) {

  /* Responsive 16:9 wrapper */
  #comp-kfzqltko {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    left: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  #comp-kfzqltko .VideoPlayer2054936319__playerContainer {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;
    position: relative !important;
  }

  #comp-kfzqltko .VideoPlayer2054936319__playerContainer iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ============================================================
   CONTACT / EMAIL FORM SECTION (comp-k669xxnr)
   ============================================================ */
@media (max-width: 980px) {

  #comp-k669xxnr {
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    margin: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
  }

  [data-mesh-id="comp-k669xxnrinlineContent"],
  [data-mesh-id="comp-k669xxnrinlineContent-gridContainer"] {
    width: 100% !important;
  }

  #comp-k669xxo5 {
    width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  [data-mesh-id="comp-k669xxo5inlineContent"],
  [data-mesh-id="comp-k669xxo5inlineContent-gridContainer"] {
    width: 100% !important;
  }

  #comp-kqzhq2ch {
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    left: 0 !important;
  }
}

/* ============================================================
   "ABOUT THE AUTHOR" FLOATING BUTTON (comp-jofwseov6)
   ============================================================ */
@media (max-width: 980px) {
  #comp-jofwseov6 {
    position: relative !important;
    margin: 16px auto !important;
    left: 0 !important;
    display: block !important;
    width: auto !important;
  }
}

/* ============================================================
   HOMEPAGE — OVERLAP FIX
   comp-jofwseov6 (duplicate "About the author" button) and
   comp-k669xxnr (Wix email form widget) share the same CSS grid
   cell as the bottom text section. On desktop they sit in the
   right column; on mobile they overlap the paragraph text.
   Hide both: the button is already present inside the section,
   and the Wix form doesn't function in a static export.
   ============================================================ */
@media (max-width: 980px) {
  #comp-jofwseov6,
  #comp-k669xxnr {
    display: none !important;
  }
}

/* ============================================================
   FOOTER SECTION
   ============================================================ */
@media (max-width: 980px) {

  #SITE_FOOTER {
    width: 100% !important;
    min-width: 0 !important;
  }

  [data-mesh-id="SITE_FOOTERinlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 24px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }

  /* Footer social icons:
     The Wix container is only 24px wide; the inner <ul> is position:absolute
     anchored at the container centre and overflows rightward.
     Fix: expand the container to full width and un-absolute the list. */
  #comp-jmun2xiy1 {
    position: relative !important;
    margin: 0 auto !important;
    left: 0 !important;
    width: 100% !important;
  }

  #comp-jmun2xiy1 ul {
    position: relative !important;
    left: auto !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Footer text */
  #comp-jmun2xiy {
    position: relative !important;
    margin: 0 auto !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  #comp-jmun2xiy p {
    font-size: clamp(11px, 2.5vw, 14px) !important;
    text-align: center !important;
  }
}

/* ============================================================
   INNER PAGES - General responsive fixes
   The inner pages (e.g. /early-years/, /prayers/, etc.)
   use similar Wix grid patterns
   ============================================================ */
@media (max-width: 980px) {

  /* All pages container */
  #PAGES_CONTAINER,
  #SITE_PAGES {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* All page root elements */
  [class$="_wrapper"],
  [class*="vcz61"],
  [class*="Page"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Generic column strip: stack vertically on mobile 
     (but NOT the header strip, which we handle separately) */
  .wixui-column-strip .V5AUxf:not(#comp-jofvh3zt .V5AUxf) {
    flex-wrap: wrap !important;
  }

  /* All rich text elements: control font size */
  .wixui-rich-text p,
  .wixui-rich-text h1,
  .wixui-rich-text h2,
  .wixui-rich-text h3,
  .wixui-rich-text h4,
  .wixui-rich-text h5,
  .wixui-rich-text span {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Large font sizes on inner pages can be massive - clamp them */
  .font_3 {
    font-size: clamp(24px, 6vw, 88px) !important;
  }

  .font_4 {
    font-size: clamp(20px, 5vw, 72px) !important;
  }

  .font_5 {
    font-size: clamp(18px, 4vw, 50px) !important;
  }

  .font_6 {
    font-size: clamp(16px, 3.5vw, 40px) !important;
  }

  .font_0 {
    font-size: clamp(14px, 3vw, 22px) !important;
  }

  /* Wix --min-height custom property causes large blank gaps on mobile.
     Reset it globally for rich text elements; the actual element heights
     are determined by content, not a design-time minimum. */
  .wixui-rich-text {
    --min-height: 0px !important;
    min-height: 0 !important;
  }

  /* Wix images on inner pages: show the FULL image, no cropping.
     object-fit:cover (set inline on <img>) is overridden so the
     complete image is visible at all viewport widths. */
  .wixui-image,
  .MazNVa {
    height: auto !important;
  }

  .wixui-image .j7pOnl {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .wixui-image img {
    object-fit: unset !important;  /* remove cropping — show full image */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* All wix buttons should be reasonably sized */
  .wixui-button {
    max-width: 90vw !important;
    white-space: normal !important;
  }

  /* Intentionally not suppressing <br> tags — Wix uses H1/H2 for body
     content too, and their <br> tags are real content line breaks. */

  /* ---- MOBILE CHILD RESETS FOR INNER PAGE GRID CONTAINERS ----
     Wix's inline margin-left: calc((100% - 980px) * 0.5) goes NEGATIVE
     at viewports below 980px, pushing content off-screen. Override hard. */
  #PAGES_CONTAINER [data-mesh-id$="inlineContent-gridContainer"] > * {
    position: static !important;
    left: auto !important;
    margin: 0 0 16px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Columns inside inner pages should stack */
  .wixui-column-strip .V5AUxf>* {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* The background fill layers need to span full width */
  .if7Vw2,
  .MW5IWV {
    width: 100% !important;
  }

  /* Section backgrounds */
  .xU8fqS ._4XcTfy,
  .xU8fqS .G5K6X8,
  .xU8fqS .gUbusX {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Header bar backgrounds */
  .fEm0Bo .c7cMWz,
  .PFkO7r {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* SVG / vector art should scale */
  .VDJedC {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Column strips on inner pages should auto-size their height
     (Wix sets fixed heights that create large gaps on mobile) */
  .wixui-column-strip:not(#comp-jofvh3zt) {
    height: auto !important;
    min-height: 0 !important;
  }

  /* The wixui-column-strip inner column wrapper */
  .wixui-column-strip .YzqVVZ {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ============================================================
   TABLET SPECIFIC (between 601px and 980px)
   ============================================================ */
@media (min-width: 601px) and (max-width: 980px) {
  #comp-jnn2av1i11 .V5AUxf {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  #comp-joftne924 .V5AUxf {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  /* On tablet, inner page grid children get a little padding */
  [data-mesh-id$="inlineContent-gridContainer"] > * {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ============================================================
   SMALL MOBILE (< 600px) - additional tweaks
   ============================================================ */
@media (max-width: 600px) {

  /* Inner page grid children — add some padding */
  [data-mesh-id$="inlineContent-gridContainer"] > * {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ============================================================
   EXTRA SMALL MOBILE (< 400px)
   ============================================================ */
@media (max-width: 400px) {

  #comp-jofvh3zt .V5AUxf {
    padding: 0 8px !important;
  }

  #comp-jofvh3zt3 p {
    font-size: 11px !important;
  }
}

/* ============================================================
   PAGE-SPECIFIC FIXES
   Common fixes above handle most pages. Add targeted overrides
   here for individual pages, grouped by page URL.
   ============================================================ */

/* ---- /about-the-author/ ---- */
/* No additional fixes needed beyond common rules */

/* ---- /battle-analysis/ and all inner pages ---- */
/* WIXUI-RICH-TEXT SPACER LINES
   In Wix's absolute-position canvas, rich-text blocks that share a grid row
   with images use two kinds of intentional blank space:
     (a) Leading <p>&nbsp;</p> lines  — push the start of a text block DOWN
         so it starts below a co-located image.
     (b) Trailing <br> tags inside headings — push the NEXT sibling DOWN
         to clear a floated/overlapping image.
   In our static-flow layout, neither image is in the same flow, so these
   spacers produce large visible blank gaps.

   Fix (a): paragraphs in rich-text that contain ONLY a bare &nbsp; (no <span>
   child) are spacers.  Real content paragraphs always wrap their text in
   <span class="wixui-rich-text__text">.  Collapse spacer-only <p> elements.

   Fix (b): <br> elements that are DIRECT children of headings (h1-h4) inside
   rich-text blocks are purely for vertical spacing; hide them on mobile so
   the heading shrinks to its natural text height. */
@media (max-width: 980px) {
  /* (a) Spacer paragraphs: just &nbsp;, no span content.
     IMPORTANT: scope to specific components only — NOT globally.
     The :not(:has(> span)) selector also matches real content paragraphs
     on pages like /events/ and /priests/ where Wix wrote text directly
     into <p> without wrapping in <span>. Only apply to components that
     are confirmed to have leading &nbsp; spacers. */
  #comp-kfikiilf p:not(:has(> span)) {
    /* battle-analysis: 14 leading &nbsp; paragraphs above the body text */
    height: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  /* (b) Heading <br> spacers inside rich-text */
  /* Disabling this rule for now, until we know its needed for sure */
  /* .wixui-rich-text h1 > br,
  .wixui-rich-text h2 > br,
  .wixui-rich-text h3 > br,
  .wixui-rich-text h4 > br {
    display: none !important;
  } */
}

/* ---- /classes/ ---- */
/* comp-jnn4xrc13inlineContent-gridContainer carries margin-bottom:-1080px
   (set by Wix to handle a floating right-column image).  On the static
   export this negative margin pulls the footer up by 1080px so it appears
   in the middle of the text, obscuring points 7 & 8.  Remove it on desktop. */
@media (min-width: 981px) {
  [data-mesh-id=comp-jnn4xrc13inlineContent-gridContainer] {
    margin-bottom: 0 !important;
  }
}

/* ---- /early-years/ and variants ---- */
/* No additional fixes needed beyond common rules */

/* ---- /early-years-1/ ---- */
/* Text components have full-width inline styles (e.g. #comp-kfzpdjjq{width:1094px}).
   Images share the same grid rows. Because local fonts differ from the Wix CDN fonts,
   text lines wrap differently and can show through/beside images. We give image and
   caption elements a solid page-background fill + z-index + box-shadow so they
   cleanly cover the underlying text, matching the live-site visual result. */
@media (min-width: 981px) {
  /* === Row 5: Manjit Singh mandolin image (x≈657, w=345, text ends x≈1180) === */
  #comp-kyj5kaj4 {
    position: relative !important;
    z-index: 1 !important;
    background-color: rgb(247, 244, 231) !important;
    box-shadow: 190px 0 0 0 rgb(247, 244, 231) !important;
  }
  /* Caption below Manjit image */
  #comp-kyj5lhut {
    position: relative !important;
    z-index: 1 !important;
    background-color: rgb(247, 244, 231) !important;
    box-shadow: 100px 0 0 0 rgb(247, 244, 231) !important;
  }

  /* === Row 10: Saints images side-by-side === */
  /* Nihang Sant Baba Chett Singh Ji (left, x≈143 w=395, gap 123px to right img) */
  #comp-kyj6364r {
    position: relative !important;
    z-index: 1 !important;
    background-color: rgb(247, 244, 231) !important;
    box-shadow: 130px 0 0 0 rgb(247, 244, 231) !important;
  }
  /* Sant Bishan Singh Ji (right, x≈661 w=462, text ends x≈1180 → 57px gap) */
  #comp-kzlp8z3b {
    position: relative !important;
    z-index: 1 !important;
    background-color: rgb(247, 244, 231) !important;
    box-shadow: 70px 0 0 0 rgb(247, 244, 231) !important;
  }
  /* Caption below both saints images (w=955, covers most width) */
  #comp-kyj65mvg {
    position: relative !important;
    z-index: 1 !important;
    background-color: rgb(247, 244, 231) !important;
    box-shadow: 100px 0 0 0 rgb(247, 244, 231) !important;
  }

  /* === Row 13: Kultar Singh Ji tabla image (x≈710, w=331, text ends x≈1178) === */
  #comp-kyj5ptba {
    position: relative !important;
    z-index: 1 !important;
    background-color: rgb(247, 244, 231) !important;
    box-shadow: 150px 0 0 0 rgb(247, 244, 231) !important;
  }
  /* Caption below tabla image */
  #comp-kyj5qodi {
    position: relative !important;
    z-index: 1 !important;
    background-color: rgb(247, 244, 231) !important;
  }
}

/* ---- /india-tours/ ---- */
/* Same font-wrapping issue — text from #comp-krweogh5 (1180px wide) flows behind
   the Bhagdogra image and its caption text. Background + z-index on the image and
   caption covers the underlying text. Box-shadow on caption extends its background
   rightward to bridge the gap to the image. */
@media (min-width: 981px) {
  /* Bhagdogra Gurdwara, Darjeeling image — box-shadow extends right to cover
     text fragments between image right edge (x≈1182) and text end (x≈1220) */
  #comp-kyj5vo8v {
    position: relative !important;
    z-index: 1 !important;
    background-color: rgb(247, 244, 231) !important;
    box-shadow: 50px 0 0 0 rgb(247, 244, 231) !important;
  }
  /* Caption / sidebar text to the left of the image — box-shadow extends right
     to bridge the ~62px gap between caption end (x≈559) and image start (x≈621) */
  #comp-kyj5vzoe {
    position: relative !important;
    z-index: 1 !important;
    background-color: rgb(247, 244, 231) !important;
    box-shadow: 80px 0 0 0 rgb(247, 244, 231) !important;
  }
}

/* ---- /world-tours/ ---- */
/* comp-kfzprs67 (the long Canada/UK text, 1056px wide) and the Malaysia image
   (comp-kzlm76fj, margin-top:971px) share the same grid row 4. After restoring
   the correct <br> spacers, the text renders ~1020px tall — slightly taller than
   the 971px margin-top that positions the image. The overlap means the image
   covers the last paragraph of the text ("Affesford and Raw Street Gurdwara...").
   Fix: push the image and sidebar's margin-top down to 1100px / 1091px so they
   always start below the text content, eliminating the overlap entirely.
   The image/sidebar also get z-index + background as a safety net against any
   stray text fragments from adjacent text blocks bleeding into their area. */
@media (min-width: 981px) {
  /* Place image below the Canada/UK text block.  Previously 1100px but that
     pushed the section too far down, sitting on top of the "Babj Ji asked
     them to cover their heads" paragraph.  1050px is a slight lift that
     clears the text while keeping the section in its natural position. */
  [data-mesh-id=ContainerbyccbinlineContent-gridContainer] > [id="comp-kzlm76fj"] {
    margin-top: 1050px !important;
  }
  /* Sidebar offset: maintain original 9px lead over the image */
  [data-mesh-id=ContainerbyccbinlineContent-gridContainer] > [id="comp-kzlm9utp"] {
    margin-top: 1041px !important;
  }
  /* Image + caption: cream background covers any stray text fragments at edges */
  #comp-kzlm76fj,
  #comp-kzlm9ek4 {
    position: relative !important;
    z-index: 1 !important;
    background-color: rgb(247, 244, 231) !important;
  }
  /* Sidebar text "In those days at Raw Street Gurdwara…" */
  #comp-kzlm9utp {
    position: relative !important;
    z-index: 1 !important;
    background-color: rgb(247, 244, 231) !important;
    box-shadow: -80px 0 0 0 rgb(247, 244, 231), 20px 0 0 0 rgb(247, 244, 231) !important;
  }
}

/* ---- /tours-across-india-ii/ ---- */
/* No additional fixes needed beyond common rules */

/* ---- /copy-of-childhood/ ---- */
/* YouTube embed (comp-krwdr0ea) has no intrinsic size on mobile and expands to
   full-page height. Constrain it to a 16:9 responsive box. */
@media (max-width: 980px) {
  #comp-krwdr0ea {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    left: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  #comp-krwdr0ea .VideoPlayer2054936319__playerContainer {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;
    position: relative !important;
  }

  #comp-krwdr0ea .VideoPlayer2054936319__playerContainer iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}