/*
 * ============================================================
 * SNIPPET 9: Site-Wide Styles — Ocean Explorer Theme
 * ============================================================
 * Add via: WPCode → Add Snippet → CSS Snippet
 * Name it: "Flavor Post Styles"
 * Insertion: Auto Insert → Site Wide Header
 * ============================================================
 */

/* ── Import fonts if not already loaded ─────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&family=Marcellus&display=swap');

/* ═══════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR — background + close button
═══════════════════════════════════════════════════════════════ */
html body .sticky-t-bar,
html body .sticky-t-bar.active,
html body div.sticky-t-bar,
html body #sticky-t-bar {
    background:       #0077b6 !important;
    background-color: #0077b6 !important;
}
html body .sticky-t-bar *,
html body .sticky-bar-content,
html body .sticky-bar-content p,
html body .sticky-bar-content a,
html body .sticky-bar-content span {
    color: #fff !important;
}
html body .sticky-bar-content a:hover {
    text-decoration: underline !important;
}

/* Close / dismiss button (the red X) */
html body .sticky-t-bar .close,
html body .sticky-t-bar .sticky-bar-close,
html body .sticky-t-bar button,
html body .sticky-t-bar .sticky-t-bar-close,
html body .sticky-t-bar [class*="close"],
html body .sticky-t-bar .btn-close {
    background:   rgba(255, 255, 255, 0.15) !important;
    color:        #fff !important;
    border:       none !important;
    border-radius: 50% !important;
    opacity:      1 !important;
    transition:   background 0.2s !important;
}
html body .sticky-t-bar .close:hover,
html body .sticky-t-bar .sticky-bar-close:hover,
html body .sticky-t-bar button:hover,
html body .sticky-t-bar .sticky-t-bar-close:hover,
html body .sticky-t-bar [class*="close"]:hover,
html body .sticky-t-bar .btn-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}
/* Also catch SVG/icon inside the close button */
html body .sticky-t-bar .close *,
html body .sticky-t-bar .sticky-bar-close *,
html body .sticky-t-bar [class*="close"] *,
html body .sticky-t-bar button svg,
html body .sticky-t-bar button path {
    color: #fff !important;
    fill:  #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE-ONLY OVERRIDES
═══════════════════════════════════════════════════════════════ */

/* Hide the theme's image slider */
.home .site-banner { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   SITE-WIDE COMPACT HEADER
   Blossom Recipe Pro header structure:
     .site-header
       .header-t   / .header-top   → social icons + search (KEEP but compact)
       .header-m   / .header-main  → giant logo + title + tagline (SHRINK)
       .header-b   / .header-bottom → navigation (KEEP)
   Goal: compact header on ALL pages like the mockup.
═══════════════════════════════════════════════════════════════ */

/* Keep social icons + search visible but make the row compact */
.header-t,
.header-top {
    padding:    4px 20px !important;
    min-height: auto !important;
    background: #020618 !important;
    border-bottom: 1px solid rgba(0, 119, 182, 0.15) !important;
}
/* Make social icons and search icon bright enough to see */
.header-t a,
.header-top a,
.header-t .social-links a,
.header-top .social-links a,
.header-t .header-search-icon,
.header-top .header-search-icon,
.social-networks a,
.header-social a {
    color:   rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
}
.header-t a:hover,
.header-top a:hover,
.social-networks a:hover,
.header-social a:hover {
    color: #00b4d8 !important;
}

/* Kill the tagline / site description */
.site-description {
    display: none !important;
}

/* Shrink the logo to a small circle (matches mockup) */
.custom-logo,
.custom-logo-link img {
    max-height:    48px !important;
    width:         auto !important;
    border-radius: 50% !important;
}

/* Shrink the site title text to nav-friendly size */
.site-title {
    font-size:   20px !important;
    margin:      0 !important;
    padding:     0 !important;
    line-height: 1.3 !important;
}

/* Collapse the header-main / branding area to minimal height */
.header-m,
.header-main,
.site-branding {
    padding:    8px 20px !important;
    margin:     0 !important;
    min-height: auto !important;
}

/* Compact the whole header */
.site-header,
#masthead {
    padding:       0 !important;
    min-height:    auto !important;
    border-bottom: 3px solid #0077b6 !important;
}

/* Compact nav links */
.main-navigation li a {
    padding:   14px 14px !important;
    font-size: 15px !important;
}

/* ── Hide the "Home" page title ─────────────────────────────
   Blossom can output this as .entry-header, .page-header,
   .entry-title, .page-title, a standalone <header>, or an
   <h1> anywhere in the content area. We nuke them all.
──────────────────────────────────────────────────────────────── */
.home .entry-header,
.home .page-header,
.home article.page > .entry-header,
.home .entry-title,
.home .page-title,
.home .content-area > header,
.home .content-area > .page-header,
.home .site-content .entry-header,
.home .site-content .page-header,
.home h1.entry-title,
.home h1.page-title,
.home article .entry-header,
.home .entry-content-wrap > header,
.home .post-thumb-content-wrap > .entry-header {
    display: none !important;
    height:  0 !important;
    margin:  0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
/* Fallback: hide ANY h1 inside the home page article that isn't
   part of our hero shortcode. The hero uses <h1 class="latw-hero-title">
   so we protect that while killing Blossom's page title. */
.home article.page > .entry-content > h1:first-child,
.home .content-area h1.page-title,
.home .content-area h1.entry-title {
    display: none !important;
}

/* Hide the sidebar + Snacky Chip overlay on the homepage */
.home #secondary,
.home .widget_custom_html[class*="snacky"],
.home .snacky-widget,
.home .widget-area {
    display: none !important;
}

/* Stretch the main content area to full width */
.home #primary {
    width:     100% !important;
    max-width: 100% !important;
    float:     none !important;
}

/* ── Fix the white stripe between header and hero ─────────────
   Instead of fighting every wrapper element's background, we
   pull the hero UP with negative margin to cover the gap, then
   add equal padding-top to keep the content in the same place. */
/* Zero out spacing on wrappers ABOVE the hero so no white gap
   shows between header and hero. Content below hero keeps its
   normal white background and centered max-width. */
.home .site-content {
    padding-top: 0 !important;
    margin-top:  0 !important;
}
.home .content-area,
.home #primary,
.home #content,
.home .site-main,
.home main {
    padding-top: 0 !important;
    margin-top:  0 !important;
}
.home article.page {
    padding:    0 !important;
    margin:     0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border:     none !important;
}
.home .entry-content {
    padding-top: 0 !important;
    margin-top:  0 !important;
}

/* Homepage gallery — cap at 2 rows regardless of screen width.
   The grid items are ~180px+ wide, so we use max-height to clip
   to exactly 2 rows and hide overflow. */
.home .latw-gallery {
    max-height: 420px !important; /* ~2 rows of thumbnails */
    overflow:   hidden !important;
}
/* Once the visitor clicks Load More, the gallery JS adds this class so
   appended items are actually visible (the cap otherwise clips them). */
.home .latw-gallery.latw-gallery-expanded {
    max-height: none !important;
    overflow:   visible !important;
}
@media (max-width: 600px) {
    .home .latw-gallery {
        max-height: 300px !important;
    }
}

/* Hero full-width bleed — break out of any container */
.latw-hero {
    margin-left:  calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width:        100vw !important;
    max-width:    100vw !important;
    position:     relative !important;
}

/* ═══════════════════════════════════════════════════════════════
   SITE-WIDE HEADER — Ocean Explorer dark navy
   (Applies on ALL pages, not just homepage)
═══════════════════════════════════════════════════════════════ */
#masthead,
.site-header,
.site-header.header-four,
.site-header.header-one,
.site-header.header-two,
.site-header.header-three {
    background:    #03071e !important;
    border-bottom: 1px solid rgba(0, 119, 182, 0.3) !important;
    box-shadow:    none !important;
}

/* Logo text */
.site-title a,
.site-description {
    color: #fff !important;
}

/* Nav links */
.main-navigation a,
.main-navigation ul li a {
    color: rgba(255, 255, 255, 0.85) !important;
}
.main-navigation a:hover,
.main-navigation ul li a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color:      #00b4d8 !important;
    background: transparent !important;
}

/* Dropdown menus — dark background to match the dark nav.
   Without this, dropdowns inherit the theme's white background
   while our nav links are already white → invisible text.
   Using #masthead prefix for maximum specificity. */
#masthead .main-navigation ul ul,
#masthead .main-navigation .sub-menu,
#masthead .sub-menu,
#masthead ul ul,
.main-navigation ul ul,
.main-navigation .sub-menu,
.main-navigation ul li ul,
nav ul ul,
nav .sub-menu {
    background:       #0a1628 !important;
    background-color: #0a1628 !important;
    border:           1px solid rgba(0, 119, 182, 0.3) !important;
    box-shadow:       0 8px 24px rgba(0, 0, 0, 0.3) !important;
}
/* Dropdown list items — also force dark bg on the <li> */
#masthead .main-navigation ul ul li,
#masthead .sub-menu li,
.main-navigation ul ul li,
.main-navigation .sub-menu li {
    background:       #0a1628 !important;
    background-color: #0a1628 !important;
}
/* Dropdown links */
#masthead .main-navigation ul ul a,
#masthead .main-navigation ul ul li a,
#masthead .sub-menu a,
#masthead .sub-menu li a,
.main-navigation ul ul a,
.main-navigation ul ul li a,
.main-navigation .sub-menu a,
.main-navigation .sub-menu li a {
    color:            #fff !important;
    background:       transparent !important;
    background-color: transparent !important;
    border-bottom:    1px solid rgba(255, 255, 255, 0.05) !important;
}
#masthead .main-navigation ul ul a:hover,
#masthead .sub-menu a:hover,
.main-navigation ul ul a:hover,
.main-navigation .sub-menu a:hover {
    color:      #00b4d8 !important;
    background: rgba(0, 119, 182, 0.15) !important;
}

/* Mobile hamburger */
.menu-toggle,
.toggle-btn {
    color:        #fff !important;
    background:   transparent !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Search icon + social icons in header — visible on dark bg.
   IMPORTANT: Do NOT set visibility:visible on .header-search-wrap
   or [class*="search"] — Blossom hides the search overlay with
   visibility:hidden and we must not override that. Only style
   the icon trigger itself. */
.header-search-icon,
.header-icon a,
.social-links a,
.search-toggle,
.search-btn {
    color:   rgba(255, 255, 255, 0.85) !important;
    opacity: 1 !important;
}
.header-search-icon:hover,
.header-icon a:hover,
.social-links a:hover,
.search-toggle:hover {
    color: #00b4d8 !important;
}
/* Search overlay — style it dark but keep close button working */
#masthead .search-form,
.header-search-wrap .search-form,
.search-form,
.search-overlay,
.header-search-wrap {
    background: #0a1628 !important;
    border:     1px solid rgba(0, 119, 182, 0.3) !important;
}
.search-form input[type="search"],
.search-form .search-field {
    background:   #0a1628 !important;
    color:        #fff !important;
    border-color: rgba(0, 119, 182, 0.3) !important;
}
.search-form input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
/* When the search overlay IS open (Blossom adds .show or .active),
   style it dark but don't force it open */
.header-search-wrap.show,
.header-search-wrap.active,
.search-overlay.show,
.search-overlay.active {
    background: #0a1628 !important;
}

/* ═══════════════════════════════════════════════════════════════
   SITE-WIDE FOOTER — Ocean Explorer dark navy
═══════════════════════════════════════════════════════════════ */
.site-footer,
#colophon,
footer.site-footer,
footer#colophon {
    background:  #03071e !important;
    border-top:  1px solid rgba(0, 119, 182, 0.3) !important;
    color:       rgba(255, 255, 255, 0.6) !important;
}
.site-footer a,
#colophon a {
    color: #00b4d8 !important;
}
.site-footer a:hover,
#colophon a:hover {
    color:           #fff !important;
    text-decoration: none !important;
}
.site-footer .widget-title,
#colophon .widget-title {
    color:               #fff !important;
    border-bottom-color: #0077b6 !important;
}
.site-footer .widget,
#colophon .widget {
    color: rgba(255, 255, 255, 0.6) !important;
}
.site-footer .site-info,
#colophon .site-info {
    color:      rgba(255, 255, 255, 0.4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Footer credit links */
.site-info a,
.site-footer .site-info a,
#colophon .site-info a {
    color: rgba(255, 255, 255, 0.5) !important;
}
.site-info a:hover,
.site-footer .site-info a:hover {
    color: #00b4d8 !important;
}
/* Footer widget text */
.site-footer p,
#colophon p,
.site-footer li,
#colophon li {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════════════ */
.breadcrumb-wrapper {
    background:    #f5f9fc;
    border-bottom: 1px solid #e0ecf5;
}
.breadcrumb-wrapper #crumbs a {
    color:           #0077b6;
    text-decoration: none;
}
.breadcrumb-wrapper #crumbs a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   BLOSSOM DROP CAP — NUCLEAR KILL
   Blossom Recipe Pro applies a giant floated first-letter to
   the first paragraph. We nuke it from orbit with maximum
   specificity and every possible selector combination.
═══════════════════════════════════════════════════════════════ */
body .entry-content p::first-letter,
body .entry-content > p::first-letter,
body .entry-content p:first-child::first-letter,
body .entry-content > p:first-child::first-letter,
body .entry-content p:first-of-type::first-letter,
body .entry-content > p:first-of-type::first-letter,
body.single-post .entry-content p::first-letter,
body.single-post .entry-content > p::first-letter,
body.single-post .entry-content > p:first-child::first-letter,
body.single-post .entry-content > p:first-of-type::first-letter,
.single .entry-content p::first-letter,
.single .entry-content > p::first-letter,
.single .entry-content > p:first-child::first-letter,
.single .entry-content > p:first-of-type::first-letter,
article .entry-content p::first-letter,
article .entry-content > p::first-letter,
article .entry-content > p:first-child::first-letter,
article .entry-content > p:first-of-type::first-letter,
.entry-content p.latw-field-flavor::first-letter,
.entry-content p.latw-field-country::first-letter,
.entry-content p.latw-field-when::first-letter,
.entry-content p.latw-field-bite::first-letter,
.entry-content p.latw-field-haiku::first-letter,
.entry-content p.latw-field-origin::first-letter,
.entry-content p.latw-field-photo::first-letter {
    float:          none !important;
    font-size:      inherit !important;
    font-family:    inherit !important;
    color:          inherit !important;
    line-height:    inherit !important;
    font-weight:    inherit !important;
    margin:         0 !important;
    padding:        0 !important;
    initial-letter: normal !important;
    -webkit-initial-letter: normal !important;
}

/* ═══════════════════════════════════════════════════════════════
   POST HEADER — category tag, title, meta
═══════════════════════════════════════════════════════════════ */

/* Category tag pill — scoped tightly to .entry-header only
   so it doesn't bleed onto auto-linked category names in content */
.entry-header .category a {
    background:      #0077b6;
    color:           #fff !important;
    font-size:       11px;
    font-weight:     800;
    text-transform:  uppercase;
    letter-spacing:  1.5px;
    padding:         5px 14px;
    border-radius:   20px;
    text-decoration: none !important;
    display:         inline-block;
    margin-bottom:   12px;
    transition:      background 0.2s;
}
.entry-header .category a:hover {
    background: #005f8a;
}

/* Post title */
.single .entry-title {
    font-family:   'Marcellus', Georgia, serif !important;
    font-size:     36px !important;
    line-height:   1.2 !important;
    color:         #1a1a2e !important;
    margin-bottom: 12px !important;
}

/* Meta row — author, date, views */
.entry-meta {
    color:         #999 !important;
    font-size:     13px !important;
    border-top:    1px solid #e8f4fd;
    border-bottom: 1px solid #e8f4fd;
    padding:       10px 0;
    margin:        14px 0 !important;
}
.entry-meta a {
    color: #0077b6 !important;
}
.entry-meta .post-view {
    color: #999;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED IMAGE
═══════════════════════════════════════════════════════════════ */
.single .post-thumbnail {
    background:    linear-gradient(135deg, #f0f6fa, #fff);
    border-radius: 14px;
    overflow:      hidden;
    border:        1px solid #e0ecf5;
    text-align:    center;
    padding:       24px;
    margin-bottom: 32px !important;
}
.single .post-thumbnail img {
    max-height:    340px;
    width:         auto !important;
    object-fit:    contain;
    filter:        drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
    border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ENTRY CONTENT — base typography
═══════════════════════════════════════════════════════════════ */
.single .entry-content {
    font-size:   16px !important;
    line-height: 1.75 !important;
    color:       #3d3d3d !important;
    font-style:  normal !important;
}
.single .entry-content p {
    margin-bottom: 14px;
    font-style:    normal !important;
}
.single .entry-content a {
    color: #0077b6 !important;
}

/* ═══════════════════════════════════════════════════════════════
   POST FIELD STYLING — Clean / Original
   Keeps the natural look: bold black labels, normal text,
   no blue uppercase, no colored dividers. Just clean paragraphs.
═══════════════════════════════════════════════════════════════ */

/* All field paragraphs — clean baseline */
.entry-content p.latw-field-flavor,
.entry-content p.latw-field-country,
.entry-content p.latw-field-when,
.entry-content p.latw-field-bite,
.entry-content p.latw-field-haiku,
.entry-content p.latw-field-origin,
.entry-content p.latw-field-photo {
    font-style:  normal !important;
    background:  none !important;
    border:      none !important;
    padding:     0 !important;
}

/* Haiku continuation lines — keep clean */
.entry-content p.latw-field-haiku + p:not([class]),
.entry-content p.latw-field-haiku + p:not([class]) + p:not([class]),
.entry-content p.latw-field-haiku + p:not([class]) + p:not([class]) + p:not([class]),
.entry-content p.latw-field-haiku + p:not([class]) + p:not([class]) + p:not([class]) + p:not([class]) {
    font-style:  normal !important;
    background:  none !important;
    border:      none !important;
    padding:     0 !important;
}

/* Photo credit — slightly smaller and lighter */
.entry-content p.latw-field-photo {
    font-size:   13px !important;
    color:       #aaa !important;
    font-style:  italic !important;
    margin-top:  24px !important;
}

/* Bold labels inside paragraphs — keep them bold and dark (original look) */
.entry-content p[class*="latw-field"] strong {
    color:          inherit !important;
    font-size:      inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight:    bold !important;
}

/* ═══════════════════════════════════════════════════════════════
   SOCIAL SHARING
═══════════════════════════════════════════════════════════════ */
.entry-footer .article-share,
.sharedaddy {
    border-top:  2px solid #e0ecf5 !important;
    padding-top: 20px !important;
    margin-top:  24px !important;
}
.sd-title {
    font-family:    'Nunito Sans', sans-serif !important;
    font-size:      11px !important;
    font-weight:    800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color:          #999 !important;
}
.sd-content ul {
    display:    flex !important;
    gap:        8px !important;
    list-style: none !important;
    padding:    0 !important;
    flex-wrap:  wrap !important;
}
.sd-content ul li a {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           38px !important;
    height:          38px !important;
    border-radius:   50% !important;
    background:      #f0f6fa !important;
    border:          1px solid #dde8f0 !important;
    color:           #555 !important;
    font-size:       0 !important;
    transition:      background 0.2s, color 0.2s, border-color 0.2s !important;
    text-decoration: none !important;
    padding:         0 !important;
}
.sd-content ul li a::before {
    font-family: 'Font Awesome 6 Brands', sans-serif;
    font-weight: 400;
    font-size:   15px !important;
}
.sd-content ul li a:hover {
    color:        #fff !important;
    border-color: transparent !important;
}

/* Per-platform icon + hover colors */
.share-facebook  a::before { content: '\f39e'; }
.share-facebook  a:hover   { background: #1877f2 !important; }
.share-bluesky   a::before { content: '\e671'; }
.share-bluesky   a:hover   { background: #0085ff !important; }
.share-pinterest a::before { content: '\f231'; }
.share-pinterest a:hover   { background: #e60023 !important; }
.share-reddit    a::before { content: '\f281'; }
.share-reddit    a:hover   { background: #ff4500 !important; }
.share-email     a::before { font-family: 'Font Awesome 6 Free'; font-weight: 900; content: '\f0e0'; }
.share-email     a:hover   { background: #0077b6 !important; }
.share-twitter   a::before { content: '\e671'; }
.share-twitter   a:hover   { background: #0085ff !important; }

/* ═══════════════════════════════════════════════════════════════
   JETPACK LIKES
═══════════════════════════════════════════════════════════════ */
.jetpack-likes-widget-wrapper {
    border:        1px solid #e0ecf5 !important;
    border-radius: 10px !important;
    padding:       10px 16px !important;
    background:    #f9fcff !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */
#secondary .widget-title {
    font-family:    'Marcellus', Georgia, serif !important;
    font-size:      16px !important;
    color:          #1a1a2e !important;
    border-bottom:  2px solid #0077b6 !important;
    padding-bottom: 8px !important;
    margin-bottom:  14px !important;
}
#secondary .widget {
    background:    #fff;
    border:        1px solid #e0ecf5;
    border-radius: 12px;
    padding:       20px !important;
    margin-bottom: 20px !important;
}
#secondary a {
    color:           #0077b6 !important;
    text-decoration: none;
}
#secondary a:hover {
    text-decoration: underline;
}

/* Recent posts in sidebar */
#secondary .widget_recent_entries ul {
    list-style: none !important;
    padding:    0 !important;
}
#secondary .widget_recent_entries ul li {
    padding:       6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size:     14px;
    line-height:   1.4;
}
#secondary .widget_recent_entries ul li:last-child {
    border-bottom: none;
}

/* Tag cloud */
#secondary .widget_tag_cloud .tagcloud a {
    background:      #e8f4fd !important;
    color:           #0077b6 !important;
    border:          1px solid #b3d9f5 !important;
    border-radius:   20px !important;
    padding:         4px 10px !important;
    font-size:       12px !important;
    display:         inline-block !important;
    margin:          3px 2px !important;
    text-decoration: none !important;
    transition:      background 0.2s, color 0.2s !important;
}
#secondary .widget_tag_cloud .tagcloud a:hover {
    background: #0077b6 !important;
    color:      #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION — prev/next post links
═══════════════════════════════════════════════════════════════ */
.post-navigation {
    border-top:  2px solid #e0ecf5;
    padding-top: 24px;
    margin-top:  32px;
    display:     flex;
    gap:         16px;
}
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    background:      #f0f6fa;
    color:           #0077b6 !important;
    text-decoration: none !important;
    padding:         10px 18px;
    border-radius:   24px;
    font-weight:     700;
    font-size:       14px;
    border:          1px solid #b3d9f5;
    transition:      background 0.2s, color 0.2s;
}
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
    background: #0077b6;
    color:      #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   RANDOM FLAVOR NAV BUTTON (injected by snippet 11)
═══════════════════════════════════════════════════════════════ */
.latw-random-nav-btn {
    background:    #0077b6 !important;
    color:         #fff !important;
    border:        none !important;
    padding:       9px 18px !important;
    border-radius: 24px !important;
    font-weight:   700 !important;
    font-size:     14px !important;
    cursor:        pointer !important;
    display:       inline-flex !important;
    align-items:   center !important;
    gap:           6px !important;
    transition:    background 0.2s, transform 0.15s !important;
    text-decoration: none !important;
    white-space:   nowrap !important;
    line-height:   1.4 !important;
}
.latw-random-nav-btn:hover {
    background: #005f8a !important;
    color:      #fff !important;
    transform:  scale(1.04) !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .single .entry-title {
        font-size: 26px !important;
    }
    .single .post-thumbnail img {
        max-height: 240px;
    }
    .post-navigation {
        flex-direction: column;
    }
    .latw-random-nav-btn {
        padding: 7px 14px !important;
        font-size: 13px !important;
    }
}