/********************************************************
  HERO LAYOUT – MOBILE
********************************************************/
@media (max-width: 768px) {

  /* Stack hero columns and center content */
  .wp-block-columns.hero-columns {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    align-items: center !important;
  }

  .wp-block-columns.hero-columns .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 26rem;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
  }

  /* Center hero heading on mobile */
  .wp-block-columns.hero-columns .wp-block-column h1 {
    text-align: center !important;
  }

  /* Location pill styling – keeps it from going vertical */
  .hero-location {
    display: inline-block;
    text-align: center;
    padding: 0.75rem 1.5rem;
    max-width: 18rem;
    margin: 0.5rem auto 0;
  }
}

/********************************************************
  HEADER TOP ROW – TAGLINE LEFT, NAV RIGHT
********************************************************/

/* All screen sizes: tagline + nav on one line */
.header-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Keep tagline on the left */
.header-top > *:first-child {
  flex: 1;
  text-align: left;
}

/* Keep nav aligned to the right */
.header-top .wp-block-navigation {
  margin-left: auto;
}

/********************************************************
  TABLET + MOBILE – USE HAMBURGER, HIDE INLINE LINKS
********************************************************/
@media (max-width: 1024px) {

  /* Show hamburger button on the right */
  .header-top .wp-block-navigation__responsive-container-open {
    display: flex;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-top: 0;
    padding-top: 0;
  }

  /* Hide only the inline horizontal nav list in the header bar */
  .header-top .wp-block-navigation__container:not(.wp-block-navigation__responsive-container-content) {
    display: none;
  }
}

/********************************************************
  RESPONSIVE HAMBURGER MENU POPUP – CARD + CLOSE BUTTON
********************************************************/
@media (max-width: 1024px) {

  /* Let the overlay fill the screen but anchor content at the top */
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background: transparent !important;
    display: flex !important;
    justify-content: flex-start !important;  /* top, not center vertically */
    align-items: center !important;          /* center horizontally */
    padding: 0 !important;
    box-shadow: none !important;
    z-index: 9999;
  }

  /* Turn the INNER content into the white card */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    position: relative;
    width: 80% !important;
    max-width: 22rem !important;
    margin: 4rem auto 0 !important;          /* distance from top of screen */
    background: #ffffff !important;
    border-radius: 12px;
    padding: 2.5rem 1.5rem 2rem !important;  /* extra top padding for the X */
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Center the list of nav items inside the card */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1.25rem !important;
    width: 100%;
  }

  /* Ensure each item and link is fully centered */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    width: 100%;
    text-align: center !important;
    display: block;
  }

  /* Put the close "X" inside the card, top-right */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 1rem;
    right: 3.5rem;
    z-index: 10000;
  }
}






/******************************************************
  RESPONSIVE TYPOGRAPHY – MOBILE + TABLET
******************************************************/
@media (max-width: 1024px) {

  /* Paragraphs */
  p {
    font-size: 1rem !important;       /* ~16px */
    line-height: 1.55 !important;
  }

  /* Headings */
  h1 {
    font-size: 2.2rem !important;     /* ~35px */
    line-height: 1.15 !important;
  }

  h2 {
    font-size: 1.75rem !important;    /* ~28px */
    line-height: 1.2 !important;
  }

  h3 {
    font-size: 1.4rem !important;     /* ~22px */
    line-height: 1.25 !important;
  }

  /* Buttons (if they look too tall/wide) */
  .wp-block-button__link {
    font-size: 1rem !important;       /* ~16px */
    padding: 0.6rem 1.2rem !important;
  }
}

/* Mobile-only tightening (very small screens) */
@media (max-width: 600px) {
  p {
    font-size: 0.95rem !important;    /* ~15px */
    line-height: 1.5 !important;
  }

  h1 {
    font-size: 1.9rem !important;     /* ~30px */
  }

  h2 {
    font-size: 1.5rem !important;     /* ~24px */
  }

  h3 {
    font-size: 1.25rem !important;    /* ~20px */
  }
}


/******************************************************
  MOBILE FOOTER NAV – FORCE SINGLE LINE
******************************************************/
@media (max-width: 600px) {

  /* Footer navigation container: no wrapping + centered */
  footer .wp-block-navigation__container {
    display: flex !important;
    flex-wrap: nowrap !important;           /* prevent breaking to second line */
    justify-content: center !important;
    align-items: center !important;
    gap: 0.75rem !important;                /* tighter spacing between items */
  }

  /* Make each footer navigation link fit tighter */
  footer .wp-block-navigation-item a {
    padding: 0 !important;                 /* remove extra padding */
    margin: 0 !important;
    white-space: nowrap !important;        /* prevent individual links from wrapping */
    font-size: 0.65rem !important;         /* slight shrink helps fit nicely */
  }

  /* Keep the footer title ("DREW TIMME THERAPY") unchanged */
  footer p,
  footer h2,
  footer h3 {
    text-align: left !important; /* leave as-is from your screenshot */
  }
}




/******************************************************
  RESPONSIVE SITE TITLE (Non-Homepage Header Only)
******************************************************/

/* Tablet + Mobile */
@media (max-width: 1024px) {
  .header-top .wp-block-site-title {
    font-size: 1.5rem !important;     /* ~28px */
    line-height: 1.15 !important;
  }
}

/* Mobile Only */
@media (max-width: 600px) {
  .header-top .wp-block-site-title {
    font-size: 1rem !important;     /* ~24px */
    line-height: 1 !important;
  }
}




/********************************************************
  TABLET + MOBILE: CENTER HAMBURGER IN HEADER ROW
  (Non-homepage header only, uses Site Title)
********************************************************/
@media (max-width: 1024px) {

  /* Make the entire header wrapper a flex row (it already is, but stabilize it) */
  .header-top {
    display: flex !important;
    align-items: center !important;       /* vertically center children */
  }

  /* Ensure site title does not stretch the row vertically */
  .header-top .wp-block-site-title {
    display: flex;
    align-items: center !important;
  }

  /* Force the hamburger wrapper to match row height + center vertically */
  .header-top .wp-block-navigation__responsive-container-open {
    display: auto !important;
    align-items: center !important;       /* vertical centering */
    justify-content: center !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}


/******************************************************
  MOBILE – REDUCE GAP ABOVE FIRST CONTENT CARD
******************************************************/
@media (max-width: 600px) {

  /* Default: no big margin above the ABOUT card */
  .page-content-wrapper {
    margin-top: 0 !important;
  }

  /* If the parent is still forcing space, nudge the card upward */
  .page-content-wrapper {
    position: relative;
    top: -15rem; 
	 /* adjust: -1rem for less, -2rem for more */
  }
}

/******************************************************
  MOBILE – REMOVE HORIZONTAL SCROLL / RIGHT GAP
******************************************************/
@media (max-width: 782px) {
  html, body {
    overflow-x: hidden !important;
  }
}