/*
Theme Name: Foodica Child
Template: foodica
Version: 1.2.1
Description: Custom styling for Meals & Mixers on top of Foodica.
*/

:root {
    --mm-accent: #c1572d;
    --mm-accent-dark: #a1461f;
    --mm-accent-tint: #fbe9e1;
    --mm-ink: #2b2b2b;
    --mm-muted: #767676;
    --mm-bg: #faf6f1;
}

/* ---------- Page background: warm off-white instead of flat white ---------- */

body {
    background-color: var(--mm-bg) !important;
}

/* ---------- Header: colour in the top bar and main nav strip ---------- */

.top-navbar {
    background: var(--mm-ink) !important;
    border-bottom: none !important;
}

.top-navbar a {
    color: #fff !important;
}

.header_social .socicon {
    color: #fff !important;
}

.header_social .zoom-social-icons-list .socicon:hover {
    color: var(--mm-accent-tint) !important;
}

.main-navbar {
    background: var(--mm-accent) !important;
    border-top: none !important;
    border-bottom: none !important;
}

.main-navbar .navbar-wpz > li > a {
    color: #fff !important;
    border-radius: 999px;
    transition: background 150ms ease, color 150ms ease;
}

.main-navbar .navbar-wpz > li > a:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff !important;
}

.main-navbar .navbar-wpz > li.current-menu-item > a,
.main-navbar .navbar-wpz > li.current_page_item > a {
    background: var(--mm-ink);
    color: #fff !important;
}

/* Dropdown submenu (Categories / Tags): keep it on the theme's own white panel
   styling, just tie the colour to the accent instead of the default grey. */

.main-navbar .navbar-wpz ul a {
    color: var(--mm-ink) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.main-navbar .navbar-wpz ul .menu-item-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--mm-muted);
}

.main-navbar .navbar-wpz ul a:hover .menu-item-count {
    color: var(--mm-accent);
}

.main-navbar .navbar-wpz ul a:hover {
    color: var(--mm-accent) !important;
    background: var(--mm-accent-tint);
}

.main-navbar .sb-icon-search:before,
.main-navbar .sb-icon-search:hover:before {
    color: #fff !important;
}

/* ---------- Footer: contrasting dark strip, credit line replaced ---------- */

.site-footer {
    background: var(--mm-ink);
    border-top: none;
    margin-top: 40px;
}

.site-footer .site-info {
    padding: 24px 0;
    text-align: center;
}

.site-footer .site-info .copyright {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 14px;
}

/* ---------- Sidebar widgets: two-tone cards — a solid accent heading block
   sitting above a white content block, instead of plain centred text with a
   thin divider line (which read as "floaty" and didn't line up with the
   left-aligned content headings) ---------- */

#sidebar .widget {
    background: #fff;
    border: 1px solid rgba(43, 43, 43, 0.08);
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    margin-bottom: 26px;
    text-align: left;
}

#sidebar .widget:after {
    display: none;
}

#sidebar .wp-block-group .wp-block-group__inner-container > h2,
#sidebar .widget .title,
#sidebar .widget_block > h2 {
    background: var(--mm-accent);
    color: #fff;
    text-align: left;
    font-size: 14px;
    letter-spacing: 1.5px;
    padding: 16px 26px;
    margin: 0;
    border-bottom: none;
    display: block;
}

#sidebar .widget .title span {
    color: #fff;
}

#sidebar .widget > ul,
#sidebar .widget > .tagcloud,
#sidebar .widget > div:not(.title) {
    padding: 20px 26px 24px;
}

#sidebar .widget ul {
    margin: 0;
}

#sidebar .widget ul li {
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid rgba(43, 43, 43, 0.07);
}

#sidebar .widget ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#sidebar .widget ul li a {
    color: var(--mm-ink) !important;
    font-size: 14px;
}

#sidebar .widget ul li a:hover {
    color: var(--mm-accent) !important;
}

/* ---------- Links & buttons: swap the grey-on-grey for a warm accent ---------- */

a {
    color: var(--mm-ink);
}

a:hover, a:focus {
    color: var(--mm-accent);
}

.cat-links a {
    color: var(--mm-accent);
    font-weight: 600;
}

.cat-links a:hover {
    color: var(--mm-accent-dark);
}

/* ---------- Unified pill-button style: Read More + pagination share one shape ---------- */

.readmore_button a,
.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px !important;
    border-radius: 999px !important;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid var(--mm-accent) !important;
    color: var(--mm-accent) !important;
    background: transparent;
    transition: background 150ms, color 150ms, border-color 150ms;
}

.readmore_button a:hover,
.readmore_button a:active,
.navigation.pagination a.page-numbers:hover {
    color: #fff !important;
    background: var(--mm-accent) !important;
    border-color: var(--mm-accent) !important;
}

.navigation.pagination .page-numbers.current {
    background: var(--mm-ink) !important;
    border-color: var(--mm-ink) !important;
    color: #fff !important;
}

.navigation.pagination .page-numbers.dots {
    border: none !important;
    background: none !important;
    padding: 10px 4px !important;
    color: var(--mm-muted) !important;
}

.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.content-area .navigation.pagination {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(43, 43, 43, 0.1);
}

.site-title a,
.site-title a:hover {
    color: var(--mm-ink);
}

/* ---------- Strapline: was very low contrast ---------- */

.site-description {
    color: #4a4a4a !important;
    font-weight: 500;
}

/* ---------- Categories and tags: one shared pill style, centred, with counts ----------
   Both widgets render into a ".tagcloud" wrapper (see child sidebar.php) so a single
   set of rules covers both instead of keeping two different list styles in sync. */

#categories.widget,
#tag_cloud.widget {
    text-align: left;
}

.tagcloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.tagcloud a {
    display: inline-flex;
    align-items: center;
    border: none !important;
    border-radius: 999px !important;
    background: var(--mm-accent-tint) !important;
    color: var(--mm-accent-dark) !important;
    padding: 6px 6px 6px 16px !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    font-size: 13px !important;
    font-weight: 600;
    transition: background 150ms, color 150ms;
}

.tagcloud a .post_count {
    display: inline-block;
    background: rgba(255, 255, 255, 0.6) !important;
    color: var(--mm-accent-dark) !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
    margin: 0 0 0 10px !important;
    font-size: 11px !important;
    font-weight: 600;
    float: none !important;
    height: auto !important;
    transition: background 150ms, color 150ms;
}

.tagcloud a:hover {
    background: var(--mm-accent) !important;
    color: #fff !important;
}

.tagcloud a:hover .post_count {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

/* ---------- Post meta: separate the date from everything else, drop the byline ---------- */

.entry-author,
.edit-link {
    display: none !important;
}

.entry-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.entry-meta .entry-date {
    font-size: 13px;
    color: var(--mm-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.entry-meta .comments-link {
    font-size: 13px;
    color: var(--mm-muted);
}

/* single post: same cleanup for the byline row under the title */
.single .entry-meta,
article.post .entry-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ---------- Equal-height cards in the blog loop, Read More always aligned ---------- */

.recent-posts {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
}

.recent-posts article.regular-post {
    display: flex !important;
    flex-direction: column !important;
}

.recent-posts article.regular-post .entry-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.recent-posts article.regular-post .entry-content {
    flex: 0 0 auto !important;
}

.recent-posts article.regular-post .readmore_button {
    margin-top: auto !important;
}

/* ---------- Post meta: centred date, no comment count until there are comments ---------- */

.recent-posts .entry-meta {
    align-items: center;
    text-align: center;
}

.recent-posts .entry-meta .comments-link {
    display: none;
}

/* ---------- Card image: make sure the whole thumbnail is clickably obvious ---------- */

.post-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

.post-thumb a {
    display: block;
}

.post-thumb img {
    transition: transform 300ms ease;
}

.post-thumb a:hover img {
    transform: scale(1.04);
}

/* ---------- Visual cohesion: recipe card keeps its rounded corners, but give
   the big content images the same soft radius instead of a hard square ---------- */

.entry-content img,
.wp-block-image img,
.post-thumb img,
.single .post-thumb img {
    border-radius: 6px;
}

/* recipe card itself already has rounded corners from the plugin; leave as-is */

/* ---------- Single-post hero: uncropped source, CSS-contained instead of a hard
   server-side crop that was clipping portrait photos top/bottom ---------- */

.post-thumb-single {
    max-height: 520px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    border-radius: 6px;
}

.post-thumb-single img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: center 35%;
    border-radius: 6px;
}

@media (max-width: 600px) {
    .post-thumb-single,
    .post-thumb-single img {
        height: 320px;
        max-height: 320px;
    }
}

/* single-post meta line: date + category, own lines, no clutter */
.single .entry-category,
article .entry-category {
    display: block;
    font-size: 13px;
    color: var(--mm-muted);
    margin-top: 2px;
}