/*
 * Theme Name: Dr. Vipin Mathur
 * Theme URI:
 * Description:
 * Version:    1.0
 * Text Domain: dr-vipin-mathur
 */

/* =========================================
   GOOGLE FONTS
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,500;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');


/* =========================================
   GLOBAL DESIGN TOKENS
   ========================================= */

:root {
    /* ---- Backgrounds ---- */
    --color-bg:               #FAFAF7;
    --color-bg-alt:           #F4F2EA;
    --color-bg-dark:          #2C2C2A;

    /* ---- Foreground / text ---- */
    --color-fg:               #2C2C2A;
    --color-fg-alt:           #F1EFE8;

    /* ---- Accent — Forest Green ---- */
    --color-accent:           #175C52;
    --color-accent-secondary: #0F6E56;
    --color-accent-dark:      #115448;
    --color-accent-light:     rgba(23, 92, 82, 0.10);

    /* ---- Muted / subtle text ---- */
    --color-fg-muted:         rgba(44, 44, 42, 0.55);
    --color-fg-subtle:        rgba(44, 44, 42, 0.15);
    --color-fg-alt-muted:     rgba(241, 239, 232, 0.60);
    --color-fg-alt-subtle:    rgba(241, 239, 232, 0.15);

    --color-white:            #FFFFFF;

    /* ---- Rose / dusty salmon ---- */
    --color-rose:             #C8847F;
    --color-rose-dark:        #A8625D;
    --color-rose-light:       rgba(200, 132, 127, 0.12);

    /* ---- Stone ---- */
    --color-stone:            #B8B7B1;
    --color-stone-light:      #888780;

    /* ---- Typography ---- */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans:  'Inter', sans-serif;

    /* ---- Layout ---- */
    --container-max:   1280px;
    --section-pad-y:   100px;
    --section-pad-x:   48px;

    /* ---- Radii ---- */
    --radius-sm:    6px;
    --radius-md:   12px;
    --radius-lg:   24px;
    --radius-pill: 100px;

    /* ---- Transitions ---- */
    --transition: 0.3s ease;


    /* ════════════════════════════════════════
       HEADER TOKENS — DEFAULT THEME
       (Light cream bg · dark forest-green content)
       ════════════════════════════════════════ */

    --hdr-bg:              var(--color-bg);
    --hdr-bg-glass:        rgba(125, 139, 137, 0.6);
    --hdr-text:            rgba(15, 61, 54, 0.75);
    --hdr-text-hover:      #0F3D36;
    --hdr-accent:          #175C52;
    --hdr-accent-hover:    #0F3D36;
    --hdr-social:          rgba(15, 61, 54, 0.60);
    --hdr-social-hover:    #175C52;
    --hdr-scrolled-shadow: rgba(15, 61, 54, 0.14);
    --hdr-capsule-bg:      #175C52;
    --hdr-capsule-border:  rgba(23, 92, 82, 0.30);
    --hdr-active-bg:       #0F3D36;
    --hdr-active-text:     #F1EFE8;
    --hdr-hover-bg:        rgba(15, 61, 54, 0.75);
    --hdr-divider:         rgba(15, 61, 54, 0.12);
    --hdr-nav-text:        rgba(241, 239, 232, 0.85);
    --hdr-nav-text-hover:  #F1EFE8;

    /* Dropdown tokens — default */
    --hdr-dropdown-bg:           #faf0e0;
    --hdr-dropdown-border:       rgba(94, 184, 164, 0.22);
    --hdr-dropdown-shadow:       rgba(15, 61, 54, 0.30);
    --hdr-dropdown-hover-bg:     rgba(255, 255, 255, 0.07);
    --hdr-dropdown-item-txt:     rgba(15, 61, 54, 0.60);
    --hdr-dropdown-item-hover:   #175C52;
    --hdr-dropdown-accent-bar:   #C8847F;


    /* ════════════════════════════════════════
       FOOTER TOKENS — DEFAULT THEME
       (Forest green)
       ════════════════════════════════════════ */

    --ftr-bg:              #115448;
    --ftr-bg-solid:        #0F3D36;
    --ftr-bg-lower:        #0A2922;
    --ftr-text:            rgba(241, 239, 232, 0.92);
    --ftr-text-hover:      #FFFFFF;
    --ftr-accent:          #C8847F;
    --ftr-accent-2:        #2E9E87;
    --ftr-gradient:        linear-gradient(90deg, #175C52 0%, #2E9E87 100%);
    --ftr-muted:           rgba(241, 239, 232, 0.55);
    --ftr-muted-hover:     rgba(241, 239, 232, 0.88);
    --ftr-border:          rgba(255, 255, 255, 0.08);
}


/* ════════════════════════════════════════
   HEADER TOKENS — GUNS THEME
   (Light cream bg · dark tobacco capsule · yellow accent)
   ════════════════════════════════════════ */

[data-theme="guns"] {
    --hdr-bg:              #faf0e0;
    --hdr-bg-glass:        rgba(103, 81, 42, 0.3);
    --hdr-text:            rgba(253, 246, 235, 0.70);
    --hdr-text-hover:      #FFFFFF;
    --hdr-accent:          #251801;
    --hdr-accent-hover:    #544222;
    --hdr-social:          rgba(253, 246, 235, 0.55);
    --hdr-social-hover:    rgba(253, 246, 235, 0.88);
    --hdr-scrolled-shadow: rgba(0, 0, 0, 0.25);
    --hdr-capsule-bg:      #3A2004;
    --hdr-capsule-border:  rgba(240, 168, 48, 0.30);
    --hdr-active-bg:       #f8e7c9;
    --hdr-active-text:     #f8e7c9;
    --hdr-hover-bg:        rgba(255, 255, 255, 0.08);
    --hdr-divider:         rgba(255, 255, 255, 0.08);
    --hdr-nav-text:        rgba(253, 246, 235, 0.82);
    --hdr-nav-text-hover:  #FDF6EB;

    --hdr-dropdown-bg:           #2a1702;
    --hdr-dropdown-border:       rgba(240, 168, 48, 0.22);
    --hdr-dropdown-shadow:       rgba(0, 0, 0, 0.35);
    --hdr-dropdown-hover-bg:     rgba(255, 255, 255, 0.07);
    --hdr-dropdown-item-txt:     rgba(253, 246, 235, 0.78);
    --hdr-dropdown-item-hover:   #FDF6EB;
    --hdr-dropdown-accent-bar:   #F0A830;

    /* Footer tokens — guns */
    --ftr-bg:              #5C3508;
    --ftr-bg-solid:        #4A2C06;
    --ftr-bg-lower:        #3A2004;
    --ftr-text:            rgba(253, 246, 235, 0.92);
    --ftr-text-hover:      #FFFFFF;
    --ftr-accent:          #F0A830;
    --ftr-accent-2:        #C8881A;
    --ftr-gradient:        linear-gradient(90deg, #854F0B 0%, #C8881A 100%);
    --ftr-muted:           rgba(253, 246, 235, 0.55);
    --ftr-muted-hover:     rgba(253, 246, 235, 0.88);
    --ftr-border:          rgba(255, 255, 255, 0.08);
}


/* ════════════════════════════════════════
   HEADER TOKENS — READINGS THEME
   (Light cream bg · deep navy capsule · warm gold accent)
   ════════════════════════════════════════ */

[data-theme="readings"] {
    --hdr-bg:              #F1EFE8;
    --hdr-bg-glass:        rgba(15, 28, 50, 0.55);
    --hdr-text:            rgba(15, 28, 50, 0.70);
    --hdr-text-hover:      #0F1C32;
    --hdr-accent:          #1E3A6E;
    --hdr-accent-hover:    #0F1C32;
    --hdr-social:          rgba(15, 28, 50, 0.55);
    --hdr-social-hover:    #0F1C32;
    --hdr-scrolled-shadow: rgba(15, 28, 50, 0.12);
    --hdr-capsule-bg:      #1A2E50;
    --hdr-capsule-border:  rgba(255, 239, 157, 0.28);
    --hdr-active-bg:       #F1EFE8;
    --hdr-active-text:     #EBF5F1;
    --hdr-hover-bg:        rgba(15, 28, 50, 0.07);
    --hdr-divider:         rgba(15, 28, 50, 0.10);
    --hdr-nav-text:        rgba(255, 248, 222, 0.82);
    --hdr-nav-text-hover:  #FFF8DE;

    --hdr-dropdown-bg:           #111e36;
    --hdr-dropdown-border:       rgba(255, 239, 157, 0.20);
    --hdr-dropdown-shadow:       rgba(15, 28, 50, 0.30);
    --hdr-dropdown-hover-bg:     rgba(255, 255, 255, 0.06);
    --hdr-dropdown-item-txt:     rgba(255, 248, 222, 0.78);
    --hdr-dropdown-item-hover:   #FFF8DE;
    --hdr-dropdown-accent-bar:   #FFEF9D;

    /* Footer tokens — readings */
    --ftr-bg:              #253850;
    --ftr-bg-solid:        #182840;
    --ftr-bg-lower:        #111E2E;
    --ftr-text:            rgba(255, 248, 222, 0.90);
    --ftr-text-hover:      #FFF8DE;
    --ftr-accent:          #FFEF9D;
    --ftr-accent-2:        #F5D96A;
    --ftr-gradient:        linear-gradient(90deg, #2E4A6A 0%, #C9A800 100%);
    --ftr-muted:           rgba(255, 248, 222, 0.50);
    --ftr-muted-hover:     rgba(255, 248, 222, 0.85);
    --ftr-border:          rgba(255, 239, 157, 0.16);
}


/* ════════════════════════════════════════
   HEADER TOKENS — WILDLIFE THEME
   (Light cream bg · rich teal capsule · teal accent)
   ════════════════════════════════════════ */

[data-theme="wildlife"] {
    --hdr-bg:              #F1EFE8;
    --hdr-bg-glass:        rgba(15, 61, 54, 0.70);
    --hdr-text:            rgba(15, 61, 54, 0.70);
    --hdr-text-hover:      #0F3D36;
    --hdr-accent:          #0F5147;
    --hdr-accent-hover:    #0A3830;
    --hdr-social:          rgba(15, 61, 54, 0.55);
    --hdr-social-hover:    #0F3D36;
    --hdr-scrolled-shadow: rgba(15, 61, 54, 0.12);
    --hdr-capsule-bg:      #0F3D36;
    --hdr-capsule-border:  rgba(94, 207, 184, 0.35);
    --hdr-active-bg:       #F5FAF8;
    --hdr-active-text:     #F1EFE8;
    --hdr-hover-bg:        rgba(15, 61, 54, 0.08);
    --hdr-divider:         rgba(15, 61, 54, 0.10);
    --hdr-nav-text:        rgba(235, 245, 241, 0.82);
    --hdr-nav-text-hover:  #EBF5F1;

    --hdr-dropdown-bg:           #0a2822;
    --hdr-dropdown-border:       rgba(94, 207, 184, 0.25);
    --hdr-dropdown-shadow:       rgba(15, 61, 54, 0.30);
    --hdr-dropdown-hover-bg:     rgba(255, 255, 255, 0.06);
    --hdr-dropdown-item-txt:     rgba(235, 245, 241, 0.78);
    --hdr-dropdown-item-hover:   #EBF5F1;
    --hdr-dropdown-accent-bar:   #5ECFB8;

    /* Footer tokens — wildlife */
    --ftr-bg:              #0F3D36;
    --ftr-bg-solid:        #0A2922;
    --ftr-bg-lower:        #061A15;
    --ftr-text:            rgba(235, 245, 241, 0.92);
    --ftr-text-hover:      #FFFFFF;
    --ftr-accent:          #5ECFB8;
    --ftr-accent-2:        #2E9E87;
    --ftr-gradient:        linear-gradient(90deg, #175C52 0%, #2E9E87 100%);
    --ftr-muted:           rgba(235, 245, 241, 0.55);
    --ftr-muted-hover:     rgba(235, 245, 241, 0.88);
    --ftr-border:          rgba(255, 255, 255, 0.08);
}


/* =========================================
   BASE RESET
   ========================================= */

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

html { scroll-behavior: smooth; }

body {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-weight: 300;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 800;
}


/* =========================================
   UTILITY CLASSES
   ========================================= */

.eyebrow {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-rose);
}

h1 em, h2 em, h3 em {
    font-style: italic;
    font-weight: 700;
    color: var(--color-accent);
}

.section-cream { background-color: var(--color-bg); }
.section-white  { background-color: var(--color-white); }
.section-dark   { background-color: var(--color-bg-dark); color: var(--color-fg-alt); }


/* =========================================
   BUTTONS
   ========================================= */

.btn-primary {
    display: inline-block;
    background-color: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition);
    text-decoration: none;
}
.btn-primary:hover {
    background-color: var(--color-accent-dark);
}

.btn-outline {
    display: inline-block;
    background-color: transparent;
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 0.65rem 1.4rem;
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
    text-decoration: none;
}
.btn-outline:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.btn-text {
    display: inline-block;
    background: transparent;
    color: var(--color-rose);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
    border: none;
    cursor: pointer;
    transition: color var(--transition);
}
.btn-text:hover {
    color: var(--color-rose-dark);
}