/* ================================================================
   Top-Nav Template — CSS
   Single topbar: brand left + nav (highlights/categories) right.
   Dropdown panels appear on :hover.
   Uses CSS variables injected by embed-detail-header.blade.php:
     --sn-text, --sn-bg, --sn-surface, --sn-radius
   ================================================================ */

/* ── Section wrapper ──────────────────────────────────────────── */
section.sn-template-top-nav {
    /* Override style.css:
       section.main-sec.sitenear-site-detail-main-holder sets
       height:85vh + overflow:hidden — both must be reset for this
       template which relies on natural page scroll. */
    height: auto !important;
    overflow: visible !important;
    background: var(--sn-bg, #fff);
    color: var(--sn-text, #222);
}

/* ── Settings takeover sidebar ────────────────────────────────── */
#sitenear-side-bar.sn-tn-sidebar {
    display: none; /* shown by JS when Settings/Custom Domain opens */
    width: 100%;
    min-height: 80vh;
    overflow-y: auto;
}

/* ── Visible area wrapper ─────────────────────────────────────── */
.sn-tn-visible-area {
    /* Simple block — content flows naturally */
    background: var(--sn-bg, transparent);
}

/* ── Main content body ────────────────────────────────────────── */
/* Explicit background prevents Bootstrap's white body canvas from
   showing through transparent child elements in the content area. */
div#sitenear-main-bar.sn-tn-body {
    background: var(--sn-bg, transparent);
}
div#add_summary_section.sn-tn-home-view {
    background: var(--sn-bg, transparent);
}
div#custom_section.sn-tn-ajax {
    background: var(--sn-bg, transparent);
}

/* ================================================================
   SINGLE TOPBAR
   ================================================================ */

.sn-tn-topbar {
    display: flex;
    align-items: stretch;
    border-bottom: 2px solid rgba(127,127,127,0.2);
    background: var(--sn-bg, #fff);
    position: relative;
    z-index: 200;
    /* Horizontal breathing room at viewport edges */
    padding-left:  clamp(0.75rem, 2vw, 1.5rem);
    padding-right: clamp(0.75rem, 2vw, 1.5rem);
}

/* ── Brand (logo + title) ─────────────────────────────────────── */
.sn-tn-brand {
    flex-shrink: 0;
    max-width: 38%;
    min-width: 0;
    display: flex;
    align-items: center;
    border-right: 1px solid rgba(127,127,127,0.2);
    overflow: hidden;
}

/* Constrain the embed-icon h2 inside the brand */
.sn-tn-brand #sitenear-site-detail-header {
    margin: 0 !important;
    padding: 0.3em 0.75em;
    min-height: 2.8em;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
}

/* ── Nav (right side) ─────────────────────────────────────────── */
.sn-tn-nav {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    /* overflow MUST stay visible so dropdown panels that extend below
       the topbar are not clipped. overflow-x:auto implicitly forces
       overflow-y:auto (CSS spec) which clips the panels. */
    overflow: visible;
    padding: 0 0.3em;
    gap: 0;
}

/* Spacer is no longer used — nav items are left-aligned right after the brand */
.sn-tn-nav-spacer {
    display: none;
}

/* ── Right section (owner controls + dot-menu) — outside the nav ──────────
   flex-shrink:0 ensures this block is never compressed or pushed off-screen
   by overflowing nav items. background clips any nav overflow visually. */
.sn-tn-topbar-right {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border-left: 1px solid rgba(127,127,127,0.2);
    background: var(--sn-bg, #fff);
    position: relative;
    z-index: 10; /* render on top of any accidental nav overflow */
}

/* ── Owner controls (Site URL chip + Domain btn) inserted by JS ────────── */
.sn-tn-owner-controls {
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex-shrink: 0;
    padding: 0 0.3em;
    /* no margin-left:auto — topbar-right handles positioning */
}
.sn-tn-owner-controls #sn-header-url-wrap {
    max-width: 220px;   /* override the 42% from embed-icon */
}
.sn-tn-owner-controls .sn-custom-domain-btn {
    margin-left: 0;     /* gap handles spacing; remove embed-icon's 0.8em */
}

/* ── Dot-menu anchor (inside topbar-right, no longer inside nav) ─────────── */
.sn-tn-header-menu {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 0.4em;
    /* Reserve enough room so the icon is never cramped */
    min-width: 2.4em;
    /* border-left removed — topbar-right supplies the left border */
}

/* col-xs-1 on .new-drop collapses width; reset it here.
   position:static overrides style.css's ".last.new-drop { position:absolute;
   right:10px; }" — without this it renders out of flow, pinned to the
   topbar's right edge regardless of what's actually next to it in the flex
   row, both overlapping adjacent nav content (e.g. the "More" button) and
   silently not contributing its width to .sn-tn-topbar-right's measured
   size, which throws off snTnReflowNav()'s available-space math. */
.sn-tn-header-menu .new-drop {
    position: static !important;
    width: auto !important;
    float: none !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
}

/* .end-actions inside the moved .new-drop must NOT be 100% of the
   flex container — that causes the ⋮ icon to drift away from its
   parent and appear to overlap adjacent nav buttons. */
.sn-tn-header-menu .end-actions {
    width: auto !important;
    justify-content: center !important;
}

/* ── "More" overflow dropdown ──────────────────────────────────────────────
   JS moves excess category items into this panel when the nav is too wide. */
#sn-tn-more-wrap {
    flex-shrink: 0;
}

/* More panel: right-aligned so it doesn't clip at the viewport edge */
#sn-tn-more-panel {
    right: 0;
    left: auto;
    min-width: 200px;
    max-width: 280px;
    padding: 0.3em 0;
}

/* Items inside More panel: render as a vertical list */
#sn-tn-more-panel > .sn-tn-dropdown-wrap {
    display: block;
    position: relative;
}

#sn-tn-more-panel > .sn-tn-dropdown-wrap > .sn-tn-nav-btn {
    display: flex;
    width: 100%;
    padding: 0.5em 0.9em;
    border-radius: 0;
    box-sizing: border-box;
}

/* Sub-dropdown for items inside More panel: open to the right */
#sn-tn-more-panel > .sn-tn-dropdown-wrap > .sn-tn-dropdown-panel {
    left: 100%;
    top: 0;
}

/* "+Add" folded into the More panel (snTnReflowNav) — it isn't wrapped in
   .sn-tn-dropdown-wrap like the category items, so style it to match them. */
#sn-tn-more-panel > a.sn-tn-add-btn {
    display: flex;
    width: 100%;
    padding: 0.5em 0.9em;
    border-radius: 0;
    border-left: none;
    box-sizing: border-box;
}

/* ── "Copy Site URL" row folded into the 3-dot menu ─────────────────────────
   snTnReflowNav() hides .sn-tn-owner-controls (Launch/Site-URL/Domain) and
   reveals this row instead, when brand + right side leave no room for the
   category nav. Launch and Domain are NOT duplicated here — the dot-menu
   already has equivalent Publish/Delist and Custom Domain entries; only the
   Site-URL chip has no dot-menu equivalent, so just that action gets a row,
   styled to match the dot-menu's other plain white-on-green rows. */
.sn-tn-copy-url-li {
    display: none;
}
.sn-tn-copy-url-li > a {
    cursor: pointer;
}

/* ================================================================
   DROPDOWN WRAPPERS
   ================================================================ */

.sn-tn-dropdown-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}

/* ── embed-icon overrides: chip + launch/domain buttons ──────── */
/* embed-icon.blade.php hardcodes #1f6b12 (SiteNear's own green) for the Launch
   button, the URL chip's link/border colors, and the Domain button's border/text -
   none of it read from the site's own Design & Theme accent color, so a site with a
   custom brand color still showed plain SiteNear green on all four of these owner
   controls. rgba(31, 107, 18,*) below was already the same problem one layer down
   (47, 143, 28 is just #1f6b12 in decimal) - replaced with color-mix() against
   --sn-accent so the tint follows the theme instead of being a fixed green. */
section.sn-template-top-nav #sn-header-url-wrap {
    background: color-mix(in srgb, var(--sn-accent, #1f6b12) 10%, white) !important;
    border-color: color-mix(in srgb, var(--sn-accent, #1f6b12) 30%, white) !important;
}
section.sn-template-top-nav #sn-header-url-wrap .sn-header-url-link,
section.sn-template-top-nav #sn-header-url-wrap .sn-copied-badge {
    color: var(--sn-accent, #1f6b12) !important;
}
section.sn-template-top-nav #sn-header-url-wrap .sn-copy-url-btn:hover,
section.sn-template-top-nav #sn-header-url-wrap .sn-edit-unique-url:hover {
    color: var(--sn-accent, #1f6b12) !important;
}
section.sn-template-top-nav #sitenear-site-detail-header {
    background: transparent !important;
}
section.sn-template-top-nav .sn-launch-btn {
    background: var(--sn-accent, #1f6b12) !important;
    border-color: var(--sn-accent, #1f6b12) !important;
}
section.sn-template-top-nav .sn-launch-btn:hover {
    filter: brightness(0.88);
}
section.sn-template-top-nav .sn-launch-pending {
    background: rgba(127,127,127,0.1) !important;
    border-color: rgba(127,127,127,0.3) !important;
    color: var(--sn-text, #aaa) !important;
}
section.sn-template-top-nav .sn-custom-domain-btn {
    background: transparent !important;
    border-color: var(--sn-accent, #1f6b12) !important;
    color: var(--sn-accent, #1f6b12) !important;
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    z-index: 5;
}
/* Extend clickable area to full topbar height without changing button size */
section.sn-template-top-nav .sn-custom-domain-btn::before {
    content: '';
    position: absolute;
    top: -12px;
    bottom: -12px;
    left: 0;
    right: 0;
    z-index: -1;
}
section.sn-template-top-nav .sn-custom-domain-btn * {
    pointer-events: auto;
}
section.sn-template-top-nav .sn-custom-domain-btn:hover {
    background: var(--sn-accent, #1f6b12) !important;
    color: #fff !important;
}
section.sn-template-top-nav .sn-custom-domain-btn:hover i,
section.sn-template-top-nav .sn-custom-domain-btn:hover span {
    color: #fff !important;
}

/* dot-menu.blade.php's preview-eye icon hardcodes #1f6b12 via an inline style (shared
   across all three templates) - same fix as the Launch/URL/Domain buttons above. */
section.sn-template-top-nav .preview-icon {
    color: var(--sn-accent, #1f6b12) !important;
}
/* large-screen-item-feature-detail.blade.php / feature_single.blade.php /
   featureDetail.blade.php's edit-page icon - was a flat-colored PNG (edit-icon.png),
   now a Bootstrap Icon (see those files) so it can follow the site's accent color. */
section.sn-template-top-nav .sitenear-feature-edit-icon {
    color: var(--sn-accent, #1f6b12) !important;
}
/* upload-features-spreadsheet.blade.php's "Upload pages Instead" button hardcodes a
   #1f6b12 gradient + darker border. */
section.sn-template-top-nav #goto-feature-upload-area {
    background: var(--sn-accent, #1f6b12) !important;
    border-color: color-mix(in srgb, var(--sn-accent, #1f6b12) 80%, black) !important;
}
/* features.css's .sitenear-delete-feature (small-screen feature delete button)
   hardcodes #5EAD22. */
section.sn-template-top-nav .sitenear-delete-feature {
    color: var(--sn-accent, #1f6b12) !important;
}
/* owner-category-icon.blade.php's edit-category badge (circle behind edit-icon-old.png)
   hardcodes #1f6b12 - the icon image itself is white/neutral, only the circle needs to
   follow the site's accent color. */
section.sn-template-top-nav .cat-view .editCategoryDetail {
    background-color: var(--sn-accent, #1f6b12) !important;
}
/* upload-categories-spreadsheet.blade.php's "Upload Sections Instead" button hardcodes
   #1f6b12 + a darker border - same as the feature-upload button above. */
section.sn-template-top-nav #goto-category-upload-area {
    background: var(--sn-accent, #1f6b12) !important;
    border-color: color-mix(in srgb, var(--sn-accent, #1f6b12) 80%, black) !important;
}

/* ── Nav button (base) ────────────────────────────────────────── */
.sn-tn-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0 0.85em;
    border: none;
    background: transparent;
    color: var(--sn-text, #374151);
    font-size: 0.88em;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
    border-radius: 0;
    text-transform: capitalize;
}

.sn-tn-nav-btn:hover,
.sn-tn-dropdown-wrap:hover > .sn-tn-nav-btn {
    background: color-mix(in srgb, var(--sn-accent, #1f6b12) 10%, white);
    color: color-mix(in srgb, var(--sn-accent, #166534) 65%, black);
    text-decoration: none;
}

/* Active state — uses site accent color (--sn-accent injected by template PHP) */
.sn-tn-nav-btn.sn-active {
    background: var(--sn-accent, #1f6b12);
    color: #fff !important;
}
/* Darken slightly on hover via brightness filter — works with any accent color */
.sn-tn-nav-btn.sn-active:hover,
.sn-tn-dropdown-wrap:hover > .sn-tn-nav-btn.sn-active {
    background: var(--sn-accent, #1f6b12);
    filter: brightness(0.88);
    color: #fff !important;
}

/* Chevron rotates on hover */
.sn-tn-chevron {
    font-size: 0.7em;
    transition: transform 0.18s ease;
    opacity: 0.6;
}
.sn-tn-dropdown-wrap:hover .sn-tn-chevron {
    transform: rotate(-180deg);
    opacity: 1;
}

/* Add-category button */
.sn-tn-add-btn {
    color: #6b7280;
    border-left: 1px dashed rgba(127,127,127,0.3);
}
.sn-tn-add-btn:hover {
    color: var(--sn-accent, #1f6b12);
    background: color-mix(in srgb, var(--sn-accent, #1f6b12) 8%, white);
}

/* ================================================================
   DROPDOWN PANELS
   ================================================================ */

.sn-tn-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    background: var(--sn-bg, #fff);
    border: 1px solid rgba(127,127,127,0.2);
    border-top: 2px solid var(--sn-accent, #1f6b12);
    border-radius: 0 0 var(--sn-radius, 8px) var(--sn-radius, 8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
    /* Fade in/out */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0.16s ease;
    min-width: 200px;
    /* Allow flyout submenus to overflow panel bounds */
    overflow: visible;
}

.sn-tn-dropdown-wrap:hover > .sn-tn-dropdown-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* ── Highlights panel ─────────────────────────────────────────── */
.sn-tn-highlights-panel {
    left: 0;
    width: min(300px, 92vw);
    padding: 0.5em 0;
}

/* Vertical list of feature items */
.sn-tn-highlights-scroll {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--sn-accent, #1f6b12) 25%, white) transparent;
}
.sn-tn-highlights-scroll::-webkit-scrollbar { width: 4px; }
.sn-tn-highlights-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--sn-accent, #1f6b12) 25%, white);
    border-radius: 2px;
}

/* Individual feature row: image left, title right */
.sn-tn-highlight-card {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.35em 0.75em;
    cursor: pointer;
    transition: background 0.13s;
}
.sn-tn-highlight-card:hover {
    background: color-mix(in srgb, var(--sn-accent, #1f6b12) 8%, white);
}

/* Thumbnail */
.sn-tn-highlight-img {
    width: 48px;
    height: 36px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: #e5e7eb;
    border-radius: 4px;
}

/* Title */
.sn-tn-highlight-title {
    font-size: 0.88em;
    font-weight: 500;
    color: var(--sn-text, #374151);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sn-tn-highlight-card:hover .sn-tn-highlight-title {
    color: color-mix(in srgb, var(--sn-accent, #166534) 65%, black);
}

/* ── Highlights full listing (shown in #custom_section on click) ────────
   Mirrors the classic layout's feature list: one card per row on small
   screens, at most two per row on large screens - image on the left,
   title + overview stacked on the right. */
.sn-tn-featured-listing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    padding: 1em 0;
}
@media (min-width: 992px) {
    .sn-tn-featured-listing {
        grid-template-columns: repeat(2, 1fr);
    }
}
.sn-tn-featured-listing .sn-tn-highlight-card {
    align-items: flex-start;
    border: 1px solid rgba(127, 127, 127, 0.15);
    border-radius: var(--sn-radius, 8px);
    padding: 0.75em 1em;
    gap: 1em;
}
.sn-tn-featured-listing .sn-tn-highlight-img {
    width: 96px;
    height: 96px;
    border-radius: var(--sn-radius, 8px);
}
.sn-tn-featured-listing .sn-tn-highlight-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: 0.3em;
}
.sn-tn-featured-listing .sn-tn-highlight-title {
    flex: 0 0 auto;
    white-space: normal;
    text-overflow: clip;
    font-size: 1em;
    font-weight: 600;
}
.sn-tn-featured-listing .sn-tn-highlight-summary {
    font-size: 0.85em;
    color: var(--sn-text, #374151);
    opacity: 0.8;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.sn-tn-featured-listing .sn-tn-cat-add-btn {
    grid-column: 1 / -1;
}

/* ── Category panel ───────────────────────────────────────────── */
.sn-tn-cat-panel {
    min-width: 200px;
    max-width: 260px;
    padding: 0.3em 0;
    overflow: visible;
}

/* ── Owner add-buttons inside category dropdown ──────────────── */
.sn-tn-cat-owner-actions {
    padding: 0.3em 0;
}

.sn-tn-cat-add-btn {
    display: flex;
    align-items: center;
    gap: 0.45em;
    width: 100%;
    padding: 0.45em 0.9em;
    font-size: 0.82em;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.13s, color 0.13s;
    box-sizing: border-box;
    line-height: 1.3;
}
.sn-tn-cat-add-btn:hover,
.sn-tn-cat-add-btn:focus {
    background: color-mix(in srgb, var(--sn-accent, #1f6b12) 8%, white);
    color: var(--sn-accent, #1f6b12);
    text-decoration: none;
    outline: none;
}

/* Thin divider between owner actions and child-category list */
.sn-tn-cat-divider {
    margin: 0.3em 0.9em;
    border: none;
    border-top: 1px solid rgba(127,127,127,0.2);
}

/* ================================================================
   RECURSIVE SUBMENU ITEMS  (top-nav-cat-menu.blade.php)
   ================================================================ */

.sn-tn-submenu-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    padding: 0.5em 0.9em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.13s;
    /* prevent clipping of flyout panel */
    overflow: visible;
}
.sn-tn-submenu-item:hover {
    background: color-mix(in srgb, var(--sn-accent, #1f6b12) 10%, white);
}

.sn-tn-submenu-name {
    font-size: 0.88em;
    font-weight: 500;
    color: var(--sn-text, #374151);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: capitalize;
}
/* !important needed: the embed theme injector sets color:var(--sn-text)!important on
   the whole section, which can produce white text. On hover the background is forced
   to a light tint of the accent color, so the text must also be forced to a dark shade
   of the same accent color for contrast. */
.sn-tn-submenu-item:hover > .sn-tn-submenu-name {
    color: color-mix(in srgb, var(--sn-accent, #166534) 65%, black) !important;
}

.sn-tn-sub-arrow {
    font-size: 0.72em;
    color: #9ca3af;
    flex-shrink: 0;
    transition: color 0.13s, transform 0.13s;
}
.sn-tn-submenu-item:hover > .sn-tn-sub-arrow {
    color: color-mix(in srgb, var(--sn-accent, #166534) 65%, black) !important;
    transform: translateX(2px);
}

/* Flyout panel — appears to the right of the hovered item */
.sn-tn-submenu-panel {
    position: absolute;
    left: 100%;
    top: -0.3em; /* align with item top */
    z-index: 1001;
    background: var(--sn-bg, #fff);
    border: 1px solid rgba(127,127,127,0.2);
    border-top: 2px solid var(--sn-accent, #1f6b12);
    border-radius: 0 var(--sn-radius, 6px) var(--sn-radius, 6px) var(--sn-radius, 6px);
    box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.10);
    min-width: 180px;
    max-width: 260px;
    padding: 0.3em 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    overflow: visible;
}
.sn-tn-submenu-item:hover > .sn-tn-submenu-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* ── Cap at 2 visible levels ──────────────────────────────────────
   Level 1 = top-nav buttons.
   Level 2 = items inside the first dropdown (.sn-tn-cat-panel).
   Level 3+ = flyout panels hanging off level-2 items — suppressed.
   The ›  arrow is also hidden since there is no flyout to trigger.   */
.sn-tn-cat-panel .sn-tn-submenu-item > .sn-tn-submenu-panel {
    display: none !important;
}
.sn-tn-cat-panel .sn-tn-submenu-item > .sn-tn-sub-arrow {
    display: none !important;
}

/* ================================================================
   GROUP NAV (below topbar)
   ================================================================ */

.sn-tn-group-nav {
    border-bottom: 1px solid rgba(127,127,127,0.15);
    background: var(--sn-bg, #fff);
}

/* ================================================================
   MAIN CONTENT AREA
   ================================================================ */

div#sitenear-main-bar.sn-tn-body {
    display: block;
    /* Centre content with a comfortable max-width and symmetrical
       side padding that grows proportionally with the viewport. */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2.5rem);
    box-sizing: border-box;
}

/* Home view */
div#add_summary_section.sn-tn-home-view {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

/* Description text */
.sn-tn-description {
    margin-bottom: 1.5em;
}

/* AJAX content area */
div#custom_section.sn-tn-ajax {
    padding-top: 1em;
    min-height: 200px;
}

/* ================================================================
   FULL-BLEED HTML PAGES (description_format === 'html')
   Escapes .sn-tn-body's max-width + side padding directly on the shared
   ancestor via :has(), rather than trying to out-position a child back to
   edge-to-edge with width:100vw/position:relative/left:50%/margin:-50vw -
   that trick's math depends on the child's containing-block width lining
   up exactly with .sn-tn-body's centering formula, which turned out not to
   hold in practice (residual side gaps persisted). Overriding max-width/
   padding directly is unambiguous: once .sn-tn-body has no cap and no
   padding, #add_summary_section/#custom_section (its direct children, with
   no horizontal padding of their own) naturally span the full viewport.
   Trade-off: if a site's own home description is a fullbleed HTML page
   while a *different*, non-fullbleed feature is being viewed via
   #custom_section (or vice versa) - both live under this one shared
   ancestor, one hidden via display:none - this also drops the ancestor's
   padding for whichever is currently visible. In practice a single site
   rarely mixes fullbleed and non-fullbleed content this way; accepted as a
   rare, purely cosmetic edge case in exchange for a fix that reliably
   works (see bb-code-render-styles.css for the shared .sn-html-fullbleed
   marker class this keys off of).
   ================================================================ */
div#add_summary_section.sn-tn-home-view--fullbleed {
    padding-top: 0;
}

div#custom_section.sn-tn-ajax:has(.sn-html-fullbleed) {
    padding-top: 0;
}

div#sitenear-main-bar.sn-tn-body:has(.sn-html-fullbleed) {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* PDF embeds ([pdf]url[/pdf], see BbCodeHelper.php) can be manually resized wider via the
   drag handle on .sitenear-pdf-embed-scale-container (bb-code-render-styles.css) - relax
   (not remove, unlike the fullbleed rule above) this body's 1400px reading-width cap to the
   same 1920px ceiling used sitewide for .wrapper (common-styles.css), so there's room to grow
   into. Padding is deliberately left alone here: unlike an HTML-fullbleed page (a complete,
   self-contained page that wants true edge-to-edge), a PDF embed commonly sits alongside
   ordinary paragraph text in the same BBCode description, which still wants that side padding.
   */
div#sitenear-main-bar.sn-tn-body:has(.sitenear-pdf-embed-wrap) {
    max-width: 1920px;
}

/* ================================================================
   FEATURE DETAIL — overrides for features.css
   features.css uses height:92vh / calc(90vh-5px) + overflow-y:auto
   so the feature scrolls inside a fixed box. In top-nav we use
   natural page scroll, so those heights and overflows must be reset.
   ================================================================ */

section.sn-template-top-nav .sitenear-features-display {
    height: auto !important;
}

section.sn-template-top-nav div.sitenear-feature-single-display.sitenear-feature-area {
    height: auto !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Third ancestor in the same features.css fixed-height chain, missed by the two resets above -
   found while investigating a report that a [pdf] embed's resize handle couldn't be dragged
   taller on a feature-detail page: div.sitenear-feature-list-holder.sitenear-large-screen-features
   has height:100%!important, which (unlike the two resets above already in place) wasn't being
   cleared for top-nav, so it could still cap how tall anything inside it - including a
   manually-resized PDF embed - was allowed to grow. */
section.sn-template-top-nav div.sitenear-feature-list-holder.sitenear-large-screen-features {
    height: auto !important;
}

/* The feature carousel sets background:#fff which ignores the template
   theme colour (--sn-bg). Inherit from the section instead. */
section.sn-template-top-nav .sitenear-feature-carousel {
    background: var(--sn-bg, transparent) !important;
}

/* Bootstrap .panel gives .pure-panel a white background.
   site-detail.css intentionally skips .pure-panel, so we must
   clear it here so the template theme colour shows through. */
section.sn-template-top-nav .sitenear-feature-carousel .pure-panel {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ================================================================
   NEWS PANEL — override Bootstrap/style.css white backgrounds
   ================================================================ */

/* Bootstrap .panel sets background:#fff on the news wrapper panel */
section.sn-template-top-nav #sitenear-site-news-holder .panel {
    background-color: var(--sn-bg, #fff) !important;
    border-color: rgba(127, 127, 127, 0.2) !important;
}

/* News section heading "News" — section label, slightly bolder than body */
section.sn-template-top-nav .review-sec h5,
section.sn-template-top-nav #sitenear-site-news-holder .panel-heading,
section.sn-template-top-nav #sitenear-site-news-holder .panel-heading h5 {
    background-color: var(--sn-bg, #fff) !important;
    color: var(--sn-text, #374151) !important;
    border-color: rgba(127, 127, 127, 0.15) !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    font-family: inherit !important;
}

/* panel-body inherits panel background but Bootstrap might override */
section.sn-template-top-nav #sitenear-site-news-holder .panel-body {
    background-color: var(--sn-bg, #fff) !important;
}

/* News item rows — match nav font & colour */
section.sn-template-top-nav .sitenear-brief-item.sitenear-post-side-bar-item {
    border-color: rgba(127, 127, 127, 0.12) !important;
    color: var(--sn-text, #374151) !important;
    background-color: var(--sn-bg, #fff) !important;
    font-size: 0.88em;
}
/* post.css sets span.sitenear-title { font-size:clamp(16px,2vw,24px) } inside h4.
   Target the span directly to normalise size and font-family to match the nav. */
section.sn-template-top-nav .sitenear-brief-item .sitenear-post-title span.sitenear-title {
    font-size: 0.88em !important;
    font-family: var(--sn-body-font-family, inherit) !important;
    font-weight: 500 !important;
    color: var(--sn-text, #374151) !important;
}
/* Date / timestamp — common-styles.css sets .sitenear-user-name { color:#1f6b12 }
   and Montserrat font-family. Override with the Design & Theme body font. */
section.sn-template-top-nav .sitenear-brief-item .sitenear-user-name,
section.sn-template-top-nav .sitenear-brief-item .sitenear-user-name * {
    color: var(--sn-text, #374151) !important;
    font-size: 0.88em !important;
    font-family: var(--sn-body-font-family, inherit) !important;
}
/* Delete icons — consistent neutral colour (inline styles need !important) */
section.sn-template-top-nav .sitenear-brief-item .bi-trash,
section.sn-template-top-nav #commentAllListing .glyphicon-trash {
    color: var(--sn-text, #374151) !important;
}

/* ================================================================
   COMMENT / FEEDBACK SECTION — match nav font & colour
   ================================================================ */

/* Give the feedback block (Comments / Reviews tabs) breathing room
   below the News section — matches the vertical margin of .panel */
section.sn-template-top-nav #sitenear-site-feedback {
    margin-top: 1.25em;
}

/* Tab links — use specific button classes to beat any global a{color} rule.
   common-styles.css sets a.view-user-display{color:#1f6b12} site-wide;
   adding .sitenear-comments-tab-button/.sitenear-reviews-tab-button ensures
   we win even without .nav-tabs specificity. */
section.sn-template-top-nav .sitenear-comments-tab-button,
section.sn-template-top-nav .sitenear-reviews-tab-button,
section.sn-template-top-nav #sitenear-site-feedback-tabs > li > a,
section.sn-template-top-nav #sitenear-site-feedback-tabs > li > a h5 {
    background: transparent !important;
    color: var(--sn-text, #374151) !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    margin: 0 !important;
    border: none !important;
    text-decoration: none !important;
    font-family: var(--sn-body-font-family, inherit) !important;
}
/* Ensure each tab link has comfortable click area and breathing room */
section.sn-template-top-nav #sitenear-site-feedback-tabs > li > a {
    padding: 0.55em 1.1em !important;
}
/* Active tab — slightly bolder, same colour as inactive to stay consistent */
section.sn-template-top-nav #sitenear-site-feedback-tabs > li.active > a,
section.sn-template-top-nav #sitenear-site-feedback-tabs > li.active > a h5 {
    color: var(--sn-text, #374151) !important;
    font-weight: 600 !important;
}
/* "Comment" form label */
section.sn-template-top-nav .add-new-cat1 label[for="comment"] {
    color: var(--sn-text, #374151) !important;
    font-size: 0.88em !important;
    font-weight: 500 !important;
}
/* Comment item text — common-styles sets .sitenear-user-name & a.view-user-display
   to Montserrat + #1f6b12. Override with the Design & Theme body font. */
section.sn-template-top-nav #commentAllListing .viewUser,
section.sn-template-top-nav #commentAllListing .getComment,
section.sn-template-top-nav #commentAllListing .view-user-display {
    color: var(--sn-text, #374151) !important;
    font-size: 0.88em !important;
    font-family: var(--sn-body-font-family, inherit) !important;
}

/* ================================================================
   TINGLE POPUP — theme the full-screen news article popup
   common-styles.css: div.tingle-modal--visible { background-color: white }
   ================================================================ */

.tingle-modal.sitenear-full-screen-tingle {
    background-color: var(--sn-bg, white) !important;
}

/* ================================================================
   INLINE NEWS VIEWER — replaces tingle modal in top-nav template
   ================================================================ */

#sn-tn-news-viewer {
    background: var(--sn-bg, #fff);
    padding-top: 1em;
    padding-bottom: 2em;
}

.sn-tn-news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 0 0.75em;
}

.sn-tn-news-nav {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.sn-tn-news-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 4px;
    color: var(--sn-text, #374151);
    cursor: pointer;
    transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.sn-tn-news-nav-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sn-accent, #1f6b12) 10%, white);
    color: color-mix(in srgb, var(--sn-accent, #166534) 65%, black);
    border-color: var(--sn-accent, #1f6b12);
}
.sn-tn-news-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.sn-tn-news-counter {
    font-size: 0.8em;
    color: var(--sn-text, #6b7280);
    min-width: 2.5em;
    text-align: center;
}

.sn-tn-news-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.45em 1em;
    font-size: 0.88em;
    font-weight: 500;
    color: var(--sn-text, #374151);
    background: transparent;
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.sn-tn-news-back-btn:hover {
    background: color-mix(in srgb, var(--sn-accent, #1f6b12) 10%, white);
    color: color-mix(in srgb, var(--sn-accent, #166534) 65%, black);
    border-color: var(--sn-accent, #1f6b12);
}

.sn-tn-news-content {
    background: var(--sn-bg, #fff);
}

/* post-carousel.blade.php sets height:98vh/height:100% as inline styles — override */
.sn-tn-news-content .sitenear-posts-display .panel.pure-panel { height: auto !important; }
.sn-tn-news-content .sitenear-posts-display .panel-body { height: auto !important; padding-top: 0.75em !important; }
/* post-info.blade.php sets overflow:auto + margin-top:1vw inline — override both */
.sn-tn-news-content #sitenear-post-slides-home { overflow: visible !important; margin-top: 0 !important; }

.sn-tn-news-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4em 0;
}
.sn-tn-news-spinner {
    width: 2em;
    height: 2em;
    border: 3px solid rgba(127, 127, 127, 0.2);
    border-top-color: var(--sn-accent, #1f6b12);
    border-radius: 50%;
    animation: sn-news-spin 0.8s linear infinite;
}
@keyframes sn-news-spin {
    to { transform: rotate(360deg); }
}

/* ================================================================
   VIP FOOTER — ensure footer area matches the page background
   ================================================================ */

.sitenear-vip-footer-area {
    background-color: var(--sn-bg, transparent) !important;
    padding: 0.75em 1em;
}

/* ================================================================
   CATEGORY BREADCRUMB STRIP
   Shown at top of #custom_section when a category is active.
   ================================================================ */

.sn-tn-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2em;
    padding: 0.5em 0 0.7em;
    font-size: 0.84em;
    border-bottom: 1px solid rgba(127, 127, 127, 0.15);
    margin-bottom: 0.85em;
    line-height: 1.4;
}

.sn-tn-breadcrumb-sep {
    color: #9ca3af;
    margin: 0 0.15em;
    user-select: none;
}

/* Ancestor segments (clickable) */
.sn-tn-breadcrumb-item {
    color: var(--sn-text, #6b7280);
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    line-height: inherit;
    transition: color 0.13s;
}
.sn-tn-breadcrumb-item:hover {
    color: var(--sn-accent, #1f6b12) !important;
    text-decoration: underline;
}

/* Current (leaf) segment — not clickable */
.sn-tn-breadcrumb-item.sn-tn-breadcrumb-current {
    color: var(--sn-text, #111827);
    font-weight: 600;
    cursor: default;
}
.sn-tn-breadcrumb-item.sn-tn-breadcrumb-current:hover {
    text-decoration: none;
}

/* ← / ‹ Back button — no box, plain icon only */
.sn-tn-feature-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2em;
    margin-right: 0.3em;
    border: none;
    background: none;
    color: var(--sn-text, #6b7280);
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    vertical-align: middle;
    transition: color 0.13s;
    flex-shrink: 0;
}
.sn-tn-feature-back-btn:hover {
    color: var(--sn-accent, #1f6b12);
}

/* ── Breadcrumb leaf — sibling-switcher dropdown ─────────────────────────
   Clicking the bold current-page segment (leaf) opens a dropdown listing
   the other categories at the same level so the user can quickly switch. */
.sn-tn-breadcrumb-item.sn-tn-breadcrumb-leaf {
    position: relative;   /* anchor for absolute dropdown */
    cursor: pointer;
    user-select: none;
}
.sn-tn-breadcrumb-leaf-chevron {
    font-size: 0.72em;
    margin-left: 0.25em;
    vertical-align: middle;
    transition: transform 0.15s ease;
    display: inline-block;
}
.sn-tn-breadcrumb-item.sn-tn-breadcrumb-leaf.sn-open > .sn-tn-breadcrumb-leaf-chevron {
    transform: rotate(180deg);
}
.sn-tn-breadcrumb-sibling-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 170px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--sn-bg, #fff);
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    z-index: 1200;
    padding: 4px 0;
    font-weight: 400;   /* override the bold from sn-tn-breadcrumb-current */
}
.sn-tn-breadcrumb-sibling-item {
    display: block;
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--sn-text, #374151);
    font-size: 0.95em;
    transition: background 0.1s, color 0.1s;
}
.sn-tn-breadcrumb-sibling-item:hover {
    background: color-mix(in srgb, var(--sn-bg, #fff) 90%, gray 10%);
    color: var(--sn-accent, #1f6b12);
}

/* ── Content area: suppress classic category navigation elements ──────────
   The category panel renders two elements that duplicate top-nav navigation:

   1. #categorylisting (sub-category-panel / top-category-panel):
      A <ul> with the Go-back link, sub-category thumbnail tiles, and the
      Add sub-category button. The top-nav dropdown already provides all of
      this navigation.

   2. .sitenear-visitor-category-navigation (visitor-category-panel):
      Contains the Bootstrap breadcrumb ("Home / goo boy / goo cat 21") and
      the horizontal child-category list. The top-nav's sn-tn-breadcrumb and
      dropdown replace both of these. Hiding the div also prevents the child-
      category links inside (which carry sitenear-load-features-on-init) from
      auto-opening the first feature when clicked from the content area.

   The sibling .category_listing div (feature list + Create New Page button)
   is unaffected and remains visible.
   Note: the hidden <input id="feature-parent-category-id"> inside the ul
   is still accessible by JS even when its parent is display:none. */
.sn-template-top-nav #custom_section #categorylisting {
    display: none !important;
}
.sn-template-top-nav #custom_section .sitenear-visitor-category-navigation {
    display: none !important;
}
/* Breadcrumb and chip-nav are now shown in the topbar drill bar — hide the
   in-content duplicates so only one row is visible. */
.sn-template-top-nav #custom_section .sn-tn-breadcrumb {
    display: none !important;
}
.sn-template-top-nav #custom_section .sn-cat-nav {
    display: none !important;
}

/* ================================================================
   CATEGORY THUMBNAILS IN DROPDOWNS ONLY (not in the navbar bar itself)
   ================================================================ */

/* Icon in flyout submenu rows (hover dropdown from nav buttons) */
.sn-tn-submenu-thumb {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: color-mix(in srgb, var(--sn-accent, #1f6b12) 12%, white);
    display: block;
}
.sn-tn-submenu-thumb-initial {
    background-color: var(--sn-accent, #1f6b12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1;
}

/* Icon in breadcrumb sibling-switcher dropdown */
.sn-tn-sibling-thumb {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: color-mix(in srgb, var(--sn-accent, #1f6b12) 12%, white);
    display: block;
}
.sn-tn-sibling-thumb-initial {
    background-color: var(--sn-accent, #1f6b12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1;
}

/* Row layout for sibling items: icon + text side by side */
.sn-tn-breadcrumb-sibling-item {
    display: flex !important;
    align-items: center;
    gap: 0.6em;
}

/* ================================================================
   TOPBAR DRILL BAR
   When a category with children is active, the original nav items
   are hidden and the drill bar is shown in their place. The drill
   bar contains real .sn-tn-dropdown-wrap elements so hover-to-show-
   grandchildren works identically to the main nav.

   Structure:  [child-A ▾]  [child-B]  [child-C ▾]  …
   Hover child-A → its dropdown panel appears (grandchildren).
   ================================================================ */

/* Hide original category/highlight items while in drill mode. */
.sn-tn-nav.sn-tn-nav--drilled > .sn-tn-dropdown-wrap {
    display: none !important;
}
/* Also hide the root-level "+ Add" button (direct <a> child, not in a dropdown-wrap)
   in drill mode — the drill bar provides its own context-specific Add button. */
.sn-tn-nav.sn-tn-nav--drilled > .sitenear-new-category {
    display: none !important;
}
/* Hide "More" button in drill mode — its items are also hidden by the rule above */
.sn-tn-nav.sn-tn-nav--drilled > #sn-tn-more-wrap {
    display: none !important;
}

/* Drill bar: stretch so items fill the full topbar height, matching the main nav. */
.sn-tn-drill-bar {
    display: flex;
    align-items: stretch;
    gap: 2px;
    overflow: visible;
    min-width: 0;
}

/* ── Drill-bar back button (← current-category-name) ─────────────
   First item in the drill bar. Visually separated from the child nav
   items by a right border so it reads as a standalone ← label. */
.sn-tn-drill-back-wrap {
    border-right: 1px solid rgba(127, 127, 127, 0.25);
    margin-right: 2px;
}
.sn-tn-drill-back-btn {
    font-weight: 600;
}
.sn-tn-drill-back-name {
    max-width: 12em;
    overflow: hidden;
    text-transform: capitalize;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* Edit-category pencil — appended next to the drill-bar's "‹ CategoryName" button */
.sn-tn-drill-edit-btn {
    display: inline-flex;
    align-items: center;
    padding: 0 0.7em;
    color: var(--sn-text, #6b7280);
    cursor: pointer;
    font-size: 0.9em;
    transition: color 0.13s;
}
.sn-tn-drill-edit-btn:hover {
    color: var(--sn-accent, #1f6b12);
}

/* ================================================================
   CONTENT-AREA LOADING SPINNER
   Shown inside #custom_section while snTnRefreshTopNav() GETs are
   in flight, so the user sees activity instead of a blank screen.
   ================================================================ */

.sn-tn-content-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4em 0;
}

.sn-tn-content-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--sn-accent, #1f6b12);
    border-radius: 50%;
    animation: sn-tn-spin 0.7s linear infinite;
}

@keyframes sn-tn-spin {
    to { transform: rotate(360deg); }
}

/* ================================================================
   ADD-FORM PATH INDICATOR
   Prepended to #custom_section when the add-category form loads.
   Shows the full navigation path so the owner knows where the new
   category will be created (e.g.  goo boy › boy 6 › boy 6 11).
   ================================================================ */

.sn-tn-add-form-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2em;
    padding: 0.55em 0 0.7em;
    font-size: 0.84em;
    border-bottom: 1px solid rgba(127, 127, 127, 0.15);
    margin-bottom: 1em;
    color: var(--sn-text, #6b7280);
}

.sn-tn-add-form-path-sep {
    color: #9ca3af;
    margin: 0 0.15em;
    user-select: none;
}

.sn-tn-add-form-path-crumb {
    font-weight: 500;
    color: var(--sn-text, #374151);
}

/* Highlight the last segment (direct parent) in the accent colour */
.sn-tn-add-form-path-crumb:last-child {
    color: var(--sn-accent, #1f6b12);
}

/* ================================================================
   LOADING INDICATOR
   The shared JS appends #page-loading-indicator to <body> with
   hardcoded #1f6b12. Override spinner and text color to use the
   site's accent color (--sn-accent promoted to :root by template).
   ================================================================ */
#page-loading-indicator .spinner {
    border-top-color: var(--sn-accent, #1f6b12) !important;
}
#page-loading-indicator p {
    color: var(--sn-accent, #1f6b12) !important;
}

/* ================================================================
   MOBILE (xs / sm)
   ================================================================ */

@media (max-width: 991px) {
    .sn-tn-brand {
        max-width: 45%;
    }

    div#add_summary_section.sn-tn-home-view,
    div#custom_section.sn-tn-ajax {
        padding: 0.75em 1em;
    }

    .sn-tn-nav-btn {
        font-size: 0.82em;
        padding: 0 0.6em;
    }

    .sn-tn-highlights-panel {
        width: min(280px, 95vw);
    }
}