/*
Theme Name: QLC Child
Theme URI: https://qualitylifechiropractic.com
Description: QLC child theme for Twenty Twenty-Five with Tailwind + design tokens
Author: Sam Nave
Template: twentytwentyfive
Version: 1.0.0
Text Domain: qlc-child
*/ 
/*=== Header Guard: prevent Page List takeover === */
header .wp-block-page-list {
  display: none !important;
  visibility: hidden !important;
}
/* Sticky header polish */
.qlc-header { box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.qlc-header a:focus { outline: 2px solid var(--qlc-teal); outline-offset: 2px; }

/* WordPress navigation overlay panel readability */
.wp-block-navigation__responsive-container.is-menu-open { backdrop-filter: blur(8px); }
/* =========================================================
   QLC ADA Compliance Patch – Global focus & helpers
   ========================================================= */

/* Respect user's reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Highly visible focus ring for keyboard users */
:focus-visible {
  outline: 3px solid #25B1CE;      /* qlc-teal */
  outline-offset: 2px;
}

/* Make sure buttons/links without obvious borders still show focus */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 177, 206, .35);
}

/* Improve skip link usability if Tailwind is not present for any reason */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip-to-content:focus,
.skip-to-content:active {
  position: absolute;
  left: 0.5rem; top: 0.5rem;
  width: auto; height: auto;
  z-index: 9999;
}

/* Ensure underlines are visible and accessible */
a { text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* =========================================================
   QLC Home Layout + Sections
   ========================================================= */
.qlc-home {
  --qlc-teal:#25B1CE;
  --qlc-navy:#274D6F;
  --qlc-mint:#40DC9B;
  --qlc-sky:#E8F7FB;
  --shadow-soft:0 10px 30px rgba(39,77,111,.08);
  --border:1px solid rgba(39,77,111,.10);
  --hero-border-radius:48px;
  position:relative;
}
.qlc-home *,
.qlc-home *::before,
.qlc-home *::after {
  box-sizing:border-box;
}
.qlc-home .container {
  max-width:72rem;
  margin:0 auto;
  padding:0 1rem;
  width:100%;
}
.qlc-home .section {
  padding:3rem 0;
}
@media (min-width:640px) {
  .qlc-home .section { padding:4rem 0; }
}
.qlc-home h1,
.qlc-home h2,
.qlc-home h3 {
  color:var(--qlc-navy);
  margin:0;
}
.qlc-home p {
  color:#475569;
  margin:0;
}
.qlc-home .grid {
  display:grid;
  gap:1.25rem;
}
.qlc-home .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.qlc-home .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.qlc-home .grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1024px) {
  .qlc-home .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .qlc-home .grid-2,
  .qlc-home .grid-3,
  .qlc-home .grid-4 { grid-template-columns:1fr; }
}
.qlc-home .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.65rem 1rem;
  border-radius:.7rem;
  font-weight:700;
  line-height:1;
  gap:.5rem;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
  border:2px solid transparent;
  text-decoration:none;
}
.qlc-home .btn-primary {
  background:var(--qlc-teal);
  color:#fff;
  box-shadow:0 6px 0 #1a91a9;
}
.qlc-home .btn-primary:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 0 #1a91a9;
}
.qlc-home .btn-outline {
  border-color:var(--qlc-navy);
  color:var(--qlc-navy);
  background:#fff;
}
.qlc-home .btn-outline:hover {
  background:var(--qlc-sky);
}
.qlc-home .card {
  border:var(--border);
  border-radius:.9rem;
  background:#fff;
  box-shadow:var(--shadow-soft);
  padding:1rem;
}
.qlc-home .chip {
  display:inline-grid;
  place-items:center;
  height:2.5rem;
  width:2.5rem;
  border-radius:.6rem;
  background:rgba(37,177,206,.15);
  color:var(--qlc-teal);
  font-size:1.05rem;
}

/* Hero */
.qlc-home #hero {
  background:transparent;
  padding:0;
}
.qlc-home #hero .hero-shell {
  border-radius:var(--hero-border-radius);
  background:linear-gradient(135deg,var(--qlc-sky) 0%,#ffffff 60%,#ffffff 100%);
  padding:clamp(2rem,5vw,3rem);
  border:var(--border);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.qlc-home #hero .hero-content {
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.qlc-home #hero h1 {
  font-weight:800;
  font-size:clamp(2rem,5vw,3.5rem);
  line-height:1.1;
}
.qlc-home #hero .lead {
  margin-top:1rem;
  font-size:clamp(1rem,2vw,1.1rem);
  max-width:40rem;
}
.qlc-home #hero .hero-actions {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:1.1rem;
}
.qlc-home #hero .hero-panel {
  width:100%;
  aspect-ratio:16/9;
  border:var(--border);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border-radius:32px;
  margin-top:2rem;
}
.qlc-home #hero .hero-panel img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.qlc-home .stats {
  margin-top:1.5rem;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
  max-width:48rem;
  margin-left:auto;
  margin-right:auto;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:.7rem;
  padding:.75rem;
  box-shadow:var(--shadow-soft);
  text-align:center;
}
.qlc-home .stat-num {
  font-weight:800;
  color:var(--qlc-navy);
  font-size:1.5rem;
}
.qlc-home .stat-cap {
  color:#475569;
  font-size:.9rem;
}

/* Section backgrounds */
.qlc-home #difference { background:rgba(64,220,155,.10); }
.qlc-home #programs { background:var(--qlc-sky); }
.qlc-home #testimonials { background:var(--qlc-sky); }

/* Services grid adjustments */
.qlc-home #services,
.qlc-home #services * {
  text-align:left !important;
}
.qlc-home #services .svc-grid {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:1rem !important;
  justify-items:stretch !important;
  align-items:stretch !important;
}
@media (max-width:1024px) {
  .qlc-home #services .svc-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:640px) {
  .qlc-home #services .svc-grid { grid-template-columns:1fr !important; }
}
.qlc-home #services .card {
  padding:.9rem !important;
  border-radius:.8rem !important;
}
.qlc-home #services h3 { font-size:1.05rem !important; }
.qlc-home #services p {
  font-size:.95rem !important;
  line-height:1.45 !important;
}
.qlc-home #services .btn {
  justify-content:flex-start !important;
  padding-left:0 !important;
  font-size:1rem !important;
}
.qlc-home #services .chip {
  height:2.35rem !important;
  width:2.35rem !important;
  font-size:1rem !important;
  border-radius:.55rem !important;
}

/* Programs */
.qlc-home #programs .card {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}

/* Why section tweaks */
.qlc-home #why {
  margin-top:2rem !important;
}
.qlc-home #why .grid {
  align-items:flex-start !important;
}
.qlc-home #why .container > .grid > *:nth-child(2) {
  margin-top:2.2rem !important;
}
.qlc-home #why .card {
  min-height:auto !important;
  height:auto !important;
  padding:1rem 1rem !important;
}
.qlc-home #why .grid > .card {
  margin-top:.6rem !important;
}
.qlc-home #why .rounded-2xl {
  margin-top:2.2rem !important;
  padding:1.5rem 1.25rem !important;
}
.qlc-home #why .text-center div {
  margin-bottom:0.25rem !important;
}

/* Case studies */
.qlc-home #case-studies .cs-grid {
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1024px) {
  .qlc-home #case-studies .cs-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .qlc-home #case-studies .cs-grid { grid-template-columns:1fr; }
}
.qlc-home #case-studies .cs-card {
  display:flex;
  flex-direction:column;
  min-height:18rem;
}
.qlc-home #case-studies .cs-eyebrow {
  color:var(--qlc-teal);
  font-weight:800;
  margin-bottom:.45rem;
  font-size:1.05rem;
}
.qlc-home #case-studies .cs-link {
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--qlc-navy);
  font-weight:800;
  text-decoration:none;
}
.qlc-home #case-studies .cs-link:hover {
  text-decoration:underline;
}

/* FAQ */
.qlc-home #faq details {
  border-radius:.9rem;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:var(--shadow-soft);
  padding:1rem;
}
.qlc-home #faq summary {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  list-style:none;
  cursor:pointer;
}
.qlc-home #faq summary::-webkit-details-marker {
  display:none;
}
.qlc-home #faq summary .plus {
  margin-left:1rem;
  color:var(--qlc-teal);
  font-weight:800;
  line-height:1;
  transition:transform .15s ease;
}
.qlc-home #faq details[open] summary .plus {
  transform:rotate(45deg);
}

/* Testimonials embed tweaks */
.qlc-home #testimonials .gmb-reviews-slot > div:first-child {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:.5rem !important;
  border-bottom:1px solid #f3f4f6 !important;
  padding-bottom:.75rem !important;
  margin-bottom:.75rem !important;
}
.qlc-home #testimonials .gmb-reviews-slot .btn.btn-primary {
  display:inline-flex !important;
  margin:.25rem auto 0 !important;
  width:auto !important;
  text-align:center !important;
  padding:.6rem 1.1rem !important;
  border-radius:.8rem !important;
  font-size:1rem !important;
  box-shadow:0 3px 0 #1a91a9 !important;
}
.qlc-home #testimonials .gmb-reviews-slot .btn.btn-primary:hover {
  transform:translateY(-1px) !important;
  box-shadow:0 4px 0 #1a91a9 !important;
}
.qlc-home #testimonials .card > div > a.btn.btn-primary {
  margin:0 !important;
  width:auto !important;
}

/* Sticky/floating CTAs */
.qlc-home .mobile-cta {
  position:fixed;
  left:0;
  right:0;
  bottom:.75rem;
  z-index:40;
  padding:0 1rem;
  display:none;
}
@media (max-width:767px) {
  .qlc-home .mobile-cta { display:block; }
}
.qlc-home .mobile-cta .bar {
  max-width:28rem;
  margin:0 auto;
  border-radius:1rem;
  box-shadow:var(--shadow-soft);
  background:#fff;
  border:var(--border);
  padding:.5rem;
  display:flex;
  gap:.5rem;
  align-items:center;
  justify-content:space-between;
}
.qlc-home .floating-book {
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:40;
  display:none;
}
@media (min-width:768px) {
  .qlc-home .floating-book { display:flex; }
}
/*
 * Custom Styles for the QLC Blocks
 *
 * NOTE: For full Block Theme compatibility, consider moving these styles
 * into the main theme's assets or using a Styles block in the Site Editor
 * to add custom CSS, though this works fine for a child theme template.
 */

/* Hero Image Card Styling */
.qlc-hero-card {
    /* Ensures a shadow or distinct look if needed */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    /* Hides any overflow outside the rounded corners */
    overflow: hidden;
}

/* Ensure the image takes up the full space inside the card */
.qlc-hero-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Ensure the hero section itself has the correct layout/styling */
.qlc-home-hero {
    /* You might want a custom breakpoint for column stacking here */
    /* Example: Force column stacking on smaller desktop screens */
    /* @media (max-width: 900px) {
        .wp-block-columns {
            flex-direction: column !important;
        }
    } */
}
/* --- Styles for Stats Bar Pattern --- */
.stats {
    text-align: center;
}

.stat-num {
    /* Use your defined dark color for prominence */
    color: var(--wp--preset--color--custom-color-4);
    font-size: 30px; /* Use custom pixel size or a larger scale than x-large */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.25em; /* Reduce gap below number */
}

.stat-cap {
    /* Ensure the caption text is readable */
    font-size: 14px;
    text-transform: uppercase;
    color: #6b7280; /* Neutral grey color */
    line-height: 1.2;
}
/* --- Styles for Our Difference Pattern --- */
/* Center the inner content if it doesn't use the standard WordPress constrained layout */
.qlc-difference-section.container {
    max-width: 1000px; /* Aligns with the contentSize in the block attributes */
    margin-left: auto;
    margin-right: auto;
}

/* Base style for the feature cards */
.qlc-feature-card {
    padding: 24px;
    background-color: white; /* Explicitly set background if needed */
    border-radius: 8px; /* Optional rounded corners for the card */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* Subtle lift */
    transition: transform 0.2s ease-in-out;
}

/* Ensures the text is readable, using your defined dark color */
.qlc-feature-card p:not(.qlc-card-title) {
    color: var(--wp--preset--color--custom-color-4); /* Dark text color */
}

/* Tablet / Smaller Desktop adjustments */
@media (max-width: 992px) {
    /* If you want the cards to stack differently on tablets */
    .qlc-difference-section .wp-block-columns.grid-3 {
        /* This would need external CSS to force the grid behavior if Columns doesn't handle it */
    }
}
/* --- Styles for Core Services Pattern (Pattern 4) --- */

#services, .qlc-services-section * {
    text-align: left !important; /* Forces left alignment */
}

/* Custom Grid Definition */
.qlc-services-section .svc-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important; /* Column gap */
    justify-items: stretch !important;
    align-items: stretch !important;
}

/* Service Card Styling */
.qlc-service-card {
    padding: 0.9rem !important;
    border-radius: 0.8rem !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Ensures cards stretch equally */
    background-color: white; /* Explicitly set card background */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* subtle shadow for card look */
}

.qlc-service-title {
    margin-top: 0.6rem !important;
    font-size: 1.05rem !important;
}

/* Text & Link Styling */
.qlc-service-card p {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
}

.qlc-button-link {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    font-size: 1rem !important;
    /* Uses the color defined in the pattern markup */
    color: var(--wp--preset--color--custom-color-1); 
}

/* Chip/Icon Styling */
.qlc-chip {
    height: 2.35rem !important;
    width: 2.35rem !important;
    font-size: 1rem !important;
    border-radius: 0.55rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--wp--preset--color--custom-color-5); /* Example background for the chip */
}

/* --- Responsive Media Queries (CRITICAL) --- */

/* Tablet / Medium Screens */
@media (max-width: 1024px) { 
    .qlc-services-section .svc-grid { 
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 Columns on Tablet */
    } 
}

/* Mobile / Small Screens */
@media (max-width: 640px) { 
    .qlc-services-section .svc-grid { 
        grid-template-columns: 1fr !important; /* 1 Column on Mobile */
    } 
}
/* --- Styles for Programs Section (Pattern 4) --- */

/* Ensures card container stretches for uniform height (critical for 'space-between') */
.qlc-program-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 20px; /* Example padding */
    background-color: white; 
    border-radius: 8px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
}

/* Ensures the text content area grows to push the button down */
.qlc-program-content {
    flex-grow: 1;
}

/* Styling for the outline button at the bottom of the section */
.qlc-outline-button a.wp-block-button__link {
    background-color: transparent !important;
    border: 1px solid var(--wp--preset--color--custom-color-1);
    color: var(--wp--preset--color--custom-color-1) !important;
}

.qlc-outline-button a.wp-block-button__link:hover {
    background-color: var(--wp--preset--color--custom-color-1) !important;
    color: white !important;
}