/* ─── Hayat Naturals — Main Stylesheet ─────────────────────────────────────── */

/* Design Tokens */
:root {
    --color-primary:              #735b24;
    --color-primary-container:    #c8a96a;
    --color-on-primary:           #ffffff;
    --color-on-primary-container: #533d07;
    --color-secondary:            #6d5c3f;
    --color-tertiary:             #546347;
    --color-surface:              #fff8f2;
    --color-background:           #fff8f2;
    --color-on-surface:           #1e1b17;
    --color-on-surface-variant:   #4d463a;
    --color-surface-container:    #f4ede5;
    --color-outline-variant:      #d0c5b5;

    --color-dark-brown:  #5A4A2F;
    --color-cream:       #F5F1E8;
    --color-gold:        #C8A96A;
    --color-sage:        #7A8A6B;
    --color-light-gold:  #E6D8C3;

    --font-display: 'Cinzel', Georgia, serif;
    --font-body:    'Libre Baskerville', Georgia, serif;
}

/* ─── Base ──────────────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* Remove default WP margin from images in content */
.wp-post-image { margin: 0; }

/* ─── Material Symbols ──────────────────────────────────────────────────────── */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* ─── Custom Component Classes ───────────────────────────────────────────────── */

/* Botanical watermark background */
.botanical-watermark {
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 20c-10 30-40 40-40 70s30 50 40 90c10-40 40-60 40-90s-30-40-40-70z' fill='%23C8A96A' fill-opacity='0.05'/%3E%3C/svg%3E");
}

/* Gold underline (journal article headline) */
.hayat-gold-underline {
    position: relative;
    display: inline-block;
}
.hayat-gold-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 80px;
    height: 2px;
    background-color: var(--color-gold);
}

/* Botanical leaf SVG filter */
.botanical-leaf {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Gold border utility */
.gold-border { border-color: var(--color-gold); }

/* ─── Navigation ─────────────────────────────────────────────────────────────── */

/* Remove list styles WP adds to nav menus */
.hayat-nav ul,
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    align-items: center;
}

nav ul li { margin: 0; }

/* Custom logo sizing */
.custom-logo { max-height: 60px; width: auto; }

/* ─── WordPress Content Defaults ─────────────────────────────────────────────── */

.entry-content h1, .entry-content h2, .entry-content h3 {
    font-family: var(--font-display);
    letter-spacing: 0.1em;
    color: var(--color-dark-brown);
}

.entry-content p { line-height: 1.8; }

.entry-content a { color: var(--color-primary); }

.entry-content blockquote {
    border-left: 4px solid var(--color-gold);
    padding-left: 1.5rem;
    font-style: italic;
    color: var(--color-on-surface-variant);
}

/* ─── Forms (override WP defaults) ──────────────────────────────────────────── */

input[type="email"],
input[type="text"],
input[type="search"],
textarea {
    font-family: var(--font-body);
    border-radius: 0;
}

input:focus,
textarea:focus {
    outline: none;
    box-shadow: none;
}

/* ─── Buttons ───────────────────────────────────────────────────────────────── */

button, .wp-block-button__link {
    font-family: var(--font-display);
    letter-spacing: 0.2em;
    border-radius: 0;
    cursor: pointer;
}

/* ─── Pagination ─────────────────────────────────────────────────────────────── */

.nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.page-numbers {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.2em;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-outline-variant);
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.3s;
}

.page-numbers.current,
.page-numbers:hover {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    border-color: var(--color-primary-container);
}

/* ─── Elementor Overrides ────────────────────────────────────────────────────── */

/* Ensure Elementor pages use full width */
.elementor-page .site-content,
.elementor-page main {
    padding: 0;
    max-width: none;
}

/* Elementor header/footer location wrappers */
.elementor-location-header,
.elementor-location-footer {
    width: 100%;
}

/* ─── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    :root {
        --spacing-section: 48px;
    }

    .hayat-gold-underline { font-size: 32px; }
}

/* ─── Print ──────────────────────────────────────────────────────────────────── */

@media print {
    header, footer, nav, .email-capture { display: none; }
    body { background: white; color: black; }
}