/*
Theme Name:   Well Stewarded Child
Theme URI:    https://wellstewardedconsulting.com
Description:  Child theme for Well Stewarded Consulting. Built on Astra.
Author:       Well Stewarded Consulting
Author URI:   https://wellstewardedconsulting.com
Template:     astra
Version:      2.2.0
Text Domain:  wellsteward-child
*/

/* Child theme stylesheet — base overrides + mobile optimization.
   Most visual styling is handled by Tailwind CDN classes in page templates.
   Astra layout resets and scroll-animation primitives live in assets/css/homepage.css. */

/* Fix WPForms submit button text alignment */
.wpforms-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Blog template — explicit cream background. */
body.page-template-page-blog {
    background-color: #fdf9f3 !important;
}

/* Resources & Tools template — same defensive cream background. */
body.page-template-page-resources {
    background-color: #fdf9f3 !important;
}

/* ============================================================
   MOBILE OPTIMIZATION (max-width: 768px)
   Selectors pair the user-requested semantic class names
   (.hero, .wsc-hero, .step-number, etc.) with the actual
   Tailwind/utility patterns used in this codebase, so the rules
   bind to current markup AND remain valid if templates adopt
   semantic class names later.
   ============================================================ */
@media (max-width: 768px) {

    /* --- Hero headline ---------------------------------------- */
    .wsc-page-wrap main > section:first-of-type h1,
    .hero-headline,
    .wsc-hero h1,
    section.hero h1,
    .hero h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    /* --- Hero subtext ----------------------------------------- */
    .wsc-page-wrap main > section:first-of-type p,
    .wsc-hero p,
    section.hero p,
    .hero p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* --- Hero section padding --------------------------------- */
    .wsc-page-wrap main > section:first-of-type,
    .wsc-hero,
    section.hero,
    .hero-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* --- Step / card decorative numbers (01 02 03 04) ---------
       Codebase pattern: .text-7xl.font-headline with primary/15. */
    .text-7xl.font-headline,
    .step-number,
    .card-number,
    [class*="step-num"],
    [class*="card-num"] {
        font-size: 3rem !important;
        opacity: 0.15 !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
    }

    /* --- General section horizontal padding ------------------- */
    section {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* --- Prevent horizontal overflow -------------------------- */
    body,
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* --- Header wrapper: prevent horizontal overflow on mobile.
       Safe because the desktop dropdown menus are display:none
       below the md: breakpoint (the mobile drawer is used
       instead). ----------------------------------------------- */
    .wsc-site-header {
        overflow-x: hidden !important;
    }

    /* --- Hamburger button color (matches spec) ---------------- */
    #wsc-nav-toggle,
    #wsc-nav-toggle .material-symbols-outlined {
        color: #165d7b !important;
    }

    /* --- CTA buttons full-width on mobile.
       Targets the primary-teal anchor button pattern used site
       wide (inline-block bg-primary rounded-xl) and the user
       spec class names. --------------------------------------- */
    .wsc-page-wrap main a.bg-primary,
    .wsc-page-wrap main a[class*="bg-primary"][class*="rounded-xl"],
    .wsc-btn,
    .btn-primary,
    a.button,
    .hero a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* --- Stats section: stack vertically on mobile up to 768px.
       The homepage stats strip uses grid-cols-1 sm:grid-cols-2,
       so on viewports 640-768px it would otherwise render 2-col.
       This rule extends the single-column layout to 768px. ---- */
    .sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    .stats-grid,
    .wsc-stats,
    [class*="stats"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

}