/*
 Theme Name:   DeliciousEggless
 Theme URI:    https://deliciouseggless.com
 Description:  Custom GeneratePress child theme for DeliciousEggless - delicious eggless recipes. "Candy Ink" aesthetic pulled straight from the logo: hot candy pink + near-black ink outlines on a soft pink page, Chelsea Market display type, piped-frosting scallop edges. Static (no motion), fully responsive.
 Author:       DeliciousEggless
 Template:     generatepress
 Version:      2.0.0
 Text Domain:  deliciouseggless-child
*/

/* ===========================================
   DESIGN SYSTEM - "Candy Ink"
   Brand pulled from the logo: hot pink fill,
   thick ink outline, pink underline bar.
   Scallop edges stay - piped frosting is the
   site's signature.
   =========================================== */
:root {
    /* Candy pink - the brand */
    --delegg-pink: #EE3D9F;        /* logo pink - buttons, accents */
    --delegg-pink-deep: #C9247F;   /* pressed / hover, accessible link pink */
    --delegg-pink-light: #FF9ED4;  /* light accent on dark grounds */

    /* Ink - the logo outline */
    --delegg-ink: #171114;         /* dark bands, outlines, headings */
    --delegg-text: #2E2229;        /* body text */
    --delegg-soft: #85657A;        /* muted text */

    /* Surfaces */
    --delegg-page: #FFF4FA;        /* page background */
    --delegg-panel: #FFD9EE;       /* pink panels */
    --delegg-petal: #FFEAF6;       /* lightest pink fill */
    --delegg-cream: #FFF8FC;       /* text on dark grounds */
    --delegg-card: #FFFFFF;
    --delegg-line: #F5C9E3;

    /* Type */
    --delegg-display: "Chelsea Market", "Georgia", serif;
    --delegg-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Shape */
    --delegg-round-sm: 12px;
    --delegg-round: 20px;
    --delegg-round-lg: 28px;

    /* Depth - pink-tinted, soft */
    --delegg-shadow: 0 10px 26px rgba(201, 36, 127, 0.12);
    --delegg-shadow-deep: 0 14px 34px rgba(201, 36, 127, 0.18);
}

/* ============ GLOBAL CHROME ============ */

body {
    background-color: var(--delegg-page);
    font-family: var(--delegg-body);
    color: var(--delegg-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--delegg-display);
    font-weight: 400;
    color: var(--delegg-ink);
    letter-spacing: 0.3px;
}

a {
    color: var(--delegg-pink-deep);
}
a:hover, a:focus {
    color: var(--delegg-pink);
}

/* Sugar-dust texture, homepage only - a faint pink dot field */
body.delegg-homepage {
    background-image: radial-gradient(circle, #FFD9EE 1px, transparent 1.4px);
    background-size: 28px 28px;
}

/* ============ HEADER & NAVIGATION ============ */

.site-header {
    background-color: var(--delegg-card);
    border-bottom: 2px solid var(--delegg-ink);
    box-shadow: 0 2px 12px rgba(201, 36, 127, 0.06);
}

.main-title a,
.main-title a:hover,
.main-title a:visited {
    font-family: var(--delegg-display);
    color: var(--delegg-ink);
    letter-spacing: 0.4px;
}

.site-description {
    color: var(--delegg-soft);
    font-family: var(--delegg-body);
}

.main-navigation,
.main-navigation .main-nav > ul {
    background: transparent;
}
.main-navigation .main-nav > ul > li > a {
    font-family: var(--delegg-body);
    font-weight: 800;
    font-size: 15px;
    color: var(--delegg-ink);
}
.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li:focus > a,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
    color: var(--delegg-pink);
    background: transparent;
}
.main-navigation .main-nav ul ul {
    background-color: var(--delegg-card);
    border: 2px solid var(--delegg-ink);
    border-radius: var(--delegg-round-sm);
    box-shadow: var(--delegg-shadow);
}
.main-navigation .main-nav ul ul li a {
    font-family: var(--delegg-body);
    font-weight: 700;
    color: var(--delegg-ink);
}
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li.current-menu-item > a {
    color: var(--delegg-pink-deep);
    background-color: var(--delegg-petal);
}
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
    font-family: var(--delegg-body);
    font-weight: 800;
    color: var(--delegg-ink);
    background: transparent;
}
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
    color: var(--delegg-pink);
    background: transparent;
}
@media (max-width: 768px) {
    .main-navigation .main-nav ul li a {
        font-family: var(--delegg-body);
        font-weight: 800;
        color: var(--delegg-ink);
    }
    .main-navigation .main-nav ul li {
        border-top: 1px solid var(--delegg-line);
    }
    .main-navigation .main-nav ul li:hover > a,
    .main-navigation .main-nav ul li.current-menu-item > a {
        color: var(--delegg-pink);
    }
}

/* ============ CONTENT CHROME (colors only - layout untouched) ============ */

.entry-title,
.entry-title a,
.entry-title a:visited {
    color: var(--delegg-ink);
}
.entry-title a:hover {
    color: var(--delegg-pink-deep);
}

.entry-meta {
    color: var(--delegg-soft);
}

/* Sidebar widgets - candy cards */
.sidebar .widget {
    background-color: var(--delegg-card);
    border: 2px solid var(--delegg-ink);
    border-radius: var(--delegg-round);
    box-shadow: var(--delegg-shadow);
    padding: 26px;
}
.sidebar .widget .widget-title {
    font-family: var(--delegg-display);
    color: var(--delegg-ink);
    font-size: 20px;
}

/* ============ FOOTER - ink band ============ */

.site-footer {
    background-color: var(--delegg-ink);
}
.site-info {
    background: transparent;
    color: var(--delegg-cream);
}

.delegg-foot {
    text-align: center;
    padding: 34px 20px 30px;
}
.delegg-foot-name {
    font-family: var(--delegg-display);
    font-size: 24px;
    color: var(--delegg-pink);
    display: block;
    margin-bottom: 12px;
}
.delegg-foot-pages {
    margin-bottom: 14px;
}
.delegg-foot-pages a,
.delegg-foot-pages a:visited {
    color: var(--delegg-pink-light);
    font-weight: 800;
    font-size: 14.5px;
    margin: 0 12px;
    text-decoration: none;
}
.delegg-foot-pages a:hover,
.delegg-foot-pages a:focus {
    color: #FFFFFF;
    text-decoration: underline;
}
.delegg-foot-copy {
    color: rgba(255, 248, 252, 0.72);
    font-size: 13px;
    margin: 0;
}

/* ============ HOMEPAGE ============ */

/* GeneratePress wraps the page; the front-page sections span full width */
.delegg-homepage .site-content {
    padding: 0;
}

/* ---- HERO - ink board, candy glow, piped scallop edge ---- */
.delegg-hero {
    position: relative;
    background-image:
        radial-gradient(680px 340px at 50% 22%, rgba(238, 61, 159, 0.28), transparent 62%),
        linear-gradient(160deg, #221721 8%, var(--delegg-ink) 88%);
    padding: 74px 24px 108px;
    text-align: center;
}
/* Double-piped frosting edge: a candy-pink scallop row peeking above the page one */
.delegg-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7px;
    height: 15px;
    background-image: radial-gradient(circle at 12px 0, var(--delegg-pink) 8px, transparent 9px);
    background-size: 24px 15px;
    background-repeat: repeat-x;
    background-position: 12px 0;
}
.delegg-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 16px;
    background-image: radial-gradient(circle at 12px 0, var(--delegg-page) 9px, transparent 10px);
    background-size: 24px 16px;
    background-repeat: repeat-x;
}
.delegg-hero-inner {
    max-width: 780px;
    margin: 0 auto;
}
.delegg-hero-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--delegg-pink-light);
    border: 2px solid rgba(238, 61, 159, 0.6);
    border-radius: 999px;
    padding: 7px 18px;
    margin-bottom: 22px;
}
.delegg-hero-title {
    font-family: var(--delegg-display);
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.16;
    color: var(--delegg-cream);
    margin: 0 0 18px;
}
.delegg-hero-title .is-berry {
    color: var(--delegg-pink);
}
.delegg-hero-sub {
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 248, 252, 0.85);
    max-width: 54ch;
    margin: 0 auto 30px;
}
.delegg-hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.delegg-btn,
.delegg-btn:visited {
    display: inline-block;
    background-color: var(--delegg-pink);
    color: #FFFFFF;
    font-family: var(--delegg-body);
    font-weight: 800;
    font-size: 15.5px;
    border: 2px solid var(--delegg-ink);
    border-radius: 999px;
    padding: 12px 30px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.delegg-btn:hover,
.delegg-btn:focus {
    background-color: var(--delegg-pink-deep);
    color: #FFFFFF;
}
.delegg-btn-ghost,
.delegg-btn-ghost:visited {
    display: inline-block;
    border: 2px solid var(--delegg-pink);
    color: var(--delegg-pink-light);
    font-family: var(--delegg-body);
    font-weight: 800;
    font-size: 15.5px;
    border-radius: 999px;
    padding: 12px 28px;
    text-decoration: none;
}
.delegg-btn-ghost:hover,
.delegg-btn-ghost:focus {
    border-color: var(--delegg-pink-light);
    color: #FFFFFF;
    background-color: rgba(238, 61, 159, 0.14);
}

/* ---- SHARED SECTION SHELL ---- */
.delegg-section {
    padding: 54px 24px 10px;
}
.delegg-inner {
    max-width: 1120px;
    margin: 0 auto;
}
.delegg-heading {
    text-align: center;
    margin-bottom: 34px;
}
/* Logo echo: pink fill with an ink outline */
.delegg-heading h2 {
    font-size: clamp(26px, 3.4vw, 36px);
    margin: 0;
    color: var(--delegg-pink);
    -webkit-text-stroke: 1.2px var(--delegg-ink);
    text-shadow: 0 2px 0 rgba(23, 17, 20, 0.18);
}
.delegg-heading h2 .is-berry {
    color: var(--delegg-pink);
}
.delegg-heading p {
    color: var(--delegg-soft);
    font-size: 16.5px;
    margin: 10px 0 0;
}
/* Logo echo: the outlined pink underline bar */
.delegg-heading .delegg-swash {
    display: block;
    width: 86px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--delegg-pink);
    border: 2px solid var(--delegg-ink);
    margin: 16px auto 0;
}

/* ---- CATEGORY PILLS - outlined like the logo ---- */
.delegg-flavors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
}
.delegg-flavor,
.delegg-flavor:visited {
    background-color: var(--delegg-card);
    border: 2px solid var(--delegg-ink);
    color: var(--delegg-ink);
    font-weight: 800;
    font-size: 15px;
    border-radius: 999px;
    padding: 10px 24px;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(201, 36, 127, 0.10);
}
.delegg-flavor:hover,
.delegg-flavor:focus {
    background-color: var(--delegg-panel);
    color: var(--delegg-ink);
}

/* ---- FAVORITES SHOWCASE ---- */
.delegg-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
}
.delegg-treat,
a.delegg-treat,
a.delegg-treat:visited {
    display: flex;
    flex-direction: column;
    background-color: var(--delegg-card);
    border: 2px solid var(--delegg-ink);
    border-radius: var(--delegg-round);
    box-shadow: var(--delegg-shadow);
    text-decoration: none;
    color: var(--delegg-text);
}
a.delegg-treat:hover,
a.delegg-treat:focus {
    border-color: var(--delegg-pink);
    box-shadow: var(--delegg-shadow-deep);
}
.delegg-treat-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 17px 17px 0 0;
}
.delegg-treat-photo-empty {
    background-image: linear-gradient(160deg, var(--delegg-panel), var(--delegg-petal));
    border-radius: 17px 17px 0 0;
    border-bottom: 2px solid var(--delegg-ink);
    text-align: center;
    padding: 52px 20px;
}
.delegg-treat-photo-empty span {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--delegg-pink-deep);
}
.delegg-treat-info {
    padding: 18px 20px 20px;
}
.delegg-treat-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--delegg-pink-deep);
    margin-bottom: 7px;
}
.delegg-treat-name {
    font-family: var(--delegg-display);
    font-size: 18px;
    line-height: 1.32;
    color: var(--delegg-ink);
    margin: 0;
}
.delegg-treat-soon {
    display: inline-block;
    background-color: var(--delegg-petal);
    color: var(--delegg-pink-deep);
    border: 1.5px solid var(--delegg-pink);
    font-size: 12.5px;
    font-weight: 800;
    border-radius: 999px;
    padding: 4px 13px;
    margin-top: 12px;
}

/* ---- STORY BAND - candy panel with scalloped top ---- */
.delegg-note {
    position: relative;
    background-color: var(--delegg-panel);
    margin-top: 64px;
    padding: 66px 24px 58px;
    text-align: center;
}
.delegg-note::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 14px;
    background-image: radial-gradient(circle at 11px 0, var(--delegg-page) 8px, transparent 9px);
    background-size: 22px 14px;
    background-repeat: repeat-x;
}
.delegg-note-inner {
    max-width: 700px;
    margin: 0 auto;
}
.delegg-note h2 {
    font-size: clamp(24px, 3.2vw, 33px);
    margin: 0 0 18px;
    color: var(--delegg-ink);
}
.delegg-note p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--delegg-text);
    margin: 0 0 16px;
}
.delegg-note p.is-lead::first-letter {
    font-family: var(--delegg-display);
    font-size: 1.55em;
    color: var(--delegg-pink-deep);
}

/* ---- WEEKLY CALLOUT - ink card ---- */
.delegg-callout {
    padding: 64px 24px 78px;
}
.delegg-callout-card {
    max-width: 880px;
    margin: 0 auto;
    background-image:
        radial-gradient(420px 220px at 50% 0%, rgba(238, 61, 159, 0.25), transparent 70%),
        linear-gradient(160deg, #221721, var(--delegg-ink));
    border-radius: var(--delegg-round-lg);
    box-shadow: var(--delegg-shadow-deep);
    text-align: center;
    padding: 46px 34px 50px;
}
.delegg-callout-card h2 {
    color: var(--delegg-pink);
    font-size: clamp(23px, 3vw, 31px);
    margin: 0 0 12px;
}
.delegg-callout-card p {
    color: rgba(255, 248, 252, 0.85);
    font-size: 16.5px;
    max-width: 52ch;
    margin: 0 auto 26px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 640px) {
    .delegg-hero {
        padding: 54px 18px 96px;
    }
    .delegg-hero-sub {
        font-size: 16.5px;
    }
    .delegg-section {
        padding: 44px 18px 8px;
    }
    .delegg-showcase {
        gap: 20px;
    }
    .delegg-note {
        margin-top: 48px;
        padding: 56px 18px 46px;
    }
    .delegg-callout {
        padding: 48px 18px 60px;
    }
}