/* ============================================
   CONSOLIDATED TEMPLATE STYLES 2
   Merged from template_styles.css and theme_2025.css
   Based on redbank41.php design standard
   Fonts: H1-H4 (Bitter), P (Roboto), Captions/small (Roboto Condensed)
   
   CONFLICT RESOLUTION NOTES:
   - template_styles.css takes precedence for custom component styles
   - theme_2025.css provides Bootstrap base styles and variables
   - Duplicate selectors from template_styles.css override theme_2025.css
   ============================================ */

/* ============================================
   BOOTSTRAP CSS VARIABLES (from theme_2025.css)
   ============================================ */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900);
@import url(https://use.fontawesome.com/releases/v5.0.10/css/all.css);
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@400;500;700&display=swap');

:root{
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #2f3c48;
    --bs-secondary: #6f7f8c;
    --bs-success: #3e4d59;
    --bs-info: #5c8f94;
    --bs-warning: #6e9fa5;
    --bs-danger: #cc330d;
    --bs-light: #fdfdfd;
    --bs-dark: #1e2b37;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0))
}

*,*::before,*::after{
    box-sizing:border-box
}

@media (prefers-reduced-motion: no-preference){
    :root{
        scroll-behavior:smooth
    }
}

/* Prevent gap on far right: keep layout within viewport, no horizontal overflow */
html {
    overflow-x: hidden;
    max-width: 100%;
}

/* ============================================
   TYPOGRAPHY - Standardized Font Families
   CONFLICT RESOLVED: template_styles.css takes precedence
   ============================================ */
h1, h2, h3, h4, h5 {
	font-family: 'Bitter', serif;
	font-weight: 700;
	font-optical-sizing: auto;
	font-style: normal;
	letter-spacing: -0.025em;
}

/* Bootstrap responsive heading sizes (from theme_2025.css) - kept for responsive behavior */
h1,.h1{
    font-size: calc(1.375rem + 1.5vw)
}
@media (min-width: 1200px){
    h1,.h1{
        font-size:2.5rem
    }
}
h2,.h2{
    font-size:calc(1.325rem + .9vw)
}
@media (min-width: 1200px){
    h2,.h2{
        font-size:2rem
    }
}
h3,.h3{
    font-size: calc(1.3rem + .6vw)
}
@media (min-width: 1200px){
    h3,.h3{
        font-size:1.75rem
    }
}
h4,.h4{
    font-size:calc(1.275rem + .3vw)
}
@media (min-width: 1200px){
    h4,.h4{
        font-size:1.5rem
    }
}
h5,.h5{
    font-size: 1.25rem
}
h6,.h6{
    font-size: 1.2rem;
    margin-top: .25rem;
    margin-bottom: .5rem;
    font-family: Bitter;
    font-weight: 500;
    line-height: 1.2;
}

a {
text-decoration: none;
}

p {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #000000;
	line-height: calc(1ex / 0.42);
	font-size: 1.5rem;
	margin-top:0;
	margin-bottom:1rem
}



small, .caption, figcaption, span.caption, p.caption {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1rem;
	line-height: 1.1em;
}

.display-3 {
    font-size: calc(1rem + 2vw);
}


/* Bootstrap small (from theme_2025.css) */
small,.small{
    font-size:.875em
}

p.caption {
	display: inline-block;
	margin: 0;
	width: 100%;
}

p.caption span {
	font-family: 'Roboto Condensed', sans-serif;
	float: right;
	color: #080808;
}

span.caption {
	color: #080808;
	text-align: center;
	line-height: 1.1;
	width: 100%;
	position: absolute;
	font-size: 1em;
	display: block;
	overflow: hidden;
	padding-top: 0.5rem;
}

/* ============================================
   BODY & BACKGROUND
   CONFLICT RESOLVED: template_styles.css takes precedence
   theme_2025.css had: background-color:#fbfbfb (light gray)
   template_styles.css has: background-color: #16458d (dark blue) - KEPT
   ============================================ */
body {
	margin:0;
	overflow-x: hidden;
	max-width: 100%;
	font-family:var(--bs-font-sans-serif);
	font: 1.4rem/1.1 var(--bs-font-sans-serif);
	font-weight:400;
	line-height: calc(1ex / 0.38);
	color: #313131;
	/* Default background - can be overridden per page */
	background-color: #16458d;
	background-image: url("/img/backgrounds/sand_back_rbhs.png");
	background-repeat: repeat;
	background-size: auto;
	background-attachment: fixed;
	background-position: center;
	-webkit-text-size-adjust:100%;
	-webkit-tap-highlight-color:rgba(0,0,0,0)
}

/* Per-page background customization example:
   Add this to your page's <style> section or custom CSS:
   
   Simple even tint method (recommended):
   body {
       background-color: #16458d;
       background-image: linear-gradient(
           rgba(212, 181, 149, 0.1), 
           rgba(212, 181, 149, 0.1)
       ), url(/img/backgrounds/sand_back_rbhs.png);
       background-repeat: repeat;
       background-size: auto;
       background-attachment: fixed;
       background-position: center;
   }
   
   Alternative: Texture on top with color blend:
   body {
       background-color: rgba(212, 181, 149, 0.1);
       background-image: url(/img/backgrounds/sand_back_rbhs.png);
       background-blend-mode: multiply;
   }
*/

/* Dark mode background - can be overridden per page */
/* Using !important to override theme_2025.css and other conflicting styles */
body.dark-mode {
	background-color: #1a1a1a !important;
	color: #e0e0e0;
	/* Simple even tint overlay for dark mode - adjust rgba() color and opacity */
	background-image: linear-gradient(
		rgba(100, 100, 100, 0.05), 
		rgba(100, 100, 100, 0.05)
	), url("/img/backgrounds/sand_back_rbhs.png") !important;
	background-repeat: repeat !important;
	background-size: auto !important;
	background-attachment: fixed !important;
	background-position: center !important;
}

/* ============================================
   NAVIGATION
   CONFLICT RESOLVED: template_styles.css takes precedence for custom nav styles
   theme_2025.css Bootstrap nav styles kept for base functionality
   ============================================ */
.navbar {
	position: fixed;
	width: 100%;
	left: 0;
	right: 0;
	max-width: 100%;
	z-index: 1030;
	min-height: 3em;
	transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
	/* template_styles.css overrides theme_2025.css opacity: 0 */
}

.navbar-hidden {
	top: -100px;
	opacity: 0;
}

.navbar-visible {
	top: 0;
	opacity: 1;
}

/* theme_2025.css navbar.affix - kept for compatibility */
.navbar.affix {
	opacity: 1;
	background-color: rgba(64, 64, 64, 0.9);
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.navbar-brand {
	display: flex;
	align-items: center;
	height: 100%;
	/* template_styles.css overrides theme_2025.css empty rule */
}

.navbar-brand img {
	height: 40px;
	width: auto;
}

.navbar-dark .navbar-toggler {
	z-index: 999;
	color: #ffffff;
	/* template_styles.css adds z-index, theme_2025.css adds color */
}

.nav-link {
	display: block;
	padding: .2rem .3rem;
	color: #151515;
	/* CONFLICT: template_styles.css has .2rem .3rem, theme_2025.css has .5rem 1rem - template_styles.css kept */
}

.nav-link:focus, .nav-link:hover {
	color: #ffa900;
	outline: none;
	/* theme_2025.css - kept */
}

.navbar-nav > li > a {
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 1px;
	color: white;
	/* CONFLICT: Both files have this - template_styles.css kept (more specific) */
}

.bg-primary {
	background-color: #0d1831 !important;
	/* template_styles.css overrides Bootstrap default */
}

.chapter-title-display {
	color: #fff;
}

#chapterTitleGroup {
	text-align: center;
	width: 100%;
	font-size: 1.1rem;
}

/* Bootstrap navbar base styles (from theme_2025.css) - kept for functionality */
.navbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between
}
.navbar>.container,.navbar>.container-fluid,.navbar>.container-sm,.navbar>.container-md,.navbar>.container-lg,.navbar>.container-xl,.navbar>.container-xxl{
    display:flex;
    flex-wrap:inherit;
    align-items:center;
    justify-content:space-between
}
.navbar-brand {
	background: url('https://chattanoogahistory.com/webp/CHALOGO21c.webp') no-repeat;
	background-size: auto auto;
	background-size: cover;
	display: inline;
	height: 7vh;
	width: 7vh;
	margin-bottom: -45px;
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}


.navbar-nav{
    display:flex;
    flex-direction:column;
    padding-left:0;
    margin-bottom:0;
    list-style:none
}
.navbar-nav .dropdown-menu{
    position:static
}
.navbar-text{
    padding-top:.5rem;
    padding-bottom:.5rem
}
.navbar-collapse{
    flex-basis:100%;
    flex-grow:1;
    align-items:center
}
.navbar-toggler{
    padding:.25rem .75rem;
    font-size:1.25rem;
    line-height:1;
    background-color:transparent;
    border:1px solid transparent;
    border-radius:.25rem;
    transition:box-shadow .15s ease-in-out
}
.navbar-toggler:hover{
    text-decoration:none
}
.navbar-toggler:focus{
    text-decoration:none;
    outline:0;
    box-shadow:0 0 0 .25rem
}
.navbar-toggler-icon{
    display:inline-block;
    width:1.5em;
    height:1.5em;
    vertical-align:middle;
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%
}
.navbar-nav-scroll{
    max-height:var(--bs-scroll-height, 75vh);
    overflow-y:auto
}
.navbar-expand{
    flex-wrap:nowrap;
    justify-content: flex-start
}
.navbar-expand .navbar-nav{
    flex-direction:row
}
.navbar-expand .navbar-nav .dropdown-menu{
    position:absolute
}
.navbar-expand .navbar-nav .nav-link{
    padding-right:.5rem;
    padding-left:.5rem
}
.navbar-expand .navbar-nav-scroll{
    overflow:visible
}
.navbar-expand .navbar-collapse{
    display:flex !important;
    flex-basis:auto
}
.navbar-expand .navbar-toggler{
    display: none
}
.navbar-dark .navbar-brand{
    color:#fff
}
.navbar-dark .navbar-brand:hover,.navbar-dark .navbar-brand:focus{
    color:#fff
}
.navbar-dark .navbar-nav .nav-link{
    color:rgba(255,255,255,0.9);
	font-weight: bold;
}
.navbar-dark .navbar-nav .nav-link:hover ,.navbar-dark .navbar-nav .nav-link:focus{
    color:rgba(255,255,255,0.75)
}
.navbar-dark .navbar-nav .nav-link.disabled{
    color:rgba(255,255,255,0.25)
}
.navbar-dark .navbar-nav .show>.nav-link,.navbar-dark .navbar-nav .nav-link.active{
    color:#fff
}
.navbar-dark .navbar-toggler{
    color:rgba(255,255,255,0.55);
    border-color:rgba(255,255,255,0.1)
}
.navbar-dark .navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.navbar-dark .navbar-text{
    color:rgba(255,255,255,0.55)
}
.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:hover,.navbar-dark .navbar-text a:focus{
    color:#fff
}

/* ============================================
   HERO SECTIONS
   template_styles.css only - no conflicts
   ============================================ */
#hero {
	background-image: none;
	background-size: cover;
	background-position: 75% 75%;
	background-repeat: no-repeat;
	height: 50vh;
	z-index: 10;
	clip-path: url(#curveynew);
	margin-bottom: -4vh;
}

.hero-fade {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-fade::after {
	content: "";
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: var(--fade, 0);
	transition: opacity 0.2s linear;
	pointer-events: none;
}

.hero-section {
	background-size: cover;
	background-position: top;
	width: 100%;
	max-height: 33vh;
	height: 40vh;
	opacity: 0.15;
	overflow: hidden;
}

.hero-section .overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgb(207 138 52 / 45%);
	mix-blend-mode: screen;
	pointer-events: none;
}

.layer {
	background-position: bottom center;
	background-size: auto;
	background-repeat: no-repeat;
	width: 100%;
	min-width: 100%;
	left: 0;
	right: 0;
	height: 60vh;
	position: fixed;
	z-index: -1;
	background-color: #0b084b29;
}

.layer-bg {
	background-size: cover;
	box-shadow: inset 0 0 6rem 4rem rgba(0, 0, 0, .8);
}

.parallax {
	position: absolute;
	width: 100%;
	z-index: 1;
}

.parallax3 {
	position: absolute;
	width: 100%;
	z-index: -2;
}

.parallax-banner {
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	height: 75vh;
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
}

.fullback {
	background-image: url("/img/hawk36.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	height: 58vh;
}

/* ============================================
   SVG CLIP PATHS
   template_styles.css only - no conflicts
   ============================================ */
#curveynew path {
	fill: #00176f;
	opacity: 0.9;
	stroke: none;
}

svg#curvey5 {
	position: relative;
}

#curvey5 path {
	fill: #00176f;
	opacity: 0.9;
	stroke: none;
}

/* ============================================
   CONTENT SECTIONS & ANIMATIONS
   template_styles.css only - no conflicts
   ============================================ */
section.section {
	margin-top: 2vh;
	margin-bottom: 2vh;
	width: 100%;
	max-width: 100%;
}

/* Keep full-width sections from leaving a right gap (Bootstrap container-fluid) */
section .container-fluid {
	max-width: 100%;
}

.content {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1.2s ease-out, transform 0.8s ease-out;
}

.content.visible {
	opacity: 1;
	transform: translateY(0);
}

.fade-in-left {
	transform: translateX(-50px);
}

.fade-in-right {
	transform: translateX(50px);
}

.fade-in-top {
	transform: translateY(-25px);
}

.fade-in-bottom {
	transform: translateY(50px);
}

.fade-in {
	transform: translateY(0);
}

section.chapter-section {
	padding-bottom: 2vh;
	padding-top: 2vh;
}

.back-light {
	background-color: #e8e8e5;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
}

/* ============================================
   IMAGES & THUMBNAILS
   template_styles.css only - no conflicts
   ============================================ */
img.inline-image {
	max-width: min(42vw, max(22vw, 64vw));
}

img.contain {
	width: 100%;
	object-fit: cover;
	overflow: hidden;
}

.img-shadow {
	filter: drop-shadow(5px 5px 5px #999999);
}

.rot-right {
	transform: scale(1.0) rotate(-3deg);
	transform-origin: 100% 0%;
}

img.rot-right {
	max-height: 47vh;
}

.rot-left {
	transform: scale(1.0) rotate(4deg);
	transform-origin: 100% 0%;
}

.thumbnail-wrapper {
	position: relative;
}

.thumbnail-wrapper::after {
	content: '';
	position: absolute;
	bottom: 40px;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("/watermark/CHA_watermark_white.png") no-repeat center bottom;
	background-size: 41% auto;
	pointer-events: none;
	z-index: 10;
	opacity: 0.8;
}

/* ============================================
   THUMB ZOOM COMPONENT
   template_styles.css only - no conflicts
   ============================================ */
.thumb-zoom {
	position: relative;
	overflow: hidden;
	border-radius: 0.75rem;
	isolation: isolate;
	border: 4px solid #fff;
	box-shadow: 0.5rem 0.5rem 0.5rem 1px rgba(0, 0, 0, 0.2) !important;
}

.thumb-zoom::before {
	content: "";
	display: block;
	aspect-ratio: 8 / 5;
	width: 100%;
}

.thumb-zoom.ratio-16x9::before {
	aspect-ratio: 16 / 9;
}

.thumb-zoom.ratio-4x3::before {
	aspect-ratio: 4 / 3;
}

.thumb-zoom.ratio-3x2::before {
	aspect-ratio: 3 / 2;
}

.thumb-zoom.ratio-8x5::before {
	aspect-ratio: 8 / 5;
}

.thumb-zoom.ratio-1x1::before {
	aspect-ratio: 1 / 1;
}

.thumb-zoom.ratio-flex::before {
	aspect-ratio: 4 / 3;
}

.thumb-zoom.ratio-3x4::before {
	aspect-ratio: 3 / 4;
}

.thumb-zoom.ratio-2x3::before {
	aspect-ratio: 2 / 3;
}

.thumb-zoom.ratio-9x16::before {
	aspect-ratio: 9 / 16;
}

.thumb-zoom.ratio-5x7::before {
	aspect-ratio: 5 / 7;
}

.thumb-zoom.ratio-4x5::before {
	aspect-ratio: 4 / 5;
}

.thumb-zoom > a {
	position: absolute;
	inset: 0;
	display: block;
}

.zoom-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center center;
	will-change: transform;
	transition: transform 0.2s linear;
	border-radius: inherit;
}

/* ============================================
   BLOCKQUOTES
   CONFLICT RESOLVED: template_styles.css takes precedence
   theme_2025.css has basic blockquote, template_styles.css has custom styling
   ============================================ */
.blockquote {
	font-family: 'Bitter', serif;
	font-weight: 700;
	border-left: 4px solid var(--bs-secondary);
	padding-left: 1.5rem;
	color: var(--bs-body-color);
	font-optical-sizing: auto;
	font-size: calc(1rem + 1vw);
	line-height: calc(1ex / 0.43);
	margin-bottom:1rem;
	/* template_styles.css overrides theme_2025.css font-size:1.25rem */
}

.blockquote>:last-child{
    margin-bottom:0
}

.blockquote-footer {
	font-size: 1.3rem;
	font-weight: normal;
	color: var(--bs-secondary-color);
	margin-top: 0.5rem;
	/* CONFLICT: template_styles.css has 1.3rem, theme_2025.css has .875em - template_styles.css kept */
}

.blockquote-footer::before{
    content:"\2014\00A0"
}

.blockquote-inline {
	font-family: 'Bitter', serif;
	font-size: 1.55rem;
	font-weight: bold;
	color: var(--bs-body-color);
}

/* ============================================
   UTILITY CLASSES
   template_styles.css only - no conflicts
   ============================================ */
.border-gray {
	border: 3px solid #d3d4d5 !important;
	border-radius: .25em;
}

.shadow {
	box-shadow: 0.5rem 0.5rem 0.5rem 1px rgba(0, 0, 0, 0.2) !important;
}

.right-radius {
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}

.left-radius {
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}

.h-100 {
	height: 100% !important;
}

.h-custom {
	height: 45vh;
}

.framer {
	padding: 0.65rem;
	background-color: #ffffffe0;
}

.framer img {
	box-shadow: 2px 0rem 0.5rem 0px rgb(0 0 0 / 33%) !important;
}

.img-float {
	width: 100%;
	height: auto;
	margin-bottom: 1rem;
}

.custom-icon {
	color: #796c65;
	background-color: rgb(243 235 222 / 63%);
	padding: 0.4rem;
	border-radius: 0.3rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.overlay-text {
	z-index: 20;
	pointer-events: none;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
	font-size: 2.5rem;
	line-height: 2.3rem;
	font-family: 'Bitter', serif;
	font-weight: 700;
}

.subtext {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.8rem;
	line-height: 1.8rem;
	padding-top: 0.5rem;
	font-weight: 400;
	color: #fff;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.text-header {
	font-size: 50px;
	text-align: center;
}

/* ============================================
   SCROLL TO TOP BUTTON
   CONFLICT RESOLVED: template_styles.css takes precedence
   theme_2025.css: font-size: 2em, background-color: rgba(0, 66, 138, 0.6), padding: 3px, border-radius: 3px
   template_styles.css: font-size: 1em, background-color: #202f79, padding: 0.4em, border-radius: 2em - KEPT
   ============================================ */
.stop {
	position: fixed;
	bottom: 30px;
	right: 3px;
	font-size: 1em;
	z-index: 999;
	line-height: 1em;
	background-color: #93a9c0;
	display: none;
	padding: 0.4em;
	text-align: center;
	border-radius: 2em;
	scroll-behavior: smooth;
	/* template_styles.css overrides theme_2025.css */
}

.stop img {
	width: 33px;
	height: 33px;
    filter: invert(1);
    -webkit-filter: invert(1);
}


.stop a {
	color: #CECECE;
	text-decoration: none;
	outline: none;
	/* theme_2025.css - kept */
}

/* ============================================
   FOOTER
   template_styles.css only - no conflicts
   ============================================ */
.footer-logo {
    background: url(https://chattanoogahistory.com/webp/CHALOGO21c.webp) no-repeat;
    background-size: cover;
    height: 6vh;
    width: 6vh;
    margin-bottom: -50px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    transition: all .5s ease-in-out;
}

/* ============================================
   GLIGHTBOX CUSTOMIZATION
   template_styles.css only - no conflicts
   ============================================ */
.glightbox-clean .gslide-description {
	background: #2d2d2d;
}

.glightbox-clean .gslide-title {
	font-size: 1em;
	font-weight: normal;
	font-family: arial;
	color: #cbcdcf;
	margin-bottom: 0.25rem;
	line-height: 1.4em;
}

.glightbox-clean .gslide-desc {
	font-size: 0.86em;
	margin-bottom: 0;
	font-family: arial;
	line-height: 1.4em;
	color: #cbcdcf;
}

.gslide-media.gslide-image {
	position: relative;
}

.image-wrapper {
	position: relative;
	display: inline-block;
}

.transform-wrapper {
	position: relative;
	transform-origin: 100% 0%;
	transition: transform 0.5s ease-out, filter 0.5s ease;
	will-change: transform, filter;
}

.image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
}

.sepia-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(112, 66, 20, 0.4);
	pointer-events: none;
	opacity: 0.4;
	transition: opacity 0.5s ease;
	will-change: opacity;
}

/* ============================================
   OPENSEADRAGON MODAL STYLES
   template_styles.css only - no conflicts
   ============================================ */
#osd-single-viewer,
#osd-collection-viewer {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	min-height: 0;
	background-image: url(/img/backgroundplat.jpg);
	background-repeat: repeat;
	display: block;
	overflow: hidden;
}

/* Watermark overlay for collection mode */
.osd-watermark-overlay {
	position: absolute;
	background: url('/watermark/CHA_watermark_white.png');
	background-repeat: no-repeat;
	opacity: 0.2;
	pointer-events: none;
	z-index: 1000;
	mix-blend-mode: lighten;
	background-size: 50%;
	background-position: center;
}

#osdSingleModal,
#osdCollectionModal {
	padding: 0 !important;
	overflow: hidden !important;
}

#osdSingleModal .modal-dialog,
#osdCollectionModal .modal-dialog {
	position: absolute;
	inset: 0;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0;
	padding: 0;
	transform: none !important;
}

#osdSingleModal .modal-content,
#osdCollectionModal .modal-content,
#osdSingleModal .modal-body,
#osdCollectionModal .modal-body {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
}

#osd-single-viewer .openseadragon-container,
#osd-collection-viewer .openseadragon-container {
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
}

html.osd-modal-open,
html.osd-modal-open body,
html:has(#osdSingleModal.show),
html:has(#osdCollectionModal.show),
body:has(#osdSingleModal.show),
body:has(#osdCollectionModal.show) {
	width: 100%;
	height: 100%;
	overflow: hidden !important;
}

html.osd-modal-open body,
body:has(#osdSingleModal.show),
body:has(#osdCollectionModal.show) {
	padding-right: 0 !important;
}

.close-btn {
	position: absolute;
	right: 14px;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
	z-index: 1003;
	border: none;
	border-radius: .5em;
	padding: .5rem 1rem;
	font-weight: 700;
	background: #b23b2e;
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	min-width: 80px;
	min-height: 44px;
	font-size: 1.3rem;
	touch-action: manipulation;
	font-family: 'Roboto Condensed', sans-serif;
	cursor: pointer;
}

.close-btn:hover {
	background: #c5463a;
}

.close-btn:active {
	background: #a02d20;
}

.map-label {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 1003;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	padding: .25rem .5rem;
	border-radius: .5rem;
	font-weight: 600;
	font-family: 'Roboto Condensed', sans-serif;
}

/* Stacking for nested modals */
.modal.level-2 {
	z-index: 1080 !important;
}

.modal-backdrop.level-2 {
	z-index: 1075 !important;
}

.modal-backdrop:not(.level-2) {
	z-index: 1040 !important;
}

/* ============================================
   LISTS & CUSTOM ELEMENTS
   CONFLICT RESOLVED: template_styles.css takes precedence
   ============================================ */
.custom-list .list-group-item {
	font-size: 1.2rem;
	line-height: 1.2;
	color: #000;
}

ul, li {
	font-size: 1.2rem;
	line-height: 1.2;
	color: #000;
}

hr:not([size]) {
	height: 3px;
	/* CONFLICT: template_styles.css has 3px, theme_2025.css has 1px - template_styles.css kept */
}

hr {
	margin: 1rem 1.5rem;
	color: #fff;
	border: 0;
	opacity: 0.8;
	/* CONFLICT: template_styles.css has margin: 1rem 1.5rem, color: #fff, opacity: 0.8
	   theme_2025.css has margin:1rem 0, color:inherit, opacity: .25 - template_styles.css kept */
}

.qmark {
	position: absolute;
	top: -20px;
	left: calc(50% - 30px);
	width: 60px;
	height: 60px;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: Impact, Garamond, Georgia, serif;
	font-size: 3em;
	color: #8c8484;
	line-height: 60px;
	user-select: none;
}

/* ============================================
   FORM CONTROLS (from theme_2025.css)
   No conflicts - kept from theme_2025.css
   ============================================ */
.form-control {
	display: block;
	width: 100%;
	height: calc(1.1em + .75rem + 2px);
	padding: .35rem .5rem;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.3;
	background-clip: padding-box;
	border: 0px;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* ============================================
   WATERMARK OVERLAY (from theme_2025.css)
   No conflicts - unique to theme_2025.css
   ============================================ */
.dzoverlay {
    background: url(https://chattanoogahistory.com/svg/CHAWATERMARK_22.svg) no-repeat;
    background-size: contain;
    margin: 0 auto 15px;
    opacity: 0.02;
	mix-blend-mode: difference;
	background-position: top;
}

/* ============================================
   BOOTSTRAP BASE STYLES (from theme_2025.css)
   Kept for Bootstrap component functionality
   Note: Only essential Bootstrap styles included here
   Full Bootstrap CSS should be loaded separately via CDN
   ============================================ */

/* Additional Bootstrap utility classes and components would be here
   but are excluded to keep file size manageable.
   Full Bootstrap 5.3.3 should be loaded via CDN for complete functionality. */

/* ============================================
   RESPONSIVE DESIGN - MOBILE
   template_styles.css only - no conflicts
   ============================================ */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
	p {
		font-weight: 400;
		font-size: 1.25rem;
	}
	
	/* Keep navbar compact on iPhone (don’t enlarge chapter title) */
	.chapter-title-display {
		font-size: 1.1rem !important;
	}
	
	
	
	
	.thumb-zoom {
		position: relative;
		overflow: hidden;
		border-radius: 0.5rem;
		isolation: isolate;
		border: 3px solid #fff;
	}
	
	.thumb-zoom.ratio-flex::before {
		aspect-ratio: 1 / 1;
	}
	
	.nav-link {
		display: block;
		padding: .2rem .3rem;
	}
	
	.navbar-nav > li > a {
		font-family: 'Roboto Condensed', sans-serif;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 1rem;
		letter-spacing: 1px;
		color: white;
	}
	
	.fullback {
		height: 28vh;
	}
	
	#hero {
		background-image: none;
		background-size: cover;
		background-position: 75% 75%;
		background-repeat: no-repeat;
		height: 33vh;
		z-index: 10;
		clip-path: url(#curveynew);
		margin-bottom: -4vh;
	}
	
	.text-header {
		font-size: 50px;
		text-align: center;
	}
	
	.layer {
		height: 35vh;
	}
	
	img.rot-right {
		max-height: 37vh;
	}
	
	img.inline-image {
		max-width: min(70vw, max(22vw, 64vw));
	}
	
	span.caption {
		text-align: center;
		line-height: 1.1;
		position: absolute;
		font-size: 1rem;
		display: block;
		font-family: 'Roboto Condensed';
		overflow: hidden;
	}
	
	.close-btn {
		right: 12px;
		bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
		padding: 12px 16px;
		font-size: 16px;
		min-width: 100px;
		min-height: 48px;
		border-radius: 16px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
	}
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   template_styles.css only - no conflicts
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	.zoom-img {
		transition: none;
		transform: none !important;
	}
	
	.content {
		transition: none;
	}
	
	.hero-fade::after {
		transition: none;
	}
}

/* ============================================
   END OF CONSOLIDATED STYLES
   ============================================ */