/*
 Theme Name:   Dairy Free Kitchen
 Theme URI:    https://dairyfreekitchen.com
 Description:  Custom GeneratePress child theme for Dairy Free Kitchen. "Butter Sticker" aesthetic pulled straight from the logo: butter-yellow fills, thick ink outlines, hard offset sticker shadows on warm cream. Static (no motion), fully responsive.
 Author:       Dairy Free Kitchen
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  dairyfreekitchen-child
*/

/* ===========================================
   DESIGN SYSTEM - "Butter Sticker"
   Brand pulled from the logo: butter-yellow
   letters with a thick black outline.
   =========================================== */
:root {
    /* Butter - the brand */
    --dfk-butter: #F8F295;
    --dfk-butter-soft: #FCF8C4;  /* lighter fill for hovers */
    --dfk-yolk: #E9D34C;         /* deeper yellow for chips/underlines */

    /* Ink - the sticker outline */
    --dfk-ink: #141312;
    --dfk-text: #4A4639;
    --dfk-muted: #8A8465;

    /* Surfaces */
    --dfk-cream: #FFF9E3;        /* page background */
    --dfk-paper: #FFFDF0;        /* header bar */
    --dfk-card: #FFFFFF;
    --dfk-line: #EFE8CC;

    /* Radius */
    --dfk-radius-sm: 10px;
    --dfk-radius: 14px;
    --dfk-radius-lg: 18px;
    --dfk-radius-xl: 22px;

    /* Sticker shadows - hard, static */
    --dfk-pop-xs: 2.5px 2.5px 0 var(--dfk-ink);
    --dfk-pop-sm: 3px 3px 0 var(--dfk-ink);
    --dfk-pop: 4px 4px 0 var(--dfk-ink);
    --dfk-pop-lg: 6px 6px 0 var(--dfk-ink);

    /* Fonts (loaded in functions.php) */
    --dfk-display: 'Baloo 2', 'Trebuchet MS', sans-serif;
    --dfk-body: 'Nunito', 'Segoe UI', sans-serif;
}

/* ===========================================
   BASE
   Font sizes & line-height stay with the
   GeneratePress customizer - only families
   and colors are set here.
   =========================================== */
body {
    font-family: var(--dfk-body);
    background: var(--dfk-cream);
    color: var(--dfk-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dfk-display);
    color: var(--dfk-ink);
    font-weight: 700;
}

.entry-content a,
.entry-summary a,
.dfk-archive-desc a {
    color: #8A6D00;
    text-decoration-color: var(--dfk-yolk);
}

/* Single post / page title */
.entry-header .entry-title {
    font-family: var(--dfk-display);
    font-weight: 800;
    line-height: 1.15;
}

/* ===========================================
   BUTTONS - butter sticker
   =========================================== */
.dfk-btn {
    display: inline-block;
    font-family: var(--dfk-display);
    font-weight: 800;
    font-size: 17px;
    line-height: 1.3;
    color: var(--dfk-ink);
    background: var(--dfk-butter);
    padding: 13px 26px;
    border-radius: var(--dfk-radius);
    border: 2.5px solid var(--dfk-ink);
    box-shadow: var(--dfk-pop-sm);
    text-decoration: none;
    cursor: pointer;
}
.dfk-btn:hover,
.dfk-btn:focus { background: var(--dfk-butter-soft); color: var(--dfk-ink); }

/* ===========================================
   HEADER & NAVIGATION
   Cream paper bar, thick ink border underneath,
   white sticker-pill menu links (as in the mock).
   =========================================== */
.site-header {
    background: var(--dfk-paper);
    border-bottom: 3px solid var(--dfk-ink);
}

.site-header .inside-header {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Logo size is left to the GeneratePress customizer setting. */

/* Desktop menu: every top-level link is a white sticker pill */
@media (min-width: 769px) {
    .main-navigation .main-nav > ul { align-items: center; }
    .main-navigation .main-nav > ul > li > a {
        font-family: var(--dfk-body);
        font-weight: 900;
        font-size: 13.5px;
        letter-spacing: .01em;
        line-height: 1.3;
        color: var(--dfk-ink);
        background: #fff;
        border: 2.5px solid var(--dfk-ink);
        border-radius: 999px;
        padding: 6px 15px;
        margin: 0 5px;
        box-shadow: var(--dfk-pop-xs);
    }
    .main-navigation .main-nav > ul > li:hover > a {
        background: var(--dfk-butter-soft);
        color: var(--dfk-ink);
    }
    .main-navigation .main-nav > ul > li.current-menu-item > a,
    .main-navigation .main-nav > ul > li.current-menu-ancestor > a {
        background: var(--dfk-butter);
        color: var(--dfk-ink);
    }
}

/* Nav sits on the paper bar - keep its own background clear */
.main-navigation,
.main-navigation .main-nav > ul { background: transparent; }

/* Dropdown (sub-menu) */
.main-navigation .main-nav ul ul {
    box-shadow: 0 6px 18px rgba(20, 19, 18, .14);
    border: 2px solid var(--dfk-ink);
    border-radius: var(--dfk-radius-sm);
    background: #fff;
}
.main-navigation .main-nav ul ul li a {
    font-family: var(--dfk-body);
    font-weight: 700;
    font-size: 15px;
    color: var(--dfk-ink);
    background: #fff;
}
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li.current-menu-item > a {
    color: var(--dfk-ink);
    background: var(--dfk-butter-soft);
}

/* Mobile toggle (hamburger) - lives on the paper bar */
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
    font-family: var(--dfk-body);
    font-weight: 900;
    color: var(--dfk-ink);
    background: transparent;
}
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus { color: var(--dfk-ink); background: var(--dfk-butter); }

/* Mobile navigation: solid, full-width, comfortably tappable */
@media (max-width: 768px) {
    .main-navigation .menu-toggle { font-size: 17px; }
    .main-navigation .main-nav ul li a {
        font-size: 18px;
        font-weight: 800;
        color: var(--dfk-ink);
        background: #fff;
    }
    .main-navigation .main-nav ul li { border-top: 1px solid var(--dfk-line); }
    .main-navigation .main-nav ul li:hover > a,
    .main-navigation .main-nav ul li.current-menu-item > a {
        background: var(--dfk-butter-soft);
        color: var(--dfk-ink);
    }
    .main-navigation .main-nav ul ul li a { font-size: 16px; padding-left: 34px; }
    .main-navigation .main-nav ul ul { border: none; box-shadow: none; }
}

/* ===========================================
   HOMEPAGE - full-width sections
   (#primary / #main stay free of grid/flex -
    grids live on custom .dfk-* containers only)
   =========================================== */
.dfk-homepage .site-content,
.dfk-homepage #primary,
.dfk-homepage #main {
    padding: 0;
    margin: 0;
    max-width: 100%;
}
.dfk-homepage .site-content { display: block; }

.dfk-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- HERO - polka-dot butter field ---- */
/* The hero is an inset ink banner - the logo's own black, warmed by
   a soft butter glow. Rounded, framed by the cream page around it. */
.dfk-hero {
    background:
        radial-gradient(55% 65% at 85% 8%, rgba(248, 242, 149, .16) 0%, rgba(248, 242, 149, 0) 65%),
        radial-gradient(circle at 7% 20%, rgba(248, 242, 149, .10) 0 18px, transparent 19px),
        radial-gradient(circle at 15% 78%, rgba(248, 242, 149, .07) 0 24px, transparent 25px),
        radial-gradient(circle at 91% 74%, rgba(248, 242, 149, .09) 0 14px, transparent 15px),
        var(--dfk-ink);
    border-radius: var(--dfk-radius-xl);
    margin: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) 0;
    padding: clamp(38px, 6vw, 62px) 24px;
}
.dfk-hero-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.dfk-hero-title {
    font-family: var(--dfk-display);
    font-weight: 800;
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.08;
    margin: 0 0 12px;
    color: var(--dfk-paper);
}
/* On ink, the emphasis words are simply butter - the logo's voice */
.dfk-hero-title .is-butter {
    font-style: normal;
    color: var(--dfk-butter);
}
.dfk-hero-subtitle {
    font-size: 17px;
    line-height: 1.65;
    color: #D9D4BC;
    max-width: 56ch;
    margin: 0 auto 26px;
}
.dfk-hero-mark {
    font-family: var(--dfk-display);
    font-weight: 700;
    color: var(--dfk-butter);
}
.dfk-hero-subtitle .dfk-hero-cat-link {
    color: var(--dfk-cream);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--dfk-yolk);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.dfk-hero-subtitle .dfk-hero-cat-link:hover { color: var(--dfk-butter); }

/* Search - white sticker bar with a butter button */
.dfk-hero-search {
    position: relative;
    max-width: 540px;
    margin: 0 auto;
}
.dfk-hero-search input[type="search"] {
    width: 100%;
    padding: 19px 72px 19px 24px;
    border: 2.5px solid var(--dfk-ink);
    border-radius: var(--dfk-radius);
    font-family: var(--dfk-body);
    font-size: 16px;
    font-weight: 600;
    background: #fff;
    color: var(--dfk-ink);
    outline: none;
}
.dfk-hero-search input[type="search"]::placeholder { color: var(--dfk-muted); }
.dfk-hero-search input[type="search"]:focus {
    box-shadow: 0 0 0 3px var(--dfk-yolk);
}
.dfk-hero-search button {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: 2px solid var(--dfk-ink);
    border-radius: var(--dfk-radius-sm);
    background: var(--dfk-butter);
    color: var(--dfk-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dfk-hero-search button:hover,
.dfk-hero-search button:focus { background: var(--dfk-butter-soft); }

/* Promise line under the search */
.dfk-hero-note {
    font-family: var(--dfk-body);
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: .03em;
    color: #D9D4BC;
    margin: 22px 0 0;
}
.dfk-hero-note .dfk-hero-note-sep { color: var(--dfk-yolk); padding: 0 6px; }

/* ---- SECTION HEADING - pill sticker ---- */
.dfk-section { padding: 34px 0 8px; }
.dfk-section-head { text-align: center; margin: 0 0 30px; }
.dfk-section-title {
    display: inline-block;
    font-family: var(--dfk-display);
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.3;
    color: var(--dfk-ink);
    background: #fff;
    border: 2.5px solid var(--dfk-ink);
    border-radius: 999px;
    padding: 10px 28px;
    box-shadow: var(--dfk-pop-sm);
    margin: 0;
}
.dfk-section-title .is-butter { font-style: normal; }
@supports (-webkit-text-stroke: 2px black) {
    .dfk-section-title .is-butter {
        color: var(--dfk-butter);
        -webkit-text-stroke: 1.8px var(--dfk-ink);
        paint-order: stroke fill;
        text-shadow: 2px 2px 0 var(--dfk-ink);
    }
}

/* ---- RECIPE CARD GRID - sticker cards ---- */
.dfk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.dfk-card {
    display: block;
    background: var(--dfk-card);
    border: 2.5px solid var(--dfk-ink);
    border-radius: var(--dfk-radius-lg);
    box-shadow: var(--dfk-pop);
    padding: 12px;
    text-decoration: none;
}
.dfk-card:hover { background: var(--dfk-paper); }
.dfk-card-media img {
    display: block;
    width: 100%;
    height: auto;
    border: 2.5px solid var(--dfk-ink);
    border-radius: var(--dfk-radius-sm);
}
.dfk-card-media--empty {
    background:
        radial-gradient(circle at 30% 30%, rgba(233, 211, 76, .4) 0 18px, transparent 19px),
        radial-gradient(circle at 75% 70%, rgba(233, 211, 76, .3) 0 24px, transparent 25px),
        var(--dfk-butter-soft);
    border: 2.5px solid var(--dfk-ink);
    border-radius: var(--dfk-radius-sm);
    padding: 22px;
    text-align: center;
    font-family: var(--dfk-display);
    font-weight: 700;
    color: var(--dfk-ink);
}
.dfk-card-body { padding: 12px 6px 6px; }
.dfk-card-chip {
    display: inline-block;
    font-family: var(--dfk-body);
    font-weight: 900;
    font-size: 12px;
    color: var(--dfk-ink);
    background: var(--dfk-butter);
    border: 2px solid var(--dfk-ink);
    border-radius: 999px;
    padding: 2px 11px;
}
.dfk-card-title {
    font-family: var(--dfk-display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.3;
    color: var(--dfk-ink);
    margin: 9px 0 2px;
}
.dfk-card:hover .dfk-card-title { color: var(--dfk-ink); }

/* ---- PICK A CRAVING - category stickers ---- */
.dfk-cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.dfk-cat {
    display: block;
    text-align: center;
    font-family: var(--dfk-display);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.3;
    color: var(--dfk-ink);
    background: var(--dfk-butter);
    border: 2.5px solid var(--dfk-ink);
    border-radius: var(--dfk-radius);
    box-shadow: var(--dfk-pop-sm);
    padding: 18px 10px;
    text-decoration: none;
}
.dfk-cat:hover { background: var(--dfk-butter-soft); color: var(--dfk-ink); }
.dfk-cat .dfk-cat-count {
    display: block;
    font-family: var(--dfk-body);
    font-weight: 700;
    font-size: 13px;
    color: var(--dfk-text);
    margin-top: 3px;
}

/* ---- BROWSE-ALL band ----
   Uses padding, not margin, so the space before the footer
   can never collapse away. */
.dfk-band {
    padding: 44px 0 72px;
}
.dfk-band-inner {
    background: var(--dfk-ink);
    border-radius: var(--dfk-radius-lg);
    padding: 30px 34px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: center;
}
.dfk-band-title {
    font-family: var(--dfk-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--dfk-butter);
    margin: 0 0 4px;
}
.dfk-band-text {
    color: var(--dfk-cream);
    font-size: 15px;
    margin: 0;
}

/* ===========================================
   CATEGORY / ARCHIVE PAGES
   Sticker cards + sidebar stays.
   =========================================== */
.dfk-archive-head {
    text-align: left;
    margin: 8px 0 30px;
}
.dfk-eyebrow {
    display: inline-block;
    font-family: var(--dfk-body);
    font-weight: 900;
    font-size: 12.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dfk-ink);
    background: var(--dfk-butter);
    border: 2px solid var(--dfk-ink);
    border-radius: 999px;
    padding: 3px 13px;
    box-shadow: var(--dfk-pop-xs);
}
.dfk-archive-title {
    font-family: var(--dfk-display);
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1.1;
    margin: 14px 0 8px;
}
.dfk-archive-desc {
    color: var(--dfk-muted);
    font-size: 16px;
    margin: 0;
    max-width: 62ch;
}

/* Archive grid: two columns beside the sidebar */
.dfk-archive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.dfk-empty {
    background: #fff;
    border: 2.5px solid var(--dfk-ink);
    border-radius: var(--dfk-radius);
    box-shadow: var(--dfk-pop-sm);
    padding: 22px 24px;
    font-weight: 700;
    color: var(--dfk-ink);
}

/* Pagination - sticker pages */
.dfk-pagination { margin: 34px 0 8px; text-align: center; }
.dfk-pagination .page-numbers {
    display: inline-block;
    font-family: var(--dfk-body);
    font-weight: 900;
    font-size: 15px;
    color: var(--dfk-ink);
    background: #fff;
    border: 2.5px solid var(--dfk-ink);
    border-radius: var(--dfk-radius-sm);
    box-shadow: var(--dfk-pop-xs);
    padding: 7px 14px;
    margin: 0 4px 8px;
    text-decoration: none;
}
.dfk-pagination .page-numbers.current,
.dfk-pagination .page-numbers:hover { background: var(--dfk-butter); color: var(--dfk-ink); }

/* Sidebar widgets - quiet paper cards */
.sidebar .widget {
    background: var(--dfk-paper);
    border: 2.5px solid var(--dfk-ink);
    border-radius: var(--dfk-radius);
    box-shadow: var(--dfk-pop-xs);
    padding: 22px;
}
.sidebar .widget .widget-title {
    font-family: var(--dfk-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--dfk-ink);
}

/* ===========================================
   FOOTER - ink slab with butter accents
   =========================================== */
.site-footer { background: var(--dfk-ink); }
.site-info { background: transparent; color: #fff; }
.site-info .inside-site-info {
    padding-top: 20px;
    padding-bottom: 20px;
}
.dfk-footer-content { text-align: center; }
.dfk-footer-site-name {
    display: block;
    font-family: var(--dfk-display);
    font-weight: 800;
    font-size: 21px;
    color: var(--dfk-butter);
    margin-bottom: 4px;
}
.dfk-footer-pages { margin-bottom: 8px; }
.dfk-footer-pages a {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    margin: 0 12px;
}
.dfk-footer-pages a:hover { color: var(--dfk-butter); }
.dfk-footer-bottom { color: #fff; }
.dfk-footer-disclaimer { font-size: 12.5px; margin: 0 0 3px; }
.dfk-footer-copy { font-size: 12.5px; margin: 0; }

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 980px) {
    .dfk-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .dfk-cats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .dfk-hero { padding: 34px 18px 38px; }
    .dfk-hero-subtitle { font-size: 15.5px; margin-bottom: 22px; }
    .dfk-hero-search input[type="search"] { padding: 16px 64px 16px 18px; }
    .dfk-hero-search button { width: 44px; height: 44px; }
    .dfk-hero-note { font-size: 12.5px; margin-top: 18px; }
    .dfk-section { padding: 22px 0 6px; }
    .dfk-archive-grid { grid-template-columns: 1fr; }
    .dfk-band-inner { grid-template-columns: 1fr; text-align: center; padding: 26px 22px; }
}

@media (max-width: 600px) {
    .dfk-grid { grid-template-columns: 1fr; }
    .dfk-cats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .dfk-cat { font-size: 16px; padding: 15px 8px; }
    .dfk-inner { padding: 0 18px; }
    .dfk-section-title { font-size: 20px; padding: 9px 20px; }
}

/* ===========================================
   MOBILE HEADER - one row for logo + menu button
   =========================================== */

/* Phones: keep the logo and the menu button together on one header row.
   The logo's flex-basis must be 0, not auto: this row wraps by base size
   before any shrinking happens, so a wide logo pushes the menu button
   onto a second line. With basis 0 the logo simply grows into the space
   the button leaves over. GP also gives .site-logo a 20px bottom margin
   on mobile - zero it so the single row lines up. */
@media (max-width: 768px) {
    .site-header .inside-header > .site-logo {
        flex: 1 1 0%;
        min-width: 0;
        margin-bottom: 0;
        margin-right: 16px;
    }

    .site-header .header-image {
        width: 100%;
        max-width: 250px;
    }
}

/* Small screens: recipe box spans the whole viewport
   width instead of sitting inside the page gutters. */

@media (max-width: 768px) {
    .entry-content .wprm-recipe-template-meadow {
        margin-left: -30px;
        margin-right: -30px;
        max-width: none;
    }
}