/*-- Nav */
#tl-nav { background: var(--ink); height: 70px; position: sticky; top: 0; z-index: 100; }

#tl-nav-inner { max-width: var(--main-max-width); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 100%; box-sizing: border-box; }

#tl-nav-brand { display: flex; flex-direction: column; flex-shrink: 0; }

#tl-nav-main { flex: 1; display: flex; justify-content: center; }

#tl-nav-right { flex-shrink: 0; display: flex; align-items: center; gap: 1rem; }

/*-- Nav Links (site_navigation output) */
#tl-nav-main .tl-nav-links .nav-ul.t0 { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; }

#tl-nav-main .tl-nav-links .nav-ul.t0:after,
.tl-nav-secondary .nav-ul.t0:after { content: none !important; display: none !important; }

#tl-nav-main .tl-nav-links .nav-li.t0 { display: inline-block; }

#tl-nav-main .tl-nav-links .nav-item.t0,
#tl-nav-right .tl-nav-secondary .nav-item.t0 { color: #f4eee8; text-decoration: none; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.3px; transition: color 0.2s; display: inline-flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; padding: 0; line-height: 1; }

#tl-nav-main .tl-nav-links .nav-item.t0 .fa,
#tl-nav-right .tl-nav-secondary .nav-item.t0 .fa { font-size: 1.25rem; margin: 0 !important; display: block; line-height: 1; }

#tl-nav-main .tl-nav-links .nav-item.t0:hover,
#tl-nav-right .tl-nav-secondary .nav-item.t0:hover { color: var(--clay-light); }

#tl-nav-main .tl-nav-links .nav-item.t0.selected,
#tl-nav-right .tl-nav-secondary .nav-item.t0.selected { color: var(--clay-light); }

.tl-nav-links .nav-ul.t1 { display: none; }

/*-- Nav: Logged-in "+ Post" CTA reuses the canonical .btn .btn-secondary
     (transparent / clay border, fills clay on hover) so it matches every other
     bordered button on the site. Two nav-scoped tweaks only:
     1) shrink height + padding to match the 34px avatar beside it,
     2) restate color at higher specificity so it beats the generic
        `.tl-nav-secondary .nav-item.t0` color/hover rules below. */
#tl-nav-right .tl-nav-secondary .nav-item.btn-secondary { min-height: 34px; padding: 0 0.95rem; font-size: 0.8rem; color: var(--clay); }

#tl-nav-right .tl-nav-secondary .nav-item.btn-secondary:hover { color: #fff; opacity: 1; }

/*-- Inset dark ring keeps the nav avatar visible when the profile image (or
     initials background) is approximately the same dark tone as the nav bar.
     Rendered as a <span> with background-image, so a plain inset box-shadow
     paints over the image - no pseudo-element needed. */
.tl-nav-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.8rem; text-decoration: none; transition: opacity 0.2s; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }

.tl-nav-avatar:hover { color: white; }

/*-- Nav: Guest (Log In + Sign Up) */
.tl-nav-login { color: rgba(255,255,255,0.85); font-size: 0.85rem; font-weight: 500; text-decoration: none; padding: 0.35rem 0.7rem; transition: color 0.2s; font-family: var(--font-body); }

.tl-nav-login:hover { color: white; }

.tl-nav-signup { display: inline-flex; align-items: center; padding: 0.35rem 0.9rem; border-radius: var(--tl-radius-pill); background: var(--clay-dark); color: white; font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: background 0.2s, transform 0.1s; font-family: var(--font-body); }

.tl-nav-signup:hover { background: var(--clay-light); color: white; transform: translateY(-1px); }

/*-- Nav Secondary (login/account links) */
.tl-nav-secondary .nav-ul.t0 { list-style: none; display: flex; gap: 0.8rem; align-items: center; }

.tl-nav-secondary .nav-li.t0 { display: inline-block; }

.tl-nav-secondary .nav-item.t0 { color: #f4eee8; text-decoration: none; font-size: 1rem; font-weight: 500; transition: opacity 0.2s, color 0.2s; }

.tl-nav-secondary .nav-item.t0:hover { opacity: 1; color: var(--clay-light); }

/*-- Nav Mobile Toggle */
#tl-nav-toggle { display: none; color: var(--sand-dark); font-size: 0.85rem; cursor: pointer; text-decoration: none; align-items: center; gap: 0.5rem; }

.tl-hamburger { width: 20px; height: 14px; position: relative; display: flex; flex-direction: column; justify-content: space-between; }

.tl-hamburger-line { height: 2px; background: var(--sand-dark); border-radius: 1px; transition: all 0.2s; }

.tl-hamburger-line::before,
.tl-hamburger-line::after { content: ''; display: block; height: 2px; background: var(--sand-dark); border-radius: 1px; transition: all 0.2s; }

.tl-hamburger-line::before { margin-top: 4px; }

.tl-hamburger-line::after { margin-top: 4px; }

/*-- Mobile Nav Drawer */
.header-mobile-logo { display: none; }

#tl-mobile-nav { display: none; }

#tl-mobile-mask { position: fixed; inset: 0; background: rgba(30, 26, 22, 0.5); z-index: 200; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }

#tl-mobile-drawer { position: fixed; top: 0; left: -300px; width: 300px; height: 100%; background: var(--white); z-index: 201; transition: left 0.3s ease; overflow-y: auto; box-shadow: 4px 0 20px rgba(30, 26, 22, 0.15); }

#tl-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--sand-dark); }

.tl-mobile-logo { font-family: var(--font-display); color: var(--clay); font-size: 1.2rem; font-weight: 900; text-decoration: none; }

.tl-mobile-logo span { color: var(--ink); }

.tl-mobile-close { font-size: 1.5rem; color: var(--ink-light); cursor: pointer; line-height: 1; text-decoration: none; }

.tl-mobile-close:hover { color: var(--ink); }

.tl-mobile-search { display: flex; padding: 0.75rem 1rem; border-bottom: 1px solid var(--sand-dark); }

.tl-mobile-search-input { flex: 1; border: 1px solid var(--sand-dark); border-right: none; border-radius: var(--tl-radius-pill) 0 0 var(--tl-radius-pill); padding: 0.5rem 0.8rem; font-size: 0.9rem; font-family: var(--font-body); outline: none; }

.tl-mobile-search-input:focus { border-color: var(--clay-light); }

.tl-mobile-search-btn { background: var(--clay); color: var(--white); border: 1.5px solid var(--clay); border-radius: 0 var(--tl-radius-pill) var(--tl-radius-pill) 0; padding: 0.5rem 0.9rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: background 0.15s, border-color 0.15s; }

.tl-mobile-search-btn:hover { background: var(--clay-dark); border-color: var(--clay-dark); }

.tl-mobile-links .nav-ul { list-style: none; }

.tl-mobile-links .nav-ul.t0 { padding: 0.5rem 0; }

.tl-mobile-links .nav-item { display: block; padding: 0.75rem 1.2rem; color: var(--ink); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: background 0.15s; }

.tl-mobile-links .nav-item:hover { background: var(--sand); }

.tl-mobile-links .nav-item.selected { color: var(--clay); background: var(--sand); }

.tl-mobile-links .nav-ul.t1 { padding-left: 1rem; }

.tl-mobile-links .nav-item.t1 { font-size: 0.88rem; color: var(--ink-mid); padding: 0.5rem 1.2rem; }

body.tl-nav-open #tl-mobile-mask { opacity: 1; visibility: visible; }

body.tl-nav-open #tl-mobile-drawer { left: 0; }

body.tl-nav-open { overflow: hidden; }


/*-- Responsive: Mobile */
@media (max-width: 930px) {
/*-- Header keeps the desktop layout on mobile - same logo, same 70px height,
	     same location pill under the logo, same right-side controls (Post + account).
	     The middle nav (#tl-nav-main) gets relocated to a fixed bottom app bar
	     below. No extra padding override on #tl-nav: #tl-nav-inner already carries
	     the horizontal 1.5rem padding; doubling it produced the cramped look. */
/*-- Old hamburger + slide-out drawer retired - the fixed bottom bar replaces
	     them. The markup stays in template.master so we don't touch the C# / .master;
	     CSS just hides it. */
#tl-nav-toggle { display: none; }

#tl-mobile-nav { display: none; }

/*-- Bottom app bar: the same site_navigation "Main" output rendered as a
	     fixed bar pinned to the bottom of the viewport. Admins control the items
	     from Site Navigation > Main Menu - no hard-coded links here. */
#tl-nav-main {
		position: fixed; left: 0; right: 0; bottom: 0;
		background: var(--ink); z-index: 90;
		padding: 0.55rem 0.5rem;
		padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(255,255,255,0.08);
		box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
		flex: none;
	}

#tl-nav-main .tl-nav-links { width: 100%; }

#tl-nav-main .tl-nav-links .fixed-module,
#tl-nav-main .tl-nav-links > div { width: 100%; }

#tl-nav-main .tl-nav-links .nav-ul.t0 {
		gap: 0; justify-content: space-around; width: 100%;
	}

/*-- Hide the Home item - the TexomaLand logo in the header already routes
	     to /. Selector targets the link's title attribute so it stays accurate
	     even if Home is reordered in admin. */
#tl-nav-main .tl-nav-links .nav-li.t0:has(> a[title="Home"]) { display: none; }
}

/* Feed filter dot (dynamic color kept inline) */
/*-- Touch Target Minimum (all sizes) */
.tl-nav-link,
.tl-mobile-search-input,
.tl-mobile-search-btn {
	min-height: var(--tl-touch-min);
}


/*-- Responsive: Phone (375px) */
@media (max-width: 375px) {
/* Nav adjustments */
#tl-nav-inner { padding: 0 var(--tl-space-2); }
}


/*-- Responsive: Phone (existing rules) */
@media (max-width: 375px) {
#tl-nav-right { gap: 0.5rem; }
}

.tl-mobile-toggle:focus-visible {
	outline: 2px solid var(--sky);
	outline-offset: 2px;
}

#tl-nav a:focus-visible { outline-color: var(--clay-light); }