/*
    menu-tiles control — stylesheet.

    Extends / overrides Bootstrap v3.3.7 navbar and dropdown components to
    provide:
      - A transparent navbar that turns solid once the page is scrolled.
      - Two tile dropdown layouts: "Simple" (single scrolling row) and
        "Advance" (tabbed sidebar + scrolling tile rows per tab).
      - An animated mobile hamburger menu.
      - Inline edit badges when rendered in admin edit mode.

    Upgrading to a higher Bootstrap version(s) may require revisiting the selectors and specificity
    below (particularly the '.navbar-*' overrides).

    File layout (top → bottom):
      1.  Utility / admin-page helpers
      2.  Navbar shell (transparent ↔ solid) + page offset
      3.  Brand
      4.  Primary nav links
      5.  Sign-In block
      6.  Hamburger toggle (base)
      7.  Standard dropdown (L2)
      8.  Standard dropdown submenu (L3)
      9.  Simple tile dropdown
      10. Advance tile dropdown
      10b. Advance tab strip scroll arrows (mobile portrait only)
      11. Tile menu "Edit" badge (admin edit mode)
      12. Tile menu data states (empty rows, card subtitles)
      13. Global accessibility (focus-visible, reduced-motion)
      14. Responsive breakpoints
*/

/* ===================================================================================
   1. Utility / admin-page helpers
   =================================================================================== */
.dg__margin-left-5 {
    margin-left: 5px;
}

/* Spacing used by the companion admin-links landing page. */
.dg__section-spacing {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.dg__heading-spacing {
    margin-bottom: 1.5rem;
}

.dg__list-item-spacing {
    margin-bottom: 0.5rem;
}

/* ===================================================================================
   2. Navbar shell — transparent sticky that goes solid on scroll
   =================================================================================== */
.dg__navbar-main {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: 0;
    min-height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    -o-transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

    /* Solid state: applied by KO when the page is scrolled past threshold. */
    .dg__navbar-main.dg__navbar-main--solid {
        background-color: #222222;
        border-bottom-color: transparent;
        -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

/* Content sits UNDER the fixed transparent navbar (hero image shows through).
   The hero / first section is expected to reserve its own top space. */
#main-wrapper {
    padding-top: 0;
}

/* ===================================================================================
   3. Brand
   =================================================================================== */
.dg__navbar-main .navbar-header {
    width: auto;
    height: auto;
}

.dg__navbar-main .navbar-brand {
    height: 80px;
    padding: 10px 15px;
    line-height: 1;
    -webkit-transition: color 0.25s ease;
    -o-transition: color 0.25s ease;
    transition: color 0.25s ease;
}

.dg__brand-logo {
    height: 60px;
    width: auto;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ===================================================================================
   4. Primary nav links
   =================================================================================== */
.dg__navbar-main .navbar-nav > li > a {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 30px 15px;
    line-height: 20px;
    -webkit-transition: color 0.2s ease, background-color 0.2s ease;
    -o-transition: color 0.2s ease, background-color 0.2s ease;
    transition: color 0.2s ease, background-color 0.2s ease;
}

    .dg__navbar-main .navbar-nav > li > a:hover,
    .dg__navbar-main .navbar-nav > li > a:focus,
    .dg__navbar-main .navbar-nav > li.open > a,
    .dg__navbar-main .navbar-nav > li.open > a:hover,
    .dg__navbar-main .navbar-nav > li.open > a:focus {
        color: #fff;
        background-color: transparent;
    }

/* ===================================================================================
   5. Sign-In block (=far right)
   =================================================================================== */
.dg__signin-nav {
    margin-right: 0;
}

.dg__navbar-main .dg__signin > .dg__signin-link {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding: 26px 18px;
    line-height: 20px;
    border-left: 1px solid transparent;
    -webkit-transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    -o-transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

    .dg__navbar-main .dg__signin > .dg__signin-link:hover,
    .dg__navbar-main .dg__signin > .dg__signin-link:focus {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.12);
        outline: none;
    }

.dg__signin-icon {
    margin-right: 6px;
    font-size: 16px;
    vertical-align: middle;
}

.dg__signin-label {
    vertical-align: middle;
}

/* ===================================================================================
   6. Hamburger toggle (base - animated burger <-> X)
   =================================================================================== */
.dg__navbar-main .navbar-toggle {
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    margin-top: 13px;
    margin-bottom: 13px;
    padding: 8px 10px;
    -webkit-transition: border-color 0.25s ease, background-color 0.25s ease;
    -o-transition: border-color 0.25s ease, background-color 0.25s ease;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

    .dg__navbar-main .navbar-toggle .icon-bar {
        background-color: #fff;
        width: 22px;
        height: 2px;
        -webkit-transition: background-color 0.25s ease, -webkit-transform 0.25s ease, opacity 0.25s ease;
        -o-transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
        transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
    }

    .dg__navbar-main .navbar-toggle:hover,
    .dg__navbar-main .navbar-toggle:focus {
        background-color: transparent;
    }

        .dg__navbar-main .navbar-toggle:hover .icon-bar,
        .dg__navbar-main .navbar-toggle:focus .icon-bar {
            background-color: #e0e0e0;
        }

    /* Burger -> X transformation (driven by the 'active' class). */
    .dg__navbar-main .navbar-toggle.active .icon-bar:nth-child(2) {
        -webkit-transform: rotate(45deg) translate(4px, 4px);
        -ms-transform: rotate(45deg) translate(4px, 4px);
        transform: rotate(45deg) translate(4px, 4px);
    }

    .dg__navbar-main .navbar-toggle.active .icon-bar:nth-child(3) {
        opacity: 0;
    }

    .dg__navbar-main .navbar-toggle.active .icon-bar:nth-child(4) {
        -webkit-transform: rotate(-45deg) translate(4px, -4px);
        -ms-transform: rotate(-45deg) translate(4px, -4px);
        transform: rotate(-45deg) translate(4px, -4px);
    }

/* ===================================================================================
   7. Standard (non-tile) dropdown — L2
   =================================================================================== */
.dg__navbar-main .dropdown-menu {
    border: none;
    border-top: 3px solid #595959;
    border-radius: 0;
    padding: 0;
    min-width: 220px;
    /*
        NOTE: do NOT use 'overflow: hidden' here — it would clip the L3
        submenu flyout ('.dropdown-submenu > .dropdown-menu') which is
        absolutely positioned at 'left: calc(100% + 2px)'. To preserve the
        rounded bottom corners on the menu we instead clip the first/last
        '<li> > <a>' to the menu's border-radius (see rules below).
    */
    overflow: visible;
    -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

    /* Squared corners */
    .dg__navbar-main .dropdown-menu > li:last-child > a {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .dg__navbar-main .dropdown-menu > li > a {
        padding: 10px 20px 10px 17px; /* 20 - 3 to keep text aligned with border-left */
        font-size: 13px;
        color: #7F7F7F;
        border-left: 3px solid transparent;
        -webkit-transition: all 0.15s ease;
        -o-transition: all 0.15s ease;
        transition: all 0.15s ease;
    }

        .dg__navbar-main .dropdown-menu > li > a:hover,
        .dg__navbar-main .dropdown-menu > li > a:focus {
            border-left-color: #f0ad4e; /* matches edit-badge accent */
            background-color: #595959;
            color: #fff;
        }

        .dg__navbar-main .dropdown-menu > li > a .badge {
            background-color: #595959;
            font-size: 10px;
            font-weight: 400;
            margin-left: 5px;
            vertical-align: middle;
        }

        .dg__navbar-main .dropdown-menu > li > a:hover .badge {
            background-color: #fff;
            color: #595959;
        }

    .dg__navbar-main .dropdown-menu > li.active > a,
    .dg__navbar-main .dropdown-menu > li.active > a:hover,
    .dg__navbar-main .dropdown-menu > li.active > a:focus {
        background-color: #404040;
        color: #fff;
        border-left-color: #f0ad4e;
    }

    .dg__navbar-main .dropdown-menu .divider {
        margin: 0;
        background-color: #CCCCCC;
    }

    .dg__navbar-main .dropdown-menu > li + li > a {
        border-top: 1px solid #F2F2F2;
    }

/* ===================================================================================
   8. Standard dropdown submenu (L3)
    Bootstrap 3.3.7 doesn't ship submenu styles, so we provide them here. Opens to 
    the right on desktop, inline (indented) on mobile — mirrors the L1 -> L2 pattern.
   =================================================================================== */
.dg__navbar-main .dropdown-submenu {
    position: relative;
}

    .dg__navbar-main .dropdown-submenu > a {
        padding-right: 30px; /* room for the right-pointing caret */
    }

    .dg__navbar-main .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: calc(100% + 2px);
        z-index: 1031; /* above the L2 menu */
        margin-top: -2px;
        margin-left: 0;
        border-top: 2px solid #595959;
        border-radius: 0;
        display: none;
        -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .dg__navbar-main .dropdown-submenu.open > .dropdown-menu,
    .dg__navbar-main .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

.dg__submenu-caret {
    position: absolute;
    top: 50%;
    right: 12px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 11px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    color: #A5A5A5;
    -webkit-transition: -webkit-transform 0.2s ease, color 0.2s ease;
    -o-transition: transform 0.2s ease, color 0.2s ease;
    transition: transform 0.2s ease, color 0.2s ease;
}

.dg__navbar-main .dropdown-submenu:hover > a .dg__submenu-caret {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ===================================================================================
   9. Simple tile dropdown (single horizontal scrolling row)
   =================================================================================== */
.dg__simple-dropdown {
    position: static !important;
}

.dg__simple-menu {
    width: 100%;
    /*
        Horizontal padding compensates for .dg__simple-row's -14px negative
        margin so the tiles sit ~48px in from the menu edges — matching the
        edge spacing of .dg__enhance-panels in the advance tile menu.
    */
    padding: 40px 62px;
    border: none;
    border-top: 2px solid #595959;
    border-radius: 0;
    background: #fff;
    -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Scroll-arrow wrapper + circular prev/next buttons. */
.dg__simple-scroll-wrapper {
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
}

.dg__simple-arrow {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border: 1px solid #CCCCCC;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #595959;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    -webkit-transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    -o-transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

    .dg__simple-arrow:hover {
        background: #595959;
        border-color: #595959;
        color: #fff;
    }

.dg__simple-arrow--left {
    left: -14px;
}

.dg__simple-arrow--right {
    right: -14px;
}

/* Scrollable row + child post cards. */
.dg__simple-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0 -14px;
    padding-bottom: 8px;
}

    /* Thin scrollbar for desktop. */
    .dg__simple-row::-webkit-scrollbar {
        height: 4px;
    }

    .dg__simple-row::-webkit-scrollbar-track {
        background: #F2F2F2;
        border-radius: 2px;
    }

    .dg__simple-row::-webkit-scrollbar-thumb {
        background: #CCCCCC;
        border-radius: 2px;
    }

        .dg__simple-row::-webkit-scrollbar-thumb:hover {
            background: #A5A5A5;
        }

.dg__col-fifth {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    padding: 14px;
    scroll-snap-align: start;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.dg__simple-post {
    margin-bottom: 0;
}

.dg__simple-post-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    padding-top: 66.67%; /* 3:2 aspect ratio */
}

    .dg__simple-post-thumb img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        -o-object-fit: cover;
        object-fit: cover;
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease;
    }

.dg__simple-post:hover .dg__simple-post-thumb img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.dg__simple-post-content {
    padding: 14px 0 0;
    text-align: center;
}

.dg__simple-meta {
    margin-bottom: 6px;
}

    .dg__simple-meta > li {
        padding: 0;
    }

        .dg__simple-meta > li > a {
            font-size: 11px;
            color: #A5A5A5;
            padding: 0 !important;
        }

            .dg__simple-meta > li > a:hover {
                color: #595959;
                background: transparent !important;
            }

            .dg__simple-meta > li > a i {
                margin-right: 3px;
            }

        .dg__simple-meta > li + li {
            margin-left: 8px;
        }

.dg__simple-post-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

    .dg__simple-post-title a {
        color: #595959;
        text-decoration: none;
        -webkit-transition: color 0.2s ease;
        -o-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

        .dg__simple-post-title a:hover {
            color: #595959;
        }

/* ===================================================================================
   10. Advance tile dropdown (category tabs + per-tab scrolling rows)
   =================================================================================== */
.dg__enhance-dropdown {
    position: static !important;
}

.dg__enhance-menu {
    width: 100%;
    padding: 0;
    border: none;
    border-top: 2px solid #595959;
    border-radius: 0;
    background: #fff;
    -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

    .dg__enhance-menu > .row {
        margin: 0;
    }

/* Tab sidebar — borderless, uses background/hover emphasis. */
.dg__enhance-tabs {
    padding: 24px 16px;
    background: #fff;
    border-right: none;
}

.dg__enhance-tab-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .dg__enhance-tab-list > li {
        margin-bottom: 4px;
    }

        .dg__enhance-tab-list > li > a {
            display: block;
            padding: 14px 20px;
            font-size: 13px;
            font-weight: 600;
            color: #7F7F7F;
            text-decoration: none;
            background: transparent;
            border: none;
            border-radius: 4px;
            -webkit-transition: background 0.15s ease, color 0.15s ease;
            -o-transition: background 0.15s ease, color 0.15s ease;
            transition: background 0.15s ease, color 0.15s ease;
        }

            .dg__enhance-tab-list > li > a:hover,
            .dg__enhance-tab-list > li > a:focus {
                background: #F2F2F2;
                color: #595959;
            }

        .dg__enhance-tab-list > li.active > a,
        .dg__enhance-tab-list > li.active > a:hover,
        .dg__enhance-tab-list > li.active > a:focus {
            background: #595959;
            color: #fff;
            border: none;
            padding-left: 20px;
        }

/* Tab panels (one per SubMenuItem). */
.dg__enhance-panels {
    padding: 40px 48px;
    min-height: 200px;
}

/* Advance scroll-arrow wrapper + circular prev/next buttons. */
.dg__enhance-scroll-wrapper {
    position: relative;
}

.dg__enhance-arrow {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border: 1px solid #CCCCCC;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #595959;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    -webkit-transition: background 0.2s ease, border-color 0.2s ease;
    -o-transition: background 0.2s ease, border-color 0.2s ease;
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .dg__enhance-arrow:hover {
        background: #595959;
        border-color: #595959;
        color: #fff;
    }

.dg__enhance-arrow--left {
    left: -14px;
}

.dg__enhance-arrow--right {
    right: -14px;
}

/* Scrollable row inside a tab panel. */
.dg__enhance-scroll-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0 -12px;
    padding-bottom: 8px;
}

    .dg__enhance-scroll-row::-webkit-scrollbar {
        height: 4px;
    }

    .dg__enhance-scroll-row::-webkit-scrollbar-track {
        background: #F2F2F2;
        border-radius: 2px;
    }

    .dg__enhance-scroll-row::-webkit-scrollbar-thumb {
        background: #CCCCCC;
        border-radius: 2px;
    }

        .dg__enhance-scroll-row::-webkit-scrollbar-thumb:hover {
            background: #A5A5A5;
        }

.dg__enhance-col {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 0 12px;
    scroll-snap-align: start;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Advance cards. */
.dg__enhance-card {
    margin-bottom: 0;
}

.dg__enhance-card-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    padding-top: 75%; /* 4:3 aspect ratio to match reference */
}

    .dg__enhance-card-thumb img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        -o-object-fit: cover;
        object-fit: cover;
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease;
    }

.dg__enhance-card:hover .dg__enhance-card-thumb img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.dg__enhance-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin: 14px 0 0;
    text-align: center;
}

    .dg__enhance-card-title a {
        color: #595959;
        text-decoration: none;
        -webkit-transition: color 0.2s ease;
        -o-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

        .dg__enhance-card-title a:hover {
            color: #7F7F7F;
        }

/* ===================================================================================
   10b. Advance tab strip scroll arrows (mobile portrait only)
        Surfaces left/right arrows when the tab list overflows horizontally
        (e.g. more than four tabs). Hidden on desktop where the tabs render
        as a vertical sidebar.
   =================================================================================== */
.dg__enhance-tab-scroll-wrapper {
    position: relative;
}

.dg__enhance-tab-arrow {
    /* Hidden by default; the mobile-portrait media query below opts-in. */
    display: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 10;
    width: 28px;
    height: 28px;
    border: 1px solid #CCCCCC;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #595959;
    font-size: 12px;
    line-height: 26px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    -webkit-transition: background 0.2s ease, border-color 0.2s ease;
    -o-transition: background 0.2s ease, border-color 0.2s ease;
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .dg__enhance-tab-arrow:hover {
        background: #595959;
        border-color: #595959;
        color: #fff;
    }

.dg__enhance-tab-arrow--left {
    left: 0;
}

.dg__enhance-tab-arrow--right {
    right: 0;
}

/* Mobile portrait — enable arrows and reserve gutter space on the tab list. */
@media (max-width: 767px) and (orientation: portrait) {
    /* KO's 'visible' binding flips display between 'none' and the inline default;
       force inline-block when KO marks the button as visible. */
    .dg__enhance-tab-arrow[style*="display: inline-block"],
    .dg__enhance-tab-arrow[style*="display:inline-block"],
    .dg__enhance-tab-arrow:not([style*="display: none"]):not([style*="display:none"]) {
        display: inline-block;
    }

    /* Reserve room either side of the strip so arrows don't sit on top of tabs. */
    .dg__enhance-tab-scroll-wrapper .dg__enhance-tab-list {
        padding-left: 32px;
        padding-right: 32px;
        scroll-behavior: smooth;
    }
}

/* ===================================================================================
   11. Tile menu "Edit" pill badge — visible only in admin edit mode.
   =================================================================================== */
.dg__tile-menu-edit {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background-color: #f0ad4e; /* bootstrap warning */
    border: 1px solid #eea236;
    border-radius: 10px; /* pill shape */
    cursor: pointer;
    text-decoration: none;
    z-index: 99;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -webkit-transition: background-color 0.15s ease, border-color 0.15s ease, -webkit-transform 0.1s ease;
    -o-transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

    .dg__tile-menu-edit.badge {
        margin-left: 6px;
        background-color: #f0ad4e;
        color: #fff;
        cursor: pointer;
    }

        .dg__tile-menu-edit.badge:hover {
            background-color: #ec971f;
        }

    .dg__tile-menu-edit:hover,
    .dg__tile-menu-edit:focus {
        background-color: #ec971f;
        border-color: #d58512;
        color: #fff;
        text-decoration: none;
        outline: none;
    }

    .dg__tile-menu-edit:focus {
        -webkit-box-shadow: 0 0 0 3px rgba(240, 173, 78, 0.35);
        box-shadow: 0 0 0 3px rgba(240, 173, 78, 0.35);
    }

    .dg__tile-menu-edit:active {
        -webkit-transform: translateY(1px);
        -ms-transform: translateY(1px);
        transform: translateY(1px);
        background-color: #d58512;
    }

/* ===================================================================================
   12. Tile menu data-driven states (empty rows, card subtitles)
   =================================================================================== */
.dg__simple-empty,
.dg__enhance-empty {
    padding: 20px 10px;
    color: #7F7F7F;
    font-size: 13px;
    text-align: center;
}

.dg__enhance-card-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: #7F7F7F;
    text-align: center;
}

/* ===================================================================================
   13. Global accessibility — focus-visible + reduced-motion
   =================================================================================== */
.dg__navbar-main .dropdown-menu > li > a:focus-visible,
.dg__navbar-main .navbar-nav > li > a:focus-visible,
.dg__navbar-main .dg__signin-link:focus-visible {
    outline: 2px solid #f0ad4e;
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .dg__navbar-main *,
    .dg__navbar-main *::before,
    .dg__navbar-main *::after {
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }
}

/* ===================================================================================
   14. Responsive breakpoints
   =================================================================================== */
/* Small phones (<= 480px) */
@media (max-width: 480px) {
    
    .dg__navbar-main .navbar-brand {
        padding: 10px 10px;
        height: 54px;
    }

    .dg__brand-logo {
        height: 34px;
    }

    .dg__navbar-main .navbar-toggle {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 5px;
        padding: 6px 8px;
    }

    .dg__navbar-main .navbar-collapse {
        max-height: calc(100vh - 50px);
    }

    /*
        Keep the tile-menu scroll arrows visible on very narrow viewports too.
        They are repositioned/resized in the (max-width: 767px) block above
        (left/right: 2px, 34x34) so they sit inside the wrapper without
        overlapping thumbnails — swipe + scroll-snap remain available.
    */
    .dg__simple-arrow,
    .dg__enhance-arrow {
        /* Reduce hit-area slightly so they don't crowd the tiles on tiny screens. */
        width: 30px;
        height: 30px;
        line-height: 28px;
        font-size: 13px;
    }

    .dg__simple-arrow--left,
    .dg__enhance-arrow--left {
        left: 0;
    }

    .dg__simple-arrow--right,
    .dg__enhance-arrow--right {
        right: 0;
    }
}

/* Small tablets (481px – 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .dg__col-fifth {
        -ms-flex: 0 0 48%;
        flex: 0 0 48%;
        max-width: 48%;
    }

    .dg__enhance-col {
        -ms-flex: 0 0 45%;
        flex: 0 0 45%;
        max-width: 45%;
    }
}

/* Tablets & below (< 768px) */
@media (max-width: 767px) {
    /* Brand */
    .dg__navbar-main .navbar-brand {
        padding: 10px 15px;
        height: 60px;
    }

    .dg__brand-logo {
        height: 40px;
    }

    /* Collapsed nav panel */
    .dg__navbar-main .navbar-collapse {
        max-height: calc(100vh - 60px); /* viewport minus brandheader */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain; /* stop body scroll bleed */
        border-top: 1px solid #CCCCCC;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .dg__navbar-main .navbar-nav {
        margin: 0 -15px;
    }

        .dg__navbar-main .navbar-nav > li > a {
            padding: 14px 20px;
            min-height: 44px;
            font-size: 13px;
            border-bottom: 1px solid #F2F2F2;
        }

    /* Sign-In: full-width within the collapsed panel */
    .dg__signin-nav {
        float: none !important;
        margin: 0 -15px;
    }

    .dg__navbar-main .dg__signin > .dg__signin-link {
        padding: 14px 20px;
        min-height: 44px;
        border-top: 1px solid #F2F2F2;
        border-left: none;
    }

    /* Collapsed panel needs a solid backdrop even when navbar is transparent. */
    .dg__navbar-main:not(.dg__navbar-main--solid) .navbar-collapse.in,
    .dg__navbar-main:not(.dg__navbar-main--solid) .navbar-collapse.collapsing {
        background-color: #fff;
    }

        .dg__navbar-main:not(.dg__navbar-main--solid) .navbar-collapse.in .navbar-nav > li > a,
        .dg__navbar-main:not(.dg__navbar-main--solid) .navbar-collapse.in .dg__navbar-main .dg__signin > .dg__signin-link {
            color: #595959;
        }

    /*
        Standard L2 dropdown — render inline.
        Use max-height transition (instead of display:none) so opening/closing
        animates smoothly. The 800px sentinel is large enough for any realistic
        menu; actual height is determined by content.
    */
    .dg__navbar-main .dropdown-menu {
        position: static !important;
        float: none !important;
        width: auto;
        border: none;
        border-top: none;
        background-color: #F2F2F2;
        max-height: 0;
        overflow: hidden;
        display: block;
        visibility: hidden;
        -webkit-transition: max-height 0.25s ease, visibility 0s linear 0.25s;
        -o-transition: max-height 0.25s ease, visibility 0s linear 0.25s;
        transition: max-height 0.25s ease, visibility 0s linear 0.25s;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .dg__navbar-main .dropdown.open > .dropdown-menu {
        max-height: 800px;
        visibility: visible;
        -webkit-transition: max-height 0.25s ease, visibility 0s linear 0s;
        -o-transition: max-height 0.25s ease, visibility 0s linear 0s;
        transition: max-height 0.25s ease, visibility 0s linear 0s;
    }

    .dg__navbar-main .dropdown-menu > li > a {
        padding: 12px 30px;
        min-height: 44px;
        font-size: 13px;
        color: #595959; /* darker — meets WCAG AA on #F2F2F2 background */
        border-left: 3px solid #CCCCCC;
        margin-left: 15px;
    }

        .dg__navbar-main .dropdown-menu > li > a:hover {
            background-color: #595959;
            color: #fff;
        }

    /* L1 caret rotates 180° when open */
    .dg__navbar-main .dropdown > a .caret {
        float: right;
        margin-top: 8px;
        -webkit-transition: -webkit-transform 0.2s ease;
        transition: transform 0.2s ease;
    }

    .dg__navbar-main .dropdown.open > a .caret {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    /* L3 submenu — render inline / indented under its L2 parent. */
    .dg__navbar-main .dropdown-submenu > .dropdown-menu {
        position: static !important;
        float: none !important;
        left: auto;
        top: auto;
        width: auto;
        margin: 0;
        border: none;
        border-top: none;
        background-color: #E8E8E8;
        max-height: 0;
        overflow: hidden;
        display: block;
        visibility: hidden;
        -webkit-transition: max-height 0.25s ease, visibility 0s linear 0.25s;
        -o-transition: max-height 0.25s ease, visibility 0s linear 0.25s;
        transition: max-height 0.25s ease, visibility 0s linear 0.25s;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .dg__navbar-main .dropdown-submenu.open > .dropdown-menu {
        max-height: 600px;
        visibility: visible;
        -webkit-transition: max-height 0.25s ease, visibility 0s linear 0s;
        -o-transition: max-height 0.25s ease, visibility 0s linear 0s;
        transition: max-height 0.25s ease, visibility 0s linear 0s;
    }

    .dg__navbar-main .dropdown-submenu > .dropdown-menu {
        background-color: #E8E8E8;
    }

        .dg__navbar-main .dropdown-submenu > .dropdown-menu > li > a {
            border-left-color: #A5A5A5;
            margin-left: 30px;
            padding: 12px 30px 12px 15px; /* keeps the 44px row height */
            min-height: 44px;
            font-size: 12px;
            color: #595959;
        }

    /*
        Caret must stay vertically aligned with the L2 parent row.
        Anchor it to the L2 <a> (not the <li>), otherwise opening the
        inline L3 submenu makes the <li> taller and 'top: 50%' drifts
        down onto the first L3 item.
    */
    .dg__navbar-main .dropdown-submenu > a {
        position: relative;
    }

        .dg__navbar-main .dropdown-submenu > a .dg__submenu-caret {
            right: 20px;
        }

    /* L3 caret rotates 90° when open */
    .dg__navbar-main .dropdown-submenu.open > a .dg__submenu-caret {
        -webkit-transform: translateY(-50%) rotate(90deg);
        -ms-transform: translateY(-50%) rotate(90deg);
        transform: translateY(-50%) rotate(90deg);
    }

    /* Simple tile menu */
    .dg__simple-menu {
        padding: 16px 18px;
        position: static !important;
        float: none !important;
        width: auto;
        border-top: none;
        background-color: #F2F2F2;
        display: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .dg__navbar-main .dropdown.open > .dg__simple-menu {
        display: block;
    }

    .dg__simple-scroll-wrapper {
        margin-left: 11px;
        margin-right: 11px;
    }

    .dg__simple-row {
        margin: 0;
    }

    .dg__col-fifth {
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
        padding: 8px;
    }

    .dg__simple-post-thumb {
        padding-top: 60%;
    }

    .dg__simple-post-title {
        font-size: 13px;
    }

    .dg__simple-meta > li > a {
        font-size: 10px;
    }

    .dg__simple-arrow {
        width: 34px;
        height: 34px;
        font-size: 14px;
        line-height: 32px;
    }

    .dg__simple-arrow--left {
        left: 2px;
    }

    .dg__simple-arrow--right {
        right: 2px;
    }

    /* Advance tile menu */
    .dg__enhance-menu {
        padding: 0;
        position: static !important;
        float: none !important;
        width: auto;
        border-top: none;
        background-color: #F2F2F2;
        display: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .dg__navbar-main .dropdown.open > .dg__enhance-menu {
        display: block;
    }

    .dg__enhance-menu > .row {
        margin: 0;
    }

    .dg__enhance-tabs {
        padding: 8px;
        border-right: none;
        border-bottom: 1px solid #E5E5E5;
        background: #fff;
    }

    .dg__enhance-tab-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .dg__enhance-tab-list > li {
            margin-bottom: 0;
            margin-right: 4px;
        }

            .dg__enhance-tab-list > li > a {
                white-space: nowrap;
                padding: 10px 14px;
                font-size: 12px;
                border: none;
                border-radius: 4px;
            }

            .dg__enhance-tab-list > li.active > a {
                background: #595959;
                color: #fff;
                padding-left: 14px;
                border: none;
            }

    .dg__enhance-panels {
        padding: 16px;
        min-height: 0;
    }

    .dg__enhance-card-thumb {
        padding-top: 75%;
    }

    .dg__enhance-card-title {
        font-size: 12px;
    }

    .dg__enhance-col {
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%;
    }

    .dg__enhance-arrow {
        width: 34px;
        height: 34px;
        font-size: 14px;
        line-height: 32px;
    }

    .dg__enhance-arrow--left {
        left: 2px;
    }

    .dg__enhance-arrow--right {
        right: 2px;
    }
}

/* Desktop / tablet landscape (>= 768px) */
@media (min-width: 768px) {
    /* Simple dropdown must be static so the menu can span the full width. */
    .dg__simple-dropdown {
        position: static !important;
    }

    .dg__simple-menu {
        left: 0;
        right: 0;
    }

    /* Show exactly 4 cards; additional cards scroll horizontally. */
    .dg__col-fifth {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
        float: none;
    }

    /* Advance dropdown also spans the full width. */
    .dg__enhance-dropdown {
        position: static !important;
    }

    .dg__enhance-menu {
        left: 0;
        right: 0;
    }

    /* Desktop hover-open + fade-in animation for dropdown reveal. */
    .dg__navbar-main .dropdown-menu {
        display: none;
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-transition: opacity 0.2s ease, visibility 0.2s ease, -webkit-transform 0.2s ease;
        -o-transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    }

    .dg__navbar-main .dropdown:hover > .dropdown-menu,
    .dg__navbar-main .dropdown.open > .dropdown-menu,
    .dg__navbar-main .dropdown-submenu:hover > .dropdown-menu,
    .dg__navbar-main .dropdown-submenu.open > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    /* L3 flyout slides from the side instead of from above. */
    .dg__navbar-main .dropdown-submenu > .dropdown-menu {
        -webkit-transform: translateX(-6px);
        -ms-transform: translateX(-6px);
        transform: translateX(-6px);
    }

    .dg__navbar-main .dropdown-submenu:hover > .dropdown-menu,
    .dg__navbar-main .dropdown-submenu.open > .dropdown-menu {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

/* Medium screens (768px – 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .dg__navbar-main .navbar-nav > li > a {
        padding: 30px 10px;
        font-size: 12px;
    }

    .dg__simple-menu {
        /* 24px + 14px row negative-margin compensation = 24px effective inset. */
        padding: 24px 38px;
    }

    .dg__simple-post-title {
        font-size: 12px;
    }

    .dg__enhance-tabs {
        padding: 16px 10px;
    }

    .dg__enhance-tab-list > li > a {
        padding: 12px 14px;
        font-size: 12px;
    }

    .dg__enhance-panels {
        padding: 24px;
    }

    .dg__enhance-card-title {
        font-size: 12px;
    }
}

/* Large screens (>= 1200px) */
@media (min-width: 1200px) {
    .dg__navbar-main .navbar-nav > li > a {
        padding: 30px 18px;
    }
}