/*
 Theme Name:   MuteTheCarbs
 Theme URI:    https://mutethecarbs.com
 Description:  GeneratePress child theme for MuteTheCarbs. A dark slate page where the header and the opening headline share one surface, handwritten headings, a single yellow chalk mark for emphasis, and white recipe tiles pinned on top. No motion, works on every screen size.
 Author:       MuteTheCarbs
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  mutethecarbs-child
*/

/* ===========================================
   TOKENS
   Fonts (Varela Round for text, Kalam for
   headings) are set in the Customizer, so they
   are not repeated here.
   =========================================== */
:root {
    /* The slate */
    --slate-base: #1E2648;
    --slate-well: #151B36;
    --slate-raise: #28325C;

    /* Chalk on the slate */
    --slate-chalk: #F3F5FF;
    --slate-haze: #C5CCEE;
    --slate-sky: #8FA7FF;
    --slate-dash: rgba(255, 255, 255, 0.28);

    /* The yellow mark */
    --slate-yolk: #FFD84D;
    --slate-yolk-deep: #F2C425;

    /* The white tiles */
    --slate-white: #FFFFFF;
    --slate-ink: #111827;
    --slate-body: #1B1F2E;
    --slate-mute: #5B6280;
    --slate-hair: #E3E7F5;
    --slate-royal: #3048BF;
}

/* ============ HEADER ============ */

/* The header row is a centred 1400px box with side padding, so the logo
   sits on the content's left edge and the menu on its right edge. A
   dashed chalk line closes the bar. */
.site-header .inside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 40px;
    gap: 18px;
}
.site-header {
    border-bottom: 1px dashed var(--slate-dash);
}
/* GeneratePress adds clearfix pseudo-elements to .grid-container; inside
   a flex row they behave like extra items and nudge the logo and menu
   inward, so they are switched off. */
.site-header .inside-header::before,
.site-header .inside-header::after {
    display: none;
}

/* Logo height keeps the bar slim */
.site-header .site-logo {
    line-height: 0;
    margin: 0;
}
.site-header .site-logo .header-image {
    height: 46px;
    width: auto;
    max-width: 100%;
    display: block;
}

/* The nav loses its float so it can live in the flex row */
.site-header #site-navigation.main-navigation {
    float: none;
    width: auto;
    flex: 0 1 auto;
}
.site-header #site-navigation .inside-navigation {
    max-width: none;
    margin: 0;
    padding: 0;
}

.main-navigation,
.main-navigation .main-nav > ul {
    background: transparent;
}

@media (min-width: 769px) {
    .site-header .main-navigation {
        align-self: center;
    }
    .main-navigation .main-nav > ul {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .main-navigation .main-nav > ul > li > a {
        display: flex;
        align-items: center;
        line-height: 1;
        padding: 14px 16px;
        border-radius: 9px;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .main-navigation .main-nav > ul > li > a {
        font-size: 15px;
        padding: 13px 11px;
    }
}

/* Sub menus: a darker panel with a dashed chalk edge */
.main-navigation .main-nav ul ul {
    background-color: var(--slate-well);
    border: 1px dashed var(--slate-dash);
    border-radius: 9px;
    padding: 6px 0;
    min-width: 224px;
}
.main-navigation .main-nav ul ul li a {
    line-height: 1.3;
    padding: 11px 20px;
}

/* Phone menu toggle */
.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
    color: var(--slate-chalk);
    background: transparent;
}

/* Phones: logo and menu toggle on one row */
@media (max-width: 768px) {
    .site-header .inside-header {
        padding: 12px 20px;
    }
    .site-header .inside-header > .site-logo {
        flex: 1 1 0%;
        min-width: 0;
        margin-bottom: 0;
        margin-right: 14px;
    }
    .site-header .site-logo .header-image {
        height: 35px;
        width: auto;
    }
    .main-navigation .main-nav ul li {
        border-top: 1px dashed var(--slate-dash);
    }
}

/* ============ ARTICLE SPACING ============ */

.entry-content p,
.entry-content h2,
.entry-content h3,
.entry-content ul,
.entry-content ol {
    margin-bottom: 1.4em;
}

/* Photos inside posts: one moderate width, centred */
body.single .entry-content p img {
    max-width: min(680px, 100%);
    height: auto;
}
body.single .entry-content p:has(img) {
    text-align: center;
}
/* The pin-it wrapper is a fixed-width block that ignores text-align, so
   it centres itself with auto margins */
body.single .entry-content p > .essb-pin {
    margin-left: auto;
    margin-right: auto;
}

/* White boxes on the slate get the same rounding as the tiles */
.separate-containers .inside-article,
.separate-containers .widget,
.separate-containers .comments-area {
    border-radius: 14px;
}

/* ============ FOOTER ============ */

.site-info {
    background-color: var(--slate-well);
    border-top: 1px dashed var(--slate-dash);
    padding: 16px 24px 18px;
}

.slatebase {
    text-align: center;
    color: var(--slate-haze);
    font-size: 16px;
    line-height: 1.6;
}
.slatebase-row {
    margin: 0;
}
.slatebase-brand {
    color: var(--slate-yolk);
    font-weight: 700;
}
.slatebase-sep {
    color: var(--slate-sky);
    padding: 0 9px;
}
.slatebase a,
.slatebase a:visited {
    color: var(--slate-haze);
    text-decoration: none;
}
.slatebase a:hover,
.slatebase a:focus {
    color: var(--slate-yolk);
    text-decoration: underline;
}
.slatebase-legal {
    margin: 3px 0 0;
    font-size: 14px;
    color: var(--slate-sky);
}
.slatebase-aff {
    margin: 3px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--slate-sky);
}

/* ===========================================
   HOMEPAGE
   Each block lives on its own named container.
   #primary and #main are left as plain blocks.
   =========================================== */

.slatehome .site-content {
    padding: 0;
}
/* Only the page wrapper loses its box so the slate runs edge to edge.
   .inside-header and .inside-site-info keep their own padding. */
.slatehome .site.grid-container {
    max-width: 100%;
    padding: 0;
}
.slatehome .site-main {
    margin: 0;
}
.slatehome .site-main > .slatetop {
    margin-bottom: 0;
}

.slateinner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ---- OPENING - headline, yellow mark, search ---- */
.slatetop {
    text-align: center;
}
.slatetop-in {
    padding: 56px 0 42px;
}
.slatetop-title {
    font-size: clamp(40px, 5vw, 70px);
    line-height: 1.02;
    margin: 0 0 14px;
    color: var(--slate-chalk);
    text-wrap: balance;
}
/* The second half always takes its own line so the headline reads as
   two beats on every screen width */
.slatetop-title .slatetop-beat {
    display: block;
    color: var(--slate-sky);
}
/* One yellow chalk mark under the headline, slightly tilted */
.slatetop-mark {
    width: 224px;
    max-width: 60%;
    height: 5px;
    margin: 0 auto 24px;
    background-color: var(--slate-yolk);
    border-radius: 3px;
    transform: rotate(-1deg);
}
.slatetop-lead {
    color: var(--slate-haze);
    font-size: clamp(17px, 1.9vw, 21px);
    line-height: 1.5;
    margin: 0 auto 30px;
    max-width: 650px;
}

/* Search: sky frame, yellow button */
.slatefind {
    display: flex;
    align-items: center;
    max-width: 610px;
    margin: 0 auto 30px;
    background: var(--slate-white);
    border: 2px solid var(--slate-sky);
    border-radius: 14px;
    padding: 5px;
}
.slatefind input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 14px 12px 14px 20px;
    font-size: 17px;
    color: var(--slate-body);
}
.slatefind input[type="search"]:focus {
    background: transparent;
    color: var(--slate-body);
    outline: 2px solid var(--slate-royal);
    outline-offset: -2px;
    border-radius: 9px;
}
.slatefind button {
    background: var(--slate-yolk);
    color: var(--slate-base);
    border: 0;
    border-radius: 9px;
    padding: 13px 28px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}
.slatefind button:hover,
.slatefind button:focus {
    background: var(--slate-yolk-deep);
    color: var(--slate-base);
}

/* Short notes under the search */
.slatenotes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 38px;
    color: var(--slate-haze);
    font-size: 16px;
}
.slatenotes b {
    color: var(--slate-yolk);
    font-weight: 700;
    margin-right: 8px;
}

/* ---- SECTIONS ---- */
.slateblock {
    padding: 42px 0 12px;
}
.slateblock-end {
    padding-bottom: 78px;
}
.slateblock-title {
    font-size: clamp(28px, 3.2vw, 40px);
    color: var(--slate-yolk);
    margin: 0 0 24px;
}

/* ---- RECIPE TILES - white on the slate ---- */
.slatetray {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.slatepick,
.slatepick:visited {
    display: block;
    background: var(--slate-white);
    border-radius: 14px;
    text-decoration: none;
    color: var(--slate-body);
    box-shadow: 0 10px 28px rgba(8, 12, 32, 0.3);
}
.slatepick:hover,
.slatepick:focus {
    box-shadow: 0 10px 28px rgba(8, 12, 32, 0.3), 0 0 0 3px var(--slate-sky);
}
.slatepick-photo {
    display: block;
}
.slatepick-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px 14px 0 0;
}
.slatepick-tab {
    display: block;
    padding: 16px 18px 18px;
}
.slatepick-name {
    display: block;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.3;
    margin-bottom: 12px;
    color: var(--slate-ink);
}
.slatepick:hover .slatepick-name,
.slatepick:focus .slatepick-name {
    color: var(--slate-royal);
}
.slatepick-mins {
    display: inline-block;
    color: var(--slate-royal);
    border: 1.5px solid var(--slate-royal);
    border-radius: 7px;
    padding: 3px 12px;
    font-size: 14px;
    font-weight: 700;
}

/* ---- CATEGORY TILES - dashed boxes drawn on the slate ---- */
.slatetiles {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.slatetile,
.slatetile:visited {
    display: block;
    border: 2px dashed var(--slate-dash);
    border-radius: 14px;
    padding: 18px 12px 16px;
    text-align: center;
    text-decoration: none;
    color: var(--slate-chalk);
    font-family: Kalam, "Comic Sans MS", cursive;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
}
.slatetile:hover,
.slatetile:focus {
    border-color: var(--slate-yolk);
    border-style: solid;
    color: var(--slate-yolk);
}
.slatetile-tally {
    display: block;
    font-family: inherit;
    font-weight: 400;
    font-size: 15px;
    color: var(--slate-haze);
    margin-top: 2px;
}

/* ============ RESPONSIVE ============ */

@media (min-width: 769px) and (max-width: 1024px) {
    .site-header .inside-header {
        padding: 15px 40px;
    }
}

@media (max-width: 1024px) {
    .slateinner {
        padding: 0 28px;
    }
    .slatetray {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
    .slatetiles {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .site-header .inside-header {
        padding: 12px 18px;
    }
    .slateinner {
        padding: 0 18px;
    }
    .slatetop-in {
        padding: 36px 0 30px;
    }
    .slatetop-mark {
        margin-bottom: 18px;
    }
    .slatetop-lead {
        margin-bottom: 24px;
    }
    .slatefind input[type="search"] {
        padding: 12px 8px 12px 16px;
        font-size: 16px;
    }
    .slatefind button {
        padding: 11px 18px;
        font-size: 15px;
    }
    .slatenotes {
        gap: 8px 22px;
        font-size: 14.5px;
    }
    .slateblock {
        padding: 30px 0 8px;
    }
    .slateblock-end {
        padding-bottom: 54px;
    }
    .slatetray {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .slatetiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .slatetile {
        font-size: 20px;
        padding: 14px 10px 12px;
    }
}

/* ===========================================
   CATEGORY PAGES
   A chalked title block, then the same white
   tiles as the homepage. Sidebar and stock
   GeneratePress hooks are untouched.
   =========================================== */

.slatecrown {
    padding: 8px 0 30px;
    margin-bottom: 30px;
    border-bottom: 1px dashed var(--slate-dash);
    text-align: center;
}
.slatecrown-title {
    color: var(--slate-chalk);
    font-size: clamp(32px, 3.8vw, 50px);
    line-height: 1.08;
    margin: 0 0 12px;
    text-wrap: balance;
}
.slatecrown-mark {
    width: 164px;
    max-width: 60%;
    height: 5px;
    margin: 0 auto 14px;
    background-color: var(--slate-yolk);
    border-radius: 3px;
    transform: rotate(-1deg);
}
.slatecrown-tally {
    color: var(--slate-sky);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    margin: 0;
}
.slatecrown-desc {
    color: var(--slate-haze);
    font-size: 17px;
    line-height: 1.55;
    max-width: 620px;
    margin: 14px auto 0;
}

.slateboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 38px;
}

@media (min-width: 1300px) {
    .slateboard {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .slatecrown {
        padding-bottom: 22px;
        margin-bottom: 24px;
    }
    .slateboard {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 30px;
    }
}

/* Page numbers drawn like the category tiles */
.slatecats .nav-links a.page-numbers,
.slatecats .nav-links span.page-numbers {
    display: inline-block;
    border: 2px dashed var(--slate-dash);
    border-radius: 9px;
    padding: 8px 15px;
    margin: 0 5px 8px 0;
    font-weight: 700;
    font-size: 16px;
    color: var(--slate-chalk);
    text-decoration: none;
}
.slatecats .nav-links a.page-numbers:hover,
.slatecats .nav-links a.page-numbers:focus {
    border-color: var(--slate-yolk);
    border-style: solid;
    color: var(--slate-yolk);
}
.slatecats .nav-links span.page-numbers.current {
    background: var(--slate-yolk);
    border-color: var(--slate-yolk);
    border-style: solid;
    color: var(--slate-base);
}

/* An empty category shows a calm white tile instead of the stock notice,
   so the page keeps one heading and matches the rest of the site. */
.slatevoid {
    background: var(--slate-white);
    border-radius: 14px;
    padding: 34px 30px 36px;
    text-align: center;
    margin-bottom: 36px;
    box-shadow: 0 10px 28px rgba(8, 12, 32, 0.3);
}
.slatevoid-line {
    font-size: 21px;
    font-weight: 700;
    color: var(--slate-ink);
    margin: 0 0 8px;
}
.slatevoid-sub {
    color: var(--slate-mute);
    font-size: 17px;
    line-height: 1.55;
    max-width: 480px;
    margin: 0 auto 22px;
}
.slatevoid-home,
.slatevoid-home:visited {
    display: inline-block;
    background: var(--slate-royal);
    color: var(--slate-white);
    border-radius: 9px;
    padding: 12px 26px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
}
.slatevoid-home:hover,
.slatevoid-home:focus {
    background: var(--slate-base);
    color: var(--slate-yolk);
}

/* ============ SHARE BUTTONS ============
   Two places: the row above and below the article, and the bar on the
   left edge of the screen. Both take the slate colour with chalk text,
   and turn yellow on hover. Pinterest keeps its own red because readers
   recognise it instantly. */

/* ---- Row inside the article ---- */

.essb_links.essb_template_fancy-retina .essb_links_list li.essb_item {
    margin: 4px 6px 6px 0;
}

.essb_links.essb_template_fancy-retina li.essb_item > a {
    background-color: var(--slate-base) !important;
    color: var(--slate-chalk) !important;
    border: 1px solid var(--slate-raise) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

.essb_links.essb_template_fancy-retina li.essb_item > a:hover,
.essb_links.essb_template_fancy-retina li.essb_item > a:focus {
    background-color: var(--slate-raise) !important;
    background-image: none !important;
    border-color: var(--slate-yolk) !important;
    color: var(--slate-yolk) !important;
}

/* The square behind each icon is a faint chalk wash */
.essb_links.essb_template_fancy-retina li.essb_item > a .essb_icon {
    background-color: rgba(243, 245, 255, 0.12) !important;
    border-radius: 6px !important;
}

.essb_links.essb_template_fancy-retina li.essb_link_pinterest > a {
    background-color: #E60023 !important;
    border-color: #E60023 !important;
}
.essb_links.essb_template_fancy-retina li.essb_link_pinterest > a:hover,
.essb_links.essb_template_fancy-retina li.essb_link_pinterest > a:focus {
    background-color: #C1001D !important;
    border-color: #C1001D !important;
    color: var(--slate-chalk) !important;
}

/* ---- Bar on the left edge ---- */

/* A darker strip pinned to the screen edge with the same dashed chalk
   line as the header. The plugin decides where it sits; only the look
   is set here. */
.essb_links.essb_displayed_sidebar {
    background-color: var(--slate-well);
    border: 1px dashed var(--slate-dash);
    border-left: 0;
    border-radius: 0 14px 14px 0;
    padding: 12px 9px 6px;
    box-shadow: 0 8px 24px rgba(8, 11, 26, 0.35);
}

.essb_links.essb_displayed_sidebar li.essb_item > a {
    background-color: var(--slate-raise) !important;
    border-color: var(--slate-raise) !important;
    color: var(--slate-chalk) !important;
    border-radius: 11px !important;
    margin-bottom: 7px !important;
}

.essb_links.essb_displayed_sidebar li.essb_item > a .essb-svg-icon {
    fill: var(--slate-chalk);
}

.essb_links.essb_displayed_sidebar li.essb_item > a:hover,
.essb_links.essb_displayed_sidebar li.essb_item > a:focus {
    background-color: var(--slate-base) !important;
    border-color: var(--slate-yolk) !important;
    color: var(--slate-yolk) !important;
}
.essb_links.essb_displayed_sidebar li.essb_item > a:hover .essb-svg-icon,
.essb_links.essb_displayed_sidebar li.essb_item > a:focus .essb-svg-icon {
    fill: var(--slate-yolk);
}

.essb_links.essb_displayed_sidebar li.essb_link_pinterest > a {
    background-color: #E60023 !important;
    border-color: #E60023 !important;
}
.essb_links.essb_displayed_sidebar li.essb_link_pinterest > a:hover,
.essb_links.essb_displayed_sidebar li.essb_link_pinterest > a:focus {
    background-color: #C1001D !important;
    border-color: #C1001D !important;
}
.essb_links.essb_displayed_sidebar li.essb_link_pinterest > a:hover .essb-svg-icon,
.essb_links.essb_displayed_sidebar li.essb_link_pinterest > a:focus .essb-svg-icon {
    fill: var(--slate-chalk);
}

.essb_links.essb_displayed_sidebar li.essb_item > a .essb_network_name {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
}

/* Share count above the buttons */
.essb_links.essb_displayed_sidebar li.essb_totalcount_item .essb-tc-block {
    display: block;
    text-align: center;
    margin: 0 0 9px;
    line-height: 1.1;
}
.essb_links.essb_displayed_sidebar li.essb_totalcount_item .essb-tc-block-number {
    display: block;
    color: var(--slate-chalk);
    font-weight: 700;
    font-size: 20px;
}
.essb_links.essb_displayed_sidebar li.essb_totalcount_item .essb-tc-block-text {
    display: block;
    color: var(--slate-yolk);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-right: 0;
}

/* Share count beside the in-article row */
.essb_links.essb_template_fancy-retina li.essb_totalcount_item .essb-tc-block-number {
    color: var(--slate-base);
    font-weight: 700;
    font-size: 19px;
}
.essb_links.essb_template_fancy-retina li.essb_totalcount_item .essb-tc-block-text {
    color: var(--slate-royal);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ============ IN-POST HEADINGS AND STEP LABELS ============
   Kalam comes from the Customizer; these only add the chalk marks. */

/* h2: a short yellow stroke under the words, slightly tilted, the same
   mark as under the homepage headline */
.entry-content h2.mtthcrbs-h2 {
    position: relative;
    color: var(--slate-ink);
    margin-top: 1.6em;
    margin-bottom: 1em;
    padding-bottom: 14px;
}
.entry-content h2.mtthcrbs-h2::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: 0;
    width: 98px;
    height: 5px;
    border-radius: 3px;
    background-color: var(--slate-yolk);
    transform: rotate(-1deg);
}

/* h3: royal blue with a sky dot in front */
.entry-content h3.mtthcrbs-h3 {
    color: var(--slate-royal);
    margin-top: 1.3em;
    margin-bottom: 0.7em;
}
.entry-content h3.mtthcrbs-h3::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--slate-sky);
    margin-right: 10px;
    vertical-align: 0.1em;
}

/* "Step N": a small slate pill with a yellow dot */
.entry-content span.mtthcrbs-stp {
    display: inline-block;
    background-color: var(--slate-base);
    color: var(--slate-chalk);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    padding: 9px 15px 9px 12px;
    border-radius: 999px;
    border: 1px dashed var(--slate-dash);
}
.entry-content span.mtthcrbs-stp::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--slate-yolk);
    margin-right: 9px;
    vertical-align: 0.05em;
}
/* The paragraph holding the pill sits close to the step text below it */
.entry-content p:has(> span.mtthcrbs-stp) {
    margin-bottom: 0.6em;
}