/*
Theme Name: Templazee Clinic
Theme URI: https://templazee.com/theme/templazee-clinic/
Template: templazee
Author: templazee
Author URI: https://templazee.com/
Description: Templazee Clinic is a specialized child theme of the Templazee Full Site Editing (FSE) WordPress theme, crafted specifically for medical professionals, clinics, hospitals, and healthcare-related websites. Built with the modern block-based Full Site Editing approach, Templazee Clinic allows for complete customization of every part of your site — from headers to footers — with a clean, professional design tailored for medical services. This child theme inherits all the core functionalities and performance benefits of the Templazee parent theme while providing a healthcare-focused layout and design system. Whether you run a private clinic, dental office, or wellness center, Templazee Clinic offers a user-friendly experience, mobile responsiveness, and compatibility with essential plugins to elevate your online presence.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.0
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: templazee-clinic
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, threaded-comments, translation-ready, wide-blocks, block-styles, blog, portfolio, news
*/

/* =========================================================================
   MOBILE TOGGLE MENU  (hamburger -> full-screen brand overlay)
   Pairs with the JS toggle in functions.php (native interactivity module is
   missing on these installs, so the JS makes the hamburger functional).
   Brand color: #2a2a60
   ========================================================================= */
@media screen and (max-width: 781px) {
  /* force the native hamburger to show, hide the inline nav */
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
    color: #2a2a60 !important;
    font-size: 26px !important;
    padding: 4px !important;
  }
  .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
    display: none !important;
  }

  /* open overlay: full-screen brand panel */
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100% !important; max-width: 100vw !important;
    background-color: #2a2a60 !important;
    padding: 76px 22px 32px !important;
    z-index: 100000 !important;
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    overflow-y: auto !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content { width: 100% !important; max-width: 100% !important; background: transparent !important; padding: 0 !important; align-items: stretch !important; }
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100% !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    padding: 16px 0 !important;
    display: block !important;
    width: 100% !important;
    justify-content: center !important;
  }
  /* close (X) button */
  .wp-block-navigation__responsive-container-close {
    color: #ffffff !important;
    top: 24px !important;
    right: 22px !important;
  }
  .wp-block-navigation__responsive-container-close svg {
    width: 30px !important; height: 30px !important; fill: #ffffff !important;
  }
}

/* ===== Static-nav mobile overlay (inner pages, injected hamburger) ===== */
.spfm-mnav-open, .spfm-mnav-close { display: none; }
@media screen and (max-width: 781px) {
  header .spfm-static-nav .spfm-mnav-open {
    display: inline-flex !important; flex-direction: column; justify-content: center; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 6px;
  }
  header .spfm-static-nav .spfm-mnav-open span { display: block; width: 26px; height: 3px; background: #2a2a60; border-radius: 2px; }
  header .spfm-static-nav:not(.spfm-nav-open) > .wp-block-navigation__container { display: none !important; }
  header .spfm-static-nav.spfm-nav-open .spfm-mnav-open { display: none !important; }
  header .spfm-static-nav.spfm-nav-open {
    position: fixed !important; inset: 0 !important; background: #2a2a60 !important; z-index: 100000 !important; padding: 76px 22px 32px !important; text-align: left !important;
  }
  header .spfm-static-nav.spfm-nav-open > .wp-block-navigation__container {
    display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; justify-content: flex-start !important; flex-wrap: nowrap !important;
  }
  header .spfm-static-nav.spfm-nav-open .wp-block-navigation-item { width: 100% !important; text-align: center !important; border-bottom: 1px solid rgba(255,255,255,0.2) !important; }
  header .spfm-static-nav.spfm-nav-open .wp-block-navigation-item a { color: #ffffff !important; font-size: 19px !important; font-weight: 500 !important; padding: 16px 0 !important; display: block !important; width: 100% !important; }
  header .spfm-static-nav.spfm-nav-open .spfm-mnav-close {
    display: block !important; position: absolute !important; top: 18px; right: 22px; background: none; border: none; color: #ffffff; font-size: 38px; line-height: 1; cursor: pointer;
  }
}

/* =========================================================================
   MOBILE: keep front-page section content off the screen edges
   Section wrappers (Why Choose Us, Services, section-four, Before & After)
   only carry padding-top/bottom (80px) with no horizontal padding, so on
   mobile the content sat flush against the screen edge. Full-width colored
   backgrounds stay edge-to-edge; only the inner content is inset.
   Header/hero use padding-top:100px, so they are NOT matched here.
   ========================================================================= */
@media screen and (max-width: 781px) {
  /* Both spellings: patterns write "padding-top:80px", PHP page templates
     (page-about / page-custom / page-testimonials) write "padding-top: 80px". */
  .wp-block-group[style*="padding-top:80px"],
  .wp-block-group[style*="padding-top: 80px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Before & After: drop the 80% content cap and use full width + padding,
     so the comparison cards are no longer squeezed into a narrow column. */
  .before-after-section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .before-after-section > * {
    max-width: 100% !important;
  }
}

/* =========================================================================
   SERVICES / DOCTORS / TESTIMONIALS PAGES - MOBILE side padding.
   These PHP page templates wrap content in a <section style="padding:80px 0">
   (shorthand = zero horizontal padding) plus a .container div that has no CSS
   at all in this theme (no max-width, no padding), so headings and body text
   ran flush against the screen edge. The testimonials banner/CTA bands use
   padding-top:60px, so they need their own match.
   Full-width backgrounds stay edge-to-edge; only inner content is inset.
   ========================================================================= */
@media screen and (max-width: 781px) {
  /* services/doctors handled by the .container rule below (all widths) */
  .page-template-page-testimonials .wp-block-group[style*="padding-top: 60px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* =========================================================================
   SERVICES / DOCTORS - content width on DESKTOP.
   These templates wrap content in <div class="container">, but .container has
   no CSS in this theme, so the section ran full-bleed and the label/heading/
   cards sat flush at left:0 on desktop (and touched the edge at any width
   above the 781px mobile breakpoint).
   Match the header's content box exactly - its wrapper is
   max-width:1280px; padding:0 20px - so the services content aligns with the
   site title / nav. 20px each side at all widths keeps it off the edge on
   mobile too.
   ========================================================================= */
.spfm-page-services .container,
.spfm-page-doctors .container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* =========================================================================
   ABOUT PAGE - MOBILE: stack the Mission/Vision/Values cards vertically.
   page-about.php:258 hardcodes grid-template-columns:repeat(3,1fr) with no
   mobile rule (every other grid in the theme has one), so the 3 cards forced
   the page ~223px wider than the viewport and caused horizontal scrolling.
   ========================================================================= */
@media screen and (max-width: 768px) {
  .page-template-page-about div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}