/* ===== reef-site fixes.css: loaded after the imported WordPress CSS; survives a re-import ===== */

/* Header overflow between 1200px and 1439px (14" laptops at 150%/200% scaling): the site's custom CSS
   forces min-width:1300px on the search+CTA group, which pushes "Book appointment" off-screen. */
@media (min-width: 1000px) {
  .header-action-group { min-width: 0 !important; width: 100% !important; flex: 1 1 auto; margin-left: 24px; }
  .custom-nav-search { flex: 1 1 auto; width: auto !important; max-width: 520px; min-width: 180px; }
  .cta-btns { flex: 0 0 auto; }
}
@media (min-width: 1000px) and (max-width: 1439px) {
  #header-menu-1 > ul#menu-main-menu { gap: 22px; }
  .custom-phone-pill { padding: 0 16px !important; }
}

/* Hero CTA (opens the booking popup) */
.reef-hero-cta { display: flex; justify-content: center; margin-top: 28px; }
.reef-hero-cta .gspb-buttonbox {
  display: inline-flex; align-items: center; gap: 12px;
  background: #b5106a; color: #fff; border-radius: 50px; padding: 16px 32px;
  font-family: "Lato", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); transition: transform 0.2s, background 0.2s;
}
.reef-hero-cta .gspb-buttonbox:hover { background: #9c0d5b; color: #fff; transform: translateY(-1px); }
.reef-hero-cta svg { width: 13px; height: 13px; fill: currentColor; }
@media (max-width: 689.98px) { .reef-hero-cta .gspb-buttonbox { padding: 13px 24px; font-size: 13px; } }

/* ---- Client review items (2026-10-29) ---- */

/* Header: let the search pill grow into the free space instead of sitting in the middle */
@media (min-width: 1000px) {
  .custom-nav-search { flex: 1 1 320px; }
}

/* Homepage: less space under the "Our Specialities" subtitle. Scoped to the homepage article: Greenshift reused
   this block ID on Women's/Children's/Fertility pages, where the heading needs its full margin. */
#post-7 #gspb_container-id-gsbp-b565ac4.gspb_container { margin-bottom: 12px; }

/* Footer: tighter service link lists */
.reef-footer-col li { margin-bottom: 2px; }
.reef-footer-col li a { line-height: 1.45; }

/* About Us: breathing room between the story text and the video */
@media (min-width: 1000px) {
  .gspb_row #gspb_col-id-gsbp-d560c25.gspb_row__col--4 { padding-right: 36px; }
}
/* About Us: "Guided by Trusted Standards" wrapped 4 + 2 under 1440px; keep all six in one row */
@media (min-width: 1000px) and (max-width: 1439px) {
  #gspb_row-id-gsbp-a85dbef > .gspb_row__content > div { min-width: 0; }
}

/* Doctor pages (shared template ids): name on one line and a 2-column expertise grid under 1440px;
   never break words like "Echocardiography" mid-word */
@media (min-width: 1000px) and (max-width: 1439px) {
  #gspb_heading-id-gsbp-4cdc2ea { font-size: 30px; }
}
#gspb_row-id-gsbp-da2b4b0 .gspb_heading { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* Header: the text widget wrapping the action group is a content-sized flex item; let it fill the column */
@media (min-width: 1000px) {
  header [data-device="desktop"] [data-row="top"] [data-column="middle"] > [data-items] { width: 100%; }
  header [data-device="desktop"] [data-row="top"] .ct-header-text,
  header [data-device="desktop"] [data-row="top"] .ct-header-text > .entry-content { flex: 1 1 auto; width: 100%; min-width: 0; }
}

/* Fertility & IVF: the four treatment tabs used 20% / 33% / 20% / 20% wide boxes. Same fixed size in every
   tab, wrapping and centred instead of the horizontal-scroll grid. (body.gspb-bodyfront matches the theme's specificity.) */
@media (min-width: 1000px) {
  body.gspb-bodyfront #gspb_row-id-gsbp-8ed0107 > .gspb_row__content,
  body.gspb-bodyfront #gspb_row-id-gsbp-e6fb7fd > .gspb_row__content,
  body.gspb-bodyfront #gspb_row-id-gsbp-0e08346 > .gspb_row__content,
  body.gspb-bodyfront #gspb_row-id-gsbp-42f0644 > .gspb_row__content {
    display: flex !important; flex-wrap: wrap !important; justify-content: center !important;
    gap: 24px !important; overflow: visible !important; padding-bottom: 0 !important;
  }
  body.gspb-bodyfront #gspb_row-id-gsbp-8ed0107 > .gspb_row__content > div,
  body.gspb-bodyfront #gspb_row-id-gsbp-e6fb7fd > .gspb_row__content > div,
  body.gspb-bodyfront #gspb_row-id-gsbp-0e08346 > .gspb_row__content > div,
  body.gspb-bodyfront #gspb_row-id-gsbp-42f0644 > .gspb_row__content > div { width: 230px !important; min-width: 230px !important; flex: 0 0 230px !important; }
}

/* Header under 1440px: Blocksy's top row is a 3-column grid with an empty end column, which leaves the
   search + CTA group only ~590px; give the middle column the whole remaining width */
@media (min-width: 1000px) and (max-width: 1439px) {
  header [data-device="desktop"] [data-row="top"] .ct-container { grid-template-columns: 220px minmax(0, 1fr) 0 !important; }
  header [data-device="desktop"] [data-row="top"] [data-column="end"] { display: none; }
}

/* About Us standards: never break a label mid-word ("Motherhoo-d") */
#gspb_row-id-gsbp-a85dbef .gspb_heading { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* ---- Mobile spacing (client phone screenshots, 2026-10-29) ----
   Greenshift rows/containers carry desktop margins of 60–120px plus inner padding; on phones the sections
   ended up 85–165px apart. Cap the section gaps and tighten the heading blocks. */
@media (max-width: 767.98px) {
  main .entry-content > .gspb_row,
  main .entry-content > .gspb_container,
  main .entry-content > .wp-block-themeisle-blocks-tabs { margin-bottom: 32px !important; }
  /* homepage only (#post-7): these block IDs also appear on inner pages, where the theme spacing must stay */
  #post-7 #gspb_row-id-gsbp-6cda1b3 { margin-bottom: 24px !important; }           /* about block → specialities */
  #post-7 #gspb_container-id-gsbp-953a85e { margin-bottom: 28px !important; }     /* specialities → facilities */
  #post-7 #gspb_container-id-gsbp-604a53c,                                          /* "Our Facilities" heading */
  #post-7 #gspb_container-id-gsbp-51d2f4c,                                          /* "Our Packages" heading */
  #post-7 #gspb_container-id-gsbp-ee0ec8e { margin-bottom: 8px !important; }      /* "Reef Health Talks" heading */
  #post-7 #wp-block-themeisle-blocks-tabs-b58d6a3c { margin-bottom: 12px !important; }
  #post-7 #gspb_container-id-gsbp-b7a6313 { margin-bottom: 28px !important; }     /* visit card → packages */
  #post-7 #gspb_row-id-gsbp-a85dbef { margin-bottom: 32px !important; }           /* packages row → health talks */
  #post-7 #gspb_row-id-gsbp-2a6539f { margin-bottom: 24px !important; }           /* health talks → difference */
  #post-7 #gspb_container-id-gsbp-53f4ab9 { margin-bottom: 32px !important; }     /* difference → footer */
  #post-7 #gspb_container-id-gsbp-b565ac4.gspb_container { margin-bottom: 8px !important; }
}

/* Mobile drawer: the search pill and the two phone buttons were sized with desktop percentages and ran
   past the drawer's right edge */
@media (max-width: 999.98px) {
  #offcanvas .header-action-group { width: 100% !important; max-width: 100%; box-sizing: border-box; margin-left: 0 !important; }
  #offcanvas .custom-nav-search,
  #offcanvas .cta-btns,
  #offcanvas .custom-phone-pill,
  #offcanvas .emergency-btn-nav { width: 100% !important; max-width: 100%; box-sizing: border-box; }
  #offcanvas .cta-btns { flex-direction: column; }
}
@media (max-width: 999.98px) {
  /* the site CSS gives .header-action-group min-width:1300px at every width; inside the drawer that is what pushed the pills off-screen */
  #offcanvas .header-action-group { min-width: 0 !important; }
}

/* ---- Header alignment (2026-10-31): "Book appointment" right edge sits on the end of the "Tools" menu text.
   Header.tsx measures both and writes --reef-actions-shift on .header-action-group; the search + CTA group is
   translated as one unit so the gap between them never changes. Search pill is 1.5x its previous width. ---- */
@media (min-width: 1000px) {
  .header-action-group { justify-content: flex-end !important; transform: translateX(var(--reef-actions-shift, 0px)); }
  .custom-nav-search { flex: 0 0 auto !important; width: var(--reef-search-w, 270px) !important; max-width: none; margin-left: 0 !important; }
}
@media (min-width: 1600px) {
  .custom-nav-search { --reef-search-w: 345px; }
}

/* ---- Cross-browser consistency (2026-10-31) ----
   The theme's "14-inch" rule shrank <body> with zoom:.95 AND -moz-transform:scale(.95) between 1250–1440px. In Firefox the
   transform leaves a blank strip under the footer (the layout box keeps its unscaled height) and turns <body> into the
   containing block for position:fixed, so the video lightbox / WhatsApp bubble / popups anchor to the top of the document
   instead of the viewport. Firefox ≥126 also honours zoom, so the page shrank twice. Header fits at these widths without it. */
@media screen and (min-width: 1250px) and (max-width: 1440px) {
  body { zoom: 1; -moz-transform: none; transform: none; }
}

/* Health Talks lightbox: centre the clip in the viewport and keep it inside it (it rendered at its intrinsic 858px height,
   top-anchored, so it overflowed shorter windows); the close button sat 50px above the clip, i.e. off-screen. */
.gs-video-popup .slbWrapOuter { display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.gs-video-popup .slbWrap { position: static; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.gs-video-popup .slbWrap::before { content: none; }
.gs-video-popup .slbContentOuter { display: block; max-height: 100%; }
.gs-video-popup .slbContentOuter .slbContent video {
  display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 48px); object-fit: contain; background: #000;
}
.gs-video-popup .slbCloseBtn { position: fixed; top: 12px; right: 16px; }

/* Mobile footer: the fixed bottom menu bar covered the social icons (last row of the footer). BottomNav.tsx publishes the
   bar's height as --reef-bnav-h (0px where the bar is hidden), and the footer pads by that much. */
footer#footer.ct-footer { padding-bottom: calc(20px + var(--reef-bnav-h, 0px)) !important; }

/* Body font stack: the theme declared "Lato, Lato" with no generic family, so until Lato arrives (font-display: swap) Chrome
   on Windows showed Times New Roman. Fall back to the platform sans-serif instead; headings keep their Georgia rule. */
:root { --theme-font-family: Lato, "Segoe UI", Helvetica, Arial, sans-serif; }

/* Homepage only (#post-7): Otter reused block id e1ca32e1 for the hero of 40+ inner pages, each with its own image.
   Hero slide background was a 1.85 MB opaque PNG (1264×842); same image re-encoded as a 1264×842 JPEG. Health Talks posters
   (lib/data.ts) likewise PNG → JPEG. Cuts ~3.3 MB from the homepage, which is what the client's laptop waits on. */
#post-7 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 { --background: url(/uploads/2026/05/Gemini_Generated_Image_86in4m86in4m86in-hero.jpg) no-repeat scroll 52% 4%/cover !important; }

/* Booking popups on phones: Popup Maker positions the 60%-wide box with left:50% and margin-left:-30%, which the
   mobile rules override to a wider box without moving it back, so it ran off the right edge (2026-11-01). */
@media (max-width: 767.98px) {
  #popmake-777.pum-container, #popmake-1324.pum-container { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; margin-left: 0 !important; top: 16px !important; }
}

/* Nav "Packages" → homepage section: the anchor sits above the heading and clears the sticky header (2026-11-01) */
.reef-anchor { display: block; height: 0; scroll-margin-top: 170px; }
@media (max-width: 999.98px) { .reef-anchor { scroll-margin-top: 100px; } }

/* Mobile header call button, between the logo and the hamburger (2026-11-01) */
.reef-call { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #b5106a; color: #fff; margin-right: 14px; box-shadow: 0 6px 14px -8px rgba(181, 16, 106, 0.8); transition: transform 0.15s, background 0.15s; }
.reef-call:hover, .reef-call:focus-visible { background: #9c0d5b; color: #fff; transform: translateY(-1px); }
.reef-call svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
[data-device="mobile"] [data-column="end"] [data-items] { display: flex; align-items: center; }


/* Homepage "Our Facilities" tabs on phones: the rows are horizontal scrollers (overflow visible here, so only the first
   two icons showed). Wrap them into a 3-column grid instead so every facility is visible without scrolling (2026-11-01). */
@media (max-width: 767.98px) {
  #post-7 #gspb_row-id-gsbp-3524c5e > .gspb_row__content,
  #post-7 #gspb_row-id-gsbp-387f1b0 > .gspb_row__content { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; gap: 18px 8px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; overflow: visible !important; justify-items: center; }
  #post-7 #gspb_row-id-gsbp-3524c5e > .gspb_row__content > div,
  #post-7 #gspb_row-id-gsbp-387f1b0 > .gspb_row__content > div { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; transform: none !important; margin: 0 !important; padding: 8px 4px !important; }
}

/* ---- Inner-page heroes (client, 2026-11-01): keep the headline off the people's faces and show more of the photo.
   Women's Health = #post-10, Fertility & IVF = #post-704. The hero block id (e1ca32e1) is shared, so scope by article. ---- */
#post-10 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1,
#post-704 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 { justify-content: flex-start; }
#post-10 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 > .innerblocks-wrap,
#post-704 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 > .innerblocks-wrap { justify-content: flex-start; max-width: none; }
#post-10 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 .wp-block-themeisle-blocks-advanced-column,
#post-704 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 .wp-block-themeisle-blocks-advanced-column { flex: 0 1 44%; max-width: 44%; margin-left: 4%; }
#post-10 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 h1,
#post-704 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 h1 { text-align: left; padding: 0 !important; } /* theme gave the centred h1 525px of right padding */
/* Women: the three faces sit centre-right; zoom in a touch and anchor on them */
#post-10 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 { --background: url(/uploads/2026/10/Gemini_Generated_Image_orw6h0orw6h0orw6.png) no-repeat scroll 70% 46% / cover !important; } /* cover, not 120%: the source is only 1264px wide and the upscale read as a soft "filter". Heads clear of the top edge; the daughter crops behind the booking bar */
/* IVF: the couple sits centre-right */
#post-704 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 { --background: url(/uploads/2026/07/ivf-hero-1-scaled.jpg) no-repeat scroll 66% 20% / cover !important; } /* heads and the test in her hands both inside the 495px box */
#post-704 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 .wp-block-themeisle-blocks-advanced-column { margin-left: 13%; } /* headline closer to the couple */
@media (max-width: 767.98px) {
  #post-10 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 .wp-block-themeisle-blocks-advanced-column,
  #post-704 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 .wp-block-themeisle-blocks-advanced-column { flex-basis: 58%; max-width: 58%; margin-left: 0; }
  #post-10 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1,
  #post-704 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 { padding-top: 48px !important; min-height: 360px !important; align-items: flex-start; }
  #post-10 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 { --background: url(/uploads/2026/10/Gemini_Generated_Image_orw6h0orw6h0orw6.png) no-repeat scroll 78% 20% / cover !important; }
  #post-704 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 { --background: url(/uploads/2026/07/ivf-hero-1-scaled.jpg) no-repeat scroll 72% 12% / cover !important; }
  #post-704 #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 .wp-block-themeisle-blocks-advanced-column { margin-left: 0; }
}

/* ---- "Meet Our Specialists" rows (gspb_row-id-gsbp-e903864, shared by the speciality pages): one horizontal, snapping
   row with the site's prev/next arrows instead of wrapping onto new lines (client, 2026-11-01). WpContent adds the
   carousel classes and the arrow buttons at mount; wpBehaviors wires them. ---- */
#gspb_row-id-gsbp-e903864 { flex-direction: column; }
#gspb_row-id-gsbp-e903864 > .gspb_row__content { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; gap: 24px; row-gap: 0 !important; padding-bottom: 8px; scrollbar-width: none; }
#gspb_row-id-gsbp-e903864 > .gspb_row__content::-webkit-scrollbar { display: none; }
#gspb_row-id-gsbp-e903864 > .gspb_row__content > div { flex: 0 0 calc((100% - 48px) / 3) !important; max-width: none !important; min-width: 0; scroll-snap-align: start; }
#gspb_row-id-gsbp-e903864 .gspb_smartscroll_btns { margin-top: 8px; }
#gspb_row-id-gsbp-e903864.reef-no-overflow .gspb_smartscroll_btns { display: none; }
@media (max-width: 999.98px) {
  #gspb_row-id-gsbp-e903864 > .gspb_row__content > div { flex-basis: calc((100% - 24px) / 2) !important; }
}
@media (max-width: 689.98px) {
  #gspb_row-id-gsbp-e903864 > .gspb_row__content { gap: 16px; scroll-padding-inline: 8%; scroll-snap-type: x mandatory; }
  #gspb_row-id-gsbp-e903864 > .gspb_row__content > div { flex-basis: 78% !important; scroll-snap-align: center; }
  #gspb_row-id-gsbp-e903864 { margin-bottom: 60px !important; }
}

/* Doctors carousel arrows: same look as the packages row (its rules are keyed to gspb_row-id-gsbp-a85dbef), shown at
   every width because the Women's Health row overflows on desktop too */
#gspb_row-id-gsbp-e903864 { position: relative; }
#gspb_row-id-gsbp-e903864 .gspb_smartscroll_btns { margin: 0; }
#gspb_row-id-gsbp-e903864 .gs-prev-next-button { position: absolute; top: 38%; width: 40px; height: 40px; border-radius: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 14px rgba(74, 16, 52, 0.18); border: 0; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; }
#gspb_row-id-gsbp-e903864 .gs-prev-next-button svg { width: 55%; height: 55%; fill: #8f0c54; }
#gspb_row-id-gsbp-e903864 .gs-prev-next-button:hover svg { fill: #b5106a; }
#gspb_row-id-gsbp-e903864 .gs-prev-next-button.previous { left: 4px; }
#gspb_row-id-gsbp-e903864 .gs-prev-next-button.next { right: 4px; }
@media (max-width: 689.98px) {
  #gspb_row-id-gsbp-e903864 .gs-prev-next-button.previous { left: 0; }
  #gspb_row-id-gsbp-e903864 .gs-prev-next-button.next { right: 0; }
}

/* Speciality cards (grid cf727b6 on the speciality pages): the square icon image sat flush in the rounded card and poked
   past the corner arcs, leaving little pink "ears" at the top corners on phones. Clip to the radius; match the icon's white. */
#post-10 .gspb_container-gsbp-cf727b6 > .gspb_container { overflow: hidden; background-color: #fff !important; }


/* Fertility & IVF treatment boxes on phones (client, 2026-11-01): the theme turned each tab into a 250px horizontal-scroll
   grid inside a 251px-wide strip, then scaled the box to 80%, so one small box with 50px of dead padding showed and the
   second (IVF) hid off-screen. Lay them out as a 2-column grid with one fixed box recipe so IUI and IVF match. */
@media (max-width: 767.98px) {
  #post-704 #gspb_row-id-gsbp-8ed0107 > .gspb_row__content,
  #post-704 #gspb_row-id-gsbp-e6fb7fd > .gspb_row__content,
  #post-704 #gspb_row-id-gsbp-0e08346 > .gspb_row__content,
  #post-704 #gspb_row-id-gsbp-42f0644 > .gspb_row__content {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; gap: 12px !important;
    width: 100% !important; max-width: 100% !important; flex: none !important; margin: 0 !important; overflow: visible !important; padding: 0 !important;
  }
  #post-704 #gspb_row-id-gsbp-8ed0107 > .gspb_row__content > div,
  #post-704 #gspb_row-id-gsbp-e6fb7fd > .gspb_row__content > div,
  #post-704 #gspb_row-id-gsbp-0e08346 > .gspb_row__content > div,
  #post-704 #gspb_row-id-gsbp-42f0644 > .gspb_row__content > div {
    width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; transform: none !important; margin: 0 !important;
    padding: 18px 12px 20px !important; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  #post-704 #gspb_row-id-gsbp-8ed0107 > .gspb_row__content > div > .gspb_container,
  #post-704 #gspb_row-id-gsbp-e6fb7fd > .gspb_row__content > div > .gspb_container,
  #post-704 #gspb_row-id-gsbp-0e08346 > .gspb_row__content > div > .gspb_container,
  #post-704 #gspb_row-id-gsbp-42f0644 > .gspb_row__content > div > .gspb_container { width: 100% !important; height: auto !important; }
  #post-704 #gspb_row-id-gsbp-8ed0107 .gspb_iconBox, #post-704 #gspb_row-id-gsbp-e6fb7fd .gspb_iconBox, #post-704 #gspb_row-id-gsbp-0e08346 .gspb_iconBox, #post-704 #gspb_row-id-gsbp-42f0644 .gspb_iconBox { height: auto !important; justify-content: center; margin-bottom: 10px; }
  #post-704 #gspb_row-id-gsbp-8ed0107 .gspb_iconBox__wrapper, #post-704 #gspb_row-id-gsbp-e6fb7fd .gspb_iconBox__wrapper, #post-704 #gspb_row-id-gsbp-0e08346 .gspb_iconBox__wrapper, #post-704 #gspb_row-id-gsbp-42f0644 .gspb_iconBox__wrapper { width: 56px !important; height: 56px !important; }
  #post-704 #gspb_row-id-gsbp-8ed0107 .gspb_iconBox__wrapper img, #post-704 #gspb_row-id-gsbp-e6fb7fd .gspb_iconBox__wrapper img, #post-704 #gspb_row-id-gsbp-0e08346 .gspb_iconBox__wrapper img, #post-704 #gspb_row-id-gsbp-42f0644 .gspb_iconBox__wrapper img { width: 100% !important; height: 100% !important; }
  #post-704 #gspb_row-id-gsbp-8ed0107 .gspb_heading, #post-704 #gspb_row-id-gsbp-e6fb7fd .gspb_heading, #post-704 #gspb_row-id-gsbp-0e08346 .gspb_heading, #post-704 #gspb_row-id-gsbp-42f0644 .gspb_heading { font-size: 15px !important; line-height: 1.3 !important; width: 100% !important; height: auto !important; margin: 0 !important; }
}

/* Homepage carousels on phones (packages, health talks): the theme snaps each card to the start with 6% scroll padding
   while the card carries a -6% margin, so the card sat ~18px left of centre between the arrows. Snap to centre instead. */
@media (max-width: 767.98px) {
  #post-7 .slider-box, #post-7 .slider-box > .gspb_row__content { scroll-padding-inline: 0 !important; }
  #post-7 .slider-box > .gspb_row__content > div { scroll-snap-align: center !important; }
}
@media (max-width: 767.98px) {
  /* Fertility tabs: 32px of inner padding on a phone left the treatment boxes 134px wide */
  #post-704 .wp-block-themeisle-blocks-tabs-item__content { padding: 20px 14px !important; }
}
@media (max-width: 689.98px) {
  /* Speciality grid: the block's phone rule packs the 20px-radius cards 1px apart, so the four rounded corners
     at every junction open a star-shaped hole and the neighbouring 2px borders smear into one thick seam.
     A real gap lets them read as separate tiles, as they do on desktop. */
  #post-7 #gspb_container-id-gsbp-cf727b6.gspb_container,
  #post-10 #gspb_container-id-gsbp-cf727b6.gspb_container { row-gap: 12px; column-gap: 12px; }
}
@media (max-width: 767.98px) {
  /* Speciality pages on phones. The tab panel kept a 300px desktop min-height, so short answers left a blank
     band under the text; the "Have any questions?" box stacked a three-line centred heading beside a two-line
     button inside 35px padding; and the FAQ block carried 60px/40px desktop padding. Tightened into one rhythm:
     40px into the questions box, 56px to the FAQs heading, 40px from the last question to the footer. */
  .reef-split-accordion__content { min-height: 0; }
  #gspb_row-id-gsbp-010ae54 { margin-top: 40px !important; padding: 16px 18px !important; border-radius: 24px !important; }
  #gspb_row-id-gsbp-010ae54 .wp-block-group { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 14px; }
  #gspb_heading-id-gsbp-5ca75a1 { font-size: 20px !important; line-height: 1.25 !important; text-align: left !important; margin: 0 !important; flex: 1 1 auto; min-width: 0; }
  #gspb_heading-id-gsbp-5ca75a1 span { display: none; }
  #gspb_button-id-gsbp-c9d4821 { flex: 0 0 auto; justify-content: flex-end; }
  #gspb_button-id-gsbp-c9d4821 > .gspb-buttonbox { padding: 11px 16px !important; border-radius: 999px !important; white-space: nowrap; line-height: 1.2; }
  #gspb_button-id-gsbp-c9d4821 .gspb-buttonbox-title { white-space: nowrap; font-size: 14px; }
  #gspb_button-id-gsbp-c9d4821 .gspb-buttonbox-icon { margin-left: 8px !important; }
  #gspb_container-id-gsbp-ccad9c6 { padding: 24px 0 8px !important; margin-bottom: 32px !important; }
}
/* The surgical-sperm-retrieval page's "Have any questions?" row was exported without WordPress's flex group wrapper
   (and its per-page nowrap rule), so its heading and button stacked. The wrapper is restored in the content; this is the rule. */
.wp-container-core-group-is-layout-6c531013 { flex-wrap: nowrap; }
@media (max-width: 689.98px) {
  /* Speciality grid on phones: the block scaled every icon to 160px tall, so 16 tiles ran to ~1850px (four and a
     half screens) and labels broke onto one or two lines at random. Compact badge-sized icons, a fixed two-line
     label box so every row's labels sit at the same height, and tighter padding. Tiles stay two-up with the
     same border and corner radius as desktop. */
  #post-7 .gspb_container-gsbp-cf727b6 > .gspb_container,
  #post-10 .gspb_container-gsbp-cf727b6 > .gspb_container { padding: 14px 8px 12px !important; }
  #post-7 .gspb_container-gsbp-cf727b6 .gspb_iconBox,
  #post-10 .gspb_container-gsbp-cf727b6 .gspb_iconBox { display: flex; justify-content: center; margin: 0 !important; }
  #post-7 .gspb_container-gsbp-cf727b6 .gspb_iconBox img,
  #post-10 .gspb_container-gsbp-cf727b6 .gspb_iconBox img { height: 76px !important; width: 76px !important; min-width: 76px !important; margin: 0 !important; }
  #post-7 .gspb_container-gsbp-cf727b6 h3.gspb_heading,
  #post-10 .gspb_container-gsbp-cf727b6 h3.gspb_heading { font-size: 15px !important; line-height: 1.2 !important; margin: 8px 0 0 !important; min-height: 2.4em; display: flex; align-items: center; justify-content: center; text-align: center !important; }
}
/* Mobile drawer: original order (logo, menu, then search + phone + booking), with tighter menu spacing so the whole
   drawer fits a typical phone screen without scrolling (user, 2026-11-03). */
[data-device="mobile"] .ct-panel-content-inner > .ct-header-text .header-action-group { transform: none; }

@media (max-width: 689.98px) {
  /* "Meet Our Specialists" carousel on phones. On a 360px screen the slides were 222px wide inside a 285px theme
     container: the first doctor's name was clipped on the left and any slide whose lines filled the column ran flush
     into the neighbouring slide, which on phones with larger text settings became visible overlap. Slides now use the
     full row width, carry their own side padding, and text can break inside a word rather than spill out. */
  #gspb_row-id-gsbp-e903864 > .gspb_row__content { width: 100% !important; max-width: none !important; padding-inline: 7%; scroll-padding-inline: 7%; gap: 14px; }
  #gspb_row-id-gsbp-e903864 > .gspb_row__content > div { flex-basis: 86% !important; padding: 0 10px !important; box-sizing: border-box; min-width: 0; overflow-wrap: anywhere; overflow: hidden; }
  #gspb_row-id-gsbp-e903864 > .gspb_row__content > div .gspb_heading,
  #gspb_row-id-gsbp-e903864 > .gspb_row__content > div .gspb_text { max-width: 100%; overflow-wrap: anywhere; }
  #gspb_row-id-gsbp-e903864 > .gspb_row__content > div .gspb_heading { font-size: 19px !important; }
  #gspb_row-id-gsbp-e903864 > .gspb_row__content > div .gspb-buttonbox { max-width: 100%; }
}

/* Fertility & IVF tabs (#post-704): WordPress centred the three-card tabs by inserting empty spacer columns that only hide
   on tablet and phone. Above 1024px the spacers take a 230px slot each, the trailing one wraps out of sight, and the
   cards end up shifted right by half a slot. The spacers are empty divs, so hide them and let the row's own
   justify-content:center do the job; card widths already match the four-card tab. The surgical sperm retrieval page has
   the same kind of spacer under its FAQs, adding 160px of nothing on desktop. */
#post-704 .wp-block-themeisle-blocks-tabs .gspb_row__content > .o-hide-on-mobile.o-hide-on-tablet:empty,
#post-1877 .o-hide-on-mobile.o-hide-on-tablet:empty { display: none !important; }

/* Doctor pages: the expertise list is two rows (da2b4b0 and f7f7602). The 1000–1439px two-per-row rule above covered only
   the first, so the client's laptop showed 2 / 1 / 3 staggering. Second row now follows the same rule, and a doctor with
   fewer than six areas no longer keeps an empty third slot. */
/* The two rows (3 + 3 slots) are made to flow as one two-column grid in the 1000–1439px band, so six areas read 2/2/2
   and five read 2/2/1 instead of 2/1/2. Three per row would overflow "Echocardiography" and "Radiofrequency" at 1280px. */
@media (min-width: 1000px) and (max-width: 1439px) {
  #gspb_col-id-gsbp-a572144 { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 8px; }
  #gspb_col-id-gsbp-a572144 > .gspb_heading { grid-column: 1 / -1; }
  #gspb_row-id-gsbp-da2b4b0, #gspb_row-id-gsbp-f7f7602,
  #gspb_row-id-gsbp-da2b4b0 > .gspb_row__content, #gspb_row-id-gsbp-f7f7602 > .gspb_row__content { display: contents; }
  #gspb_row-id-gsbp-da2b4b0 > .gspb_row__content > .gspb_row__col--4,
  #gspb_row-id-gsbp-f7f7602 > .gspb_row__content > .gspb_row__col--4 { width: auto; }
}
#gspb_row-id-gsbp-da2b4b0 > .gspb_row__content > .gspb_row__col--4:empty,
#gspb_row-id-gsbp-f7f7602 > .gspb_row__content > .gspb_row__col--4:empty { display: none; }
/* Women's / Children's / Fertility heroes (shared Otter block e1ca32e1): 120px of padding top and bottom plus a 70px
   headline pushed the "Book Online Consult…" strip below the fold on laptops with ~670px of viewport (client's
   1280x800 Lenovo at 150% scaling). On short desktop viewports the hero tightens so the strip is fully on screen;
   taller screens keep the original hero. */
@media (min-width: 1000px) and (max-height: 800px) {
  /* Hero height follows the viewport: header 157px + strip 117px - 80px overlap = 194px, plus 12px breathing room.
     Floor of 300px keeps the headline intact; the headline itself scales with viewport height so three lines still fit. */
  #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 {
    box-sizing: border-box; min-height: 0 !important; height: clamp(300px, calc(100vh - 206px), 560px) !important;
    padding-top: 32px !important; padding-bottom: 32px !important; display: flex !important; align-items: center !important; overflow: hidden;
  }
  #wp-block-themeisle-blocks-advanced-columns-e1ca32e1 h1 { font-size: clamp(40px, 8vh, 60px) !important; line-height: 1.05 !important; }
}
/* Women's Health speciality grid: 100px icons read oversized in these four-across cards; 72px on desktop (user, 2026-11-03). */
@media (min-width: 1000px) {
  #post-10 .gspb_container-gsbp-cf727b6 .gspb_iconBox img { height: 72px !important; width: 72px !important; min-width: 72px !important; }
}
@media (max-width: 999.98px) {
  /* Drawer spacing: on a 360x740 phone the drawer ran to ~800px (logo 35px gap, 42px menu rows, 35px gap, then the
     search + two phone pills). Trimmed so everything fits without scrolling on common phones. */
  [data-device="mobile"] .ct-panel-content-inner > .site-logo-container { margin-bottom: 14px !important; }
  [data-device="mobile"] .ct-panel-content-inner > .mobile-menu { margin-bottom: 14px !important; }
  [data-device="mobile"] .mobile-menu .ct-menu-link { padding-top: 2px !important; padding-bottom: 2px !important; line-height: 1.4 !important; }
}
/* Homepage (#post-7): the hero is a four-slide carousel and only the first slide carried the block id above, so the
   other three kept the 605px height and the Swiper stayed 605px tall; the booking strip (hero-box, pulled up 120px,
   carousel margin 24px) then ended at 783px on the client's 764px-tall viewport. Same viewport-driven height for all
   four slides: strip bottom = header 157 + carousel + 24 - 120 + 117 = carousel + 178, kept 12px above the fold. */
@media (min-width: 1000px) and (max-height: 800px) {
  #post-7 .cb-slide > .wp-block-themeisle-blocks-advanced-columns {
    box-sizing: border-box; min-height: 0 !important; height: clamp(300px, calc(100vh - 190px), 605px) !important;
    padding-top: 32px !important; padding-bottom: 32px !important; display: flex !important; align-items: center !important; overflow: hidden;
  }
  #post-7 .cb-slide .wp-block-themeisle-blocks-advanced-heading { font-size: clamp(40px, 8vh, 60px) !important; line-height: 1.05 !important; }
}

/* Homepage About row: the 16:9 clip sat in a fixed 400px box, so from ~1400px down the text column
   (3-line heading) ran ~54px below the video. Let the video column stretch to the text column's height
   and anchor the crop to the left edge so the on-screen captions in the walkthrough stay visible. */
#post-7 #gs-video-gsbp-b3f43e3 .gs-video-wrapper video { object-position: left center; }
@media (min-width: 1000px) {
  #post-7 #gspb_col-id-gsbp-68b822c.gspb_row__col--6 { display: flex; flex-direction: column; }
  #post-7 #gs-video-gsbp-b3f43e3 { flex: 1 1 auto; display: flex; flex-direction: column; }
  #post-7 #gs-video-gsbp-b3f43e3 .gs-video-wrapper { position: relative; flex: 1 1 auto; height: auto !important; min-height: 400px; overflow: hidden; }
  #post-7 #gs-video-gsbp-b3f43e3 .gs-video-wrapper video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}