/**
 * ==========================================================================
 * HAPPYPIP — Warm Analogous Design System v4
 * ==========================================================================
 * Global tokens, font imports, base resets, and typography defaults.
 * Loaded on every page before all other theme stylesheets.
 * Source: docs/HAPPYPIP-Warm-Analogous-Design-System-v3.md
 * ==========================================================================
 */

/* ── Font Imports ── */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/* ── Design Tokens ── */
:root {
    /* Functional */
    --color-success: #58AD72;

    /* Legacy aliases (mapped to warm system — keeps downstream CSS working) */
    --color-bg: #FAF6EF;
    --color-card: #FFFDF8;
    --color-card-hover: #FFF9F0;
    --color-border: #EDE4D4;
    --color-text-primary: #1E3A2F;
    --color-text-secondary: #5A5048;
    --color-text-muted: #9A9088;

    /* ── Backgrounds ── */
    --bg-page:            #FAF6EF;
    --bg-card:            #FFFDF8;
    --bg-surface:         #FFFBF4;
    --bg-input:           #F6F0E6;
    --bg-img-placeholder: #F3EDE2;

    /* ── Sunset Orange (Primary Action) ── */
    --sunset-light:       #F4C08A;
    --sunset-mid:         #ECA96E;
    --sunset-deep:        #E89858;
    --sunset-text:        #D4935A;
    --gradient-sunset:       linear-gradient(135deg, #F4C08A, #ECA96E, #E89858);
    --gradient-sunset-hover: linear-gradient(135deg, #F8D0A0, #F0B880, #ECA96E);

    /* ── Green Scale (v4 — cannabis brand identity) ── */
    --green-deep:         #152C24;
    --green-dark:         #1E3A2F;
    --green-mid:          #2A5A48;
    --green-light:        #3A6A58;
    --green-muted:        #4A7A68;

    /* ── Text (Warm Brown Scale + Green Overrides) ── */
    --text-dark:          #2A2520;
    --text-primary:       #1E3A2F;
    --text-secondary:     #5A5048;
    --text-body:          #6B5A40;
    --text-muted:         #9A9088;

    /* ── Prices ── */
    --price-color:        #1E3A2F;

    /* ── Borders ── */
    --border-default:     #EDE4D4;
    --border-input:       #E4D9C8;
    --border-header:      rgba(192, 165, 100, 0.3);

    /* ── Type Scale (mobile-first with fluid scaling) ── */
    --text-h1:    clamp(28px, 5vw, 36px);
    --text-h2:    clamp(22px, 4vw, 28px);
    --text-h3:    clamp(18px, 3.5vw, 22px);
    --text-base:  16px;
    --text-sub:   14px;
    --text-small: 12px;
    --text-label: 11px;
    --text-badge: 9px;
    --text-micro: 8px;

    /* ── Teal Accent (New Drop & Sale ONLY) ── */
    --accent-teal:        #6BA8A0;
    --accent-teal-bg:     #E4F2F0;
    --accent-teal-glow:   rgba(107, 168, 160, 0.3);

    /* Tier Colors — unchanged */
    --tier-classic: #A8A8A8;
    --tier-exotic: #5B9A6B;
    --tier-super: #D4712A;
    --tier-rapper: #7B6BA4;

    /* Typography — unchanged */
    --font-heading: 'Google Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body: 'Lora', Georgia, 'Times New Roman', serif;

    /* Spacing — unchanged */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Border Radius — unchanged */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* ── Shadows (warm gold) ── */
    --shadow-card:         0 10px 30px rgba(200, 165, 100, 0.1);
    --shadow-card-hover:   0 14px 36px rgba(200, 165, 100, 0.15);
    --shadow-modal:        0 20px 60px rgba(200, 165, 100, 0.2);
    --shadow-cta-glow:     0 4px 20px rgba(236, 169, 110, 0.35), 0 0 40px rgba(244, 192, 138, 0.15);
    --shadow-button:       0 4px 20px rgba(236, 169, 110, 0.35), 0 0 40px rgba(244, 192, 138, 0.15);
    --shadow-button-hover: 0 6px 28px rgba(236, 169, 110, 0.45), 0 0 60px rgba(248, 208, 160, 0.2);
    --shadow-subtle:       0 2px 12px rgba(0, 0, 0, 0.03);
}

/* ── Base Reset ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-page);
}

/* ── Global Input Reset (overrides Astra defaults) ── */
input,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-input) !important;
    font-family: var(--font-heading);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--sunset-mid) !important;
    box-shadow: none !important;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ── Typography Defaults ── */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: 1.2;
    color: var(--green-dark);
}

h1 {
    font-size: 2.25rem;  /* 36px */
    font-weight: 700;
}

h2 {
    font-size: 1.75rem;  /* 28px */
    font-weight: 700;
}

h3 {
    font-size: 1.375rem; /* 22px */
    font-weight: 500;
}

h4 {
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
}

p, li, td, th {
    font-family: var(--font-body);
    font-size: 1rem;     /* 16px */
    line-height: 1.6;
}

small,
.hp-text--small {
    font-size: 0.875rem; /* 14px */
}

.hp-text--caption {
    font-family: var(--font-heading);
    font-size: 0.75rem;  /* 12px */
}

/* ── Shared Buttons (single source of truth — used on homepage, shop, etc.) ── */
.hp-btn { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.5px; border: none; border-radius: var(--radius-full); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: all .3s ease; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.hp-btn--primary { background: var(--gradient-sunset); color: #fff; padding: 14px 34px; text-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: var(--shadow-button); }
.hp-btn--primary:hover { background: var(--gradient-sunset-hover); transform: translateY(-1px); box-shadow: var(--shadow-button-hover); }
.hp-btn--outline { background: transparent; color: var(--sunset-text); border: 1.5px solid var(--sunset-mid); padding: 13px 30px; }
.hp-btn--outline:hover { background: var(--gradient-sunset); color: #fff; border-color: transparent; box-shadow: var(--shadow-button); transform: translateY(-1px); }

.hp-pill-btn { font-family: var(--font-heading); display: inline-flex; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 11px 26px; border-radius: var(--radius-full); background: var(--gradient-sunset); color: #fff; text-decoration: none; transition: all .3s; box-shadow: var(--shadow-button); }
.hp-pill-btn:hover { background: var(--gradient-sunset-hover); box-shadow: var(--shadow-button-hover); }


/* ══════════════════════════════════════════════════
   Astra Structural Overrides — Warm Analogous
   ══════════════════════════════════════════════════ */

/* Page-level backgrounds */
.ast-separate-container,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .comment-respond,
.ast-separate-container .ast-comment-list li,
.ast-page-builder-template .entry-content,
.ast-plain-container {
    background: var(--bg-page) !important;
}

#page,
.site,
#content,
.site-content,
.ast-container {
    background: var(--bg-page) !important;
}

/* Remove Astra's container width constraint — sections handle their own max-width */
.ast-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Content area */
.entry-content,
.entry-content p,
.entry-content li,
.ast-separate-container .entry-content {
    color: var(--text-primary) !important;
}

.entry-title,
.entry-title a,
.page-title {
    color: var(--green-dark) !important;
    font-family: var(--font-heading) !important;
}

/* Breadcrumbs */
.ast-breadcrumbs,
.ast-breadcrumbs-wrapper,
.ast-breadcrumbs .trail-items,
.ast-breadcrumbs a,
.ast-breadcrumbs span {
    color: var(--text-muted) !important;
}

.ast-breadcrumbs a:hover {
    color: var(--sunset-text) !important;
}

/* Sidebar */
.ast-separate-container .ast-article-single .ast-author-details,
.widget-area .widget {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

.widget-area .widget-title {
    color: var(--green-dark) !important;
    font-family: var(--font-heading) !important;
}

.widget-area .widget a {
    color: var(--sunset-text) !important;
}

.widget-area .widget a:hover {
    color: var(--sunset-deep) !important;
}

/* WooCommerce pages */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
    color: var(--text-secondary) !important;
}

.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-pagination .page-numbers li a,
.woocommerce .woocommerce-pagination .page-numbers li span {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

.woocommerce .woocommerce-pagination .page-numbers li span.current {
    background: var(--gradient-sunset) !important;
    color: #fff !important;
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-top-color: var(--sunset-mid) !important;
}

.woocommerce-error {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-top-color: #CC4B4B !important;
}

/* Forms & inputs */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--radius-sm);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--sunset-mid) !important;
    outline: none !important;
}

/* Scroll bar (global) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }


/* ══════════════════════════════════════════════════
   Loading / Spinner Overrides (WooCommerce + Astra)
   ══════════════════════════════════════════════════
   Forces all loading indicators site-wide to use
   warm analogous brand colors.
   ══════════════════════════════════════════════════ */

/* WooCommerce block UI overlay */
.blockUI.blockOverlay,
.woocommerce .blockUI.blockOverlay,
.wc-block-components-loading-mask .wc-block-components-loading-mask__overlay {
    background: rgba(250, 246, 239, 0.7) !important;
    opacity: 1 !important;
}

/* WooCommerce loading spinner (the rotating circle) */
.blockUI.blockOverlay::before,
.woocommerce .blockUI.blockOverlay::before,
.woocommerce .loader::before,
.wc-block-components-spinner::after {
    border-color: var(--border-default) !important;
    border-top-color: var(--sunset-mid) !important;
}

/* Astra / WooCommerce button loading state */
.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce input.button.loading,
a.button.loading,
button.button.loading {
    opacity: 0.7 !important;
    color: transparent !important;
}

.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
a.button.loading::after,
button.button.loading::after {
    border-color: var(--border-default) !important;
    border-top-color: var(--sunset-mid) !important;
}

/* Astra add-to-cart loading */
.ast-site-header-cart .ast-addon-cart-wrap .loading,
.single_add_to_cart_button.loading,
.single_add_to_cart_button.loading::after {
    border-color: var(--border-default) !important;
    border-top-color: var(--sunset-mid) !important;
}

/* WooCommerce cart/checkout update spinner */
.woocommerce-cart .blockUI.blockOverlay::before,
.woocommerce-checkout .blockUI.blockOverlay::before {
    border-color: var(--border-default) !important;
    border-top-color: var(--sunset-mid) !important;
}

/* WooCommerce product added flash */
.woocommerce ul.products li.product .added_to_cart,
.added_to_cart {
    background: var(--gradient-sunset) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Astra progress bar / loading bar accent */
.ast-progress-bar,
.wc-block-components-loading-mask .wc-block-components-loading-mask__spinner {
    background: var(--gradient-sunset) !important;
}

/* Generic WordPress admin bar / customizer loading */
.wp-spinner,
.spinner {
    border-top-color: var(--sunset-mid) !important;
}


/* ══════════════════════════════════════════════════
   Astra Link/Button Hover Protection
   ══════════════════════════════════════════════════
   Astra's global a:hover overrides component colors.
   These rules ensure HAPPYPIP button styles always win.
   ══════════════════════════════════════════════════ */

/* ── Base link-button colors ── */
a.hp-btn--primary,
a.hp-btn--primary:visited {
    background: var(--gradient-sunset) !important;
    color: #fff !important;
}

a.hp-btn--outline,
a.hp-btn--outline:visited,
button.hp-btn--outline {
    background: transparent !important;
    color: var(--sunset-text) !important;
    border: 1.5px solid var(--sunset-mid) !important;
}

a.hp-pill-btn,
a.hp-pill-btn:visited {
    background: var(--gradient-sunset) !important;
    color: #fff !important;
}

/* Newsletter button */
button.hp-nl__btn {
    background: var(--gradient-sunset) !important;
    color: #fff !important;
    border: none !important;
}

button.hp-nl__btn:hover,
button.hp-nl__btn:focus {
    background: var(--gradient-sunset-hover) !important;
    color: #fff !important;
    box-shadow: var(--shadow-button-hover) !important;
}

a.hp-tier-card__btn,
a.hp-tier-card__btn:visited,
a.hp-pr-card__btn,
a.hp-pr-card__btn:visited {
    background: transparent !important;
    color: var(--sunset-text) !important;
    border: 1.5px solid var(--sunset-mid) !important;
}

a.hp-pc__atc,
a.hp-pc__atc:visited {
    background: var(--gradient-sunset) !important;
    color: #fff !important;
}

a.hp-pc__name,
a.hp-pc__name:visited {
    color: var(--green-dark) !important;
}

a.hp-vibe,
a.hp-vibe:visited {
    color: var(--text-primary) !important;
}

/* ── Hover states ── */
a.hp-btn--primary:hover,
a.hp-btn--primary:focus {
    background: var(--gradient-sunset-hover) !important;
    color: #fff !important;
}

a.hp-btn--outline:hover,
a.hp-btn--outline:focus,
button.hp-btn--outline:hover,
button.hp-btn--outline:focus {
    background: var(--gradient-sunset) !important;
    color: #fff !important;
    border-color: transparent !important;
}

a.hp-pill-btn:hover,
a.hp-pill-btn:focus {
    background: var(--gradient-sunset-hover) !important;
    color: #fff !important;
}

a.hp-tier-card__btn:hover,
a.hp-tier-card__btn:focus,
a.hp-pr-card__btn:hover,
a.hp-pr-card__btn:focus {
    background: var(--gradient-sunset) !important;
    color: #fff !important;
    border-color: transparent !important;
}

a.hp-pc__atc:hover,
a.hp-pc__atc:focus {
    background: var(--gradient-sunset-hover) !important;
    color: #fff !important;
}

a.hp-pc__name:hover,
a.hp-pc__name:focus {
    color: var(--green-light) !important;
}

a.hp-vibe:hover,
a.hp-vibe:focus {
    color: var(--text-primary) !important;
    border-color: var(--sunset-mid) !important;
}

.hp-vibe__btn:hover,
.hp-vibe__btn:focus {
    background: var(--gradient-sunset) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ── FAQ button — prevent Astra button overrides ── */
button.hp-faq__q {
    background: none !important;
    border: none !important;
    color: var(--green-dark) !important;
}

button.hp-faq__q:hover,
button.hp-faq__q:focus {
    color: var(--sunset-text) !important;
    background: none !important;
    outline: none !important;
}

/* FAQ answer — protect animation from Astra resets */
.hp-faq__a {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .35s ease !important;
}

.hp-faq__item.is-open .hp-faq__a {
    max-height: 300px !important;
}


/* ══════════════════════════════════════════════════
   Scroll-to-Top — Warm Analogous Override
   ══════════════════════════════════════════════════
   Astra toggles display:none/block via its own JS.
   We override all visual styles and let Astra
   handle the show/hide trigger.
   ══════════════════════════════════════════════════ */

#ast-scroll-top {
    background: var(--gradient-sunset) !important;
    color: #fff !important;
    fill: #fff !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 18px !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    box-shadow: var(--shadow-button) !important;
    right: 24px !important;
    bottom: 24px !important;
    left: auto !important;
    z-index: 900 !important;
    position: fixed !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

#ast-scroll-top:hover,
#ast-scroll-top:focus {
    box-shadow: var(--shadow-button-hover) !important;
    transform: scale(1.1) !important;
    background: var(--gradient-sunset-hover) !important;
    color: #fff !important;
    outline: none !important;
}

#ast-scroll-top svg {
    fill: #fff !important;
    width: 18px !important;
    height: 18px !important;
}