/*
Theme Name: Meal Planning 365 Child
Theme URI: https://mealplanning365.com/
Author: Meal Planning 365
Author URI: https://mealplanning365.com/
Description: Child theme of Twenty Twenty-Five for Meal Planning 365, a shop selling a weekly meal planner spreadsheet. Fresh, kitchen styling in cream, leaf green, tomato and honey. Homepage, pricing and product-page sections are added through the child theme only; the parent theme is never edited. WooCommerce cart, checkout and account pages are untouched. Version 1.0.0 is the first release: FAQPage JSON-LD for single posts from the custom field meal365_faq_json is in from the start, and the licence line is printed on every product page.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: mealplanning365-child
Tags: food, meal-planning, ecommerce, woocommerce, fresh, green, serif
*/

/* ============================================================
   Meal Planning 365 — custom styles
   All colours and fonts are managed through the variables
   below and the palette in theme.json. Change a value here
   and in theme.json together so blocks and CSS stay in sync.
   No external fonts and no external JavaScript are loaded:
   headings use an elegant system serif stack (Georgia first),
   body text uses the system sans stack.
   ============================================================ */

:root {
    --mp365-cream: #fdfaf3;
    --mp365-cream-deep: #f6efdd;
    --mp365-leaf: #4a7c59;
    --mp365-leaf-deep: #38603f;
    --mp365-herb: #7a9b6d;
    --mp365-herb-light: #dfe9d8;
    --mp365-tomato: #c65d3b;
    --mp365-tomato-deep: #a34a2e;
    --mp365-honey: #d9a441;
    --mp365-ink: #33302b;
    --mp365-ink-soft: #6e675c;
    --mp365-white: #fffefb;
    --mp365-radius: 16px;
    --mp365-radius-lg: 24px;
}

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

body {
    background-color: var(--mp365-cream);
    color: var(--mp365-ink);
}

h1,
h2,
h3,
.mp365-serif {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--mp365-ink);
}

h1 {
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    line-height: 1.12;
}

h2 {
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    line-height: 1.25;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.35;
}

a {
    color: var(--mp365-leaf-deep);
}

a:hover,
a:focus-visible {
    color: var(--mp365-tomato-deep);
}

:focus-visible {
    outline: 3px solid var(--mp365-honey);
    outline-offset: 2px;
}

/* ---------- Buttons: soft, rounded, leaf green ---------- */

.wp-block-button__link,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    border-radius: 999px;
    background-color: var(--mp365-leaf);
    color: #fff;
    border: 2px solid var(--mp365-leaf);
    padding: 0.7em 1.6em;
    font-weight: 600;
    text-decoration: none;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
    background-color: var(--mp365-leaf-deep);
    border-color: var(--mp365-leaf-deep);
    color: #fff;
}

.mp365-button--ghost .wp-block-button__link {
    background-color: transparent;
    color: var(--mp365-leaf-deep);
}

.mp365-button--ghost .wp-block-button__link:hover,
.mp365-button--ghost .wp-block-button__link:focus-visible {
    background-color: var(--mp365-herb-light);
    color: var(--mp365-leaf-deep);
}

/* ---------- Hero ---------- */

.mp365-hero {
    background: linear-gradient(160deg, var(--mp365-herb-light) 0%, var(--mp365-cream) 55%, #f3e3c8 100%);
    border-radius: var(--mp365-radius-lg);
    padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
    text-align: center;
    margin-bottom: 2.5rem;
}

.mp365-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mp365-leaf-deep);
    margin-bottom: 0.75rem;
}

.mp365-hero-sub {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--mp365-ink-soft);
    max-width: 640px;
    margin: 1rem auto 1.5rem;
}

.mp365-trust-line {
    font-size: 0.95rem;
    color: var(--mp365-ink-soft);
    margin-top: 1.25rem;
}

/* ---------- Sections ---------- */

.mp365-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.mp365-section--tint {
    background-color: var(--mp365-cream-deep);
    border-radius: var(--mp365-radius-lg);
    padding-left: clamp(1rem, 4vw, 2.5rem);
    padding-right: clamp(1rem, 4vw, 2.5rem);
}

.mp365-centre {
    text-align: center;
}

.mp365-lead {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--mp365-ink-soft);
}

.mp365-number {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--mp365-leaf);
    margin-bottom: 0.25rem;
}

.mp365-number-label {
    color: var(--mp365-ink-soft);
}

.mp365-sheet-list {
    columns: 2;
    column-gap: 2rem;
}

/* ---------- Pricing cards: never break words mid-word ---------- */

.mp365-price-card {
    background: var(--mp365-white);
    border: 2px solid var(--mp365-herb-light);
    border-radius: var(--mp365-radius);
    padding: 1.5rem;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.mp365-price-card--popular {
    border-color: var(--mp365-leaf);
    box-shadow: 0 8px 24px rgba(56, 96, 63, 0.16);
}

.mp365-badge {
    display: inline-block;
    background: var(--mp365-leaf);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 999px;
    padding: 0.25em 0.9em;
    margin-bottom: 0.5rem;
}

.mp365-price {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--mp365-ink);
    margin: 0.25rem 0;
}

.mp365-price-note {
    color: var(--mp365-ink-soft);
}

.mp365-save {
    color: var(--mp365-tomato-deep);
    font-weight: 700;
}

/* ---------- FAQ ---------- */

.mp365-faq details {
    background: var(--mp365-white);
    border: 1px solid var(--mp365-herb-light);
    border-radius: var(--mp365-radius);
    padding: 0.9rem 1.2rem;
    margin-bottom: 0.75rem;
}

.mp365-faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--mp365-ink);
}

.mp365-faq summary::marker {
    color: var(--mp365-leaf);
}

.mp365-faq p {
    margin-top: 0.6rem;
    color: var(--mp365-ink-soft);
}

/* ---------- Product pages ---------- */

.mp365-inside,
.mp365-tiers,
.mp365-delivery {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mp365-herb-light);
}

.mp365-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 700px) {
    .mp365-tier-grid {
        grid-template-columns: 1fr;
    }
}

.mp365-tier {
    background: var(--mp365-white);
    border: 2px solid var(--mp365-herb-light);
    border-radius: var(--mp365-radius);
    padding: 1.25rem;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.mp365-tier--current {
    border-color: var(--mp365-leaf);
}

.mp365-plus-note {
    background: var(--mp365-cream-deep);
    border-left: 4px solid var(--mp365-honey);
    border-radius: 0 var(--mp365-radius) var(--mp365-radius) 0;
    padding: 0.9rem 1.2rem;
    margin-top: 1rem;
}

.mp365-license {
    font-size: 0.9rem;
    color: var(--mp365-ink-soft);
    margin-top: 1rem;
}

/* ---------- Closing + footer ---------- */

.mp365-closing {
    text-align: center;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.mp365-footer {
    border-top: 1px solid var(--mp365-herb-light);
    margin-top: 2rem;
}

.mp365-footer-copy,
.mp365-footer-support {
    color: var(--mp365-ink-soft);
    font-size: 0.95rem;
}