/*
Theme Name: Emaan Aftab
Theme URI: https://emaanaftab.com
Description: Premium women's fashion child theme for Emaan Aftab. Built on Hello Elementor. Holds the brand design system (global colors, typography, button styles) and safe WooCommerce overrides. Edit content from the WordPress admin — do not hardcode content here.
Author: Emaan Aftab
Author URI: https://emaanaftab.com
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: emaanaftab
Tags: e-commerce, fashion, elementor
*/

/* ==========================================================================
   EMAAN AFTAB — BRAND DESIGN SYSTEM
   These CSS variables mirror the Elementor Global Colors/Fonts so the brand
   stays consistent even on non-Elementor (WooCommerce core) templates.
   Single source of truth — change here and in Elementor Global Settings.
   ========================================================================== */
:root {
    /* Color palette (Section 6 of the master prompt) */
    --ea-primary: #1A1A1A;        /* Charcoal Black */
    --ea-secondary: #F5F1EB;      /* Warm Ivory */
    --ea-accent: #B08D57;         /* Soft Gold */
    --ea-cta: #8B5E3C;            /* Luxury Brown (buttons) */
    --ea-cta-hover: #74492C;      /* Darker brown for hover */
    --ea-bg: #FFFFFF;             /* Background */
    --ea-text: #1A1A1A;           /* Default text */
    --ea-text-muted: #6B6B6B;     /* Muted text */
    --ea-sale: #9B2D20;           /* Sale / badge (deep terracotta) */

    /* Typography */
    --ea-font-heading: "Playfair Display", Georgia, serif;
    --ea-font-body: "Poppins", "Inter", system-ui, sans-serif;

    /* Spacing scale (8px base) */
    --ea-space-1: 8px;
    --ea-space-2: 16px;
    --ea-space-3: 24px;
    --ea-space-4: 32px;
    --ea-space-5: 48px;
    --ea-space-6: 64px;

    /* Radius */
    --ea-radius: 4px;
}

/* --- Typography ---------------------------------------------------------- */
body {
    font-family: var(--ea-font-body);
    color: var(--ea-text);
    background-color: var(--ea-bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ea-font-heading);
    color: var(--ea-primary);
    line-height: 1.25;
    font-weight: 600;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
h4 { font-size: 1.35rem; }
h5 { font-size: 1.15rem; }
h6 { font-size: 1rem; letter-spacing: .03em; text-transform: uppercase; }

a { color: var(--ea-cta); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ea-cta-hover); }

/* --- Shared button style (reused everywhere) ----------------------------- */
.ea-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.wp-block-button__link {
    background-color: var(--ea-cta);
    color: #fff;
    border: none;
    border-radius: var(--ea-radius);
    padding: 14px 32px;
    font-family: var(--ea-font-body);
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: .85rem;
    transition: background-color .25s ease, transform .1s ease;
    cursor: pointer;
}
.ea-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.wp-block-button__link:hover {
    background-color: var(--ea-cta-hover);
    color: #fff;
}

/* --- WooCommerce brand touches ------------------------------------------- */
.woocommerce span.onsale {
    background-color: var(--ea-sale);
    color: #fff;
    border-radius: var(--ea-radius);
    font-family: var(--ea-font-body);
    font-weight: 600;
    min-height: auto;
    min-width: auto;
    line-height: 1;
    padding: 6px 12px;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
    color: var(--ea-primary);
    font-weight: 600;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
    color: var(--ea-text-muted);
    font-weight: 400;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
    color: var(--ea-sale);
    text-decoration: none;
}

/* Product card: subtle premium hover lift */
.woocommerce ul.products li.product {
    transition: transform .25s ease, box-shadow .25s ease;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
}

/* Generous whitespace / premium spacing */
.woocommerce .products { gap: var(--ea-space-3); }

/* Accessibility: visible focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 2px solid var(--ea-accent);
    outline-offset: 2px;
}

/* --- Header logo: centered, sized (40% larger than the 56px baseline) ----- */
.site-header .custom-logo,
.site-header .custom-logo-link img,
header .custom-logo,
.custom-logo-link img,
img.custom-logo {
    height: 78px !important;        /* 56px + 40% */
    width: auto !important;
    max-width: 360px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .site-header .custom-logo,
    .site-header .custom-logo-link img,
    header .custom-logo,
    .custom-logo-link img,
    img.custom-logo {
        height: 62px !important;    /* 44px + 40% */
        max-width: 280px;
    }
}

/* Center the logo on its own row at the top, nav centered beneath it.
   Hello Elementor makes .site-header itself the flex row (display:flex;
   justify-content:space-between). Override it to a centered column. */
.site-header.site-header,
.site-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    text-align: center !important;
}
.site-header .header-inner {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100%;
    text-align: center;
}
.site-header .site-branding,
.site-header .site-logo {
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    text-align: center;
    margin: 0 auto !important;
}
.site-header .custom-logo-link {
    display: inline-flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
}
.site-header .site-navigation {
    width: 100%;
    justify-content: center !important;
    text-align: center;
}
.site-header .site-navigation .menu,
.site-header .site-navigation ul {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hide the text tagline / site description everywhere (logo carries the brand). */
.site-description,
p.site-description,
.site-header .site-description {
    display: none !important;
}

/* Footer brand logo (if placed) keeps a modest size too */
.ea-footer-logo img { height: 52px; width: auto; }

/* --- Hide redundant page titles ----------------------------------------- */
/* Static pages (Home, About, FAQ, policies, Custom Stitching, etc.) carry
   their own <h1> inside the content, so the theme's auto page title is a
   duplicate that looks cluttered. Hide it ONLY on static pages — product,
   category, shop and blog titles are kept. */
.page .entry-title,
.page-id-334 .entry-title,
body.page .page-title,
.page .entry-header > .entry-title {
    display: none !important;
}

/* Front page specifically: never show a title bar above the hero. */
.home .entry-title,
.home .page-title,
.home .entry-header {
    display: none !important;
}

/* Tighten the gap left where the title was, so the hero sits clean at top. */
.page .entry-header:empty { display: none !important; margin: 0 !important; }