/*
Theme Name:   Empty & Meaningless
Theme URI:    https://emptyandmeaningless.com
Description:  Editorial child theme for Empty & Meaningless — Adrienne Fritze Studio. Built on Divi 5. Custom typography (Newsreader + Inter) and brand palette (warm cream, deep ink, plum magenta, periwinkle blue).
Author:       Adrienne Fritze Studio
Author URI:   https://adriennefritze.com
Template:     Divi
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:  empty-meaningless
*/

/* ==========================================================================
   1. CSS VARIABLES — the brand palette and type system
   ========================================================================== */

:root {

    /* --- Brand palette --- */
    --em-cream:        #FAF7F2;  /* primary background — warm white */
    --em-ink:          #1F1B2E;  /* body text — deep, slightly cool */
    --em-magenta:      #8B2F88;  /* brand magenta — primary CTAs, hero accents */
    --em-magenta-deep: #6E2469;  /* darker magenta — hover states, pressed */
    --em-periwinkle:   #7BA0D5;  /* brand blue — secondary accents, hover */
    --em-mauve:        #B8AEB8;  /* quiet neutral — captions, dividers */

    /* --- Functional aliases (use these in components) --- */
    --em-bg:           var(--em-cream);
    --em-text:         var(--em-ink);
    --em-link:         var(--em-magenta);
    --em-link-hover:   var(--em-periwinkle);
    --em-accent:       var(--em-periwinkle);
    --em-muted:        var(--em-mauve);
    --em-divider:      var(--em-mauve);

    /* --- Typography stack --- */
    --em-serif:  'Newsreader', Georgia, 'Times New Roman', serif;
    --em-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* --- Type scale (modular, editorial proportions) --- */
    --em-text-xs:    0.8125rem;   /* 13px — fine print, captions */
    --em-text-sm:    0.9375rem;   /* 15px — meta, footer */
    --em-text-base:  1.125rem;    /* 18px — body copy, generous reading size */
    --em-text-lg:    1.25rem;     /* 20px — lead paragraphs, intros */
    --em-text-xl:    1.5rem;      /* 24px — small headings */
    --em-text-2xl:   2rem;        /* 32px — section headings */
    --em-text-3xl:   2.75rem;     /* 44px — page titles */
    --em-text-4xl:   3.75rem;     /* 60px — hero display */

    /* --- Line-heights tuned for serif body & sans UI --- */
    --em-leading-tight:  1.2;
    --em-leading-snug:   1.4;
    --em-leading-normal: 1.65;   /* body copy — generous editorial reading */
    --em-leading-loose:  1.8;

    /* --- Spacing scale --- */
    --em-space-1:  0.5rem;
    --em-space-2:  1rem;
    --em-space-3:  1.5rem;
    --em-space-4:  2rem;
    --em-space-5:  3rem;
    --em-space-6:  4.5rem;
    --em-space-7:  6rem;

    /* --- Layout --- */
    --em-content-max:    65ch;     /* optimal reading measure */
    --em-container-max:  1200px;   /* page-level container */
}

/* ==========================================================================
   2. GLOBAL — page baseline
   ========================================================================== */

body {
    background-color: var(--em-bg);
    color: var(--em-text);
    font-family: var(--em-serif);
    font-size: var(--em-text-base);
    line-height: var(--em-leading-normal);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Smooth selection in brand color */
::selection {
    background-color: var(--em-magenta);
    color: var(--em-cream);
}

/* ==========================================================================
   3. TYPOGRAPHY — the editorial heart
   ========================================================================== */

/* All headings use Newsreader serif — the editorial voice */
h1, h2, h3, h4, h5, h6,
.entry-title,
.et_pb_module_header,
.et_pb_post_title h1,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3,
.et_pb_text h4, .et_pb_text h5, .et_pb_text h6 {
    font-family: var(--em-serif);
    font-weight: 500;
    color: var(--em-text);
    line-height: var(--em-leading-tight);
    letter-spacing: -0.01em;
    margin-top: 0;
    margin-bottom: var(--em-space-2);
}

h1, .et_pb_post_title h1 {
    font-size: var(--em-text-3xl);
    font-weight: 600;
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--em-text-2xl);
    font-weight: 500;
}

h3 {
    font-size: var(--em-text-xl);
    font-weight: 500;
}

h4 {
    font-size: var(--em-text-lg);
    font-weight: 600;
}

/* Hero display — the biggest type, used sparingly */
.em-hero-title,
.et_pb_section.em-hero h1 {
    font-size: var(--em-text-4xl);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

/* Body paragraphs — generous editorial measure */
p {
    font-family: var(--em-serif);
    font-size: var(--em-text-base);
    line-height: var(--em-leading-normal);
    margin-bottom: var(--em-space-2);
    max-width: var(--em-content-max);
}

/* Lead paragraph — the opening that sets the tone */
.em-lead,
.em-lead p {
    font-size: var(--em-text-lg);
    line-height: var(--em-leading-snug);
    color: var(--em-text);
}

/* Captions, meta, footer — Inter sans, quiet */
.em-caption,
.em-meta,
.em-eyebrow,
figcaption,
.et_pb_caption_text,
.post-meta,
.entry-meta {
    font-family: var(--em-sans);
    font-size: var(--em-text-sm);
    color: var(--em-muted);
    letter-spacing: 0.01em;
}

/* Eyebrow text — small uppercase label above headings */
.em-eyebrow {
    font-size: var(--em-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    color: var(--em-muted);
    margin-bottom: var(--em-space-1);
    display: block;
}

/* Pull quote — for the moments that deserve a landing */
blockquote,
.em-pullquote {
    font-family: var(--em-serif);
    font-style: italic;
    font-size: var(--em-text-xl);
    line-height: var(--em-leading-snug);
    color: var(--em-text);
    border-left: 2px solid var(--em-periwinkle);
    padding-left: var(--em-space-3);
    margin: var(--em-space-4) 0;
    max-width: var(--em-content-max);
}

/* ==========================================================================
   4. LINKS — magenta resting, periwinkle on hover
   ========================================================================== */

a {
    color: var(--em-link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--em-link-hover);
    border-bottom-color: var(--em-link-hover);
}

/* In-prose links get an underline by default — editorial convention */
.entry-content a,
.et_pb_text a,
p a {
    border-bottom: 1px solid var(--em-link);
}

.entry-content a:hover,
.et_pb_text a:hover,
p a:hover {
    border-bottom-color: var(--em-link-hover);
}

/* ==========================================================================
   5. BUTTONS — Divi button overrides
   ========================================================================== */

/* Primary button — magenta, used for the page's main action */
.et_pb_button,
.et_pb_button_module_wrapper .et_pb_button,
button[type="submit"],
input[type="submit"],
.em-btn-primary {
    font-family: var(--em-sans) !important;
    font-size: var(--em-text-sm) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    background-color: var(--em-magenta) !important;
    color: var(--em-cream) !important;
    border: 1px solid var(--em-magenta) !important;
    border-radius: 2px !important;
    padding: 0.875rem 2rem !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    line-height: 1.2 !important;
}

.et_pb_button:hover,
.et_pb_button_module_wrapper .et_pb_button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.em-btn-primary:hover {
    background-color: var(--em-magenta-deep) !important;
    border-color: var(--em-magenta-deep) !important;
    color: var(--em-cream) !important;
}

/* Divi adds an arrow icon on hover by default — disable */
.et_pb_button:after {
    display: none !important;
}

/* Secondary button — periwinkle outline */
.em-btn-secondary,
.et_pb_button.em-btn-secondary {
    background-color: transparent !important;
    color: var(--em-periwinkle) !important;
    border: 1px solid var(--em-periwinkle) !important;
}

.em-btn-secondary:hover {
    background-color: var(--em-periwinkle) !important;
    color: var(--em-cream) !important;
}

/* ==========================================================================
   6. FORMS — input fields tuned for editorial feel
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select,
.et_pb_contact_field input,
.et_pb_contact_field textarea {
    font-family: var(--em-sans) !important;
    font-size: var(--em-text-base) !important;
    color: var(--em-text) !important;
    background-color: var(--em-cream) !important;
    border: 1px solid var(--em-mauve) !important;
    border-radius: 2px !important;
    padding: 0.75rem 1rem !important;
    line-height: 1.4 !important;
    transition: border-color 0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
.et_pb_contact_field input:focus,
.et_pb_contact_field textarea:focus {
    border-color: var(--em-magenta) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(139, 47, 136, 0.15) !important;
}

label,
.et_pb_contact_field label {
    font-family: var(--em-sans) !important;
    font-size: var(--em-text-sm) !important;
    font-weight: 500 !important;
    color: var(--em-text) !important;
    margin-bottom: 0.375rem !important;
    display: block !important;
}

::placeholder {
    color: var(--em-mauve);
    opacity: 1;
}

/* ==========================================================================
   7. NAVIGATION — site header menu
   ========================================================================== */

#main-header,
.et_pb_menu,
#et-top-navigation {
    background-color: var(--em-cream) !important;
}

#top-menu li a,
.et_pb_menu .et-menu li a,
.et_pb_menu_inner_container .et-menu li a {
    font-family: var(--em-sans) !important;
    font-size: var(--em-text-sm) !important;
    font-weight: 500 !important;
    color: var(--em-text) !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
}

#top-menu li a:hover,
.et_pb_menu .et-menu li a:hover {
    color: var(--em-magenta) !important;
    opacity: 1 !important;
}

#top-menu li.current-menu-item > a,
.et_pb_menu .et-menu li.current-menu-item > a {
    color: var(--em-magenta) !important;
}

/* ==========================================================================
   8. DIVIDERS, RULES, IMAGE ACCENTS
   ========================================================================== */

hr,
.et_pb_divider .et_pb_divider_internal {
    border: none;
    border-top: 1px solid var(--em-divider);
    margin: var(--em-space-5) 0;
    max-width: 6rem;
    border-color: var(--em-periwinkle);
}

/* Center-aligned editorial rule */
.em-rule-center {
    border: none;
    border-top: 1px solid var(--em-periwinkle);
    width: 4rem;
    margin: var(--em-space-4) auto;
}

/* ==========================================================================
   9. UTILITIES — helper classes for page-level styling
   ========================================================================== */

.em-container {
    max-width: var(--em-container-max);
    margin: 0 auto;
    padding: 0 var(--em-space-3);
}

.em-prose {
    max-width: var(--em-content-max);
    margin: 0 auto;
}

.em-center { text-align: center; }
.em-italic { font-style: italic; }

.em-bg-cream      { background-color: var(--em-cream); }
.em-bg-ink        { background-color: var(--em-ink); color: var(--em-cream); }
.em-bg-periwinkle { background-color: var(--em-periwinkle); color: var(--em-cream); }

.em-text-magenta    { color: var(--em-magenta); }
.em-text-periwinkle { color: var(--em-periwinkle); }
.em-text-muted      { color: var(--em-muted); }

/* Inverted text on dark backgrounds */
.em-bg-ink h1, .em-bg-ink h2, .em-bg-ink h3,
.em-bg-ink h4, .em-bg-ink h5, .em-bg-ink h6,
.em-bg-ink p {
    color: var(--em-cream);
}

.em-bg-ink a {
    color: var(--em-periwinkle);
    border-bottom-color: var(--em-periwinkle);
}

.em-bg-ink a:hover {
    color: var(--em-cream);
    border-bottom-color: var(--em-cream);
}

/* ==========================================================================
   10. RESPONSIVE — mobile typography adjustments
   ========================================================================== */

@media (max-width: 768px) {

    :root {
        --em-text-3xl: 2.25rem;   /* 36px on mobile */
        --em-text-4xl: 2.75rem;   /* 44px on mobile — hero stays restrained */
        --em-text-2xl: 1.625rem;  /* 26px */
    }

    body {
        font-size: 1rem;
    }

    blockquote,
    .em-pullquote {
        font-size: var(--em-text-lg);
    }
}