/*
 Theme Name: Astra Child
 Template:   astra
 Version:    1.0.0
*/

/* The parent stylesheet is enqueued separately in functions.php
   ('astra-parent-style'). The former @import url("../astra/style.css") was
   resolved against the page URL once the stylesheet was optimized, producing a
   404 for /astra/style.css on every page, so it has been removed. */

/* ============================================================
   QC FIX 10 — DESIGN TOKENS (design audit, 28 Sep 2026)
   Canonical brand values live in qe2027/qe-tokens.css, which is loaded on
   every route. These are the standard role names used by the child theme;
   they only reference the canonical tokens and never add new colors.
   ============================================================ */

:root{
  --color-primary:        var(--color-brand-primary);
  --color-primary-hover:  var(--color-brand-primary-hover);
  --color-secondary:      var(--color-brand-secondary);
  --color-bg:             var(--color-background);
  --color-bg-alt:         var(--color-surface-subtle);
  --color-link:           var(--color-brand-secondary);
  --color-link-hover:     var(--color-brand-primary);
  --color-on-dark:        var(--color-surface);
  --color-on-dark-muted:  color-mix(in srgb, var(--color-surface) 68%, var(--color-text));
  /* Form-control borders need 3:1 against white; --color-border (1.43:1) is
     for decorative dividers only. */
  --color-border-strong:  color-mix(in srgb, var(--color-text-muted) 80%, var(--color-surface));

  --font-size-body:  1rem;
  --font-size-small: .875rem;
  --line-height-body: 1.7;
  --container-width: 1200px;
  --section-pad:     clamp(42px, 7vw, 88px);
}

/* ============================================================
   QC — WHATSAPP FLOATING BUTTON
   Restored 28 Sep 2026: this rule was dropped from an in-progress design-audit
   edit to this file before the change was reviewed. functions.php still
   outputs the .qc-whatsapp-float markup on every page, so removing this CSS
   would leave it rendered but unstyled. Not part of the design audit scope.
   ============================================================ */

.qc-whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 25px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #ffffff;
    padding: 12px 18px 12px 14px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    animation: qc-wa-pulse 2.5s infinite;
}
.qc-whatsapp-float:hover {
    background: #1ebe5c;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37,211,102,0.55);
    color: #ffffff !important;
    text-decoration: none !important;
}
.qc-whatsapp-float svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
@keyframes qc-wa-pulse {
    0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
    50%      { box-shadow: 0 4px 35px rgba(37,211,102,0.75); }
}
@media (max-width: 480px) {
    .qc-whatsapp-float .qc-wa-text { display: none; }
    .qc-whatsapp-float { padding: 14px; border-radius: 50%; }
}

/* ============================================================
   QC — HIDDEN SEO H1
   ============================================================ */

.qc-seo-h1 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    font-size: 1px !important;
    color: transparent !important;
}

/* ============================================================
   QC — LOGO: HIDE DUPLICATES, ONE RESPONSIVE LOGO
   ============================================================ */

header img[src*="h1_logo"],
.site-header img[src*="h1_logo"] {
    display: none !important;
}
.custom-logo,
.site-logo img,
header .logo img,
.astra-logo-svg img {
    width: auto !important;
    height: 55px !important;
    max-width: 160px !important;
    object-fit: contain !important;
}
@media (max-width: 767px) {
    .custom-logo,
    header .logo img {
        height: 40px !important;
        max-width: 120px !important;
    }
}

/* ============================================================
   QC — ASTRA FOOTER (legacy Astra footer only)
   Scoped to .site-footer: the former bare `footer` selectors also restyled
   the sitewide .qc-footer (13px links, forced white, #0D0D0D background).
   ============================================================ */

.site-footer { padding-top: 50px; padding-bottom: 20px; }

.site-footer h3,
.site-footer .widget-title {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-on-dark) 20%, transparent);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Bank details link button */
.qc-bank-link { text-align: center; margin: 10px 0; }
.qc-bank-btn {
    display: inline-block;
    background: color-mix(in srgb, var(--color-on-dark) 15%, transparent);
    color: var(--color-on-dark);
    padding: 8px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid color-mix(in srgb, var(--color-on-dark) 30%, transparent);
    transition: background 0.2s ease;
}
.qc-bank-btn:hover { background: color-mix(in srgb, var(--color-on-dark) 28%, transparent); color: var(--color-on-dark); }

/* ============================================================
   QC — CTA BUTTONS
   ============================================================ */

.qc-btn-primary,
a.qc-btn {
    background: var(--color-primary);
    color: var(--color-surface);
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    border: none;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.qc-btn-primary:hover, a.qc-btn:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    color: var(--color-surface);
}

/* ============================================================
   QC — TRUST SIGNALS
   ============================================================ */

.testimonial-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.qc-stars { color: var(--color-accent); font-size: 16px; letter-spacing: 2px; margin-bottom: 8px; }

/* ============================================================
   QC — MOBILE RESPONSIVENESS
   ============================================================ */

@media (max-width: 767px) {
    .hero-slider .elementor-slide-title,
    .swiper-slide h2 { font-size: 22px !important; line-height: 1.3 !important; }
    .services-grid .elementor-column { width: 100% !important; margin-bottom: 15px !important; }
    .price-cards-section .elementor-column { width: 50% !important; }
    footer .elementor-column { width: 100% !important; margin-bottom: 20px !important; }
    .hide-on-mobile { display: none !important; }

    /* WooCommerce catalogue grids: keep legacy product records from
       widening category and shop pages on narrow screens. */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: clip !important;
    }
    .woocommerce ul.products li.product img,
    .woocommerce-page ul.products li.product img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering {
        float: none !important;
        max-width: 100% !important;
        margin: 0 0 16px !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .services-grid .elementor-column,
    .price-cards-section .elementor-column { width: 50% !important; }
}

/* ==========================================================================
   QC — BRAND BRIDGE FOR ASTRA / WOOCOMMERCE / LEGACY CONTENT
   Replaces the retired 14 Sep "Theme C" red/black override (#D90700 /
   #0D0D0D), which predated the approved terracotta/emerald/gold palette and
   forced its colors with !important onto every <button>, <footer> and link —
   including the sitewide header menu button and footer. Everything below uses
   the canonical tokens only.
   ========================================================================== */

/* Legacy inline navy text in stored content */
[style*="navy"],
*[style*="color: navy"],
*[style*="color:#000080"],
*[style*="color: #001f3f"]{
  color: var(--color-text) !important;
}

h1,h2,h3,h4,h5,h6{ color: var(--color-text); }

/* Legacy Elementor-exported hero sections kept in page content */
.hero, .elementor-section.hero-section{
  background-color: var(--color-bg-alt);
}
.hero h1, .hero p{ color: var(--color-text); }

/* Buttons in stored content. Bare `button` is intentionally not listed: it
   repainted UI controls such as the header menu toggle. WooCommerce buttons
   are styled by qc-phase1-homepage's sitewide-rollout.css. */
.elementor-button,
.elementor-button-link,
.wp-block-button__link,
.ast-button{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background-color: var(--color-primary);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease;
}
.elementor-button:hover,
.elementor-button-link:hover,
.wp-block-button__link:hover,
.ast-button:hover{
  background-color: var(--color-primary-hover);
  color: var(--color-surface);
}
.elementor-button.elementor-button-outline,
.btn-outline{
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
}

/* Cards / product tiles */
.elementor-widget-container .price-box,
.service-box,
.product,
.elementor-icon-box-wrapper{
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-top: 3px solid var(--color-primary) !important;
  border-radius: 6px !important;
}
.price, .woocommerce-Price-amount, .amount{
  color: var(--color-text);
  font-weight: 700;
}
/* Struck-through regular price: WooCommerce fades it to 50% opacity, which
   measured 3.6:1. Keep it muted but readable (5.9:1). */
.woocommerce :is(ul.products li.product, div.product) .price del{
  opacity: 1;
  color: var(--color-text-muted);
}
.price del .amount{ color: inherit; }
/* Astra category label under product titles (was 3.7:1 via opacity) */
.woocommerce :is(ul.products li.product, div.product) .ast-woo-product-category{
  opacity: 1;
  color: var(--color-text-muted);
}
/* Breadcrumbs (#777 on cream measured 4.19:1) */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a{
  color: var(--color-text-muted);
}
/* Sale badge: keep it inside the product tile at every width */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale{
  background-color: var(--color-primary);
  color: var(--color-surface);
}
.woocommerce ul.products li.product .onsale{
  left: auto;
  right: 8px;
  top: 8px;
  margin: 0;
}

/* Form controls: 3:1 boundary and visible focus */
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce .quantity .qty,
.entry-content input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.entry-content textarea,
.entry-content select{
  border-color: var(--color-border-strong);
}

/* Legacy Astra footer (hidden on routes that use the sitewide footer) */
#colophon, .site-footer{
  background-color: var(--color-text);
  color: var(--color-on-dark-muted);
}
#colophon a, .site-footer a{ color: var(--color-on-dark); }

/* Links */
a{ color: var(--color-link); }
a:hover{ color: var(--color-link-hover); }

/* ============================================================
   QC FIX 11 — READABLE BODY COPY (design audit, 28 Sep 2026; alignment
   breakpoint added 28 Sep 2026 per owner decision)
   Main-content paragraphs are justified with hyphenation on screens >=600px
   (html lang="en-US" is emitted by language_attributes()); below 600px they
   are left-aligned with hyphenation off, since justify without room to break
   produced large word gaps on narrow screens. Headings, buttons, navigation,
   cards, captions, hero/lead text and centered or aligned paragraphs are
   excluded by scoping to direct content paragraphs only.
   ============================================================ */

:is(
  .qc6-main > section,
  .qc6-main .qc6-steps li > div,
  body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content,
  .woocommerce-Tabs-panel--description,
  .woocommerce-product-details__short-description
) > p:not([class*="align"]):not([style*="text-align"]):not([class*="lead"]):not([class*="eyebrow"]):not([class*="label"]):not([class*="note"]){
  overflow-wrap: break-word;
}
@media (max-width: 599px){
  :is(
    .qc6-main > section,
    .qc6-main .qc6-steps li > div,
    body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content,
    .woocommerce-Tabs-panel--description,
    .woocommerce-product-details__short-description
  ) > p:not([class*="align"]):not([style*="text-align"]):not([class*="lead"]):not([class*="eyebrow"]):not([class*="label"]):not([class*="note"]){
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}
@media (min-width: 600px){
  :is(
    .qc6-main > section,
    .qc6-main .qc6-steps li > div,
    body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content,
    .woocommerce-Tabs-panel--description,
    .woocommerce-product-details__short-description
  ) > p:not([class*="align"]):not([style*="text-align"]):not([class*="lead"]):not([class*="eyebrow"]):not([class*="label"]):not([class*="note"]){
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* Links inside running text are underlined, so they are not identified by
   color alone (WCAG 1.4.1). */
:is(.qc6-main, .entry-content, .woocommerce-Tabs-panel--description) :is(p, li) a:not([class*="button"]):not([class*="btn"]){
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

/* ============================================================
   QC FIX 12 — CONSISTENT CONTENT GUTTERS, NON-WOOCOMMERCE ONLY
   (Phase 4, 28 Sep 2026)
   Root cause (gutter audit + live width-chain trace, 28 Sep 2026): the
   content area's .ast-container (a direct child of #content.site-content --
   a DIFFERENT element from the header/footer wrappers that share the same
   class name) sets margin-inline:14px below Astra's own ~921px breakpoint,
   with no separate tablet value. Two earlier attempts on this same fix broke
   the WooCommerce product grid, which has its own negative-margin/padding
   math keyed to that exact 14px (confirmed live on /shop/, /cart/,
   /checkout/) -- so this fix is scoped to body:not(.woocommerce):
   not(.woocommerce-page) and touches only the content .ast-container via
   the #content.site-content > .ast-container child selector, never the
   header/footer instances. WooCommerce pages are completely untouched here;
   see the separate Woo proposal. No new design, no new colors, no change to
   the existing 1200px desktop container width (already centered with equal
   gutters, confirmed by the audit).
   ============================================================ */
@media (max-width: 767px){
  body:not(.woocommerce):not(.woocommerce-page) #content.site-content > .ast-container{
    margin-inline: 20px;
    width: auto;
  }
}
@media (min-width: 768px) and (max-width: 921px){
  body:not(.woocommerce):not(.woocommerce-page) #content.site-content > .ast-container{
    margin-inline: 24px;
    width: auto;
  }
}

/* ============================================================
   QC FIX 13 — MOBILE BODY TEXT AT LEAST 16PX (Phase 4, 29 Sep 2026)
   Root cause (live CDP trace, 71 URLs at 375px): Astra prints
   html{font-size:91.2%} inline at <=921px from its stored body-size setting
   (the DB fix for that, L04 / Phase 3 Group A, is on hold), so every rem-based
   size shrinks by 8.8% and --font-size-body (1rem) computes to 14.592px.
   Main-content paragraphs, list items and quotes on phones get the body token
   with a 16px floor. Headings, buttons, forms, navigation, WooCommerce product
   grids, product meta, and eyebrow/label/badge/price/caption small print are
   excluded, as is everything outside the main content area. The root size
   itself is not changed, so rem-based headings and buttons keep their size.
   ============================================================ */
@media (max-width: 767px){
  :is(.qc6-main, .entry-content, main.qc-home, .woocommerce-Tabs-panel--description, .woocommerce-product-details__short-description)
  :is(p, li, blockquote):not([class*="eyebrow"]):not([class*="label"]):not([class*="kicker"]):not([class*="note"]):not([class*="badge"]):not([class*="meta"]):not([class*="price"]):not([class*="caption"]):not([class*="number"]):not(:is(h1, h2, h3, h4, h5, h6, nav, header, footer, form, button, .button, [class*="btn"], ul.products, .product_meta, .woocommerce-breadcrumb, .wc-block-components-notice-banner) *){
    font-size: max(var(--font-size-body), 16px);
  }
}

/* ============================================================
   QC FIX 14 — SYMBOLIC PHOTO PLACEHOLDERS (Phase 5 Part 2, 29 Sep 2026)
   Shared, sitewide (loaded on every route, including the front page — see
   Phase 5 report) placeholder used at the 13 owner-approved spots for a
   future symbolic image. Intentionally styled as a soft, on-brand frame
   (existing surface/border/accent tokens only, no new colors) rather than a
   broken-image icon or gray box, so it reads as "reserved for a photo," not
   "something is broken." The visible label and the HTML comment immediately
   before each instance both say the same thing, so it cannot be mistaken for
   finished content by anyone editing the page later.
   Aspect ratio is set per instance via the inline --qc-ph-ratio custom
   property (see each insertion site); default is 16:9.
   ============================================================ */
.qc-photo-placeholder{
  --qc-ph-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  aspect-ratio: var(--qc-ph-ratio);
  max-height: 70vh;
  background: var(--color-surface-subtle);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg, 16px);
  color: var(--color-text-muted);
  text-align: center;
  padding: 24px;
  margin-block: clamp(20px, 4vw, 40px);
  box-sizing: border-box;
}
.qc-photo-placeholder__icon{ color: var(--color-accent); opacity: .6; }
.qc-photo-placeholder__icon svg{ width: 40px; height: 40px; display: block; }
.qc-photo-placeholder__label{
  font-family: Inter, Arial, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  max-width: 32ch;
}