/*
Theme Name:  Mockito
Theme URI:   https://mockito.in
Description: Pure Comfort in Every Sip — A fully customizable WooCommerce theme for Mockito, a natural jaggery-sweetened beverage brand. Built from the Mockito HTML design with Customizer color palette, font controls, dynamic header/footer, and full WooCommerce integration.
Version:     1.0.0
Author:      Mockito Team
Author URI:  https://mockito.in
Text Domain: mockito
Tags:        e-commerce, woocommerce, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready
WC requires at least: 7.0
WC tested up to: 8.9
Requires at least: 6.0
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   MOCKITO DESIGN TOKENS
   All values below are defaults — overridden at runtime
   by the WordPress Customizer via dynamic <style> in wp_head.
   See inc/customizer.php for Customizer controls.
   ============================================================ */

:root {
    /* ── Brand Colors (Customizer: mockito_color_*) ── */
    --mockito-primary:       #1b2d4f;   /* Navy — nav, buttons, headings */
    --mockito-primary-dark:  #263d6b;   /* Hover states */
    --mockito-primary-light: #3a5a8a;   /* Accents, secondary borders */
    --mockito-accent:        #c8a84b;   /* Gold — CTAs, highlights, borders */
    --mockito-cream:         #fff8f0;   /* Warm section backgrounds */
    --mockito-bg:            #ffffff;   /* Page background */
    --mockito-footer-bg:     #070e18;   /* Dark footer */

    /* ── Neutral Palette ── */
    --mockito-silver:        #8a9bb5;   /* Placeholder text, muted icons */
    --mockito-silver-mid:    #c8d3e0;   /* Dividers, card borders */
    --mockito-silver-light:  #eef1f5;   /* Card backgrounds, light fills */
    --mockito-light:         #f4f7fb;   /* Input backgrounds */

    /* ── Text Colors (Customizer: mockito_color_text) ── */
    --mockito-text:          #0f1c2e;   /* Primary body text */
    --mockito-muted:         #5a6e85;   /* Secondary / helper text */

    /* ── Semantic Colors ── */
    --mockito-error:         #c0392b;   /* Error states, sale badges */
    --mockito-success:       #1a6b42;   /* Success states, in-stock */

    /* ── Border Radius ── */
    --mockito-radius:        8px;

    /* ── Typography (Customizer: mockito_font_*) ── */
    --mockito-font-heading:  'Playfair Display', serif;
    --mockito-font-body:     'Nunito', sans-serif;
    --mockito-font-size:     16px;
}

/* ============================================================
   BASE RESET & GLOBAL STYLES
   ============================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: var(--mockito-font-body);
    background: var(--mockito-bg);
    color: var(--mockito-text);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* WordPress admin bar offset */
.admin-bar nav {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar nav {
        top: 46px;
    }
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mockito-font-heading);
    color: var(--mockito-text);
    line-height: 1.15;
}

a {
    color: var(--mockito-primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--mockito-accent);
}

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

button,
input,
select,
textarea {
    font-family: var(--mockito-font-body);
}

/* ── WordPress Core Alignment ── */
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1rem; }
.alignwide  { margin-left: -4%; margin-right: -4%; max-width: none; }
.alignfull  { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }

/* ── Screen Reader Text ── */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

/* ── Skip Link ── */
.skip-link {
    left: -9999rem;
    position: absolute;
}
.skip-link:focus {
    display: block;
    top: 1rem;
    left: 1rem;
    z-index: 9999;
    background: var(--mockito-primary);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--mockito-radius);
}

/* ── Layout Wrapper ── */
.mockito-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 4%;
}

/* ── Buttons — Global ── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mockito-primary);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 40px;
    font-family: var(--mockito-font-body);
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}
.btn-primary:hover {
    background: var(--mockito-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

.btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mockito-accent);
    color: var(--mockito-primary);
    border: none;
    padding: 12px 28px;
    border-radius: 40px;
    font-family: var(--mockito-font-body);
    font-size: 0.88rem;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-accent:hover {
    background: #d4b55a;
    color: var(--mockito-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200, 168, 75, 0.35);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    padding: 12px 26px;
    border-radius: 40px;
    font-family: var(--mockito-font-body);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* ── Section Headers — Reusable ── */
.sec-hd {
    padding: 52px 4% 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.sec-hd-left .sec-eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mockito-accent);
    margin-bottom: 6px;
}
.sec-hd-left h2 {
    font-family: var(--mockito-font-heading);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 900;
    color: var(--mockito-primary);
}
.sec-hd-left p {
    font-size: 0.85rem;
    color: var(--mockito-muted);
    margin-top: 4px;
}

/* ── Trust Strip ── */
.trust-strip {
    background: var(--mockito-light);
    border-bottom: 1px solid var(--mockito-silver-mid);
    padding: 14px 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mockito-primary);
    border-right: 1px solid var(--mockito-silver-mid);
}
.trust-item:last-child { border-right: none; }
.trust-item span { font-size: 1.15rem; }

/* ── WordPress Core Content Styles ── */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
    margin-bottom: 1rem;
}

.entry-content ul,
.entry-content ol {
    padding-left: 1.5rem;
}

.entry-content blockquote {
    border-left: 4px solid var(--mockito-accent);
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: var(--mockito-muted);
    font-style: italic;
}

/* ── WooCommerce Overrides (global) ── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top-color: var(--mockito-accent) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--mockito-accent) !important;
}
.woocommerce button.button,
.woocommerce input.button {
    background: var(--mockito-primary) !important;
    color: #fff !important;
    border-radius: 40px !important;
    font-family: var(--mockito-font-body) !important;
    font-weight: 800 !important;
    transition: background 0.2s !important;
}
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--mockito-primary-dark) !important;
}
.woocommerce button.button.alt {
    background: var(--mockito-accent) !important;
    color: var(--mockito-primary) !important;
}
.woocommerce button.button.alt:hover {
    background: #d4b55a !important;
}