/*!
Theme Name: Testing
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: testing
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Testing is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
    font-family: "Playfair Display", serif;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
    font-family: "Playfair Display", serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #fb8d2e;
}

a:visited {
	color: #fb8d2e;
}

a:hover,
a:focus,
a:active {
	color: #fb8d2e;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
        justify-content: end;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}



/* Custom styles */
/* --- 1. Variables & Global Resets --- */
:root {
    --mm-orange: #fb8d2e;
    --mm-black: #000000;
    --mm-white: #ffffff;
    --mm-text: #333333;
    --header-height: 80px; /* Adjust based on your logo size */
}

body {
    margin: 0;
    font-family: "Playfair Display", serif;
    color: var(--mm-text);
    line-height: 1.6;
}

/* --- 2. Header & Sticky Core --- */
.site-header {
    position: relative;
    background: var(--mm-white);
    width: 100%;
    z-index: 9999;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

/* Applied via navigation.js */
.site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    animation: slideDown 0.35s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: var(--header-height);
}

.header-container .current-menu-item a {
	color: #000;
}

/* --- 3. Branding & Logo --- */
.site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.custom-logo {
    width: 50px; /* Mobile size */
    height: auto;
    display: block;
    transition: width 0.3s ease;
}

a.no_underline {
	text-decoration: none;
}

.brand-text {
    font-family: "Rockwell", "Rockwell Nova", "Roboto Slab", "Georgia", serif;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    /* Reduce line-height significantly to "thin" out the vertical gap */
    line-height: 0.85; 
    color: var(--mm-black);
    font-size: 1.2rem;
}

.brand-title {
    display: block;
    /* Remove any extra letter spacing that might be widening the text */
    letter-spacing: -0.03em; 
}

.brand-subtitle {
    display: block;
    /* Subtitle inherits everything from .brand-text now */
}

/* --- 4. Desktop Navigation --- */
.main-navigation {
    display: block;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 35px;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    color: var(--mm-orange);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: opacity 0.2s;
}

.nav-menu a:hover {
    opacity: 0.8;
}

/* --- 5. Header Actions (Social + Toggle) --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-social {
    display: flex;
    gap: 12px; /* Adjust this number to get the perfect distance between the circles */
    align-items: center;
}

.social-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #ffe0c9;
    color: #000;
    border-radius: 50%;
    transition: transform 0.2s;
}

.social-circle:hover {
    transform: scale(1.1);
}

/* --- Visibility Logic --- */
.mobile-only {
    display: none; /* Hidden by default */
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: flex; /* Show inside hamburger */
        justify-content: center;
        gap: 20px;
        margin-bottom: 40px; /* Space below the menu links */
        padding-top: 20px;
    }

    /* Make circles slightly bigger for thumb-tapping in menu */
    .mobile-only .social-circle {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Ensure Desktop still looks right */
@media (min-width: 769px) {
    .desktop-only {
        display: flex;
        gap: 15px;
    }
}

.menu-toggle {
    display: none; /* Desktop hidden */
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10001;
}

.menu-toggle span {
    width: 100%;
    height: 3px;
    background: var(--mm-orange);
    transition: 0.3s;
    border-radius: 2px;
}

/* Hamburger Animation when .active */
.menu-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

#menu-main-footer .current-menu-item a {
	color: rgb(255,105,0);
}

.footer-main {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 40px;
    padding: 0 5% 60px;
}

.footer-social-right {
    display: flex;
    gap: 12px; /* Adjust this number to get the perfect distance between the circles */
    align-items: center;
}

.footer-logo {
    width: 80px;
    margin-bottom: 15px;
}

.footer-site-name {
    font-family: "Rockwell", "Rockwell Nova", "Roboto Slab", "Georgia", serif;
    
    font-weight: 900;
    text-transform: uppercase;
    
    letter-spacing: -0.03em; 
    line-height: 1.1;
    margin: 0 0 10px 0;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin-bottom: 12px;
}

.footer-bottom-bar {
    background: var(--mm-orange);
    color: var(--mm-black);
    padding: 15px 5%;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}

/* --- 7. Responsive Breakpoints --- */

/* --- Mobile & Tablet Logic --- */
@media screen and (max-width: 900px) {
    .menu-toggle { 
        display: flex !important; 
    }

    /* Base state for navigation on mobile */
    #site-navigation.main-navigation {
        display: none; 
        position: absolute;
        top: 100%; /* Positions it directly below the header */
        left: 0;
        width: 100%;
        background: #ffffff;
        z-index: 9998;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    /* THE FIX: Highly specific selector to override any "display: none" */
    header#masthead nav#site-navigation.is-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure the list stacks vertically */
    .nav-menu {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none;
		gap: 0 !important;
    }

    .nav-menu li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-menu a {
        display: block;
        padding: 20px;
        text-align: center;
        color: var(--mm-orange);
        text-decoration: none;
        font-weight: 700;
    }
}

/* --- Ensure Parent Header is Relative --- */
.site-header {
    position: relative; /* Essential for 'top: 100%' to work on the nav */
    z-index: 9999;
}

/* Large Desktop (768px and up) */
@media screen and (min-width: 768px) {
    .custom-logo {
        width: 50px;
    }

	#site-navigation {
		padding: 18px;
	} 
}

/* --- Footer Base --- */
.site-footer {
    background: #fff3ea;
    color: #ffffff;
    padding: 40px 0 0 0; /* Reduced top padding */
    font-family: 'Inter', sans-serif;
}

/* --- Footer Grid Layout --- */
.footer-main {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Mobile: 1 column | Desktop: 3 columns (defined in media query) */
    grid-template-columns: 1fr; 
    gap: 30px;
    padding: 0 5% 40px;
    text-align: center; /* Center for mobile */
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content on mobile */
}

.footer-logo {
    width: 60px; /* Smaller logo for mobile */
    height: auto;
    margin-bottom: 15px;
}

.footer-site-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.footer-title {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 25px;
    color: #333;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin-bottom: 8px;
}

.footer-col a {
    color: black;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.footer-email {
    color: var(--mm-orange);
    text-decoration: none;
    word-break: break-all; /* Prevents overflow on tiny screens */
}

/* --- Orange Copyright Bar --- */
.footer-bottom-bar {
    background: var(--mm-orange);
    color: #000000;
    padding: 15px 5%;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Stack on mobile */
    align-items: center;
    gap: 10px;
    text-align: center;
}

.footer-bottom-container p {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
}



/* --- Desktop Adjustments (768px and up) --- */
@media screen and (min-width: 768px) {
    .footer-main {
        grid-template-columns: 1.5fr 1.5fr; /* 3 Columns like the image */
        text-align: left;
        align-items: start;
    }

    .footer-col {
        align-items: flex-start; /* Align left for desktop */
    }

    .footer-logo {
        width: 80px; /* Larger for desktop */
    }

    .footer-bottom-container {
        flex-direction: row; /* Horizontal for desktop */
        justify-content: center;
    }
}

.footer-bottom-bar {
    background: var(--mm-orange);
    color: var(--mm-black);
    padding: 15px 5%;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    /* This is the magic: Copyright to Left, Links to Right */
    justify-content: space-between; 
    align-items: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.footer-copyright p {
    margin: 0; /* Remove default paragraph margins */
}

.footer-legal-links {
    display: flex;
    align-items: center;
}

.footer-legal-links a {
    color: var(--mm-black);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-legal-links a:hover {
    opacity: 0.6;
}

.footer-sep {
    margin: 0 12px;
    font-weight: 400;
    opacity: 0.5;
}

/* Mobile: Stack them so they don't overlap on small screens */
@media (max-width: 768px) {
    .footer-bottom-container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .footer-copyright {
        order: 1; /* Copyright on top on mobile */
    }
    
    .footer-legal-links {
        order: 2; /* Links below on mobile */
    }
}



/* --- Hero Video Section --- */
.home-hero-video {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 75vh; /* Adjust this if she wants it taller/shorter */
    background: #000; /* Black background in case video takes a sec to load */
    overflow: hidden;
}

.video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    /* This keeps the "Splashing" centered and minimizes extreme cropping */
    object-fit: cover; 
    object-position: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* KEY CHANGE: Transparent top, dark only at the bottom */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
    display: flex;
    align-items: flex-end; /* Moves text to bottom */
    justify-content: center;
    color: white;
    text-align: center;
    padding-bottom: 60px; /* Space from the bottom edge */
}

@media (max-width: 768px) {
    .home-hero-video {
        height: 60vh; /* Shorter on mobile to prevent vertical stretching */
    }
    
    /* If the glasses are STILL cut, we can force the video to center better */
    .video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover; 
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .home-hero-video {
        height: 100vh; /* Full height for horizontal mobile */
    }
}

.hero-text-box {
    max-width: 800px;
    padding: 0 20px;
    /* Optional: Add a text shadow for extra readability on bright frames */
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.hero-text-box h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 3px;
}

.hero-text-box p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* 2. Style the Intro Text inside the wrapper */
.home-intro-text {
    text-align: center;
    padding: 80px 20px 40px; /* Generous top padding for breathing room */
}

.hero-tagline {
    font-family: "Playfair Display", serif; /* Or Lora / Georgia */
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: #a67c52; /* That soft earthy brown from your screenshot */
    margin-bottom: 25px;
    font-style: italic; /* Common in food editorial styles */
}

.hero-divider {
    width: 80px;
    height: 2px;
    background-color: #d4a373; /* The warm tan underline */
    margin: 0 auto;
}

/* --- 2x2 Category Grid --- */
.home-categories-section { padding: 80px 5%; max-width: 1200px; margin: 0 auto; }
.category-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.category-card {
    background: #fff;
    text-align: center;
    border: 1px solid #eee;
    padding-bottom: 25px;
    transition: 0.3s;
    text-decoration: none;
}

.category-card img { width: 100%; height: 250px; object-fit: cover; }
.category-card h3 { margin: 20px 0 10px; font-size: 1.5rem; color: var(--mm-black); }
.category-card p { padding: 0 20px; font-size: 0.95rem; color: #666; margin-bottom: 20px; }

.category-card a:hover {
    color: #000 !important;
}

/* --- Minimalist Clickable Text (Replacing Buttons) --- */
.view-all-link {
    display: inline-block;
    color: var(--mm-black);
    text-decoration: none;
    font-weight: 500;
    font-family: "Playfair Display", serif;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 4px; /* Space between text and underline */
    transition: color 0.3s ease;
}

/* The Permanent Underline */
.view-all-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; /* Always full width */
    height: 1px; /* Thin, elegant line */
    background-color: #d4a373; /* Using the warm tan/orange from the divider */
    transition: background-color 0.3s ease, height 0.3s ease;
}

/* Hover Effect: Subtle emphasis */
.view-all-link:hover {
    color: #d4a373;
}

.view-all-link:hover::after {
    background-color: var(--mm-black); /* Line shifts to black on hover */
    height: 1.5px; /* Becomes slightly more pronounced */
}

@media screen and (max-width: 768px) {
    .category-grid-2x2 { grid-template-columns: 1fr; }
}

/* Renderers */
/* --- Collection Grid General Styles --- */
.collection-wrapper {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.collection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
}

.collection-main-title {
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
}

.collection-more-link {
    text-decoration: none;
    color: #000;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.arrow-circle {
    background: #000;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Grid Logic */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

@media (max-width: 900px) {
    .collection-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .collection-grid { grid-template-columns: 1fr; }
}

.col-card {
    position: relative;
    margin-bottom: 20px;
}

.col-img-wrapper {
    height: 300px;
    position: relative;
    border-radius: 4px;
    overflow: hidden; /* CRITICAL: Clips the image to the border-radius */
}

.featured .col-img-wrapper {
    height: 400px; /* Taller featured card */
}

.col-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This replaces background-size: cover */
    object-position: center; /* This replaces background-position: center */
    display: block;
}

.col-label {
    position: absolute;
    top: 15px;
    left: 0;
    background: var(--mm-orange);
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 4px 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2; /* Ensures it sits above the image */
}

.col-title {
    margin: 15px 0 0 0;
    font-size: 18px;
    font-weight: 800;
    color: #000;
    line-height: 1.3;
}

/* Hanging Title for Featured Card */
.col-title.overlay {
    background: #fff;
    margin: 0;
    padding: 15px;
    position: absolute;
    bottom: -20px;
    left: 15px;
    right: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    font-size: 20px;
    z-index: 3; /* Above the label and image */
}

.featured {
    margin-bottom: 40px; /* Extra space for overlay title */
}

.recipe-overlay-link {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10; /* Sits on top of everything to make the whole card clickable */
}

/* Blog Section */
/* Update this existing class to force centering globally */
.section-title {
    text-align: center;
    font-size: 2.1rem !important;
    font-weight: 100 !important;
    text-transform: uppercase;
    margin-bottom: 40px;
    width: 100%;
    display: block;
    color: var(--mm-black);
    letter-spacing: 1px;
}

/* Ensure the Blog Section matches the site width */
.home-blog-section {
    padding: 80px 0;
    background: #ffffff;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns for blog as requested */
    gap: 30px;
}

/* Adjusting the Card slightly for the "Clean" look */
.blog-card {
    border: none;
    background: #fff;
    transition: 0.3s;
}

.blog-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.blog-content h3 {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
}

.blog-content p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
}

/* --- The Magic Container --- */
.mm-main-content-wrapper {
    max-width: 1200px; /* Constrains the content */
    margin: 0 auto;    /* Centers the box */
    padding: 0 20px;   /* Prevents touching edges on mobile */
}

/* --- Title Alignment Fix --- */
.section-title {
    text-align: center;
    font-size: 2.1rem;
    font-weight: 100;
    text-transform: uppercase;
    margin: 60px 0 40px 0; /* Space above and below titles */
    letter-spacing: 2px;
    color: var(--mm-black);
    width: 100%;
}

/* --- Adjusting Categories for the new wrapper --- */
.home-categories-section {
    padding: 40px 0;
}

/* --- Adjusting Blog Section for the new wrapper --- */
.home-blog-section {
    padding: 40px 0 80px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Ensure the Featured Shortcode wrapper doesn't double-pad */
.collection-wrapper {
    padding: 0 !important; /* Wrapper is now handled by mm-main-content-wrapper */
    margin: 40px auto !important;
}

/* --- Mobile Fixes --- */
@media screen and (max-width: 768px) {
    .blog-grid, .category-grid-2x2 {
        grid-template-columns: 1fr;
    }
    .section-title {
        font-size: 24px;
    }
}

/* --- Bottom Contact CTA (Split Layout) --- */
.home-contact-cta {
    padding: 80px 0;
    margin-top: 40px;
    background: #ffffff; /* Clean white background */
}

.cta-split-container {
    display: flex;
    align-items: center;
    gap: 60px;
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    padding: 40px;
    border-radius: 8px;
}

.cta-image {
    flex: 1;
}

.cta-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.cta-content {
    flex: 1.2;
    text-align: left; /* Aligned left to match the split feel */
}

.cta-content h2 {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--mm-black);
}

.cta-content p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 35px;
}

/* --- Button Variants (Consolidated) --- */
.mm-btn {
    display: inline-block;
    background: transparent !important; /* Force remove old button backgrounds */
    padding: 0 0 4px 0 !important;      /* Remove button padding, add bottom space */
    text-decoration: none;
    font-weight: 600;
    font-family: "Playfair Display", serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    border: none !important;            /* Remove old borders */
    transition: all 0.3s ease;
}

/* The Base Underline */
.mm-btn::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    transition: all 0.3s ease;
}

/* --- Dark Variant (e.g., About Section) --- */
.mm-btn.dark-btn {
    color: var(--mm-black) !important;
}

.mm-btn.dark-btn::after {
    background-color: var(--mm-black);
}

.mm-btn.dark-btn:hover {
    opacity: 0.7;
}

/* --- Orange Variant (e.g., Contact CTA) --- */
.mm-btn.orange-btn {
    color: var(--mm-black) !important; /* Keep text black for readability */
}

.mm-btn.orange-btn::after {
    background-color: var(--mm-orange); /* Underline is the brand orange */
}

.mm-btn.orange-btn:hover {
    color: var(--mm-orange) !important;
}

.mm-btn.orange-btn:hover::after {
    height: 2px; /* Makes the orange pop more on hover */
}

/* --- Mobile Responsiveness for CTA --- */
@media screen and (max-width: 900px) {
    .cta-split-container {
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }
    
    .cta-content {
        text-align: center;
        padding: 20px 0;
    }
    
    .cta-image img {
        height: 250px;
    }
}

/* --- About Page Specifics --- */
.about-hero {
    text-align: center;
    padding: 60px 0 40px;
}

.about-intro {
    font-size: 1.25rem;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Split Section (Story) */
.about-split-section {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 60px 0;
}

.about-image { flex: 1; }
.about-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 4px;
}

.about-text { flex: 1.2; }
.about-text h2 {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.about-text p {
    margin-bottom: 20px;
    font-size: 1.05rem;
    color: #444;
}

/* Pillars Section */
.about-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 80px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.pillar-card {
    text-align: center;
    padding: 20px;
}

.pillar-emoji {
    font-size: 40px;
    display: block;
    margin-bottom: 15px;
}

.pillar-card h3 {
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 15px;
}

/* Stats & CTA Box */
.about-cta-box {
    margin: 80px 0;
    background: var(--mm-black);
    color: var(--mm-white);
    padding: 60px;
    text-align: center;
    border-radius: 8px;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 40px;
}

.stat-item strong {
    display: block;
    font-size: 2.5rem;
    color: var(--mm-orange);
}

.stat-item span {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.about-cta-box h3 {
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Mobile Adjustments */
@media screen and (max-width: 900px) {
    .about-split-section, .about-pillars {
        flex-direction: column;
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        flex-direction: column;
        gap: 30px;
    }
}

/* --- Contact Page Layout --- */
.contact-header {
    text-align: center;
    padding: 60px 0 40px;
}

.contact-intro {
    font-size: 1.15rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    padding-bottom: 100px;
}

/* --- Contact Form 7 Specific Styling --- */
.contact-form-area h2 {
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 30px;
    font-size: 1.5rem;
}

/* CF7 Wrappers */
.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 20px;
}

/* Labels */
.contact-form-area label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Inputs & Textareas */
.wpcf7-text, 
.wpcf7-textarea, 
.wpcf7-select {
    width: 100% !important;
    padding: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    background: #fff;
    box-sizing: border-box;
}

.wpcf7-text:focus, 
.wpcf7-textarea:focus {
    outline: none !important;
    border-color: var(--mm-orange) !important;
}

/* The Submit Button */
.wpcf7-submit {
    display: inline-block !important;
    background: transparent !important; /* Remove orange block */
    color: var(--mm-black) !important;   /* Text color black */
    padding: 0 0 5px 0 !important;      /* Remove bulky padding, space for line */
    margin-top: 20px !important;
    border: none !important;            /* Remove old 2px orange border */
    font-weight: 600 !important;
    font-family: "Playfair Display", serif !important;
    font-size: 16px !important;         /* Slightly larger for a call to action */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer;
    position: relative;
    width: auto !important;
    -webkit-appearance: none;           /* Resets mobile browser button styles */
    transition: all 0.3s ease !important;
}

/* Because we can't use ::after on an <input> tag, 
   we use the bottom border to simulate the link line */
.wpcf7-submit {
    border-bottom: 1px solid var(--mm-orange) !important;
}

.wpcf7-submit:hover {
    color: var(--mm-orange) !important;
    border-bottom: 2px solid var(--mm-black) !important;
    background: transparent !important;
}

/* Error/Success Messages */
.wpcf7-response-output {
    margin: 20px 0 0 0 !important;
    padding: 10px !important;
    border-radius: 4px !important;
    font-size: 14px;
}

/* --- Info Column Styling --- */
.info-box {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.info-box h3 {
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--mm-black);
}

.info-box p {
    color: #666;
    font-size: 0.95rem;
}

.contact-link {
    color: var(--mm-orange);
    text-decoration: none;
    font-weight: 700;
}

.contact-social-links {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

/* --- Social Items as Minimalist Links --- */
.social-item {
    display: inline-block;
    background: transparent !important; /* Remove the black background */
    color: var(--mm-black) !important;   /* Switch text to black */
    padding: 0 0 4px 0 !important;      /* Remove button padding, add bottom space for underline */
    margin: 0 10px;                     /* Space between links */
    text-decoration: none;
    font-weight: 600;
    font-family: "Playfair Display", serif;
    font-size: 14px;                    /* Slightly bumped up from 13px for better serif legibility */
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    transition: all 0.3s ease;
}

/* The Permanent Orange Underline */
.social-item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--mm-orange);
    transition: all 0.3s ease;
}

/* Hover State */
.social-item:hover {
    color: var(--mm-orange) !important;
    opacity: 0.8;
}

.social-item:hover::after {
    background-color: var(--mm-black); /* Flip the underline to black on hover for contrast */
    height: 1.5px;
}

/* Ensure icons (if any) align nicely with the text */
.social-item i {
    margin-right: 5px;
    font-size: 12px;
    vertical-align: middle;
}

/* --- Mobile Responsiveness --- */
@media screen and (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .contact-info-area { order: -1; }
}

/* --- Dynamic Recipe Index --- */
.mm-recipe-index-wrapper {
    padding: 40px 0;
}

.index-category-group {
    margin-bottom: 60px;
}

.index-category-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 3px solid var(--mm-black);
    margin-bottom: 30px;
    padding-bottom: 10px;
}

.index-category-header h2 {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
}

.index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* Image & Tag Wrapper */
.index-img-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    height: 220px;
    margin-bottom: 15px;
}

.index-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.index-item:hover img {
    transform: scale(1.1);
}

/* Tags Styling */
.index-tags {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.index-tags span {
    background: rgba(255, 255, 255, 0.9);
    color: var(--mm-black);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    text-transform: uppercase;
    border-radius: 2px;
}

.index-item h3 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--mm-black);
}

.index-item a {
    text-decoration: none;
}

/* --- Blog Index Grid --- */
.mm-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 40px;
    padding-bottom: 80px;
}

.blog-card {
    background: #fff;
    transition: transform 0.3s ease;
}

.blog-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-card-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    margin-bottom: 20px;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-date {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--mm-orange);
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

a.blog-card-link-wrapper {
    text-decoration: none;
}

.blog-card-content h2 {
    font-size: 1.3rem;
    font-weight: 100;
    line-height: 1.2;
    margin-bottom: 15px;
}

.blog-card-content p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.read-more {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-bottom: 2px solid var(--mm-orange);
    padding-bottom: 2px;
}

/* Mobile Tweak */
@media screen and (max-width: 600px) {
    .mm-blog-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Single Post / Recipe Detail Layout --- */

/* Center and constrain the content width */
.single-post .entry-header,
.single-post .entry-content,
.single-post .entry-footer {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

/* Header Styling */
.single-post .entry-header {
    text-align: center;
    padding-top: 60px;
    padding-bottom: 40px;
}

.single-post .entry-title {
    font-size: clamp(2rem, 5vw, 2.1rem); /* Responsive size */
    font-weight: 100;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 15px;
    color: var(--mm-black);
}

/* Hide the Author and "Posted on" string */
.single-post .entry-meta {
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Remove the "Posted by [Username]" specifically */
.single-post .byline, 
.single-post .author {
    display: none !important;
}

/* Featured Image Styling */
.single-post .post-thumbnail {
    margin-bottom: 50px;
    text-align: center;
}

.single-post .post-thumbnail img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    border-radius: 8px;
}

/* Body Content Styling */
.single-post .entry-content p {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 25px;
    color: #333;
}

.single-post .entry-content h2, 
.single-post .entry-content h3 {
    text-transform: uppercase;
    font-weight: 800;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* Footer & Tags Cleanup */
.single-post .entry-footer {
    border-top: 1px solid #eee;
    margin-top: 60px;
    padding-top: 30px;
    font-size: 0.85rem;
}

.cat-links, .tags-links {
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: #999;
}

.cat-links a, .tags-links a {
    color: var(--mm-orange);
    text-decoration: none;
    margin-left: 5px;
}

/* Hide Post Navigation (Previous/Next) */
.post-navigation {
    display: none !important;
}

/* Styling the Recipe Card inside the post */
.wprm-recipe-container {
    background-color: #fff3ea !important; /* Very slight cream tint */
    border: 2px solid var(--mm-black) !important;
    margin: 60px 0 !important;
}

/* If the post has a sidebar, we want to make sure the content stays readable */
@media screen and (min-width: 1000px) {
    .single-post .entry-content {
        font-size: 1.2rem;
    }
}

/* --- Archive, Category, & Tag Pages --- */

/* 1. Hide the full content and recipe cards on archive views */
.archive .entry-content, 
.category .entry-content, 
.tag .entry-content,
.archive .wprm-recipe-container,
.category .wprm-recipe-container {
    display: none !important;
}

/* 2. Setup the Grid Layout for the list */
.archive .site-main, 
.category .site-main, 
.tag .site-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* 3. Style individual posts in the list */
.archive article, 
.category article, 
.tag article {
    border-bottom: none;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

/* Header/Title Styling */
.archive .entry-header, 
.category .entry-header, 
.tag .entry-header {
    text-align: left;
    padding: 0;
    margin-bottom: 15px;
}

.archive .entry-title, 
.category .entry-title, 
.tag .entry-title {
    font-size: 1.3rem !important;
    font-weight: 100;
    text-transform: uppercase;
    line-height: 1.2;
}

.archive .entry-title a, 
.category .entry-title a, 
.tag .entry-title a {
    text-decoration: none;
    color: var(--mm-black);
}

/* 4. Formatting Images (Thumbnail) */
.archive .post-thumbnail, 
.category .post-thumbnail, 
.tag .post-thumbnail {
    margin-bottom: 20px;
    order: -1; /* Puts image above the title */
}

.archive .post-thumbnail img, 
.category .post-thumbnail img, 
.tag .post-thumbnail img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 4px;
}

/* 5. Cleanup Metadata (Hide Author/Navigation) */
.archive .entry-meta, 
.category .entry-meta, 
.tag .entry-meta, .archive footer.entry-footer {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.archive .byline, 
.category .byline, 
.tag .byline,
.archive .nav-links {
    display: none !important;
}

/* 6. Page Title (The "Category: Quick & Easy" header) */
.archive-title {
    grid-column: 1 / -1; /* Spans full width of the grid */
    text-align: center;
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 60px 0;
    border-bottom: 2px solid var(--mm-black);
    margin-bottom: 40px !important;
}

.archive-description {
    grid-column: 1 / -1;
    text-align: center;
    max-width: 600px;
    margin: -30px auto 40px;
    color: #666;
}

/* --- 404 Error Page Styling --- */

/* 1. Center everything and set the vibe */
.error404 .site-main {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 100px 20px;
}

/* 2. Hide the "Junk Drawer" widgets (Archives, Recent Posts, etc.) */
.error404 .widget_recent_entries,
.error404 .widget_categories,
.error404 .widget_archive,
.error404 .tagcloud,
.error404 .page-content > p {
    display: none !important;
}

/* 3. Style the Main Heading */
.error404 .page-title {
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--mm-black);
    margin-bottom: 10px;
}

.error404 .page-title::after {
    content: "Lost in the Spice Rack?";
    display: block;
    font-size: 1.5rem;
    color: var(--mm-orange);
    letter-spacing: 2px;
    margin-top: 10px;
}

/* 4. Style the Search Bar */
.error404 .search-form {
    margin: 40px auto;
    max-width: 500px;
    display: flex;
    gap: 10px;
}

.error404 .search-field {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--mm-black);
    font-family: inherit;
    outline: none;
}

.error404 .search-submit {
    background: var(--mm-black);
    color: white;
    padding: 0 30px;
    border: none;
    text-transform: uppercase;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.3s;
}

.error404 .search-submit:hover {
    background: var(--mm-orange);
    color: var(--mm-black);
}

/* --- Search Results Page Styling --- */

/* 1. Standardize the Layout */
.search-results .site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 40px;
}

/* 2. Style the "Search Results for: X" Header */
.search-results .page-header {
    grid-column: 1 / -1; /* Spans across the grid */
    text-align: center;
    border-bottom: 3px solid var(--mm-black);
    padding-bottom: 30px;
    margin-bottom: 50px;
}

.search-results .page-title {
    font-size: 2.2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--mm-black);
}

.search-results .page-title span {
    color: var(--mm-orange); /* Highlights the searched term */
}

/* 3. Hide full content/recipe cards in results */
.search-results .entry-content,
.search-results .wprm-recipe-container,
.search-results .byline {
    display: none !important;
}

/* 4. Style the Result Cards */
.search-results article {
    display: flex;
    flex-direction: column;
    background: #fff;
    transition: transform 0.3s ease;
}

.search-results .post-thumbnail {
    order: -1; /* Image on top */
    margin-bottom: 20px;
}

.search-results .post-thumbnail img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 4px;
}

.search-results .entry-title {
    font-size: 1.3rem !important;
    font-weight: 100;
    text-transform: uppercase;
    line-height: 1.2;
}

.search-results .entry-title a {
    text-decoration: none;
    color: var(--mm-black);
}

.search-results .entry-title a:hover {
    color: var(--mm-orange);
}

/* 5. Handle "No Results Found" */
.search-no-results .page-content {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
}

/* --- Global "Nothing Found" Styling --- */
.no-results.not-found {
    max-width: 800px;
    margin: 100px auto; /* Centers the whole section and adds top/bottom spacing */
    padding: 0 20px;
    text-align: center;
}

/* 1. The Header */
.no-results .page-title {
    font-family: "Playfair Display", serif;
    font-size: 3rem;
    color: var(--mm-black);
    margin-bottom: 30px;
}

/* 2. The Text */
.no-results .page-content p {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 40px;
}

/* 3. The Search Form Reset */
.no-results .search-form {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    max-width: 500px;
    margin: 0 auto;
    border-bottom: 1px solid var(--mm-orange); /* Our signature underline */
    padding-bottom: 10px;
}

.no-results .search-form label {
    flex-grow: 1;
    margin: 0;
}

.no-results .search-field {
    width: 100%;
    border: none !important;
    background: transparent !important;
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 1.1rem;
    padding: 10px 0;
    outline: none;
}

/* 4. The Submit Button (Minimalist Style) */
.no-results .search-submit {
    background: transparent !important;
    border: none !important;
    color: var(--mm-black) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 10px 0 10px 20px;
    transition: color 0.3s ease;
}

.no-results .search-submit:hover {
    color: var(--mm-orange) !important;
}

/* Hide the "Search for:" screen reader text if it's getting in the way */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Responsive Fix */
@media (max-width: 600px) {
    .no-results .page-title {
        font-size: 2.2rem;
    }
    
    .no-results .search-form {
        flex-direction: column;
        align-items: center;
        border-bottom: none;
    }
    
    .no-results .search-field {
        text-align: center;
        border-bottom: 1px solid var(--mm-orange) !important;
        margin-bottom: 15px;
    }
}

/* --- Meaningful Masala: Bright & Clean Hierarchical Index --- */

/* 1. Main Container - Pure White & Centered */
.mm-category-index {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
    background: #ffffff;
}

/* 2. The Search Bar Section (High Contrast) */
.index-search-section {
    text-align: left;
    margin-bottom: 80px;
}

.index-search-section p {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* --- Clean Search Bar Update --- */
.index-search-section {
    margin-bottom: 40px;
    text-align: center;
}

.search-intro-text {
    font-family: "Playfair Display", serif;
    font-style: italic;
    color: #a67c52;
    margin-bottom: 20px;
}

.index-search-form {
    display: flex;
    max-width: 600px; /* Constraining width makes it look more premium */
    margin: 0 auto;
    border-bottom: 1px solid #d4a373; /* Underline style instead of a box */
    background: transparent;
}

.index-search-field {
    flex-grow: 1;
    padding: 15px 0;
    border: none !important;
    font-size: 1.1rem;
    font-family: "Playfair Display", serif;
    background: transparent;
    outline: none;
    color: var(--mm-black);
}

.index-search-field::placeholder {
    color: #bbb;
    font-style: italic;
}

.index-search-submit {
    background: transparent !important; /* Remove black block */
    color: var(--mm-black);
    border: none;
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.index-search-submit:hover {
    color: var(--mm-orange); /* Brand color pop on hover */
    background: transparent !important;
}

/* Adjust for mobile padding */
@media (max-width: 768px) {
    .index-search-form {
        max-width: 90%;
    }
}

/* 3. Section Headings (e.g., Savory Mains, Modern Cooking) */
.index-section-heading {
    font-size: 2.1rem;
    font-weight: 100;
    margin: 40px 0 30px 0;
    color: #000000;
    text-transform: none; /* Keeps it natural and modern */
    letter-spacing: -0.5px;
}

/* 4. The Grid Layout - 3 Columns per Row */
.category-circle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    text-align: center;
    margin-bottom: 60px;
}

/* 5. The Circle Category Item */
.cat-circle-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.circle-wrapper {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid #eeeeee; /* Thin, clean border like the example */
    background: #f9f9f9;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.circle-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover Effect: Soft Lift */
.cat-circle-item:hover .circle-wrapper {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.cat-circle-item h3 {
    font-size: 1.15rem;
    font-weight: 500; /* Matches the clean typography in the screenshot */
    color: #222;
    margin: 0;
}

/* 6. Section Divider Line */
.section-divider {
    border: 0;
    border-top: 1px solid #f2f2f2;
    margin: 60px 0;
}

/* 7. Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .category-circle-grid {
        grid-template-columns: 1fr 1fr; /* 2 columns on tablets/mobile */
        gap: 30px 15px;
    }
    
    .index-section-heading {
        font-size: 1.8rem;
    }

    .index-search-form {
        flex-direction: column;
    }

    .index-search-submit {
        padding: 15px;
    }
}

/* --- YouTube CTA Section --- */
.home-youtube-cta {
    padding: 80px 0;
    background-color: #fdfaf7; /* Matches the editorial cream background */
}

.yt-container {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 1. Responsive Video Wrapper (16:9 Ratio) */
.yt-visual {
    flex: 1.2;
}

.video-aspect-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Maintains 16:9 shape */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    background: #000; /* Prevents flicker while loading */
}

.video-aspect-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 2. Text Content Styling */
.yt-content {
    flex: 0.8;
}

.yt-sub {
    font-family: "Playfair Display", serif;
    color: #a67c52; /* Earthy brown accent */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 15px;
}

.yt-content h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 20px;
    font-family: "Playfair Display", serif;
    line-height: 1.1;
    color: var(--mm-black);
}

.yt-content p {
    margin-bottom: 35px;
    color: #555;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* 3. Re-using the Orange Underlined Link Style */
.yt-content .mm-btn.orange-btn {
    display: inline-block;
    background: transparent !important;
    padding: 0 0 4px 0 !important;
    text-decoration: none;
    font-weight: 600;
    font-family: "Playfair Display", serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    border: none !important;
    color: var(--mm-black) !important;
    transition: all 0.3s ease;
}

.yt-content .mm-btn.orange-btn::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--mm-orange);
    transition: all 0.3s ease;
}

.yt-content .mm-btn.orange-btn:hover {
    color: var(--mm-orange) !important;
}

.yt-content .mm-btn.orange-btn:hover::after {
    height: 2px;
    background-color: var(--mm-orange);
}

/* 4. Responsive Layout (Mobile) */
@media (max-width: 991px) {
    .yt-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    
    .yt-visual {
        width: 100%;
    }

    .yt-content h2 {
        font-size: 2.2rem;
    }
    
    .yt-content .mm-btn.orange-btn::after {
        left: 10%;
        width: 80%; /* Centers the underline on mobile */
    }
}

/* --- Privacy Policy Styling --- */
.privacy-policy-container {
    padding: 80px 20px;
    line-height: 1.8;
    color: #444;
}

.policy-header {
    text-align: center;
    margin-bottom: 60px;
}

.policy-updated {
    font-style: italic;
    color: #888;
    margin-top: 10px;
}

.policy-section {
    margin-bottom: 50px;
}

.policy-section h2 {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    color: var(--mm-black);
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.policy-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--mm-black);
}

.policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.policy-section ul {
    padding-left: 20px;
}

.policy-section ul li {
    margin-bottom: 10px;
}

.policy-contact {
    text-align: center;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

/* Match the link style */
.policy-contact a {
    font-weight: 700;
    color: var(--mm-black);
    text-decoration: none;
}

/* --- Terms of Service Specific Styling --- */
.tos-container {
    padding: 80px 20px;
    line-height: 1.8;
    color: #444;
}

/* Reusing your Policy Section styles for consistency */
.policy-section h2 {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    color: var(--mm-black);
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* Highlighting the Copyright section */
.copyright-box {
    background-color: #fcfcfc;
    border-left: 4px solid var(--mm-orange);
    padding: 30px;
    margin-top: 20px;
    border-radius: 0 8px 8px 0;
}

.copyright-box p {
    margin-bottom: 15px;
    color: var(--mm-black);
}

.copyright-box ul {
    list-style-type: none;
    padding-left: 0;
}

.copyright-box li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 25px;
}

/* Custom bullet points for the copyright box */
.copyright-box li::before {
    content: "•";
    color: var(--mm-orange);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.policy-contact {
    text-align: center;
    margin-top: 80px;
    padding: 40px;
    background: #f9f9f9;
    border-radius: 12px;
}

/* Button override for the footer link */
.policy-contact .orange-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
}

/* Back Button Styling */
.mm-back-nav {
    margin-bottom: 20px;
}

.mm-back-button {
    color: #e67e22 !important; /* Brand Orange */
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    transition: opacity 0.2s;
}

.mm-back-button:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Target the WPRM Print button specifically */
.wprm-recipe-print.wprm-recipe-link {
    background-color: #e67e22 !important;
    border-color: #e67e22 !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease-in-out;
}

/* Hover state for a nice interactive feel */
.wprm-recipe-print.wprm-recipe-link:hover {
    background-color: #d35400 !important;
    border-color: #d35400 !important;
}

/* Ensure the SVG icon inside stays white */
.wprm-recipe-print.wprm-recipe-link svg,
.wprm-recipe-print.wprm-recipe-link svg g,
.wprm-recipe-print.wprm-recipe-link svg path {
    fill: #ffffff !important;
}

/* 1. Reset and Stack the Header */
.mm-archive-wrapper {
    display: block !important;
}

.centered-vertical-stack {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 50px !important;
    float: none !important;
    clear: both !important;
}

/* 2. Style the Title (Meaningful Masala thin-bold style) */
.centered-vertical-stack .page-title {
    font-family: "Rockwell", "Rockwell Nova", "Roboto Slab", serif;
    text-transform: uppercase;
    font-size: 2.1rem;
    letter-spacing: -0.04em;
    line-height: 0.9;
    margin: 15px 0;
    font-weight: 100 !important;
}

/* 3. Search UI */
.index-search-section {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}

.index-search-form {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 50px;
    background: #fff;
    overflow: hidden;
}

.index-search-field {
    flex-grow: 1;
    padding: 12px 20px;
    border: none;
    outline: none;
}

.index-search-submit {
    background: #e67e22; /* Brand Orange */
    border: none;
    padding: 0 20px;
    cursor: pointer;
}

/* 4. The Grid Implementation */
.mm-recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* Ensure images in the grid look good */
.mm-recipe-grid article img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* --- Footer Social Icons --- */
.social-icons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-icons a {
    color: var(--mm-black); /* Or #333 */
    transition: transform 0.2s ease, color 0.2s ease;
}

.social-icons a:hover {
    color: var(--mm-orange);
    transform: translateY(-2px);
}

.social-icons svg {
    display: block;
}

/* Remove old Branding styles that are no longer used */
.footer-logo, .footer-site-name {
    display: none;
}

/* Ensure title spacing is consistent */
.footer-title {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

/* Mobile: Center the icons */
@media screen and (max-width: 767px) {
    .social-icons {
        justify-content: center;
        margin-bottom: 20px;
    }
}

.mm-pagination-container {
    margin: 50px auto;
    text-align: center;
    width: 100%;
    clear: both;
}

.mm-pagination-container .pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.mm-pagination-container a, 
.mm-pagination-container span {
    padding: 10px 18px;
    border: 1px solid #eee;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.mm-pagination-container .current {
    background-color: var(--mm-orange, #e67e22);
    color: #fff;
    border-color: var(--mm-orange, #e67e22);
}

.mm-pagination-container a:hover {
    background-color: #f9f9f9;
    border-color: #ccc;
}

/* 1. Target the tag links container */
.tags-links a {
    display: inline-block;
    /* Basic styling to make them look like buttons */
    background: #f3f3f3;
    padding: 4px 10px;
    margin: 2px;
    border-radius: 4px;
    font-size: 11px;
    color: #555;
    text-decoration: none;
}

/* 2. Hide every tag after the 5th one */
.tags-links a:nth-of-type(n+6) {
    display: none !important;
}

/* 3. Optional: Add a "comma" fix */
/* Some themes insert commas between tags. This hides the trailing text. */
.tags-links {
    font-size: 0; /* Hides text nodes/commas between <a> tags */
}

.tags-links a {
    font-size: 11px; /* Brings font size back for the actual links */
}

/* 4. Hide the "Tagged" label text if you want it even cleaner */
.tags-links {
    visibility: hidden;
}

.tags-links a {
    visibility: visible;
}

.wprm-recipe-template-chic {
    background-color: #fff3ea !important;
}