/*
 * File:    responsive.css
 * Purpose: Safari/cross-browser compatibility + all responsive overrides.
 *          All @media rules from style.css are consolidated here.
 *          Supplements kudil-child/style.css and fixes md-booking plugin conflicts.
 * Author:  ST
 * Created: 2026-04-24
 * Updated: 2026-04-25
 * Version: 2.3.0
 *
 * Enqueued via kudil_child_enqueue_responsive() in functions.php at priority 110.
 *
 * CHANGELOG 2.3.0
 *   - PART H: Header row visibility switching (#cus-header desktop, #cus-mob-header ≤1199px).
 *     Replaces WPBakery's broken per-row disable_element approach.
 *
 * CHANGELOG 2.2.0
 *   - Food menu grid rebuilt as fully fluid (auto-fill + aspect-ratio).
 *     All per-breakpoint column/height overrides removed; the single §18
 *     declaration in style.css now handles every viewport from 280px up.
 *   - B1 changed from fixed height:350px to aspect-ratio-based clamp that
 *     disables the moondog-booking-public.css height:85% hijack.
 *   - A3 extended with .post-card-inner + thumbnail fallback for Safari <15.
 *   - PART G (touch) restores explicit image aspect since flex:1 no longer
 *     applies when parent is auto-height.
 *
 * ── TABLE OF CONTENTS ────────────────────────────────────────
 *   PART A — Safari / cross-browser compatibility (no media query)
 *   PART B — Global fixes (no media query)
 *   PART C — Tablet       @media (max-width: 1024px)
 *   PART D — Mobile       @media (max-width: 767px)
 *   PART E — Small screen @media (max-width: 600px)
 *   PART F — Phone        @media (max-width: 480px)
 *   PART G — Touch devices @media (hover: none)
 *   PART H — Header rows  (no media query + @media max-width: 1199px)
 * ─────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════
 *  PART A — SAFARI / CROSS-BROWSER COMPATIBILITY
 *  No media query — applies at all viewport widths.
 * ═══════════════════════════════════════════════════════════════ */

/* A1. Replace inset: 0 — not supported Safari < 14.1 */
.mdg-ev-hero-overlay,
.post-thumbnail-placeholder {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


/* A3. aspect-ratio fallback — not supported Safari < 15 */
@supports not (aspect-ratio: 1) {

    #beer-categories .vc_single_image-wrapper {
        position: relative;
        height: 0;
        padding-top: 133.33%;
    }
    #beer-categories .vc_single_image-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

    #insights .vc_single_image-wrapper {
        position: relative;
        height: 0;
        padding-top: 100%;
    }
    #insights .vc_single_image-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

    .mdg-lb {
        position: relative;
        height: 0;
        padding-top: 100%;
    }
    .mdg-lb img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Food menu image area — aspect-ratio: 4/3 fallback (landscape).
       padding-top = 3/4 = 75%. .post-card-front has position:relative in style.css. */
    #post-grid .post-card-front {
        height: 0;
        padding-top: 75%;
    }
    #post-grid .post-card-front img,
    #post-grid .post-card-front .post-thumbnail,
    #post-grid .post-card-front .post-thumbnail-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* A4. position: sticky — needs -webkit-sticky for Safari < 13 */
.mdg-ev-sidebar {
    position: sticky;
}

/* A5. Safari flex column + aspect-ratio: children don't auto-stretch to
   container width. Explicit width:100% forces correct grid column fill. */
.post-card-inner,
.post-card-front { width: 100%; }

/* B3. Live events section spacing */
.st-live-link-wrap {
    margin-top: 0 !important;
}

#main-live-events {
    padding: 20px 0 !important;
}

/* B4. Homepage radio banner bottom spacing */
#mdg-radio-home {
    padding-bottom: 25px;
}


/* ═══════════════════════════════════════════════════════════════
 *  PART C — TABLET
 *  @media (max-width: 1024px)
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    /* ── Single event page: sidebar gap ─────────────────────── */
    .mdg-ev-sidebar { gap: 16px; }

    /* ── Single event page: layout collapse (was 960px) ─────── */
    .mdg-ev-layout { grid-template-columns: 1fr; gap: 32px; }
    .mdg-ev-sidebar { position: static; order: -1; flex-direction: row; flex-wrap: wrap; }
    .mdg-ev-meta-card { flex: 1 1 260px; }
    .mdg-ev-cta-btn { flex: 1 1 100%; }
    .mdg-ev-title { font-size: 28px; }

    /* ── Gallery single album: 3-column grid ─────────────────── */
    .mdg-sg-grid { grid-template-columns: repeat(3, 1fr); }

    /* ── Food menu: 2-col grid (tablet) ─────────────────────── */
    #post-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    /* ── Food menu: category nav — horizontal scroll + arrows + fades ── */
    .mdg-fm-scroll {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .mdg-fm-scroll::-webkit-scrollbar { display: none; }
    .mdg-fm-tab-list { flex-wrap: nowrap; min-width: -moz-max-content; min-width: max-content; }
    .mdg-fm-tab-list li { flex: 0 0 auto; min-width: 0; }

    .mdg-fm-scroll::before, .mdg-fm-scroll::after { display: none; }

    /* show arrow buttons */
    .mdg-fm-arrow { display: flex; }


    /* ── Mobile navigation full reset ───────────────────────── */
    /*
     * Target DOM (confirmed from live HTML):
     *   div.mobile-menu.nav-is-visible
     *     ul#menu-header-main-menu-1.dt-primary-nav  ← mobile clone
     *     ul#menu-header-main-menu.dt-primary-nav    ← original desktop nav
     *
     * Critical bug fixed:
     *   style.css sets #menu-header-main-menu > li:last-child { position:absolute }
     *   for the desktop "pin-to-right" trick. Inside .mobile-menu this takes
     *   the Reservations item out of flow — it disappears or overlaps everything.
     */

    .mobile-menu,
    .mobile-menu * {
        box-sizing: border-box;
    }

    .mobile-menu {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-menu .dt-primary-nav {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .mobile-menu .dt-primary-nav > li {
        display: block;
        width: 100%;
        position: static !important;
        margin-left: 0 !important;
        float: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .mobile-menu .dt-primary-nav li a {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 14px 20px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #ffffff !important;
        text-decoration: none !important;
        background: transparent;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .mobile-menu .dt-primary-nav li a:hover,
    .mobile-menu .dt-primary-nav li a:focus {
        color: #c59d5f !important;
        background-color: rgba(255, 255, 255, 0.04);
        text-decoration: none !important;
    }

    .mobile-menu .current-menu-item > a,
    .mobile-menu .current-menu-ancestor > a,
    .mobile-menu .current_page_item > a {
        color: #c59d5f !important;
    }

    .mobile-menu .sub-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        background: rgba(0, 0, 0, 0.22);
    }

    .mobile-menu .sub-menu > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .mobile-menu .sub-menu li a {
        padding: 12px 28px;
        font-size: 11px;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 0.72) !important;
    }

    .mobile-menu .sub-menu li a:hover {
        color: #c59d5f !important;
    }

    .mobile-menu .sub-menu.is-hidden {
        display: none;
    }

    .mobile-menu .go-back > a,
    .mobile-menu .see-all > a {
        font-size: 11px;
        padding: 10px 20px;
        color: #c59d5f !important;
        font-weight: 600;
        letter-spacing: 1px;
    }

    .mobile-menu .see-all {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .mobile-menu .close-nav {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* Reservations CTA — last li in both nav lists */
    .mobile-menu #menu-header-main-menu-1 > li:last-child,
    .mobile-menu #menu-header-main-menu > li:last-child {
        position: static !important;
        margin-left: 0 !important;
        border-bottom: none;
        padding: 16px;
    }

    .mobile-menu #menu-header-main-menu-1 > li:last-child > a,
    .mobile-menu #menu-header-main-menu > li:last-child > a {
        display: inline-flex;
        width: auto;
        background: #c59d5f;
        color: #1c1c1c !important;
        border-radius: 5px;
        padding: 13px 28px;
        justify-content: center;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 2px;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .mobile-menu #menu-header-main-menu-1 > li:last-child > a:hover,
    .mobile-menu #menu-header-main-menu > li:last-child > a:hover {
        background: #ffffff;
        color: #1c1c1c !important;
    }

}


/* ═══════════════════════════════════════════════════════════════
 *  PART D — MOBILE
 *  @media (max-width: 767px)
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	
	.valkyrie-mark{display:none !important;}

    /* ── WPBakery column padding + div height resets ─────────── */
    div[id="1524468969139-86b8bfe4-d65c"] { height: 0 !important; }
    #header-wrapper { margin: 0 !important; }
    .vc_column_container > .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }

    /* ── Homepage: beer categories + insights grid ───────────── */
    #beer-categories .wpb_column { width: 100% !important; float: none !important; }
    #insights .wpb_column { width: 100% !important; float: left !important; }

    /* ── Homepage: broadcasts bar ───────────────────────────── */
    .mdg-hp-broadcasts .ect-minimal-list-wrapper { flex-direction: column; align-items: flex-start; }
    .mdg-hp-broadcasts .ect-list-posts { max-width: 100%; }

    /* ── Homepage: radio banner ─────────────────────────────── */
    .mdg-radio-home-inner { flex-direction: column; gap: 24px; padding: 0 16px; }
    .mdg-hp-radio-cta { flex: none; width: 100%; }
    .mdg-hp-radio-listen { align-items: center; width: 100%; }
    .mdg-hp-radio-listen p { justify-content: center; }
    .mdg-hp-radio-listen h3 { font-size: 20px; }
    .mdg-hp-radio-listen iframe { width: 100% !important; }

    /* ── Radio page ─────────────────────────────────────────── */
    .mdg-radio-player { justify-content: center; margin-top: 24px; }
    .mdg-radio-gallery-item { width: 100% !important; float: none !important; }
    .mdg-radio-gallery-item .wpb_wrapper img { height: 220px !important; }

    /* ── Private Events page ────────────────────────────────── */
    .mdg-pe-section-title { font-size: 17px; letter-spacing: 0.5px; }
    .mdg-pe-subsection-title { font-size: 16px; }
    .mdg-pe-form-title { font-size: 17px; letter-spacing: 0.5px; }
    .mdg-pe-cta { font-size: 13px; }

    /* ── Beer Catalogue: video column collapse ──────────────── */
    .mdg-bc-video-col { width: 100% !important; float: none !important; }
    .mdg-bc-video-col .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 20px !important; }

    /* ── Event/Insight pages: video column collapse ─────────── */
    .mdg-event-video { width: 100% !important; float: none !important; }

    /* ── Gallery Single Album ───────────────────────────────── */
    .mdg-sg-page { padding: 20px 0 40px; }
    .mdg-sg-title { font-size: 20px; }
    .mdg-sg-grid { gap: 4px; grid-template-columns: repeat(2, 1fr); }

    /* ── Broadcasts & Events page: stack columns ─────────────── */
    .mdg-events-highlights { border-right: none; border-bottom: 3px solid #c59d5f; padding-right: 0 !important; padding-bottom: 30px !important; margin-bottom: 30px; }
    .mdg-events-calendar { padding-left: 0 !important; }

    /* ── Food Menu: tab bar + post-grid ─────────────────────── */
    .mdg-fm-tab-list a { padding: 12px 14px; }

    /* ── Food menu: 1-col on mobile ─────────────────────────── */
    #post-grid { grid-template-columns: 1fr; gap: 14px; }
    .post-card-title { text-align: left; }

    /*
     * NOTE: The previous fixed-height overrides
     *   #post-grid .post-card-inner { height: 300px }
     *   #post-grid .post-card-front .post-thumbnail { height: 260px }
     * were removed in v2.2.0. aspect-ratio on .post-card-inner + flex:1
     * on the thumbnail now handle sizing fluidly with no breakpoint jumps.
     */

}


/* ═══════════════════════════════════════════════════════════════
 *  PART E — SMALL SCREEN
 *  @media (max-width: 600px)
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

    /* ── Welcome to Moondog's ────────────────────────────────── */
    .mdg-story-body h2 { font-size: 12px; }
    .mdg-story-body p, .mdg-story-body ul li { font-size: 15px; }

    /* ── CF7 forms: collapse two-column grid ─────────────────── */
    .mdg-jot-two-col { grid-template-columns: 1fr; grid-gap: 0; }

    /* ── Single Event Page ───────────────────────────────────── */
    .mdg-ev-hero { height: 260px; }
    .mdg-ev-page { padding: 28px 0 48px; }
        .mdg-ev-title {
        font-size: 22px;
        margin-bottom: 24px;
        font-family: inherit;
    }
    .mdg-ev-sidebar { flex-direction: column; }
    .mdg-ev-meta-card { flex: none; width: 100%; }
    .mdg-ev-content-inner h2 { font-size: 20px; }
    .mdg-ev-content-inner h3 { font-size: 16px; }

    /* ── Gallery Archive ─────────────────────────────────────── */
    .mdg-archive-page { padding: 28px 0 48px; }
    .mdg-archive-heading { font-size: 26px; margin-bottom: 28px; }
    .mdg-album-title { font-size: 14px; }
    .mdg-album-count { display: none; }
    .mdg-gallery-year-pill { font-size: 11px; letter-spacing: 2px; padding: 5px 13px; }

    /* ── Gallery Single Album ────────────────────────────────── */
    .mdg-sg-page { padding: 20px 0 40px; }
    .mdg-sg-title { font-size: 22px; }

    /* ── Our Awards Page ─────────────────────────────────────── */
    .mdg-awards-number { font-size: 64px; }
    .mdg-awards-category, .mdg-estia-row { padding: 20px 16px !important; }
    .mdg-estia-col { border-right: none; border-bottom: 1px solid #e8e8e8; }
    .mdg-estia-col:last-child { border-bottom: none; }
    .mdg-awards-list li { flex-wrap: wrap; gap: 8px; }

}


/* ═══════════════════════════════════════════════════════════════
 *  PART F — PHONE
 *  @media (max-width: 480px)
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    /* ── WPBakery: specific page containers + blog columns ───── */
    .page-id-18760 .container,
    .page-template-tpl-blog .container,
    .page-template-tpl-blog .layout-boxed .vc_row .dt-sc-stretch-row-content,
    .page-id-18760 .layout-boxed .vc_row .dt-sc-stretch-row-content,
    .post-type-archive-moondog .container,
    .post-type-archive-moondog .layout-boxed .vc_row .dt-sc-stretch-row-content,
    .post-type-archive-tribe_events .container,
    .post-type-archive-tribe_events .layout-boxed .vc_row .dt-sc-stretch-row-content { width: 100% !important; max-width: 100% !important; }

    .tpl-blog-holder.apply-isotope .column { padding: 10px 10px 0 !important; }
    .wpb_button, .wpb_content_element, ul.wpb_thumbnails-fluid > li { margin-bottom: 0 !important; }

    /* ── Reservations button ─────────────────────────────────── */
    .mdg-res-btn { padding: 18px 36px; font-size: 13px; letter-spacing: 2px; }

    /* ── Gallery Single Album ────────────────────────────────── */
    .mdg-sg-title { font-size: 20px; }
    .mdg-sg-grid { grid-template-columns: repeat(2, 1fr); }

    /*
     * Food menu: single column on phone is handled natively by auto-fill
     * + minmax(min(100%, 280px), 1fr) in style.css §18 — no grid-template
     * override needed. Fixed-height overrides removed.
     */
    .mdg-fm-tab-list a { padding: 12px 14px; }

    .vc_custom_1736840627047 {
        padding: 20px 20px 0 20px !important;
    }

    #menu-header-main-menu > li:last-child a {
        width: 100% !important;
    }

    .mdg-sg-page .container {
        width: 370px;
    }

    .mdg-jot-two-col .mdg-jot-field {
        margin-bottom: 15px;
    }
	
	#header-wrapper .main-title-section-wrapper {
		margin-top: 70px;
		margin-bottom: 10px !important;
	}
	
	h2.mdg-pe-form-title {
		margin-bottom: 20px !important;
	}

    .menu-trigger-icon i:before {
        font-size: 20px !important;
    }
	
}

.page #primary {
    padding-bottom: 0 !important;
}

.mobile-menu, .mobile-menu > ul, .mobile-menu ul.sub-menu{
    background: #000 !important;
}

#main-live-events{
    height: 95px;
}

/* Restore close-nav absolute positioning — our position:static !important above kills it */
.mobile-menu .dt-primary-nav li.close-nav {
    position: absolute !important;
    right: 0;
    top: 0;
    width: 50px !important;
    height: 50px;
    border-bottom: none !important;
    padding: 0;
}
/* X lines are #222 in parent theme — invert to white on dark mobile menu */
.mobile-menu .dt-primary-nav li.close-nav:before,
.mobile-menu .dt-primary-nav li.close-nav:after {
    background-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  PART G — TOUCH DEVICES
 *  @media (hover: none)
 *  The food menu card is already a static layout (no flip) so no
 *  card-specific overrides are needed here. The hover lift/zoom on
 *  .post-card and .post-card-front img simply won't fire on touch,
 *  which is the correct behaviour.
 * ═══════════════════════════════════════════════════════════════ */

@media (hover: none) {

    /* Suppress the translateY lift on touch — tap feedback is enough */
    .post-card:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0,0,0,.10);
    }

}


/* ═══════════════════════════════════════════════════════════════
 *  PART H — DESKTOP ONLY
 *  @media (min-width: 1025px)
 *  Description is hidden behind a "More" drawer on desktop.
 *  Mobile/tablet (≤1024px): description always visible, no More button.
 * ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {

    /* ── Food menu: upward drawer — slides over the image from below ── */
    .post-card { position: relative; }

    .post-card-excerpt {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.97);
        padding: 0 16px;
        max-height: 0;
        overflow: hidden;
        margin: 0;
        transition: max-height 0.35s ease, padding 0.35s ease;
        z-index: 2;
    }

    .post-card.is-open .post-card-excerpt {
		max-height: 260px;
        min-height: 165px;
        padding: 14px 16px;
        overflow: hidden;
    }

    .post-card.is-open.drawer-settled .post-card-excerpt {
        overflow-y: auto;
    }

    .post-card-more { display: inline-block; }

	.post-card-excerpt * {
		font-size: 15px !important;
	}
	
	.post-card-excerpt.ymir-vault .fjord-gold .mjolnir-value {
		font-size: 18px !important;
	}

}


/* ═══════════════════════════════════════════════════════════════
 *  PART H — HEADER ROW VISIBILITY SWITCHING
 *  #cus-header  = desktop nav row (≥1200px)
 *  #cus-mob-header = tablet/mobile nav row (≤1199px)
 * ═══════════════════════════════════════════════════════════════ */

#cus-mob-header { display: none !important; }
#cus-mob-header .wpb_column { margin-bottom: 0 !important; }

@media (max-width: 1199px) {
    #cus-header,
    .vc_row-full-width:has(#cus-header) { display: none !important; }

    #cus-mob-header, .vc_row-full-width:has(#cus-mob-header) {
        display: flex !important;
        visibility: visible !important;
        align-content: center;
    }

    .menu-trigger-icon i:before {
        font-size: 20px !important;
    }

}