/* ============================================================
   LAYOUT

   assets/css/layout.css

   Part of the Rodi Express child theme. Loaded by inc/enqueue.php.
   Page structure fixes that belong to the theme rather than to
   any one feature.
   ============================================================ */

/* ============================================================
   HORIZONTAL OVERFLOW - the "My Order" panel

   The parent theme (layouts/content-sidebar.css) uses a float
   plus negative margin layout that never collapses:

       .content-area            { float:left;  margin:0 -25% 0 0; width:100% }
       .site-main               { margin:0 25% 0 0 }
       .site-content .widget-area { float:right; width:25% }

   25% of a narrow or zoomed viewport is smaller than the
   intrinsic width of FoodMaster's .foodmaster-mini-cart, so the
   panel overflows to the right and the whole page gains a
   horizontal scrollbar. Two fixes: let the cart shrink, and
   stack the columns before the sidebar gets too narrow.
   ============================================================ */

/* 1. Let the cart shrink instead of forcing the column wider. */

.foodmaster-mini-cart,
.foodmaster-mini-cart * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.foodmaster-mini-cart img {
    height: auto;
}

/* Buttons were the widest thing in there. Let them wrap and go
   full width rather than sitting side by side. */

.foodmaster-mini-cart__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.foodmaster-mini-cart__buttons .button {
    flex: 1 1 100%;
    margin: 0;
    text-align: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.foodmaster-mini-cart-item,
.foodmaster-mini-cart__total {
    overflow-wrap: break-word;
}

/* 2. Stack content and sidebar before the column gets too tight.
      1024px matches the theme's own tablet breakpoint. */

@media (max-width: 1024px) {

    .site-content .content-area,
    .site-content .site-main,
    .site-content .widget-area {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .site-content .widget-area {
        margin-top: 24px;
        overflow: visible;
    }
}

/* 3. General guards for the usual overflow suspects. */

.site-content img,
.site-content iframe,
.site-content video {
    max-width: 100%;
    height: auto;
}

.site-content table {
    max-width: 100%;
}

/*
   LAST RESORT ONLY. If something else is still overflowing and
   you cannot find it, this hides the symptom:

   body { overflow-x: hidden; }

   Avoid it if you can - overflow-x on body breaks position:
   sticky, which the filter bar uses when sticky="yes".
*/

/* ------------------------------------------------------------
   Empty space below content on pages without a sidebar

   The theme's two-column layout reserves the sidebar column
   even on pages that have no widgets in it, so a page like
   Trade Account ends with a tall band of white before the
   footer.

   .modern-content-wrapper is the flex parent (see the parent
   theme's page.php line 16); letting it size to its content
   rather than stretch closes the gap.
   ------------------------------------------------------------ */

.modern-content-wrapper {
    align-items: flex-start;
}

.modern-content-area {
    min-height: 0;
}

/* A sidebar with nothing in it takes no space. */

.modern-content-wrapper > aside:empty,
.modern-content-wrapper > .widget-area:empty {
    display: none;
}

/* ------------------------------------------------------------
   Footer columns

   The theme prints four .footer-section divs (footer.php lines
   21-53), one per widget area, whether or not anything is in
   them. Three are populated here, so the fourth is an empty
   div holding a quarter of the row open.

   "Useful Links" is a different case: a widget with a title and
   no content, usually a Navigation Menu widget pointing at a
   menu with nothing in it. Worth filling rather than hiding -
   it is prime space on every page - but an empty heading is
   worse than no column.
   ------------------------------------------------------------ */

.modern-footer .footer-section:empty {
    display: none;
}

/* A section whose widget has a title but no links or text. */

.modern-footer .footer-section:has(.widget-title):not(:has(li)):not(:has(a)):not(:has(p)):not(:has(img)) {
    display: none;
}

/* The row spreads what is left rather than leaving a gap where
   a hidden column used to be. */

.modern-footer .footer-row {
    align-items: flex-start;
}

/* ------------------------------------------------------------
   Footer height

   With only two or three short widgets, the theme's padding
   leaves a tall band of empty dark space under them.
   ------------------------------------------------------------ */

.modern-footer .footer-content {
    padding-bottom: 1.5rem;
}

.modern-footer .footer-section {
    padding-bottom: 0;
}

/* ------------------------------------------------------------
   Space between content and footer

   Pages that end well above the fold leave a long white run
   before the footer starts.
   ------------------------------------------------------------ */

.modern-main-content {
    padding-bottom: 2.5rem;
}
/* ------------------------------------------------------------
   Tighter spacing under the header and around the footer

   Under the header, two paddings stack: 40px on
   .modern-main-content (parent modern-framework.css, line 122)
   and another 20px on .modern-page-content inside it
   (modern-page-templates.css, line 70). With the page title
   hidden there is nothing in that space, so the menu started a
   long way below the header.

   The footer's own padding (modern-footer.css: 60px on top,
   40px under the row of columns) was sized for four full
   columns; with two or three short ones it leaves a tall dark
   band.
   ------------------------------------------------------------ */

.modern-main-content {
    padding-top: 16px;
    padding-bottom: 32px;
}

.modern-page-content {
    padding-top: 0;
    padding-bottom: 0;
}

.modern-footer .footer-content {
    padding-top: 36px;
    padding-bottom: 20px;
}

.modern-footer .footer-row {
    margin-bottom: 20px;
}

/* ---- The gap between the filter bar and the menu ----
   WordPress wraps the [rodi_menu_filter] shortcode in a
   paragraph, and the theme gives page paragraphs a 20px bottom
   margin (.modern-page-body p). On the menu page those wrappers
   hold nothing but the shortcode, so their margin is pure gap.
   Home page only, so ordinary text elsewhere keeps its spacing. */

.home .modern-page-body > p {
    margin-top: 0;
    margin-bottom: 0;
}

.home .modern-page-body > p:empty,
.home .modern-page-body > br {
    display: none;
}

/* ------------------------------------------------------------
   Contact & Location page

   The page content is plain HTML with these classes; opening
   hours come from the [rodi_opening_hours] shortcode, which reads
   FoodMaster's pickup hours.
   ------------------------------------------------------------ */

.rodi-contact-intro {
    margin: 0 0 24px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #444;
}

.rodi-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 28px;
}

.rodi-contact-card {
    padding: 22px 24px;
    border: 1px solid #ede7e1;
    border-radius: 14px;
    background: #faf8f5;
}

.rodi-contact-card h3,
.rodi-contact h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f1f1f;
}

.rodi-contact-card h3:not(:first-child) {
    margin-top: 20px;
}

.rodi-contact-card p {
    margin: 0 0 8px;
    line-height: 1.6;
}

.rodi-contact-phone {
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
}

.rodi-contact-note {
    font-size: 0.88rem;
    color: #666;
}

.rodi-contact-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rodi-contact-option {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border-top: 4px solid var(--fm-primary, #cf2027);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    font-size: 0.9rem;
    line-height: 1.55;
    color: #555;
}

.rodi-contact-option strong {
    font-size: 1rem;
    color: #1f1f1f;
}

.rodi-contact-map {
    margin: 0 0 24px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid #ede7e1;
}

.rodi-contact-map iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

.rodi-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rodi-contact-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border: 2px solid var(--fm-primary, #cf2027);
    border-radius: 999px;
    background: var(--fm-primary, #cf2027);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
}

.rodi-contact-actions a.is-outline {
    background: #fff;
    color: var(--fm-primary, #cf2027) !important;
}

/* The page shows its own hours, so the sidebar copy would repeat them. */

body:has(.rodi-contact) .modern-sidebar .widget:has(.rodi-hours) {
    display: none;
}

@media (max-width: 760px) {

    .rodi-contact-grid,
    .rodi-contact-options {
        grid-template-columns: 1fr;
    }

    .rodi-contact-map iframe {
        height: 260px;
    }
}

/* Links at the foot of a "How to order" card, side by side. */

.rodi-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 4px;
}

.rodi-contact-links a {
    font-weight: 600;
}

/* ------------------------------------------------------------
   Footer on phones - everything centred

   On phones the theme stacks the footer into one centred column,
   but only centres the red line under its own headings
   (h4.footer-title); widget headings such as "Useful Links" and
   "Opening Hours" keep it on the left. The opening hours block,
   with its own width, also stayed left of centre.
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    .footer-section .widget-title::after,
    .footer-section h2::after,
    .footer-section h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .modern-footer .rodi-hours[data-hours] {
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }

    .modern-footer .rodi-hours[data-hours] .rodi-hours-status {
        justify-content: center;
    }
}

/* ------------------------------------------------------------
   LEGAL PAGES - privacy policy, terms

   Wrapped in .rodi-legal. Gives a long, necessarily dry page some
   shape: a summary panel at the top, jump links, highlighted boxes
   for the parts people actually care about (allergies, card
   details), card grids instead of bullet lists, and readable
   tables. Colours follow the site's red and cream.
   ------------------------------------------------------------ */

.rodi-legal {
    max-width: 780px;
    margin: 0 auto;
    line-height: 1.7;
}

.rodi-legal h2 {
    margin: 2.75rem 0 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ececec;
    font-size: 1.5rem;
    scroll-margin-top: 110px;
}

.rodi-legal > .rodi-legal-intro + nav + h2,
.rodi-legal h2:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.rodi-legal h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.1rem;
    color: #cf2027;
}

.rodi-legal p {
    margin: 0 0 1rem;
}

/* The summary panel */

.rodi-legal-intro {
    padding: 1.75rem 2rem;
    border-radius: 16px;
    background: #fdf2f2;
}

.rodi-legal-updated {
    margin: 0 0 0.75rem !important;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #a3736f;
}

.rodi-legal-intro h2 {
    margin: 0 0 0.75rem !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    font-size: 1.25rem;
}

.rodi-legal-short {
    margin: 0;
    padding-left: 1.1rem;
}

.rodi-legal-short li {
    margin-bottom: 0.4rem;
}

/* Jump links */

.rodi-legal-toc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 2.5rem;
}

.rodi-legal-toc-title {
    margin-right: 0.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #999;
}

.rodi-legal-toc a {
    padding: 0.35rem 0.75rem;
    border: 1px solid #ececec;
    border-radius: 999px;
    font-size: 0.88rem;
    text-decoration: none;
    color: #444;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.rodi-legal-toc a:hover {
    border-color: #cf2027;
    background: #fdf2f2;
    color: #cf2027;
}

/* Highlighted boxes */

.rodi-legal-note {
    margin: 1.5rem 0;
    padding: 1.5rem 1.75rem;
    border-left: 4px solid;
    border-radius: 12px;
}

.rodi-legal-note h3 {
    margin-top: 0;
}

.rodi-legal-note p:last-child {
    margin-bottom: 0;
}

.rodi-legal-note--amber {
    border-left-color: #e0a800;
    background: #fffaf0;
}

.rodi-legal-note--amber h3 {
    color: #8a6100;
}

.rodi-legal-note--green {
    border-left-color: #2e9e5b;
    background: #f2fbf5;
}

/* Contact details */

.rodi-legal-contact {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid #ececec;
    border-radius: 12px;
}

.rodi-legal-contact-title {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #cf2027;
}

.rodi-legal-contact p:last-child {
    margin-bottom: 0;
}

/* Card grids */

.rodi-legal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem;
    margin: 1.25rem 0 1.5rem;
}

.rodi-legal-card {
    padding: 1rem 1.1rem;
    border: 1px solid #ececec;
    border-radius: 12px;
}

.rodi-legal-card strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #cf2027;
}

.rodi-legal-card span {
    font-size: 0.92rem;
    line-height: 1.5;
    color: #555;
}

/* Tables */

.rodi-legal-table {
    width: 100%;
    margin: 1.25rem 0 1.5rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.rodi-legal-table th {
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #cf2027;
    text-align: left;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.rodi-legal-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #ececec;
    vertical-align: top;
}

.rodi-legal-table tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 600px) {

    .rodi-legal-intro,
    .rodi-legal-note {
        padding: 1.25rem;
    }

    .rodi-legal-table th,
    .rodi-legal-table td {
        padding: 0.65rem 0.5rem;
    }
}

/* ------------------------------------------------------------
   404 - page not found

   Replaces the parent theme's blog-style 404 (see 404.php). Centred,
   with a large faint 404 behind the heading, two buttons, a row of
   likely destinations and the opening hours.
   ------------------------------------------------------------ */

.rodi-404 {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 0 3rem;
    text-align: center;
}

.rodi-404-mark {
    display: block;
    margin-bottom: -1.75rem;
    font-size: clamp(5rem, 18vw, 9rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fdf2f2;
    user-select: none;
}

.rodi-404 h1 {
    position: relative;
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.rodi-404-lead {
    margin: 0 auto 2rem;
    max-width: 30rem;
    line-height: 1.65;
    color: #666;
}

.rodi-404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

/* The theme colours links inside page content red, with a selector that
   beats a single class - so on the solid button the label came out red on
   red, and invisible. These use .rodi-404 a to outrank it. */

.rodi-404 a.rodi-404-btn {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    border: 1px solid #cf2027;
    border-radius: 999px;
    background: #cf2027;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.rodi-404 a.rodi-404-btn:hover {
    background: #b31b21;
    border-color: #b31b21;
    color: #fff !important;
}

.rodi-404 a.rodi-404-btn--plain {
    background: transparent;
    color: #cf2027 !important;
}

.rodi-404 a.rodi-404-btn--plain:hover {
    background: #fdf2f2;
    color: #cf2027 !important;
}

.rodi-404-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid #ececec;
}

.rodi-404-links-title {
    width: 100%;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #999;
}

.rodi-404-links a {
    color: #444;
    text-decoration: none;
    border-bottom: 1px solid #e0e0e0;
}

.rodi-404-links a:hover {
    color: #cf2027;
    border-bottom-color: #cf2027;
}

.rodi-404-hours {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.rodi-404-phone {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #666;
}

.rodi-404-phone a {
    font-weight: 600;
    color: #cf2027;
}

/* The label sits in its own span so its colour cannot be inherited away
   by a link rule from the theme or a plugin, whatever its specificity. */

.rodi-404 a.rodi-404-btn .rodi-404-btn-label {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font: inherit;
}

.rodi-404 a.rodi-404-btn--plain .rodi-404-btn-label {
    color: #cf2027 !important;
    -webkit-text-fill-color: #cf2027;
}