/*
 Theme Name: Herb Whisperer
 Theme URI: https://herb-whisperer.com
 Description: Custom child theme for the Herb Whisperer herbalism education platform
 Author: Herb Whisperer
 Author URI: https://herb-whisperer.com
 Template: generatepress
 Version: 1.0.0
 Text Domain: herb-whisperer
*/


/* ==========================================================================
   Brand Design Tokens
   ========================================================================== */
:root {
    /* Primary Colors */
    --hw-green:          #00913A;
    --hw-green-dark:     #006E2C;
    --hw-green-light:    #00A844;
    --hw-brown:          #755126;
    --hw-brown-dark:     #5A3E1D;
    --hw-brown-light:    #8B6332;
    --hw-black:          #000000;
    --hw-white:          #FFFFFF;

    /* Secondary Palette */
    --hw-leaf:           #84A729;
    --hw-warm-brown:     #9B815A;
    --hw-purple:         #7D5284;
    --hw-tan:            #D4C1A6;
    --hw-sky:            #AED0EE;
    --hw-lime:           #C3D94E;
    --hw-orange:         #E1743F;
    --hw-pink:           #F3ACB8;
    --hw-gray:           #C1C6C3;
    --hw-spring:         #E3EB98;
    --hw-gold:           #F2C867;
    --hw-blush:          #E7CAD3;
    --hw-cream:          #EBEDDF;

    /* Semantic Colors */
    --hw-text:           #2D2A26;
    --hw-text-light:     #5A5651;
    --hw-text-muted:     #8A8580;
    --hw-bg:             #FFFFFF;
    --hw-bg-warm:        #FDFCF9;
    --hw-bg-cream:       #EBEDDF;
    --hw-border:         #D4C1A6;
    --hw-border-light:   #E8E0D4;
    --hw-link:           #00913A;
    --hw-link-hover:     #006E2C;
    --hw-accent:         #00913A;
    --hw-cta:            #00913A;
    --hw-cta-hover:      #006E2C;

    /* Typography */
    --hw-font-body:      'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --hw-font-heading:   'Playfair Display', Georgia, 'Times New Roman', serif;
    --hw-font-ui:        'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --hw-font-size-base: 16px;
    --hw-line-height:    1.7;

    /* Spacing */
    --hw-space-xs:       0.25rem;
    --hw-space-sm:       0.5rem;
    --hw-space-md:       1rem;
    --hw-space-lg:       2rem;
    --hw-space-xl:       3rem;
    --hw-space-2xl:      5rem;
    --hw-space-3xl:      8rem;

    /* Layout */
    --hw-max-width:      1200px;
    --hw-nav-height:     80px;

    /* Organic border radius */
    --hw-radius-sm:      8px;
    --hw-radius-md:      12px;
    --hw-radius-lg:      16px;
    --hw-radius-pill:    100px;

    /* Shadows — warm brown tint */
    --hw-shadow-sm:      0 1px 3px rgba(117, 81, 38, 0.06);
    --hw-shadow-md:      0 4px 16px rgba(117, 81, 38, 0.1);
    --hw-shadow-lg:      0 12px 32px rgba(117, 81, 38, 0.12);
    --hw-shadow-hover:   0 12px 32px rgba(117, 81, 38, 0.14);
}


/* ==========================================================================
   Base & Reset
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--hw-font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--hw-font-body);
    color: var(--hw-text);
    background-color: var(--hw-bg);
    line-height: var(--hw-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--hw-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--hw-link-hover);
}


/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--hw-font-heading);
    color: var(--hw-brown);
    line-height: 1.2;
    margin-top: 0;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
    font-weight: 700;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

h4 {
    font-size: 1.25rem;
    font-weight: 600;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.hw-tagline {
    font-size: 1.125rem;
    color: var(--hw-text-light);
    font-weight: 400;
}

.hw-eyebrow {
    font-family: var(--hw-font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hw-green);
}


/* ==========================================================================
   Buttons
   ========================================================================== */
.hw-btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-family: var(--hw-font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--hw-radius-pill);
    transition: all 0.25s ease;
    cursor: pointer;
    border: none;
}

.hw-btn-primary {
    background: var(--hw-white);
    color: var(--hw-green);
}

.hw-btn-primary:hover {
    background: var(--hw-cream);
    color: var(--hw-green-dark);
    transform: translateY(-1px);
}

.hw-btn-green {
    background: var(--hw-green);
    color: var(--hw-white);
}

.hw-btn-green:hover {
    background: var(--hw-green-dark);
    color: var(--hw-white);
    transform: translateY(-1px);
}

.hw-btn-outline {
    background: transparent;
    color: var(--hw-green);
    border: 2px solid var(--hw-green);
}

.hw-btn-outline:hover {
    background: var(--hw-green);
    color: var(--hw-white);
    transform: translateY(-1px);
}

.hw-btn-outline-light {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.hw-btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--hw-white);
    border-color: var(--hw-white);
}

.hw-btn-brown {
    background: var(--hw-brown);
    color: var(--hw-white);
}

.hw-btn-brown:hover {
    background: var(--hw-brown-dark);
    color: var(--hw-white);
    transform: translateY(-1px);
}


/* ── Organic curve section divider ── */
.hw-curve-divider {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -1px;
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   Homepage — Content Sections
   ========================================================================== */
.hw-section {
    padding: var(--hw-space-2xl) var(--hw-space-lg);
}

.hw-section-inner {
    max-width: var(--hw-max-width);
    margin: 0 auto;
}

.hw-section-cream {
    background: var(--hw-bg-cream);
}

.hw-section-warm {
    background: var(--hw-bg-warm);
}

.hw-section-green {
    background: var(--hw-green);
    color: var(--hw-white);
}

.hw-section-green h2,
.hw-section-green h3 {
    color: var(--hw-white);
}

/* Cream section with no top padding (curve sits above it) */
.hw-section-cream-flush {
    background: var(--hw-bg-cream);
    padding-top: 0;
}


/* ==========================================================================
   Two-column layout
   ========================================================================== */
.hw-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hw-space-2xl);
    align-items: center;
}

.hw-two-col-reverse {
    direction: rtl;
}

.hw-two-col-reverse > * {
    direction: ltr;
}

@media (max-width: 768px) {
    .hw-two-col,
    .hw-two-col-reverse {
        grid-template-columns: 1fr;
        gap: var(--hw-space-lg);
        direction: ltr;
    }
}

.hw-col-image img {
    border-radius: var(--hw-radius-md);
    box-shadow: var(--hw-shadow-md);
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ==========================================================================
   Cards — Image-topped
   ========================================================================== */
.hw-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--hw-space-lg);
}

.hw-card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 960px) {
    .hw-card-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .hw-card-grid-3 {
        grid-template-columns: 1fr;
    }
}

.hw-card {
    background: var(--hw-white);
    border-radius: var(--hw-radius-md);
    box-shadow: var(--hw-shadow-sm);
    border: 0.5px solid rgba(117, 81, 38, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hw-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hw-shadow-hover);
}

/* Linked card (full-card clickable) */
.hw-card-linked {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    padding: 0;
    overflow: hidden;
}

.hw-card-linked:hover {
    color: inherit;
}

/* Card image container */
.hw-card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--hw-bg-cream);
    flex-shrink: 0;
}

.hw-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hw-card-linked:hover .hw-card-image img {
    transform: scale(1.06);
}

/* Placeholder when no image is uploaded */
.hw-card-image:not(:has(img)) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hw-card-image:not(:has(img))::after {
    content: '';
    width: 48px;
    height: 48px;
    opacity: 0.15;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006E2C' stroke-width='1.5'%3E%3Cpath d='M12 22c-4-3-8-6-8-10a8 8 0 0 1 16 0c0 4-4 7-8 10z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='M8 16c2-2 4-2 4-4'/%3E%3Cpath d='M16 16c-2-2-4-2-4-4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Vary placeholder backgrounds for visual interest */
.hw-card-image[data-placeholder="1"] { background: #e8f5ec; }
.hw-card-image[data-placeholder="2"] { background: #f0ebe2; }
.hw-card-image[data-placeholder="3"] { background: #eaeff5; }
.hw-card-image[data-placeholder="4"] { background: #eef3e0; }
.hw-card-image[data-placeholder="5"] { background: #f5f0e8; }
.hw-card-image[data-placeholder="6"] { background: #f2eef5; }
.hw-card-image[data-placeholder="blog"] { background: #e8f5ec; }

/* Card text body */
.hw-card-body {
    padding: var(--hw-space-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hw-card-body h3 {
    font-family: var(--hw-font-ui);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hw-brown);
    margin-bottom: var(--hw-space-sm);
}

.hw-card-body h3 a {
    color: inherit;
    text-decoration: none;
}

.hw-card-body h3 a:hover {
    color: var(--hw-green);
}

.hw-card-body p {
    font-size: 0.9rem;
    color: var(--hw-text-light);
    line-height: 1.6;
    margin-bottom: var(--hw-space-md);
    flex: 1;
}

.hw-card-link {
    font-family: var(--hw-font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hw-green);
    transition: color 0.2s ease;
}

.hw-card-linked:hover .hw-card-link {
    color: var(--hw-green-dark);
}

/* Blog card variant */
.hw-card-blog {
    padding: 0;
    overflow: hidden;
}

.hw-card-blog .hw-card-image {
    display: block;
    text-decoration: none;
}

.hw-card-blog .hw-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Legacy icon-based cards (for reference, can be removed when all cards use images) */
.hw-card-icon {
    width: 48px;
    height: 48px;
    background: var(--hw-bg-cream);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--hw-space-md);
    color: var(--hw-green);
}


/* ==========================================================================
   Quote / Blockquote
   ========================================================================== */
.hw-quote-section {
    text-align: center;
    padding: var(--hw-space-2xl) var(--hw-space-lg);
    background: var(--hw-bg-warm);
    position: relative;
    overflow: hidden;
}

/* Subtle botanical accents */
.hw-quote-leaf {
    position: absolute;
    width: 120px;
    height: 120px;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23006E2C'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66L7 19.17c1-1 2-1.17 3.5-.5C12 19.5 13 21 14 21c1.5 0 2.39-1.61 2.39-1.61C16.39 19.39 21 12 17 8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.hw-quote-leaf-left {
    top: 1rem;
    left: 2rem;
    transform: rotate(-20deg);
}

.hw-quote-leaf-right {
    bottom: 1rem;
    right: 2rem;
    transform: rotate(160deg);
}

.hw-quote {
    max-width: 650px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hw-quote blockquote {
    font-family: var(--hw-font-heading);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--hw-brown);
    line-height: 1.45;
    margin: 0 0 var(--hw-space-md);
    padding: 0;
    border: none;
}

.hw-quote cite {
    font-family: var(--hw-font-ui);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
    color: var(--hw-green);
}


/* ==========================================================================
   CTA Banner
   ========================================================================== */
.hw-cta-banner {
    background: linear-gradient(135deg, var(--hw-green-dark) 0%, var(--hw-green) 60%, var(--hw-leaf) 100%);
    color: var(--hw-white);
    text-align: center;
    padding: var(--hw-space-2xl) var(--hw-space-lg);
    position: relative;
    overflow: hidden;
}

/* Organic circular shapes for subtle depth */
.hw-cta-banner::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}

.hw-cta-banner::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.hw-cta-banner h2 {
    color: var(--hw-white);
    margin-bottom: var(--hw-space-sm);
    position: relative;
    z-index: 1;
}

.hw-cta-banner p {
    opacity: 0.92;
    max-width: 540px;
    margin: 0 auto var(--hw-space-lg);
    font-size: 1.05rem;
    position: relative;
    z-index: 1;
}

.hw-cta-buttons {
    display: flex;
    gap: var(--hw-space-md);
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   Site Footer
   ========================================================================== */
.hw-site-footer {
    background: #1a3a22;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--hw-font-ui);
}

.hw-footer-inner {
    max-width: var(--hw-max-width);
    margin: 0 auto;
    padding: 3.5rem 1.5rem 0;
}

.hw-site-footer a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hw-site-footer a:hover {
    color: #fff;
}

/* Footer grid */
.hw-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2.5rem;
}

@media (max-width: 960px) {
    .hw-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .hw-footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Brand column */
.hw-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hw-footer-brand img {
    width: auto;
    margin-bottom: 1rem;
}

.hw-footer-brand > img {
    max-height: 150px;
}

.hw-footer-brand p {
    font-size: 0.85rem;
    line-height: 1.6;
    opacity: 0.7;
    max-width: 300px;
    margin-bottom: 1.25rem;
}

/* Social icons */
.hw-footer-social {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.hw-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.15s ease;
}

.hw-footer-social a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.hw-footer-social svg {
    fill: #fff;
}

/* Membership badges */
.hw-footer-badges {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    align-items: center;
}

.hw-footer-badges img {
    height: 50px;
    width: auto;
    border-radius: var(--hw-radius-sm);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.hw-footer-badges img:hover {
    opacity: 1;
}

/* Footer link columns */
.hw-footer-col h4 {
    color: #fff;
    font-family: var(--hw-font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(196, 149, 42, 0.5);
}

.hw-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hw-footer-col ul li {
    margin-bottom: 0.45rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.hw-footer-col ul li a {
    opacity: 0.85;
}

.hw-footer-col ul li a:hover {
    opacity: 1;
}

.hw-footer-col ul li:not(:has(a)) {
    opacity: 0.6;
    font-size: 0.85rem;
}

/* Footer bottom bar */
.hw-footer-bottom {
    margin-top: 2.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.hw-footer-bottom > span {
    opacity: 0.5;
}

.hw-footer-legal {
    display: flex;
    gap: 1.5rem;
}

.hw-footer-legal a {
    opacity: 0.5;
    font-size: 0.8rem;
}

.hw-footer-legal a:hover {
    opacity: 1;
}

@media (max-width: 560px) {
    .hw-footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .hw-footer-legal {
        gap: 1rem;
    }
}


/* ==========================================================================
   Utility Classes
   ========================================================================== */
.hw-container {
    max-width: var(--hw-max-width);
    margin: 0 auto;
    padding: 0 var(--hw-space-lg);
}

.hw-text-center { text-align: center; }
.hw-text-green { color: var(--hw-green); }
.hw-text-brown { color: var(--hw-brown); }
.hw-text-white { color: var(--hw-white); }
.hw-mb-sm { margin-bottom: var(--hw-space-sm); }
.hw-mb-md { margin-bottom: var(--hw-space-md); }
.hw-mb-lg { margin-bottom: var(--hw-space-lg); }
.hw-mb-xl { margin-bottom: var(--hw-space-xl); }

.hw-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* ==========================================================================
   WordPress / LearnDash / WooCommerce Overrides
   ========================================================================== */

/* Hide parent theme header/footer when our custom ones are active */
#masthead,
.site-header,
.site-footer,
#colophon {
    display: none !important;
}

/* WooCommerce buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: var(--hw-green) !important;
    color: var(--hw-white) !important;
    border-radius: var(--hw-radius-pill) !important;
    font-family: var(--hw-font-ui) !important;
    font-weight: 600 !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--hw-green-dark) !important;
}

/* LearnDash progress bars */
.learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
    background: var(--hw-green) !important;
}

/* WordPress pagination */
.nav-links a {
    color: var(--hw-green);
}

.nav-links .current {
    background: var(--hw-green);
    color: var(--hw-white);
    border-radius: var(--hw-radius-sm);
}

/* Handwritten accent font — homepage intro card */
.hw-page--home .hw-intro-card em {
    font-family: 'Quintessential', cursive !important;
    font-size: 1.4em;
    font-style: normal !important;
    font-weight: 400;
}

/* Hero eyebrow — Quintessential */
.hw-hero__eyebrow {
    font-family: 'Quintessential', cursive !important;
}

/* Hero title — 20% larger */
.hw-hero__title {
    transform: scale(1.2);
    transform-origin: center center;
}

/* Constrain hero text width for better line breaks */
.hw-hero__content {
    max-width: 480px;
}