/* Overrides to ensure full offline hosting and exact spacing */
/* 1) Font alias: Map 'Manrope' to local Inter font files so any 'Manrope' usages resolve offline. */
@font-face {
  font-family: 'Manrope';
  src: url('../assets/wp-content/themes/blockskit-medical-health/assets/fonts/inter/Inter-Light.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/wp-content/themes/blockskit-medical-health/assets/fonts/inter/Inter-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/wp-content/themes/blockskit-medical-health/assets/fonts/inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/wp-content/themes/blockskit-medical-health/assets/fonts/inter/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/wp-content/themes/blockskit-medical-health/assets/fonts/inter/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/wp-content/themes/blockskit-medical-health/assets/fonts/inter/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/wp-content/themes/blockskit-medical-health/assets/fonts/inter/Inter-Bold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* 2) Spacing corrections to match WordPress page exactly */
/* Get in Touch heading spacing */
.blockart-heading.blockart-heading-b05a775a.is-large {
  /* Ensure consistent top/bottom spacing */
  margin-top: 60px !important;
  margin-bottom: 30px !important;
}

/* Contact section block spacing */
.blockart-section.blockart-section-6359308a {
  margin: 110px 0 !important; /* as in WP inline styles */
}

/* Where are we heading and map spacing */
.blockart-section.blockart-section-7573d45f {
  margin: 60px 0 20px !important;
}
.blockart-section.blockart-section-78e03b16 {
  margin: 100px 0 0 0 !important; /* as in WP inline styles */
}

/* 3) Hero image white circular backdrop (to match WP header side) */
/* Target the left column group within #home-sec that wraps the hero image */
#home-sec {
  position: relative;
  overflow: hidden; /* ensure circle does not bleed into next sections */
}
#home-sec .wp-block-column.is-vertically-aligned-bottom .wp-block-group.has-background {
  position: relative;
}
#home-sec .wp-block-column.is-vertically-aligned-bottom .wp-block-group.has-background::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: #ffffff; /* white circle */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* perfectly centered behind image */
  z-index: 0;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
#home-sec .wp-block-column.is-vertically-aligned-bottom figure.wp-block-image img {
  position: relative;
  z-index: 1; /* ensure image sits above the circle */
}

/* Reduce top padding in the hero section while keeping breathing room below nav */
#home-sec {
  padding-top: 48px !important;
  /* Manual adjustment for hero image bottom nudge (positive pushes down) */
  --hero-image-nudge: 0px;
}

/* Ensure the left hero image touches the bottom edge of the purple section */
#home-sec .wp-block-columns { align-items: stretch; }
#home-sec .wp-block-column.is-vertically-aligned-bottom {
  display: flex;
  align-items: flex-end; /* push inner content to the bottom of the column */
}
#home-sec .wp-block-column.is-vertically-aligned-bottom > .wp-block-group {
  align-self: flex-end;
}
#home-sec .wp-block-column.is-vertically-aligned-bottom figure.wp-block-image { margin: 0; }
#home-sec .wp-block-column.is-vertically-aligned-bottom figure.wp-block-image img.wp-image-3009 {
  display: block;
  margin: 0;
  transform: translateY(var(--hero-image-nudge)); /* allow manual fine-tune */
}

/* Responsive adjustments for the hero circle */
@media (max-width: 1200px) {
  #home-sec .wp-block-column.is-vertically-aligned-bottom .wp-block-group.has-background::before {
    width: 460px;
    height: 460px;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 992px) {
  #home-sec .wp-block-column.is-vertically-aligned-bottom .wp-block-group.has-background::before {
    width: 400px;
    height: 400px;
    transform: translate(-50%, -52%); /* slight upward nudge to match WP */
  }
}
@media (max-width: 768px) {
  #home-sec .wp-block-column.is-vertically-aligned-bottom .wp-block-group.has-background::before {
    width: 320px;
    height: 320px;
    transform: translate(-50%, -52%);
  }
  /* Offset content below sticky navbar on mobile */
  #home-sec {
    margin-top: 0 !important; /* remove gap under sticky nav on mobile */
    scroll-margin-top: 80px;     /* keep better in-page anchor positioning */
  }
  /* Move the text content down for readability on mobile */
  #home-sec .wp-block-column.is-vertically-aligned-center {
    padding-top: 24px !important; /* modest breathing room under nav */
  }
  /* Center CTA buttons on mobile */
  #home-sec .wp-block-buttons.is-layout-flex {
    justify-content: center !important;
  }
  /* Fix mobile heading readability for "D-Homecare Services" */
  #home-sec h1.wp-block-heading.has-xxxx-large-font-size {
    font-size: clamp(26px, 7.5vw, 34px) !important;
    line-height: 1.2 !important;
    word-break: break-word;
    hyphens: auto;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0; /* keep clean tracking on small screens */
  }
  /* Center intro paragraphs under the heading */
  #home-sec p.has-medium-font-size,
  #home-sec p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 32ch;
  }
  /* Add breathing room below CTAs */
  #home-sec .wp-block-buttons + .wp-block-buttons {
    margin-top: 8px !important;
  }
  /* Improve anchor jumps for common sections under sticky nav */
  #home-sec, #about_us, #contact-sec, #footer-sec {
    scroll-margin-top: 80px;
  }
}
/* Ultra-small devices: ensure heading fits comfortably */
@media (max-width: 360px) {
  #home-sec h1.wp-block-heading.has-xxxx-large-font-size {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
}
@media (max-width: 480px) {
  #home-sec .wp-block-column.is-vertically-aligned-bottom .wp-block-group.has-background::before {
    width: 260px;
    height: 260px;
    transform: translate(-50%, -50%);
  }
  /* Slightly larger offset for shorter viewports */
  #home-sec { margin-top: 0 !important; }
  #home-sec .wp-block-column.is-vertically-aligned-center { padding-top: 24px !important; }
}

/* Hide hero image and circle on mobile for cleaner header */
@media (max-width: 768px) {
  #home-sec .wp-block-column.is-vertically-aligned-bottom {
    display: none !important;
  }
  #home-sec .wp-block-column.is-vertically-aligned-bottom .wp-block-group.has-background::before {
    content: none !important;
  }
  /* Ensure both CTA button groups are centered on mobile */
  #home-sec .wp-block-group.is-content-justification-left {
    justify-content: center !important;
  }
  #home-sec .wp-block-buttons {
    width: 100%;
    justify-content: center !important;
    gap: 12px;
  }
  #home-sec .wp-block-button {
    margin: 0;
  }
  #home-sec .wp-block-button .wp-block-button__link {
    display: inline-block;
    text-align: center;
  }
}

/* Stack CTA buttons vertically on very small screens */
@media (max-width: 420px) {
  #home-sec .wp-block-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  #home-sec .wp-block-button {
    width: 100%;
    max-width: 320px; /* keep a nice width on small phones */
  }
  #home-sec .wp-block-button .wp-block-button__link {
    width: 100%;
  }
}

/* Viewport calibrations */
/* Approx. 1440×900 */
@media (min-width: 1400px) and (max-width: 1500px) {
  #home-sec .wp-block-column.is-vertically-aligned-bottom .wp-block-group.has-background::before {
    width: 500px;
    height: 500px;
    transform: translate(-50%, -51%);
  }
}
/* Approx. 1366×768 */
@media (min-width: 1340px) and (max-width: 1380px) {
  #home-sec .wp-block-column.is-vertically-aligned-bottom .wp-block-group.has-background::before {
    width: 480px;
    height: 480px;
    transform: translate(-50%, -51%);
  }
}

/* 4) Responsive Google Map (Contact section) */
/* Target the map iframe inside the map section (.blockart-section-78e03b16) */
.blockart-section.blockart-section-78e03b16 iframe {
  width: 100% !important;           /* override fixed width="2560" */
  max-width: 100% !important;
  display: block;
  border: 0;
  aspect-ratio: 16 / 9;             /* keep proportions nicely */
  height: auto;                      /* let aspect-ratio determine height */
  border-radius: 0;                  /* squared corners */
}

/* Give the map a reasonable height on very short viewports */
@media (max-height: 600px) {
  .blockart-section.blockart-section-78e03b16 iframe {
    aspect-ratio: auto;              /* fall back */
    height: 55vh !important;
    min-height: 280px;
  }
}

/* Fine-tune heights for common mobile sizes */
@media (max-width: 768px) {
  .blockart-section.blockart-section-78e03b16 iframe {
    aspect-ratio: 4 / 3;             /* taller for better legibility */
    min-height: 340px;               /* ensure enough tap area */
  }
}

@media (max-width: 420px) {
  .blockart-section.blockart-section-78e03b16 iframe {
    aspect-ratio: 1 / 1;             /* square-ish for very narrow phones */
    min-height: 360px;               /* maintain usable viewport */
  }
}

/* Ensure the column/container doesn't constrain the map awkwardly */
.blockart-section.blockart-section-78e03b16 .blockart-column-inner,
.blockart-section.blockart-section-78e03b16 .blockart-column {
  width: 100% !important;
}

/* Space before footer */
#footer-sec {
  margin-top: 48px !important; /* adjust as needed */
  scroll-margin-top: 80px;     /* better in-page anchor positioning */
}

/* Ensure anchor targets are not hidden under the header on jump */
#home-title,
#who-we-are,
#services,
#contact-title {
  scroll-margin-top: 80px;
}

/* Smooth scrolling for in-page anchors */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Sticky navbar */
#nav_bar {
  position: sticky;
  top: 0;
  z-index: 1000; /* keep above content */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Mobile-only header hero image above nav */
#mobile-header-hero { display: none; }
@media (max-width: 768px) {
  #mobile-header-hero { display: block; }
  #mobile-header-hero img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Mobile-only hero media inside #home-sec (image appears above title/buttons on mobile) */
.mobile-hero-media { display: none; }
@media (max-width: 768px) {
  .mobile-hero-media {
    display: block;
    margin: 0 0 12px 0; /* add breathing room below the image on mobile */
  }
  .mobile-hero-media img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Ensure ancestor containers don't break sticky positioning */
.wp-site-blocks > header,
.wp-site-blocks {
  overflow: visible !important;
}

/* Back-to-top button: hidden by default, visible after scroll */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom) + 12px);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #6a0dad; /* match site accent */
  color: #ffffff; /* arrow uses currentColor */
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  text-decoration: none;
  z-index: 1100; /* above sticky header */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
.back-to-top:hover { filter: brightness(1.05); }
.back-to-top:active { transform: translateY(1px); }
.back-to-top:focus { outline: 2px solid #ffffff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

@media (min-width: 992px) {
  .back-to-top { width: 52px; height: 52px; }
}

@media (max-width: 420px) {
  .back-to-top { right: 12px; width: 42px; height: 42px; }
}

@media print {
  .back-to-top { display: none !important; }
}

#footer-sec .wp-block-columns {
  padding-top: 34px;
}
@media (max-width: 768px) {
  #footer-sec .wp-block-columns {
    padding-top: 26px;
  }
  /* Add vertical spacing between stacked footer columns */
  #footer-sec .wp-block-columns > .wp-block-column { margin-top: 16px; }
  #footer-sec .wp-block-columns > .wp-block-column:first-child { margin-top: 0; }
  /* Extra space before the Follow us column (3rd) */
  #footer-sec .wp-block-columns > .wp-block-column:nth-child(3) { margin-top: 24px; }
}

/* Footer section titles: bold only the first heading paragraph in each column */
#footer-sec .wp-block-column > p.has-text-align-center:first-of-type {
  font-weight: 700;
}

/* Footer Pages links: horizontal layout with spacing */
#footer-sec .wp-block-columns > .wp-block-column:nth-child(2) .wp-block-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
#footer-sec .wp-block-columns > .wp-block-column:nth-child(2) .wp-block-group p {
  margin: 0;
}

/* Contact section: adjust padding on the right column content wrapper */
.blockart-section-6359308a .blockart-column-28e5a6c4 .blockart-column-inner.justify-center-md.align-center-md {
  padding: 72px 30px !important;
}

/* Contact details: spacing between "D-Homecare Services" and address */
.blockart-paragraph.blockart-paragraph-d683d975 {
  margin-top: 1px !important; /* override the -30px inline margin */
}

/* Small purple underline for H2 titles */
h2::after,
.blockart-heading::after {
  content: '';
  display: block;
  width: 48px;          /* small line */
  height: 3px;          /* line thickness */
  background: #9313d0;  /* site purple */
  margin: 6px auto 0;   /* space above and center under text */
  border-radius: 2px;   /* soften edges */
}

/* Title colors: dark purple */
#who-we-are,
#contact-title,
#about_us,
#services {
  color: #7f0fcf !important; /* dark purple consistent with site accents */
}

.footer-copy {
  font-size: 16px;          /* or 0.75rem */
  line-height: 1.4;
  color: #ffffff;
  letter-spacing: 0.02em;
  margin-top: 24px;         /* bring it down slightly by default */
}

/* Footer copyright sizing and spacing */
@media (max-width: 640px) {
  .footer-copy {
    font-size: 12px;       /* smaller on mobile for better hierarchy */
    line-height: 1.45;
    margin-top: 28px;      /* more breathing room below Pages links on mobile */
  }
}
@media (min-width: 641px) and (max-width: 1200px) {
  .footer-copy { font-size: 14px; margin-top: 22px; }
}

/* Compassionate care section styling */
.blockart-section-compassionate-care {
  margin: 80px 0 !important;
}

.blockart-section-compassionate-care .blockart-section-inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Image column - 50% width */
.blockart-column-compassionate-image {
  flex: 0 0 50%;
  max-width: 50%;
}

/* Text column - 50% width with centered content */
.blockart-column-compassionate-text {
  flex: 0 0 50%;
  max-width: 50%;
}

.blockart-column-compassionate-text .blockart-column-inner {
  padding: 40px 30px;
  text-align: center;
}

/* Heading styling */
.blockart-heading-compassionate {
  color: #7f0fcf !important;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

/* Paragraph styling */
.blockart-paragraph-compassionate {
  color: #333;
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}

/* Image styling */
.blockart-image-compassionate img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Why Us: text to the right of wp-image-3006 */
.whyus-image-row {
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
}

.whyus-image-row-text {
  flex: 0 1 220px;
  max-width: 220px;
  padding-right: 6px;
}

.whyus-image-row-text p {
  font-size: 16px;
  color: #7f0fcf;
  letter-spacing: 0.01em;
}

.whyus-figure-with-caption {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 256px;
}

.whyus-figure-with-caption.whyus-figure-with-caption-3001 {
  max-width: 138px;
}

.whyus-image-caption {
  margin-top: 10px;
  padding: 0 6px;
  text-align: center;
}

.whyus-image-caption p {
  font-size: 16px;
  color: #7f0fcf;
  letter-spacing: 0.01em;
}

.whyus-images-row {
  flex-wrap: wrap;
}

.whyus-bottom-caption {
  flex: 0 0 100%;
  margin-top: 10px;
  padding-left: 0;
  text-align: left;
}

.whyus-bottom-caption p {
  font-size: 16px;
  color: #7f0fcf;
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  .whyus-image-row {
    flex-wrap: wrap;
  }

  .whyus-image-row-text {
    max-width: 100%;
    padding-left: 12px;
  }

  .whyus-image-row-text p {
    font-size: 16px;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .blockart-section-compassionate-care .blockart-section-inner {
    flex-direction: column;
    gap: 30px;
  }
  
  .blockart-column-compassionate-image,
  .blockart-column-compassionate-text {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .blockart-heading-compassionate {
    font-size: 2rem;
  }
  
  .blockart-paragraph-compassionate {
    font-size: 1.1rem;
  }
}

/* Mobile-specific layout for Why Us section at 446x664 and below */
@media (max-width: 446px) {
  .whyus-images-row {
    display: none !important;
  }
  
  .whyus-image-row {
    display: none !important;
  }
  
  /* Also hide the first image row with wp-image-3006 */
  .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-1b11d160 {
    display: none !important;
  }
  
  .whyus-mobile-replacement {
    display: block !important;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .whyus-mobile-replacement img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
  }
}

/* Restore original layout above 446px */
@media (min-width: 447px) {
  .whyus-images-row {
    display: flex !important;
  }
  
  .whyus-image-row {
    display: flex !important;
  }
  
  /* Also restore the first image row with wp-image-3006 */
  .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-1b11d160 {
    display: flex !important;
  }
  
  .whyus-mobile-replacement {
    display: none !important;
  }
}

@media (min-width: 769px) {
  #home-title { scroll-margin-top: 120px; }
}


  .whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 90px; /* leaves room above the Back-to-Top button */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #6a0dad; /* brand purple */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    z-index: 1000;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.28); }
  /* Hide inline SVG and show provided icon inside the circle */
  .whatsapp-float svg { display: none !important; }
  .whatsapp-float::before {
    content: "";
    width: 28px;
    height: 28px;
    background: url('../assets/wp-content/uploads/2025/09/whatsapp%20icon.svg') center/contain no-repeat;
    display: block;
  }
  @media (max-width: 640px) {
    .whatsapp-float { right: 16px; bottom: 80px; width: 52px; height: 52px; }
  }
  /* Desktop/tablet: hide standalone WhatsApp icon; Mobile: show icon and hide widget */
  @media (min-width: 641px) {
    .whatsapp-float { display: none !important; }
  }
  @media (max-width: 640px) {
    #chat-widget-wa { display: none !important; }
    /* Hide WA button by default on mobile; show when body has .wa-visible */
    .whatsapp-float { display: none !important; }
    body.wa-visible .whatsapp-float { display: flex !important; }
  }

  /* Very small screens: align WhatsApp button with back-to-top right offset */
  @media (max-width: 420px) {
    .whatsapp-float { right: 12px; }
  }

/* Near footer: add white outline to floating controls to improve contrast */
body.near-footer .back-to-top {
  outline: 2px solid #ffffff;
  outline-offset: 0;
}
body.near-footer #chat-widget-wa > div {
  outline: 2px solid #ffffff;
  outline-offset: 0;
  border-radius: 20px; /* match widget radius */
}
body.near-footer .whatsapp-float {
  outline: 2px solid #ffffff;
  outline-offset: 0;
}

/* Responsive contact phone number */
@media (min-width: 359px) {
  .contact-line .phone-number-wrapper br {
    display: none;
  }
  .contact-line .phone-number-wrapper::before {
    content: "  ";
    color: white;
  }
}