/*
Theme Name: Town of Mayo Happenings
Theme URI: https://townofmayo.org
Author: Jolene MacFadden
Description: Custom Classic Editor theme for Town of Mayo Happenings, sharing good news from around Lafayette County, Florida. Black and gold palette pulled from the site logo, with courthouse cream as the neutral base.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: tom-happenings
*/

/* ============================================================
   ROOT VARIABLES — Black/Gold + Courthouse Cream palette
   Pulled from the dragon-crest logo: black background, gold
   filigree and lettering. Cream and stone tones come from the
   courthouse header photo.
   ============================================================ */
:root {
    --tom-black: #1a1816;        /* near-black from the logo background */
    --tom-black-soft: #2a2622;   /* slightly lifted black for panels */
    --tom-gold: #c9a14a;         /* primary gold — nav bar, buttons, dividers */
    --tom-gold-dark: #a8822f;    /* darker gold for hover/active */
    --tom-gold-light: #e0c171;   /* lighter gold accent for highlights */
    --tom-cream: #faf6ee;        /* warm courthouse-stone background */
    --tom-cream-dark: #efe7d6;   /* slightly deeper cream for cards */
    --tom-ink: #2b2520;          /* near-black warm text color */
    --tom-green: #3f5d3a;        /* Florida pine green — links on cream, secondary accent */
    --tom-mist: rgba(255,255,255,0.85);
    --tom-max-width: 1200px;
    --tom-radius: 8px;
    --tom-font-serif: Georgia, 'Times New Roman', serif;
    --tom-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tom-transition: 0.2s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
* { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--tom-font-ui);
    background: var(--tom-cream);
    color: var(--tom-ink);
    line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tom-green); text-decoration: none; transition: color var(--tom-transition); }
a:hover { color: var(--tom-gold-dark); }
ul, ol { padding-left: 1.4rem; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tom-font-serif);
    color: var(--tom-black);
    line-height: 1.25;
    margin: 1.2em 0 0.6em;
}
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

/* ============================================================
   PAGE WRAPPER
   ============================================================ */
#page { display: flex; flex-direction: column; min-height: 100vh; }
#content { flex: 1; }

/* ============================================================
   TOP UTILITY BAR — date + social icons row above header
   ============================================================ */
.tom-utility-bar {
    background: var(--tom-black);
    color: var(--tom-mist);
    font-size: 0.78rem;
    padding: 0.45rem 1.5rem;
}
.tom-utility-inner {
    max-width: var(--tom-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.tom-utility-date { opacity: 0.85; }
.tom-social-links {
    display: flex;
    gap: 0.9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tom-social-links a {
    color: var(--tom-gold-light);
    font-size: 0.78rem;
}
.tom-social-links a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   HEADER — full-width courthouse photo, logo badge overlaid
   bottom-left since the photo carries no title text of its own
   ============================================================ */
.tom-header-banner {
    width: 100%;
    background-image: var(--tom-header-image);
    background-size: cover;
    background-position: center 40%;
    aspect-ratio: 16 / 9;
    max-height: 420px;
    min-height: 200px;
    position: relative;
}
.tom-header-banner::after {
    /* subtle bottom gradient so the logo badge and title stay legible
       over a photo whose brightness varies by season/weather */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
.tom-header-content {
    position: absolute;
    bottom: 1.2rem;
    left: 1.5rem;
    right: 1.5rem;
    max-width: var(--tom-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 2;
}
.tom-header-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--tom-black);
    border: 2px solid var(--tom-gold);
    flex-shrink: 0;
    overflow: hidden;
}
.tom-header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tom-header-titles {
    color: #fff;
}
.tom-header-titles .tom-site-title {
    font-family: var(--tom-font-serif);
    font-size: clamp(1.4rem, 3.5vw, 2.1rem);
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.tom-header-titles .tom-site-tagline {
    font-size: clamp(0.78rem, 1.8vw, 0.95rem);
    color: var(--tom-gold-light);
    margin: 0.2rem 0 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ============================================================
   NAVIGATION — direct ID targeting, same pattern proven on the
   Mrs. Pollifax build. wp_nav_menu() container divs are
   unreliable; target #primary-menu directly wherever possible.
   ============================================================ */
.main-navigation {
    background: var(--tom-black);
    border-bottom: 3px solid var(--tom-gold);
}
.nav-inner {
    max-width: var(--tom-max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    position: relative;
}

#primary-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

#primary-menu > li {
    position: relative;
}

#primary-menu > li > a {
    display: block;
    font-family: var(--tom-font-ui);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    padding: 0.5rem 1.05rem;
    margin: 0.5rem 0.2rem;
    border-radius: 999px;
    white-space: nowrap;
    transition: all var(--tom-transition);
}
#primary-menu > li > a:hover,
#primary-menu > li.current-menu-item > a,
#primary-menu > li.current-menu-ancestor > a {
    color: var(--tom-black);
    background: var(--tom-gold);
}

/* Dropdown arrow on any item with children, at any level */
#primary-menu li.menu-item-has-children > a::after {
    content: ' \25BE';
    font-size: 0.65rem;
    opacity: 0.75;
    margin-left: 0.3em;
}

/* All dropdown levels — hidden until hover/focus on parent */
#primary-menu ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    z-index: 9999;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--tom-black-soft);
    border-top: 2px solid var(--tom-gold);
    border-radius: 0 0 var(--tom-radius) var(--tom-radius);
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
/* Third and fourth level flyout to the side rather than down,
   so deep menus (Where to Get What You Need has 8 children)
   don't run off the bottom of the screen */
#primary-menu ul ul,
#primary-menu ul ul ul {
    top: 0;
    left: 100%;
    border-top: none;
    border-left: 2px solid var(--tom-gold);
    border-radius: 0 var(--tom-radius) var(--tom-radius) var(--tom-radius);
}
#primary-menu li:hover > ul,
#primary-menu li:focus-within > ul,
#primary-menu li.submenu-open > ul {
    display: flex;
}
#primary-menu ul li a {
    display: block;
    padding: 0.6rem 1.2rem;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    border-radius: 0;
    margin: 0;
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
#primary-menu ul li a:hover {
    background: rgba(255,255,255,0.1);
    color: var(--tom-gold-light);
}
#primary-menu ul li.menu-item-has-children > a::after {
    content: ' \25B8';
    float: right;
}

/* Mobile toggle button */
.menu-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    font-family: var(--tom-font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--tom-radius);
    margin: 0.6rem 0;
}

/* ============================================================
   LAYOUT — main content + sidebar
   ============================================================ */
.site-main {
    max-width: var(--tom-max-width);
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 2.5rem;
}

/* ============================================================
   POST CARDS — blog listing
   ============================================================ */
/* Two-column boxed grid for the post cards. The ad slot and the
   pagination are also direct children of #content-area, so they
   are forced to span the full width rather than sit in a column. */
#content-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.2rem;
    align-items: start;
}
#content-area > .tom-ad-slot,
#content-area > .tom-pagination {
    grid-column: 1 / -1;
}

/* Single post and static page views render exactly one article,
   not a listing grid, so the two-column post-card layout above
   must collapse to a single full-width column here. Without this,
   the lone .tom-post-card only fills the first grid track and the
   second column sits empty beside it. */
#content-area.tom-single-entry {
    display: block;
}
#content-area.tom-single-entry .tom-post-card {
    width: 100%;
}
/* The featured image only — the_post_thumbnail() output sits as a
   DIRECT child of .tom-post-card, never nested inside .entry-content.
   The ">" direct-child selector here is deliberate and load-bearing:
   an earlier version of this rule used a plain descendant selector
   (.tom-post-card img), which matched EVERY image anywhere inside
   the card, including small alignleft/alignright thumbnails buried
   deep in .entry-content. Because that rule carried the #content-area
   ID, its specificity beat the .entry-content img.alignleft rule
   below regardless of the float/width set there, which silently
   broke float-and-text-wrap for any inline thumbnail sharing a card
   with the featured image — confirmed via live DevTools inspection,
   where this exact rule showed up as the winning style on an
   alignleft image it was never meant to touch. Restricting to ">"
   means this rule can only ever match the genuine featured image
   going forward, so it can't leak into and override unrelated
   inline content images again. */
#content-area.tom-single-entry .tom-post-card > img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: initial;
    margin: 0 auto;
}

.tom-post-card {
    background: #fff;
    border-radius: var(--tom-radius);
    overflow: hidden;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--tom-cream-dark);
}
/* Featured image cropped to a uniform band so every card lines up,
   regardless of the original image's shape. */
.tom-post-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}
.tom-post-card-body { padding: 1.4rem 1.6rem 1.6rem; }
.tom-post-categories {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.tom-post-categories a {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--tom-cream-dark);
    color: var(--tom-black);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
}
.tom-post-card h2 { margin-top: 0.2rem; }
.tom-post-card h2 a { color: var(--tom-black); }
.tom-post-card h2 a:hover { color: var(--tom-gold-dark); }
.tom-post-date {
    font-size: 0.78rem;
    color: #8a8178;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* AdSense slot directly under each post excerpt */
.tom-ad-slot {
    display: block;
    width: 100%;
    max-width: 728px;
    margin: 1.5rem auto 0;
    text-align: center;
    overflow: hidden;
}
.tom-ad-slot ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 728px !important;
    height: 90px !important;
}
/* Hard ceiling: never show more than two ad slots on a page */
.tom-ad-slot ~ .tom-ad-slot ~ .tom-ad-slot {
    display: none !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.tom-pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 2rem 0;
    flex-wrap: wrap;
}
.tom-pagination a, .tom-pagination span {
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: var(--tom-cream-dark);
    color: var(--tom-black);
    font-size: 0.85rem;
}
.tom-pagination .current {
    background: var(--tom-gold);
    color: var(--tom-black);
}

/* ============================================================
   SIDEBAR — essentials only: search, recent posts, newsletter
   ============================================================ */
#secondary { display: flex; flex-direction: column; gap: 2rem; }
.widget {
    background: #fff;
    border-radius: var(--tom-radius);
    padding: 1.4rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--tom-cream-dark);
}
/* Universal safety net — any widget added later via Appearance >
   Widgets (RSS, image, gallery, etc.) gets its images capped at a
   sensible MAXIMUM rather than stretched to fill the widget. A
   forced width:100% looks right for an oversized thumbnail but
   badly blurs a small feed icon/favicon by stretching it well
   past its native size — capping max-width and max-height instead
   handles both without guessing which case a given feed will be. */
.widget img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 220px;
    display: block;
    margin: 0.5rem auto;
    border-radius: 4px;
}
.widget-title {
    font-family: var(--tom-font-serif);
    color: var(--tom-black);
    font-size: 1.05rem;
    margin: 0 0 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--tom-gold);
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--tom-cream-dark);
    font-size: 0.92rem;
}
.widget ul li:last-child { border-bottom: none; }

.tom-search-form { display: flex; gap: 0.5rem; }
.tom-search-form input[type="search"] {
    flex: 1;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--tom-cream-dark);
    border-radius: var(--tom-radius);
    font-size: 0.9rem;
}
.tom-search-form button {
    background: var(--tom-black);
    color: #fff;
    border: none;
    padding: 0.55rem 1.1rem;
    border-radius: var(--tom-radius);
    cursor: pointer;
    font-size: 0.85rem;
}
.tom-search-form button:hover { background: var(--tom-gold-dark); color: var(--tom-black); }

.tom-newsletter-widget p { font-size: 0.9rem; margin-top: 0; }
.tom-newsletter-widget .tom-btn {
    display: inline-block;
    background: var(--tom-black);
    color: var(--tom-gold-light);
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 0.4rem;
    border: 1px solid var(--tom-gold);
}
.tom-newsletter-widget .tom-btn:hover { background: var(--tom-gold); color: var(--tom-black); }

/* ============================================================
   SINGLE POST / PAGE CONTENT
   ============================================================ */
.entry-content { font-size: 1rem; line-height: 1.85; }
.entry-content p { margin: 0 0 1.3em; }
.entry-content img { border-radius: var(--tom-radius); margin: 1.2em 0; }

/* WordPress alignment classes for inline content images.
   These are standard Classic Editor classes (.alignleft, .alignright,
   .aligncenter) that WordPress adds automatically to any image
   inserted into post/page content — but the theme never defined any
   CSS for them. Without these rules, an inline image like a small
   150x150px thumbnail meant to float beside a paragraph (the "old
   newsletter" layout used throughout this site's location listings)
   instead fell through to the generic `img` rule and rendered at
   full content-column width, stacked above its text rather than
   beside it.

   IMPORTANT — second layer of this same bug, found via browser
   inspection: a subset of these images are served through Jetpack's
   Photon CDN (i0.wp.com) with srcset/sizes attributes attached
   (e.g. sizes="auto, (max-width: 150px) 100vw, 150px"). Photon only
   appears to have rewritten SOME of the site's older images this
   way, not all of them, which is why most thumbnails floated
   correctly while a handful didn't. When a sizes attribute is
   present, the browser's responsive-image algorithm can render the
   image at a width the CSS max-width alone doesn't reliably
   constrain, especially combined with loading="lazy" timing. Setting
   an explicit `width` here (not just max-width) overrides that
   browser-computed sizing regardless of which srcset candidate gets
   selected, closing the gap that max-width left open. */
.entry-content img.alignleft {
    float: left;
    margin: 0.3em 1.2em 0.8em 0;
    width: 150px;
    max-width: 200px;
    height: auto;
}
.entry-content img.alignright {
    float: right;
    margin: 0.3em 0 0.8em 1.2em;
    width: 150px;
    max-width: 200px;
    height: auto;
}
.entry-content img.aligncenter {
    display: block;
    margin: 1.2em auto;
    float: none;
    width: auto;
    max-width: 100%;
    height: auto;
}
/* Clear the float after a heading so headings always start a fresh
   line instead of getting squeezed beside a floated thumbnail from
   the section above. */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    clear: left;
}

.entry-content blockquote {
    border-left: 4px solid var(--tom-gold);
    margin: 1.5em 0;
    padding: 0.3em 0 0.3em 1.3em;
    font-style: italic;
    color: var(--tom-black);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--tom-black);
    color: var(--tom-mist);
    padding: 2.5rem 1.5rem 1.5rem;
}
.tom-disclosure {
    max-width: var(--tom-max-width);
    margin: 0 auto 2rem;
    font-size: 0.85rem;
    line-height: 1.7;
    opacity: 0.92;
}
.tom-disclosure a { color: var(--tom-gold-light); }

/* Three independent footer columns, each capped at 300px, for
   widgets — RSS feeds, links, anything dropped in via
   Appearance > Widgets > Footer Column 1/2/3.

   Each column has its own overflow:hidden boundary so a wide
   RSS thumbnail or oversized image can never blow out the grid
   and force columns to stack into one wide block. */
.tom-footer-columns {
    max-width: var(--tom-max-width);
    margin: 0 auto 2rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}
.tom-footer-col {
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Widgets inside the dark footer need light text and a subtle
   contrast panel rather than the white sidebar-card look */
.tom-footer-col .widget {
    background: rgba(255,255,255,0.06);
    box-shadow: none;
    padding: 1.2rem 1.3rem;
    color: var(--tom-mist);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.08);
}
.tom-footer-col .widget-title {
    color: var(--tom-gold-light);
    border-bottom: 2px solid var(--tom-gold);
    font-size: 0.98rem;
}
.tom-footer-col .widget a { color: var(--tom-mist); word-break: break-word; }
.tom-footer-col .widget a:hover { color: var(--tom-gold-light); }
.tom-footer-col .widget ul li {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
}

/* Cap on every image inside a footer widget, sized as a sensible
   MAXIMUM rather than a forced width.
   RSS sources vary wildly in what they hand back as an image:
   some attach a large article thumbnail (occasionally 1000px+
   wide), others attach nothing but their own small site icon or
   favicon (often 32-150px). The original rule here forced EVERY
   image to width:100%, which fixed the oversized-thumbnail case
   but badly over-stretched and blurred the small-icon case —
   a 60px RSS icon stretched to fill a 300px-wide card looks
   exactly like what you'd expect from blowing up a thumbnail: soft,
   blocky, blurred edges. Capping max-width instead of forcing
   width handles both cases correctly: a big thumbnail gets capped
   down, a small icon is simply left at its own natural size (or
   close to it) instead of being stretched. */
.tom-footer-col .widget img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 220px;
    display: block;
    margin: 0.5rem auto;
    border-radius: 4px;
}

/* RSS widget items WordPress generates */
.tom-footer-col .widget ul.rss-widget li {
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
}
.tom-footer-col .widget ul.rss-widget li a {
    font-weight: 600;
    color: var(--tom-gold-light);
    display: block;
    margin-bottom: 0.2rem;
}
.tom-footer-col .widget ul.rss-widget li a:hover { color: #fff; }
.tom-footer-col .rss-date { display: block; font-size: 0.72rem; opacity: 0.7; }
.tom-footer-col .rssSummary {
    font-size: 0.82rem;
    opacity: 0.85;
    margin: 0.3em 0 0;
    overflow-wrap: break-word;
}
.tom-footer-col .rssSummary img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 220px;
}
/* Some RSS feeds wrap the thumbnail in its own paragraph/div —
   catch those too. Kept as a safety net even though the Lafayette
   County News and Suwannee Valley Times widgets are now set to
   text-only (no description/content shown), in case an image-based
   widget is ever added back to a footer column. */
.tom-footer-col .widget p img,
.tom-footer-col .widget div img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 220px;
}

.tom-footer-bottom {
    max-width: var(--tom-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 0.8rem;
}
.tom-footer-social {
    display: flex;
    gap: 0.9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tom-footer-social a { color: var(--tom-mist); }
.tom-footer-social a:hover { color: var(--tom-gold-light); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
    .site-main { grid-template-columns: 1fr; }
    .tom-footer-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.2rem;
    }
    .tom-footer-col { width: 100%; max-width: 100%; }
}

@media (max-width: 600px) {
    #content-area { grid-template-columns: 1fr; }
    .tom-post-card img { height: 220px; }
    .tom-header-logo { width: 56px; height: 56px; }
}

@media (max-width: 768px) {
    .menu-toggle { display: block; }

    #primary-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--tom-black);
        box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    }
    .main-navigation.toggled #primary-menu { display: flex; }
    #primary-menu > li > a { margin: 0; border-radius: 0; padding: 0.7rem 1.2rem; }

    /* On mobile, flyout submenus become static stacked panels */
    #primary-menu ul,
    #primary-menu ul ul {
        position: static;
        left: auto; top: auto;
        border-radius: 0;
        box-shadow: none;
        border-left: none;
    }

    /* Floated inline thumbnails work fine on desktop/tablet widths,
       but on a narrow phone screen a 200px-wide floated image next
       to body text leaves only a thin sliver for the text to wrap
       into, which reads as cramped and broken. Below this breakpoint,
       drop the float entirely so each thumbnail sits on its own line
       above its text, same pattern as the original Classic Editor
       "alignleft" intent, just stacked instead of floated. */
    .entry-content img.alignleft,
    .entry-content img.alignright {
        float: none;
        display: block;
        margin: 0.8em auto;
        width: 150px;
        max-width: 200px;
        height: auto;
    }

    .tom-utility-inner { flex-direction: column; align-items: flex-start; gap: 0.3rem; }

    .tom-footer-columns {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }
    .tom-footer-col { width: 100%; max-width: 100%; }
}