/* Heterobos Venue CTA Styles v0.7.3
 * Mimics layout-mockups-2026-08-28.html styling.
 * Brand palette per AGENTS.md:
 *   bg #000/#111, text #e8ddd6, accent #c8334a/#e84a6a, borders #2a2a2a/#3a3a3a
 */

/* ===== Hetero score badge ===== */
.hetero-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    color: #fff !important;
    font-size: 0.9em;
}

/* ===== Hetero score card (hero) ===== */
.hetero-score-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: #111;
    border-left: 4px solid #c8334a;
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 24px 0;
}
/* v0.7.24: wrap kaart + expander + map in een geforceerde column-stack zodat ze NIET
   side-by-side komen. Werkt zelfs als filter_html_output pipeline faalt (defense in depth).
   Robin zag in zijn screenshots alle 3 op één rij — v0.7.22.4 CSS-fix faalde doordat
   inline critical CSS niet altijd ingeladen werd. Dit is een sterker statement.
   v0.7.24.2: selector verbreden want elementen staan in <header>, niet .entry-content. */
body.single.single-post .hetero-score-card,
body.single.single-post .hetero-score-expander,
body.single.single-post .hetero-osm-map-wrapper {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    max-width: 480px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    float: none !important;
    flex: none !important;
}
/* Score card intern mag wél flex blijven (de inhoud: HETERO SCORE label + STERK HETERO pill naast elkaar) */
body.single.single-post .hetero-score-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
}
/* Header als flex-column zodat score card / expander / map onder elkaar komen ipv naast */
body.single.single-post header.entry-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
/* v0.7.24.2 back-up: duplicate STERK HETERO badge volledig verbergen */
body.single.single-post .entry-content div[style*="text-align:right"] > div[style*="background:#c8334a"] {
    display: none !important;
}
.hetero-score-card .score-big {
    font-size: 2.5rem;
    font-weight: 800;
    color: #c8334a;
    line-height: 1;
}
.hetero-score-card .score-label {
    font-size: 0.85rem;
    color: #888;
}

/* ===== Hetero sidebar widget (sticky on desktop) ===== */
.hetero-sidebar {
    background: #111;
    border: 2px solid #c8334a;
    border-radius: 12px;
    padding: 20px;
    position: sticky;
    top: 20px;
    color: #e8ddd6;
}
.hetero-sidebar h3 {
    color: #e8ddd6;
    margin-bottom: 12px;
    font-size: 1rem;
}
.hetero-sidebar .score-big {
    font-size: 3.5rem;
    font-weight: 800;
    color: #c8334a;
    line-height: 1;
}
.hetero-sidebar .score-bar {
    background: #1a1a1a;
    height: 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
}
.hetero-sidebar .score-fill {
    background: linear-gradient(90deg, #2a2a2a 0%, #c8334a 70%, #e84a6a 100%);
    height: 100%;
}
.hetero-sidebar .score-explainer {
    border-top: 1px solid #2a2a2a;
    padding-top: 12px;
    font-size: 0.85rem;
    color: #e8ddd6;
    opacity: 0.8;
    line-height: 1.5;
}

/* ===== Hetero score expander ===== */
.hetero-score-expander {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 16px 0;
    display: block;
    clear: both;
    width: 100%;
    max-width: 480px;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}
.hetero-score-expander summary {
    color: #c8334a;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    text-align: left;
}
.hetero-score-expander p {
    color: #e8ddd6;
    margin: 12px 0 0 0;
    font-size: 0.9em;
    line-height: 1.5;
    text-align: left;
}

/* ===== Hetero address ===== */
.hetero-address {
    background: #111;
    border: 1px solid #2a2a2a;
    border-left: 3px solid #c8334a;
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    margin: 16px 0;
    color: #e8ddd6;
    font-size: 0.95em;
}

/* ===== Hetero phone button (matches mockup phone-btn) ===== */
.phone-btn,
.hetero-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #c8334a;
    color: #fff !important;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9em;
    transition: opacity 0.2s;
}
.phone-btn:hover,
.hetero-phone:hover { opacity: 0.85; color: #fff !important; }

/* ===== Hetero opening hours ===== */
.hetero-hours {
    background: #111;
    border: 1px solid #2a2a2a;
    padding: 12px 16px;
    border-radius: 6px;
    margin: 16px 0;
    color: #e8ddd6;
    font-size: 0.9em;
}

/* ===== Hetero map buttons (matches mockup gps-btn gps-*) ===== */
.hetero-map-btn,
.gps-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    transition: opacity 0.2s;
    margin: 4px;
}
.hetero-map-btn:hover,
.gps-btn:hover { opacity: 0.85; }

/* Google (v0.7.19: site-style — dark + brand red accent, no Google blue) */
.gps-google,
.hetero-map-btn.google { background: #1a1a1a; color: #fff !important; border: 1px solid #c8334a; }
.gps-google:hover,
.hetero-map-btn.google:hover { background: #c8334a; color: #fff !important; }
/* Apple (subtle, dark — keep existing) */
.gps-apple,
.hetero-map-btn.apple { background: #1a1a1a; color: #fff !important; border: 1px solid #3a3a3a; }
.gps-apple:hover,
.hetero-map-btn.apple:hover { background: #c8334a; border-color: #c8334a; color: #fff !important; }
/* Waze (v0.7.19: dark with red accent, no Waze light-blue) */
.gps-waze,
.hetero-map-btn.waze { background: #1a1a1a; color: #fff !important; border: 1px solid #3a3a3a; }
.gps-waze:hover,
.hetero-map-btn.waze:hover { background: #c8334a; border-color: #c8334a; color: #fff !important; }
/* Copy GPS */
.gps-copy,
.hetero-map-btn.copy { background: #1a1a1a; color: #fff !important; border: 1px solid #3a3a3a; }
.gps-copy:hover,
.hetero-map-btn.copy:hover { background: #c8334a; border-color: #c8334a; color: #fff !important; }

/* ===== Hetero recommendations ===== */
.hetero-recommendations {
    background: #1a1a1a;
    border-left: 4px solid #c8334a;
    padding: 20px;
    border-radius: 0 6px 6px 0;
    margin: 30px 0;
}
.hetero-recommendations h3 {
    color: #e8ddd6;
    margin-top: 0;
}
.hetero-recommendations ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hetero-recommendations li {
    padding: 8px 0;
    border-bottom: 1px solid #2a2a2a;
    color: #e8ddd6;
}
.hetero-recommendations li:last-child {
    border-bottom: 0;
}
.hetero-recommendations li a {
    color: #e8ddd6;
    text-decoration: none;
    font-weight: 600;
}
.hetero-recommendations li a:hover { color: #c8334a; }
.hetero-recommendations li .rec-score {
    color: #c8334a;
    font-weight: 700;
}

/* ===== Hetero related venues ===== */
.hetero-related-venues {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 20px;
    margin: 30px 0;
}
.hetero-related-venues h3 {
    color: #e8ddd6;
    margin-top: 0;
}
.hetero-related-venues ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hetero-related-venues li {
    padding: 8px 0;
    border-bottom: 1px solid #2a2a2a;
}
.hetero-related-venues li:last-child { border-bottom: 0; }
.hetero-related-venues li a {
    color: #e8ddd6;
    text-decoration: none;
    font-weight: 600;
}
.hetero-related-venues li a:hover { color: #c8334a; }
.hetero-related-venues .related-score {
    color: #c8334a;
    font-weight: 700;
}

/* ===== Hide author meta ABOVE post title (keep at comments via comment author) =====
 * Per operator 2026-08-28: hide the entry-meta author byline at top of post.
 * Comments still show comment author (handled by comment-author class elsewhere).
 */
.single-post .entry-meta,
.single-post .byline,
.single-post .author,
.single-post .vcard,
.single-post .entry-footer .byline,
.single-post .posted-by,
.single-post .meta-label,
.single-post .posted-on,
.single-post .entry-meta-divider-dot {
    display: none !important;
}
.hetero-business-disclaimer {
    margin: 16px 0;
    padding: 12px;
    background: #1a1a1a;
    border-left: 3px solid #c8334a;
    border-radius: 0 4px 4px 0;
    font-size: 0.85em;
    color: #e8ddd6;
}

/* ===== Prev/next nav (below comments) ===== */
.hetero-post-navigation {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #2a2a2a;
    display: block;
}
.hetero-post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.hetero-post-navigation .nav-previous,
.hetero-post-navigation .nav-next {
    flex: 1;
}
.hetero-post-navigation .nav-next { text-align: right; }
.hetero-post-navigation a {
    color: #c8334a;
    text-decoration: none;
    font-weight: 600;
}
.hetero-post-navigation a:hover { text-decoration: underline; }

/* ===== Map grid container ===== */
.hetero-map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0;
}
.hetero-map-grid .hetero-map-btn { margin: 0; justify-content: center; }
.hetero-map-grid .full-width { grid-column: 1 / -1; }

@media (max-width: 480px) {
    .hetero-map-grid { grid-template-columns: 1fr; }
}

/* ===== Engagement block ===== */
.engagement-block {
    background: #111;
    border: 2px solid #c8334a;
    border-radius: 12px;
    padding: 24px;
    margin: 32px 0;
}
.engagement-block h2 {
    color: #e8ddd6;
    font-size: 1.4rem;
    margin-bottom: 6px;
}
.engagement-block .subtitle {
    color: #e8ddd6;
    opacity: 0.7;
    font-size: 0.85em;
    margin-bottom: 16px;
}
.engagement-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.engagement-card {
    background: #0a0a0a;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}
.engagement-card .icon {
    font-size: 2em;
    margin-bottom: 8px;
}
.engagement-card h3 {
    color: #e8ddd6;
    font-size: 1rem;
    margin: 8px 0;
}
.engagement-card button,
.engagement-card .engage-btn {
    background: #c8334a;
    color: #fff !important;
    border: 0;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    font-size: 0.9em;
}
.engagement-card button:hover,
.engagement-card .engage-btn:hover { opacity: 0.85; }
@media (max-width: 720px) {
    .engagement-cards { grid-template-columns: 1fr; }
}

/* v0.7.8: Header bell icon (replaces footer UM notification widget) */
#hb-header-bell {
    position: fixed;
    top: 12px;
    right: 80px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #111;
    color: #e8ddd6;
    border: 1px solid #2a2a2a;
    border-radius: 20px;
    padding: 6px 14px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#hb-header-bell:hover {
    background: #1a1a1a;
    border-color: #c8334a;
    color: #e84a6a;
}
#hb-header-bell svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}
#hb-header-bell .hb-bell-label {
    white-space: nowrap;
}

/* Mobile: smaller pill, just icon */
@media (max-width: 600px) {
    #hb-header-bell {
        top: 8px;
        right: 60px;
        padding: 6px 10px;
        font-size: 0;
    }
    #hb-header-bell .hb-bell-label {
        display: none;
    }
}

/* Hide UM notification dropdown widget from footer (it was rendering after footer menu) */
/* UM injects via JS; we hide ALL .um-notification-shortcode on frontend footer areas */
footer .um-notification-shortcode,
footer .um-notification-ajax,
footer .um-notifications-widget,
.site-footer .um-notification-shortcode,
.site-footer .um-notification-ajax,
.site-footer .um-notifications-widget,
#colophon .um-notification-shortcode,
#colophon .um-notification-ajax,
#colophon .um-notifications-widget,
#footer-widgets .um-notification-shortcode,
#footer-widgets .um-notification-ajax,
#footer-widgets .um-notifications-widget,
.footer-widget-area .um-notification-shortcode,
.footer-widget-area .um-notification-ajax,
.footer-widget-area .um-notifications-widget {
    display: none !important;
}