/*
 * Aragorn theme - override stylesheet. Loaded last, so nothing brand-related
 * belongs here. See docs: Styling.
 */

 /* ---------------------------------------------------------------------------
   Scrollbar gutter
   ---------------------------------------------------------------------------
   Cancels Tabler's scrollbar-width left margin (tabler.css:13884), which
   offsets the whole page under container-fluid. See docs: 3columns. */

 @media (min-width: 992px) {

 	:root,
 	:host {
 		margin-left: 0;
 	}
 }

 html {
 	scrollbar-gutter: stable;
 }


/* ---------------------------------------------------------------------------
   Layout contracts
   --------------------------------------------------------------------------- */

/* Shared with theme.html and js/nav-height.js. See docs: Theme layouts. */
:root {
	--nav-h: 3.5rem;
	--sticky-gap: 1rem;
	--bottomnav-h: 3.75rem;
	--nav-bottom-bg-surface: rgba(255, 255, 255, 0.95);
	--nav-bottom-border-color:   rgba(0, 0, 0, 0.08);
}

/* Caps a side column at viewport height. Below lg it is an offcanvas. */
@media (min-width: 992px) {
	.col-sticky {
		position: sticky;
		top: calc(var(--nav-h) + var(--sticky-gap));
		max-height: calc(100vh - var(--nav-h) - var(--sticky-gap) * 2);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

/* The drawers hold the accordion directly, with no .offcanvas-body, and
   Bootstrap keeps the scroll on that element:
       .offcanvas-body { flex-grow: 1; overflow-y: auto; }
   Below lg the drawer is a fixed-height flex column with no overflow of its
   own, so anything past the first screenful is unreachable - no scrollbar, no
   way to scroll to it. Above lg .col-sticky supplies the same thing on the
   same element, which is why this only shows up on a phone.

   min-height: 0 is required: a flex item will not shrink below its content
   height without it, so the overflow never engages. */
@media (max-width: 991.98px) {
	.offcanvas-lg > .accordion {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}
}

/* Anchor targets must clear the sticky header. */
[id]:target {
	scroll-margin-top: calc(var(--nav-h) + var(--sticky-gap));
}

/* Restores the pre-Bootstrap link density in long link lists.
   ~24px per row, which is exactly the WCAG 2.2 target-size floor - do not
   shrink further. */
.list-compact {
	--tblr-list-group-item-padding-y: .125rem;
	--tblr-list-group-item-padding-x: .5rem;
	font-size: .875rem;
	line-height: 1.4;
}

.list-compact .list-group-item {
	border: 0;
}


/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

/* Tabler pads .navbar-brand 0.5rem top and bottom, which caps the logo at
   2.5rem before the 3.5rem bar starts growing. The logo is the only thing
   in the brand, so the padding buys nothing - drop it and let the image use
   the bar's height. */
.navbar-brand {
	flex-shrink: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.navbar-brand-image {
	height: 3rem;      /* 48px in a 56px bar */
	width: auto;
	max-width: none;
}

/* Taller logo on the two-row header. See docs: Header & footer partials. */
.layout-home .navbar-brand-image {
	height: 2.75rem;
}

.navbar-brand {
	flex-shrink: 0;
}


/* {THEME_TOGGLE} shortcode, rendered inside a .nav-item in the header.
   Only one of its two buttons is visible at a time (Tabler's
   .hide-theme-dark / .hide-theme-light), so no positioning is needed -
   any position:fixed here would pull it out of the header. */
.theme-toggle-group {
	display: flex;
	align-items: center;
}

/* Own class, not Tabler's .bg-red-lt - that utility is !important and would
   kill the hover state. See docs: Styling. */
.dropdown-item-admin {
	color: var(--tblr-danger);
	background-color: rgba(var(--tblr-danger-rgb), .08);
}

.dropdown-item-admin:hover,
.dropdown-item-admin:focus {
	color: #fff;
	background-color: var(--tblr-danger);
}


/* ---------------------------------------------------------------------------
   Bottom navigation (mobile)
   --------------------------------------------------------------------------- */
 
.nav-bottom {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 1030;
	background: var(--nav-bottom-bg-surface);
	border-top: 1px solid var(--nav-bottom-border-color);
	padding-bottom: env(safe-area-inset-bottom);
	-webkit-box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
}

/* Horizontal scroller, not a grid: .col is flex-basis 0, so every extra item
   makes them all narrower. See docs: {BOTTOM_NAV}. */
.nav-bottom-scroll {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.nav-bottom-scroll::-webkit-scrollbar {
	display: none;
}

/* grow 1 / shrink 0 / basis 22%: four items or fewer fill the bar, five or
   more overflow and scroll instead of shrinking - and the fifth stays half
   visible, which is what tells the user there is more. */
.nav-bottom-item {
	flex: 1 0 22%;
	min-width: 4.5rem;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .125rem;
	padding: .5rem .25rem;
	min-height: 3.25rem;
	font-size: 0.75rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--tblr-body-color);
}

.nav-bottom-item:hover,
.nav-bottom-item:focus-visible {
	color: var(--tblr-body-color);
	background-color: rgba(var(--tblr-body-color-rgb), .04);
}

.nav-bottom-item i {
	font-size: 1.25rem;
	color: var(--brand-blue);
}

.nav-bottom-item span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* Only where the bar renders; sc_bottom_nav() suppresses it per layout. */
@media (max-width: 991.98px) {
	body:has(.nav-bottom) {
		padding-bottom: var(--bottomnav-h);
	}
}


/* ---------------------------------------------------------------------------
   Content
   --------------------------------------------------------------------------- */

/* Long article/chapter bodies. Reading measure, not full column width. */
.chapter-body {
	max-width: 68ch;
	font-size: 1.0625rem;
	line-height: 1.75;
}

.chapter-body p {
	margin-bottom: 1.25rem;
}

.news-default-grid .card-img-top,
.news-grid .card-img-top {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* --brand-blue is decoration only (3.2:1 on white). Headings use the
   text-safe variant from the palette. */
.footer .subheader,
.footer-widget h3 {
	color: var(--brand-blue-ui);
}

/* Social icons ({XURL_ICONS: template=aragorn}) - normalize the inline
   SVGs from e107_plugins/social/svg inside Tabler brand buttons. */
.social-links .btn-icon svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}


/* ---------------------------------------------------------------------------
   Legacy markup fixes
   --------------------------------------------------------------------------- */

/* Tabler reuses .img-responsive as a padding-top aspect helper; neutralize it
   on <img> only. See docs: Compatibility shims. */
img.img-responsive {
	padding-top: 0;
	background: none;
}

/* Legacy option buttons, restyled to the btn-action look. */
.options .btn-group .btn {
	border: 0;
	background: transparent;
	color: var(--tblr-secondary);
	padding: .25rem .5rem;
}

.options .btn-group .btn:hover {
	background: var(--tblr-active-bg, rgba(var(--tblr-secondary-rgb), .08));
	color: var(--tblr-body-color);
}

/* size= reset, plus the input-group exception it needs.
   See docs: Compatibility shims. */
.form-control[size] {
	width: 100%;
}

.input-group>.form-control[size] {
	width: 1%;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
   Search
   --------------------------------------------------------------------------- */

/* Result rows. The markup is fixed in search_class.php, so CSS is the only
   lever; the child selectors keep these rules out of the summary text.
   See docs: Search page. */

.search-block>li+li {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: var(--tblr-border-width) solid var(--tblr-border-color);
}

.search-block>li>h4 {
	margin-bottom: 0.25rem;
	font-size: 1rem;
	line-height: 1.4;
}

.search-block>li>h4>a.title {
	color: var(--tblr-primary);
	text-decoration: none;
}

.search-block>li>h4>a.title:hover,
.search-block>li>h4>a.title:focus-visible {
	text-decoration: underline;
}

.search-block>li>span.text-muted {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
}

/* Menu Manager renders the front end inside an iframe (body.e-iframe). The
   drawers are d-lg-none, so at the manager's desktop width their drop zones
   would be invisible and the areas unusable. Flatten them there. */
#menu_iframe .offcanvas {
	position: static;
	visibility: visible;
	transform: none;
	display: block;
}


.icon.secure-image {  
	width: initial;
	height: initial;
	font-size: initial;
	vertical-align: bottom; 
	stroke-width: 1.5;  
}


/* ---------------------------------------------------------------------------
   24ths
   ---------------------------------------------------------------------------
   Fractions the 12-column grid cannot express, used by the 3columns layout.
   Additional classes, NOT a redefinition of Bootstrap's grid.
   See docs: 3columns. */

@media (min-width: 992px) {
	.row>.col24-lg-5 {
		flex: 0 0 auto;
		width: 20.8333333333%;
	}

	/*  5/24 */
	.row>.col24-lg-14 {
		flex: 0 0 auto;
		width: 58.3333333333%;
	}

	/* 14/24 */
	.row>.col24-lg-19 {
		flex: 0 0 auto;
		width: 79.1666666667%;
	}

	/* 19/24 */
}


/* ---------------------------------------------------------------------------
   sr-only compatibility
   ---------------------------------------------------------------------------
   Bootstrap 5 renamed .sr-only to .visually-hidden; plugins still emit the old
   name, which now shows the text instead of hiding it. Rules copied from
   tabler.css:23347-23361. See docs: Compatibility shims. */

.sr-only,
.sr-only-focusable:not(:focus):not(:focus-within) {
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.sr-only:not(caption),
.sr-only-focusable:not(:focus):not(:focus-within):not(caption) {
	position: absolute !important;
}


.text-bg-secondary {
    color: #f9fafb !important;
    background-color: rgba(var(--tblr-secondary-rgb), var(--tblr-bg-opacity, 1)) !important;
}


/* Tabler's .badge sets its own text color, so plain bg-* utilities leave
   the label unreadable. Pair each bg-* with Tabler's matching -fg token
   so legacy plugin markup works without template changes. */
.badge.bg-primary   { --tblr-badge-color: var(--tblr-primary-fg); }
.badge.bg-secondary { --tblr-badge-color: var(--tblr-secondary-fg); }
.badge.bg-success   { --tblr-badge-color: var(--tblr-success-fg); }
.badge.bg-info      { --tblr-badge-color: var(--tblr-info-fg); }
.badge.bg-warning   { --tblr-badge-color: var(--tblr-warning-fg); }
.badge.bg-danger    { --tblr-badge-color: var(--tblr-danger-fg); }
.badge.bg-dark      { --tblr-badge-color: var(--tblr-dark-fg); }
.badge.bg-light     { --tblr-badge-color: var(--tblr-light-fg); }