/* Color tokens - every color on the public site funnels through one of
   these custom properties instead of a hardcoded hex literal, so a future
   theme (e.g. Light Mode - see IMPROVEMENTS.md #23) only has to override
   this one block rather than hunt down ~200 scattered values. Named by the
   role each color plays (e.g. --color-text-muted), not by its current
   appearance, so the name still makes sense once a theme override changes
   the actual value.

   Several near-duplicate colors got folded into one token rather than kept
   distinct, after checking each pair individually - not assumed safe just
   because they were close:
   - --color-brand-red-gradient-start (was its own #a8000e, 1 unit off
     --color-brand-red's #a7000e - rounding noise from the colorzilla.com
     gradient-editor tool that originally generated header .header-middle's
     gradient) folded into --color-brand-red. Matt then had that whole
     gradient flattened to a solid color (see header .header-middle itself)
     rather than keeping a two-stop gradient going, so its other stop -
     --color-brand-red-gradient-end, #c50011 - is gone too; the vendor-
     prefixed gradient fallbacks and the IE6-9 filter that only existed to
     render that gradient went with it.
   - --color-accent-orange (#f39e09) and --color-icon-phone (#ffbb58) both
     folded into --color-accent-amber - Matt's call after seeing the actual
     pixel distances from the amber (~50 and ~38 units respectively): a
     real, visible gap, not rounding noise, but not different enough to be
     worth a second/third named accent. Recolors the Join Now button, the
     Rescue heading pill, headline highlight words, and the header phone
     icon - a real, deliberate visual change to the current dark theme, not
     just future light-mode prep. (Matt's pick for the surviving value was
     #f39e09, not #ffb932 - the punchier of the two.)
   - --color-accent-red-alt (#ba0404, the Training heading pill's own
     shade) folded into --color-brand-red - ~22 units apart, no comment
     anywhere justifying a shade distinct from the brand red used
     everywhere else, unlike the amber/orange split above (which had a real
     WCAG-contrast reason on record). Training's pill now matches the same
     red as card titles/buttons site-wide; Rescue's pill stays the amber
     accent, so the two still read as visually distinct from each other.

   Every other near-duplicate (e.g. --color-text-muted vs
   --color-text-muted-alt) was left distinct - not evaluated the same way,
   so not assumed safe to merge silently. */
:root {
  /* Brand / accent */
  --color-brand-red: #a7000e;
  --color-accent-amber: #f39e09;
  --color-accent-facebook-navy: #0e2f90;
  --color-text-emergency: #ff3333; /* deeper/less coral than the original #ff5a5a, still 5.8:1 against the header-top's black */
  --color-border-nav-mobile: #c02e3a;

  /* Backgrounds / surfaces */
  --color-bg-black: #000;
  --color-bg-deep: #090909;
  --color-bg-surface: #121212;
  --color-bg-surface-alt: #404040;
  --color-bg-panel: #1a1a1a;
  --color-surface-white: #fff; /* explicit fixed-white surface: photo mat, mobile table wrapper */
  --color-chrome-surface: #121212; /* nav dropdown background only - chrome, like header/footer, so pinned regardless of theme rather than tracking --color-bg-surface (which content uses and light mode does override) */

  /* Borders */
  --color-border-subtle: #2a2a2a;
  --color-border-footer: #282626;
  --color-border-framed: #b8b8b8;

  /* Text */
  --color-text-primary: #fff; /* tracks the theme - text on the page's own themeable background */
  --color-text-inverse: #fff; /* always light, never themed - text/icons on chrome (header/footer/nav), red/amber bands, or a photo overlay, all of which stay dark/saturated in both themes */
  --color-text-secondary: #e0e0e0;
  --color-text-muted: #bcbcbc;
  --color-text-muted-alt: #b7b7b7;
  --color-text-dim: #9a9a9a;
  --color-text-dimmer: #8a8a8a;
  --color-text-faint: #808080;
  --color-text-table: #404040; /* dark body text inside the light data tables */

  /* Data tables (the site's tables stay a light "island" even in the
     current dark theme, for data legibility) */
  --color-table-bg: #f9f9f9;
  --color-table-bg-alt: #efefef;
  --color-table-bg-hover: #fde9c8;
  --color-table-bg-summary: #e8e8e8;
  --color-table-border: #e3e3e3;
}
/* QUICK PREVIEW ONLY - Light Mode "Option A: Crisp White", not the real
   implementation. Chrome (header/footer/nav) stays dark per Matt's
   call - this only overrides the content-area tokens.

   --color-accent-amber deliberately left un-overridden (stays #f39e09,
   same as dark mode) - Matt's call for now, keeping the original amber
   rather than the deepened-for-contrast gold tried first. Real caveat
   this doesn't solve: #f39e09 measures ~2.2:1 against white, well under
   the 4.5:1 WCAG AA minimum for text - fine as a decorative fill/border
   color (no contrast requirement there), but the site currently also
   uses this same token for real body text/links, which would fail
   accessibility on a light background as-is. Left as amber per Matt's
   instruction; worth a real decision (a second amber-text-only token,
   or moving those specific text/link spots to a different color) before
   calling light mode done, not before then.

   The nav dropdown's background - previously --color-bg-surface,
   shared with content and so incorrectly going light-gray under this
   override - now has its own --color-chrome-surface token (see :root
   above), pinned to the original #121212 in both themes. Red was tried
   first (reads as one continuous nav, and sidesteps needing a
   dedicated token at all) but reverted: it changed the current,
   already-shipped dark theme's look, which light mode didn't need to
   touch, and lost the visual separation the near-black panel gives
   from the red bar it drops from. */
:root[data-theme="light"] {
  --color-bg-surface: #f4f4f4;
  --color-bg-deep: #e8e8e8;
  --color-bg-panel: #ffffff;
  --color-bg-surface-alt: #e0e0e0;
  --color-border-subtle: #dcdcdc;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #333333; /* darkened from an initial #4a4a4a - Matt's call, body copy read too light/washed out against the page */
  --color-text-muted: #767676;
  --color-text-muted-alt: #8a8a8a;
  --color-text-dim: #6b6b6b;
  --color-text-dimmer: #7a7a7a;
  --color-text-faint: #999999;
}
/* The equipment/member detail modals' close button uses Bootstrap's own
   .btn-close-white utility class, hardcoded directly in the PHP markup
   (equipment/index.php, members/current-members.php) rather than driven
   by a token - it's a plain CSS filter (invert(1) grayscale(100%)
   brightness(200%)) turning Bootstrap's default black X white, baked in
   because the modal panel is always dark today. In light mode the panel
   (--color-bg-panel) goes white, and a white X on a white panel is
   invisible - Matt's report. Canceling the filter here reverts to
   Bootstrap's own default black X, which reads fine against the now-white
   panel - simpler than touching 3 PHP files to make the class conditional. */
:root[data-theme="light"] .btn-close-white {
  filter: none;
}
*{
	font-family:'Open Sans';
}
.text-center img {
	display: inline-block;
}
/* Off-screen until keyboard-focused, then jumps into view above
   everything else - lets keyboard/screen-reader users skip the full
   nav (7 top-level items + dropdowns) instead of tabbing through it
   on every single page. */
.skip-link {
	position: absolute;
	top: -60px;
	left: 0;
	z-index: 2000;
	background-color: var(--color-brand-red);
	color: var(--color-text-inverse);
	padding: 12px 20px;
	font-family: "Oswald";
	text-decoration: none;
}
.skip-link:focus {
	top: 0;
}
header .header-top {
  background-color: var(--color-bg-black);
  padding: 10px 0;
}
header .header-top .top-contact > span {
  display: block;
  font-size: 20px;
  color: var(--color-text-inverse);
  padding: 10px 10px 10px 60px;
  position: relative;
  vertical-align: middle;
  font-family: "Oswald";
}
header .header-top .top-contact span a {
  color: var(--color-text-inverse);
  font-family: "Oswald";
  text-decoration: none;
}
header .header-top .top-contact span a.emergency {
  color: var(--color-text-emergency);
}
/* Keeps the phone number itself from breaking mid-hyphen on narrow
   widths - only the number is nowrap, not the "Contact Us:" prefix,
   so the line can still wrap at the natural word boundary between
   them instead of forcing the whole string wider than its column. */
header .header-top .top-contact .phone-nowrap {
  white-space: nowrap;
  /* The global *{font-family:'Open Sans'} rule matches this span
     directly, which beats the inherited "Oswald" from its parent <a>
     regardless of selector specificity - explicit inherit needed. */
  font-family: inherit;
}
header .header-top .top-contact span i {
  color: var(--color-accent-amber);
  font-size: 35px;
  height: 60px;
  left: 0;
  line-height: 2.7;
  position: absolute;
  right: auto;
  text-align: center;
  top: -10px;
  width: 60px;
}
header .header-top .join-links {
  margin: 15px 0;
  text-align: right;
}
header .header-top ul {
	margin: 0px;
}
header .header-top ul li.join a {
  background-color: var(--color-accent-amber);
  border-radius: 50px;
  color: var(--color-text-inverse);
  font-size: 19px;
  font-weight: 800;
  margin-right: 10px;
  padding: 10px 30px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
header .header-top ul li.facebook a{
	text-decoration: none;
	/* bi-facebook is drawn as the classic circular Facebook badge itself
	   (a filled disc with the "f" cut out of it), not a bare letterform -
	   confirmed via a canvas pixel scan (fills its own character box
	   edge to edge, no internal padding). That means coloring the glyph
	   directly, with no separate CSS circle behind it, reproduces the
	   same round badge look on its own - see the .facebook li rule
	   below, which used to draw that circle itself.

	   Sized to match "Join Now!" 's own rendered height right next to
	   it (measured live: ~50px at this tier), not an arbitrary value -
	   the glyph fills basically its whole font-size box (see above), so
	   font-size here is effectively the icon's real on-page height, as
	   long as line-height doesn't inflate it past that (see below). */
	color: var(--color-accent-facebook-navy);
	line-height: 1;
	font-size: 50px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* The glyph's own "f" cutout is just a hole in a single-color shape - a
   font glyph can't paint two different colors, so with nothing behind
   it that hole shows whatever is *behind* the icon (this bar's black)
   instead of a clean white "f" on blue. A plain white shape layered
   underneath fixes that: the blue ink fully covers it everywhere
   except inside the cutout, where it shows through as white instead.

   Two earlier attempts tried to match the cutout's own shape directly
   (a centered circle, then a rect sized to its measured bounding box)
   and both leaked white past the blue somewhere - the cutout tapers
   as it nears the bottom, following the circle's own curve, so a
   flat-sided rect (or a circle smaller than the icon itself) never
   quite matches it everywhere at once. Sidestepped that entirely:
   instead of matching the cutout, match the icon's own *outer*
   silhouette - a plain circle the same size/position as the glyph's
   own circle (confirmed via canvas scan: the ink touches all four
   sides of its character box, i.e. the circle's diameter is
   essentially the full box). Since that's the same shape the icon
   itself paints (solid circle minus the cutout), the blue ink placed
   on top of it covers this circle completely everywhere except
   exactly inside the cutout, wherever that actually is - no need to
   know its precise geometry at all. 0.98em (tried first) was still
   close enough to the ink's own true edge to show a faint white ring
   around the *outside* of the circle in some renders - backed off to
   0.92em for real margin against that, still comfortably bigger than
   the cutout itself so it stays fully covered. */
header .header-top ul li.facebook a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.92em;
	height: 0.92em;
	transform: translate(-50%, -50%);
	background-color: var(--color-surface-white);
	border-radius: 50%;
	z-index: 0;
}
header .header-top ul li.facebook a i {
	position: relative;
	z-index: 1;
}
header .header-top ul li.facebook {
  /* Was the brand red - previously indistinguishable in intent from
     the red "Join Now!" CTA right next to it. Switched to a navy
     sampled from the department's own logo (images/header-logo.png -
     #000070 is by far its dominant color, well ahead of its
     gold/amber; see the admin UI's css/admin.css for the pixel
     sampling this was based on), shifted slightly toward cyan (hue
     240 -> 225) for a bit more separation from this solid-black bar.
     A deliberate one-off, not a site-wide accent - other spots this
     navy was tried (a homepage tile, button hover states) didn't
     land and were reverted. Also happens to land closer to
     Facebook's own blue, without introducing a third, mismatched
     hue. Used to be this circle's own background-color (a plain navy
     dot with a white glyph on top) - now it's the icon's own color
     instead (see the <a> rule above), since bi-facebook's glyph is
     already the circular badge shape on its own; a separate CSS circle
     behind it just doubled up the same shape redundantly. */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
}
/* Light Mode's real header switch (see IMPROVEMENTS.md #23) - a plain
   icon button, not a circle badge like Facebook's: bi-sun-fill/
   bi-moon-stars-fill are simple pictograms with no cutout-letter
   problem to solve, so no white-backing trick is needed here. Amber to
   match the header phone icon's precedent for a functional (not just
   decorative) accent icon in this bar - the JS in custom.js swaps the
   icon and aria attributes, this file only sizes/centers it and, below,
   colors it per state. */
header .header-top ul li.theme-toggle button {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-accent-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  font-size: 26px;
  padding: 0;
}
/* Sun stays the warm amber above (matches the phone icon); the moon
   reads better cool - white/light gray, not the same warm gold - so
   color it separately for that state. Keyed off aria-pressed (which
   custom.js already keeps in sync: true means light mode/showing the
   moon) rather than :has() on the icon class, for wider browser
   support with no extra markup. */
header .header-top ul li.theme-toggle button[aria-pressed="true"] {
  color: var(--color-text-inverse);
}
header .header-middle {
	/* Used to be a top-to-bottom gradient (#a8000e -> #c50011, generated via
	   colorzilla.com's gradient-editor) - flattened to a solid brand red,
	   so the vendor-prefixed fallbacks and IE6-9 filter that only existed
	   to render that gradient are gone too. */
	background: var(--color-brand-red);
}
header .header-middle .logo {
  position: relative;
}
header .header-middle .logo img {
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: -80px;
  z-index: 999;
  /* header-logo.png is now sourced from the higher-res
     images/homepage/kcvfd-logo.png (564x738) for crispness on high-DPI
     screens, but the nav-clearance padding elsewhere in this file was
     tuned around its original 151px display width - pin it here so
     swapping the file's own resolution never changes the on-page size
     (and re-break that padding math). */
  width: 151px;
}
header .mainmenu .navbar ul.navbar-nav li a {
  color: var(--color-text-inverse);
  font-family: "Oswald";
  font-size: 18px;
  font-weight: 900;
  padding: 18px 23px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Both nav groups converge toward the centered logo instead of hugging
   the outer edges, so any leftover slack lands on the outside where it
   doesn't throw off the logo's centering. The inner padding reserves
   clearance for the logo image (151px wide, fixed at all widths where
   it's shown) so nav items don't run under it. Equal padding on both
   sides, since the two nav lists' un-padded midpoint already lands
   exactly on the logo's center (verified: no structural offset between
   them - an earlier "8px correction" here was based on a bad
   measurement and made the clearance asymmetric instead of fixing
   anything). 50px (up from an earlier 35px) was sized by measuring
   from the optical middle of the last/first letter next to the logo
   ("s" in Members, "G" in Gallery) rather than the link's box edge -
   at 35px those letters' middles landed almost exactly on the logo's
   edge, reading as no gap at all even though the box edges technically
   cleared it. An asymmetric split eats into one side's clearance and
   makes the crest visibly cover nav text, so keep both sides equal. */
header .mainmenu .navbar ul.navbar-nav.left {
	justify-content: flex-end;
	padding-right: 50px;
}
header .mainmenu .navbar ul.navbar-nav.right {
	justify-content: flex-start;
	padding-left: 50px;
}
/*************SUB MENU*************/
/* Bottom corners only (border-radius: 0 0 3px 3px), matching the 3px
   rounding used everywhere else on the site - the top edge sits flush
   against the navbar with no gap, so rounding it too wouldn't read as
   rounded, just misaligned. overflow: hidden clips the last item's
   own <a> background (#121212, filling its <li> edge-to-edge) to
   that shape instead of it poking past the corner as a square. */
.mainmenu .sub-menu {list-style: outside none none;  min-width: 250px;  padding: 0;  position: absolute;  z-index: 1000;  display:none;  border-radius: 0 0 3px 3px;  overflow: hidden;}
/* :focus-within (not just :hover) so keyboard users tabbing onto
   "History"/"Members" - or into one of the sub-menu links itself -
   also reveal the flyout, instead of it only ever being reachable by
   mouse. */
.mainmenu li:hover .sub-menu, .mainmenu li:focus-within .sub-menu, .mainmenu li.submenu-open .sub-menu { display:block; }
.mainmenu .sub-menu li{padding:0px !important;}
/* Desktop-hidden by default - a mouse gets a hover step before ever
   clicking "History"/"Members"/"Join Now", so it never needs this
   second target. Shown only in the mobile breakpoint below, where a
   tap has no such in-between step (see nav.php for why). */
.mainmenu .submenu-toggle {
	display: none;
}
/* #ffb932 is the site's amber brand accent (used throughout as this
   exact hex - grep it to find every use). Chosen over the very
   slightly darker/redder #ffb22a specifically because #ffb22a
   measured ~4.4:1 contrast against the red (#a7000e) card-title
   background used on History/Members/Equipment hub cards - just
   under the 4.5:1 WCAG AA minimum for normal text. #ffb932 clears it
   (~4.6:1) and is visually indistinguishable from #ffb22a everywhere
   else it's used, so it replaced #ffb22a site-wide rather than being
   a one-off override. */
/* border-left is reserved (transparent) at all times and only its
   color changes on hover, so the link never shifts/resizes - no
   transition needed for it to feel instant rather than sliding. */
/* --color-chrome-surface, not --color-bg-surface - this dropdown is
   chrome (like the header/footer), and the whole point of keeping
   chrome dark in light mode is that it doesn't change at all between
   themes. It used to share --color-bg-surface with content, which
   does change under the light-mode override - a real bug light mode
   surfaced, not a style choice. Briefly tried --color-brand-red here
   instead (reads as "one continuous red nav," and sidesteps needing a
   dedicated token at all, since brand-red is already theme-invariant)
   before deciding against it: red loses the visual separation this
   near-black panel gives from the red bar it drops from, and changes
   how the dropdown looks in the current, already-shipped dark theme -
   more than light mode needed to touch. --color-chrome-surface is a
   new token for exactly this: pinned to the original #121212 in both
   themes, same principle as the rest of chrome. */
.mainmenu .sub-menu li a { background: none repeat scroll 0 0 var(--color-chrome-surface);  display: block;  padding: 10px 15px !important;  text-align: left; color: var(--color-text-inverse) !important;  text-decoration: none; border-left: 4px solid transparent; transition: border-color 0.2s ease 0s;}
/* :focus-visible matches the :hover treatment - without this, a
   keyboard-focused submenu link fell back to only the browser's
   generic default outline (no amber border-left cue matching what a
   mouse user sees on hover). */
.mainmenu .sub-menu li a:hover, .mainmenu .sub-menu li a:focus-visible { background:var(--color-chrome-surface) !important; border-left-color: var(--color-accent-amber); }

/*******MAIN MENU*********/
header .mainmenu .navbar {
  margin: 0;
  padding: 0;
}
/* Mobile-only brand text (see includes/public/header.php) - replaces what was
   a static "KARNES CITY" image, so the text is directly editable
   rather than requiring a new image export for a wording change. */
header .mainmenu .navbar-brand-text {
  color: var(--color-text-inverse);
  font-family: "Oswald";
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 1px;
  padding: 17px 0;
  text-transform: uppercase;
}
header .mainmenu .navbar-brand-text:hover {
  color: var(--color-accent-amber);
}
header .mainmenu .navbar-brand-text span {
  color: var(--color-accent-amber);
  font-family: "Oswald";
  font-weight: 600;
}
/* :focus-visible (not plain :focus) - a middle-click or ctrl/cmd-click
   to open a nav link in a new tab still gives the link keyboard focus
   in the current tab even though it never navigates away, and plain
   :focus would leave it stuck amber with nothing else on the page to
   steal focus back. :focus-visible only matches keyboard-driven focus
   (tabbing through the menu), so the accessibility indicator survives
   without that stuck-highlight bug on a mouse click.
   Direct-child combinators (> li > a) - this is meant only for the
   7 top-level items (Home, History, ...). A bare "li a" descendant
   selector also matches .sub-menu's nested links (li > ul.sub-menu >
   li > a), and since it's more specific than .mainmenu .sub-menu li a,
   it was winning there too - clearing a submenu link's dark background
   to transparent the moment it got keyboard focus. */
header .mainmenu .navbar ul.navbar-nav > li > a.active,
header .mainmenu .navbar ul.navbar-nav > li > a:focus-visible,
header .mainmenu .navbar ul.navbar-nav > li > a:hover {
	background: none;
	color: var(--color-accent-amber);
}
/* Swaps Bootstrap's default focus ring (a soft blue box-shadow glow)
   for a crisp, solid amber outline with rounded corners - matching
   the look of the sub-menu links' own keyboard-focus outline rather
   than Bootstrap's default treatment.
   Negative (inset) offset, not positive: this link's own box exactly
   fills the red navbar strip's height with zero slack above/below,
   so a positive/outward offset pushed the outline's bottom edge past
   the strip into the carousel section below, where it got painted
   over and looked cut off. Inset keeps the whole outline safely
   within the link's own padding on every side. */
header .mainmenu .navbar ul.navbar-nav > li > a:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--color-accent-amber);
	outline-offset: -2px;
	border-radius: 4px;
}
header .header-bottom {
	position: relative;
}
/* Used on pages that skip the banner image/caption (e.g. gallery.php) -
   just tall enough to contain the logo's overlap below .header-middle
   (measured ~67.5px) so it doesn't collide with the page content that
   follows. Not needed below the md breakpoint (767px) - the logo itself
   is d-none d-md-block, so it isn't shown there and there's nothing for
   the spacer to make room for. */
header .header-bottom.header-bottom-spacer {
	background-color: var(--color-bg-black);
	height: 70px;
}
@media screen and (max-width: 767px) {
	header .header-bottom.header-bottom-spacer {
		display: none;
	}
}
header .header-bottom .carousel-caption {
    top: 25%;
	position: absolute;
	left: 0;
	right:0;
	margin: auto;
}
header .header-bottom .carousel-caption h3 {
  color: var(--color-text-inverse);
  font-family: "Oswald";
  font-size: 48px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}
header .header-bottom .carousel-caption h3 span {
  color: var(--color-accent-amber);
  font-family: "Oswald";
}
header .header-bottom .carousel-caption a {
  background-color: transparent;
  border: 2px solid var(--color-text-inverse);
  border-radius: 50px;
  color: var(--color-text-inverse);
  font-size: 16px;
  font-weight: 700;
  margin-top: 30px;
  padding: 12px 21px;
  text-decoration: none;
  text-transform: uppercase;
}
/*********** CAROUSEL NAV***********/
/* Chevron-in-circle, matching the Gallery lightbox's own prev/next
   buttons (.gallery-nav) in shape/icon - but not its flat 50%
   background opacity: these also carry the same opacity: 0.5 (rest)
   -> 0.9 (hover/focus) treatment as the pause/play toggle right next
   to them, so the combined effective translucency (background alpha
   x opacity) matches what the old banner-left/right-arrow.png images
   rendered at before (their own baked-in ~50%-alpha circle, further
   dimmed by this same CSS opacity layer) - not just copying
   .gallery-nav's flatter, more-opaque look as-is. */
header .header-bottom .carousel-control-prev,
header .header-bottom .carousel-control-next {
	appearance: none;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.5);
	border: none;
	border-radius: 50%;
	color: var(--color-text-inverse);
	display: flex;
	font-size: 18px;
	margin: 0;
	height: 44px;
	width: 44px;
	position: absolute;
	top: 35%;
	opacity: 0.5;
	transition: opacity 0.15s ease, background-color 0.3s ease;
}
header .header-bottom .carousel-control-prev:hover,
header .header-bottom .carousel-control-prev:focus-visible,
header .header-bottom .carousel-control-next:hover,
header .header-bottom .carousel-control-next:focus-visible {
	/* rgba, not the solid #a7000e .gallery-nav:hover uses - a little
	   more transparent than a fully opaque red disc. Bound to
	   :focus-visible rather than plain :focus - a mouse click focuses
	   the button too, and that focus lingers after the click (and
	   after the mouse moves away), which made the arrow look stuck in
	   its hover state after every use. :focus-visible only matches
	   real keyboard focus, so a click no longer triggers this -
	   keyboard users still get it, plus the amber outline below. */
	background-color: rgba(167, 0, 14, 0.7);
	opacity: 0.9;
}
header .header-bottom .carousel-control-prev {
	left: 30px;
}
header .header-bottom .carousel-control-next {
	right: 30px;
}
/* Suppress the browser's native focus/tap-highlight glow on mouse
   click (neither control had any explicit outline styling before, so
   whatever the browser applies by default was showing through) - but
   only for plain :focus, not :focus-visible, so real keyboard users
   tabbing to these still get a real, visible indicator instead of
   nothing at all. Same on-brand amber already used elsewhere
   (Members hub hotspots, top-level nav) rather than the browser's own
   default ring. */
header .header-bottom .carousel-control-prev:focus,
header .header-bottom .carousel-control-next:focus {
	outline: none;
}
header .header-bottom .carousel-control-prev:focus-visible,
header .header-bottom .carousel-control-next:focus-visible {
	outline: 2px solid var(--color-accent-amber);
	outline-offset: 2px;
}

header .header-bottom .carousel-pause-toggle {
	/* Resets the native OS button chrome some browsers (notably
	   Safari) apply by default. */
	appearance: none;
	cursor: pointer;
	align-items: center;
	/* .carousel-control-prev/-next's CSS background-color is
	   transparent, but their banner-left/right-arrow.png images each
	   have a semi-transparent black circle (sampled: ~rgba(0,0,0,0.5))
	   baked directly into the pixels - so the visible round backdrop
	   comes from the image, not the CSS. Matching that here directly
	   since this button has no image, just an icon. */
	background-color: rgba(0, 0, 0, 0.5);
	border: none;
	border-radius: 50%;
	color: var(--color-text-inverse);
	display: flex;
	font-size: 15px;
	height: 38px;
	justify-content: center;
	position: absolute;
	/* Bottom-left, matching the play/pause corner convention most
	   video players use (YouTube, Netflix, etc.), rather than sitting
	   up with the prev/next arrows. */
	left: 30px;
	bottom: 20px;
	width: 38px;
	z-index: 2;
	/* Same dim-at-rest/brighten-on-hover treatment Bootstrap's own
	   .carousel-control-prev/-next already carry by default (0.5 at
	   rest, 0.9 on :hover/:focus, 0.15s transition) - this button
	   never picked that up since it isn't one of Bootstrap's carousel-
	   control classes, so it read as having no hover feedback at all
	   next to arrows that visibly brighten. */
	opacity: 0.5;
	transition: opacity 0.15s ease;
}
header .header-bottom .carousel-pause-toggle:hover,
header .header-bottom .carousel-pause-toggle:focus-visible {
	/* :focus-visible, not plain :focus - same stuck-after-click fix as
	   .carousel-control-prev/-next above. */
	opacity: 0.9;
}
/* Same :focus-visible-only outline treatment just added to
   .carousel-control-prev/-next above - suppress the native
   focus/tap-highlight glow on mouse click, but give real keyboard
   users a visible amber outline instead of nothing. This button had
   neither before, unlike the arrows sitting right next to it. */
header .header-bottom .carousel-pause-toggle:focus {
	outline: none;
}
header .header-bottom .carousel-pause-toggle:focus-visible {
	outline: 2px solid var(--color-accent-amber);
	outline-offset: 2px;
}

/**********CAROUSEL DOTS***************/
.carousel-indicators [data-bs-target] {
  background-color: transparent;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 1px solid var(--color-text-inverse);
  opacity: 1;
}
.carousel-indicators .active {
  background-color: var(--color-text-inverse);
}
.holder .welcome-section {
  background-color: var(--color-bg-surface);
  padding: 80px 0 80px;
}
.holder .welcome-section .welcome-contents h3 {
  color: var(--color-text-primary);
  font-size: 31px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Oswald";
  margin-bottom: 30px;
  margin-top: 0px;
}
.holder .welcome-section .welcome-contents h3 span{
  color: var(--color-accent-amber);
  font-size: 31px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Oswald";
}
.holder .welcome-section .welcome-contents p{
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.9;
}
.holder .welcome-section .welcome-contents a.btn {
  background-color: transparent;
  border: 2px solid var(--color-text-primary);
  border-radius: 50px;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
  padding: 12px 21px;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.2s ease 0s;
}
.holder .welcome-section .fb-page {
	display: flex;
	justify-content: center;
}
.holder .welcome-section .fb-page.fb_iframe_widget > span {
	outline: 3px solid var(--color-accent-amber);
	overflow: hidden;
	border-radius: 3px;
}
.holder .training-section {
  background-color: var(--color-bg-deep);
  padding: 80px 0 80px;
}
.holder .training-section .training-heading.rescue {
	background-color: var(--color-accent-amber);
}
/* Equipment/Members/Training images are pre-cropped to this box's
   desktop ratio (416x195), so cover+center only has real work to do
   at other viewport widths where the box's ratio drifts from that -
   the framing itself lives in the file, not in object-position. */
.holder .training-section .training-contents img {
	width:100%;
	height: 195px;
    object-fit: cover;
    object-position: 50% 50%;
    /* Matching the rounding already used on the History/Members/
       Equipment hub cards (.history-hub-card) and Equipment's truck
       cards - these three feature tiles were the one card-like
       pattern on the site still using sharp corners. */
    border-radius: 3px;
}
.holder .training-section .training-heading {
  background-color: var(--color-brand-red);
  padding: 12px 22px;
  margin-bottom: 8px;
  border-radius: 3px;
}
.holder .training-section .training-heading h3 {
  color: var(--color-text-inverse);
  font-family: "Oswald";
  font-size: 25px;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
}
.holder .training-section .training-contents p {
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.7;
  margin-top: 30px;
}
.holder .training-section .training-contents a {
  background-color: transparent;
  border: 2px solid var(--color-text-primary);
  border-radius: 50px;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 700;
  margin-top: 20px;
  padding: 12px 21px;
  text-decoration: none;
  transition: border-color 0.2s ease 0s;
  text-transform: uppercase;
}
.holder .gallery-section {
  background-color: var(--color-bg-surface);
  padding: 80px 0 80px;
}
/* gallery.php only (the homepage teaser keeps the full padding above,
   for rhythm with the sections around it) - the standalone page has no
   banner before it, so the same top padding read as excess empty space
   above the heading. */
.holder .gallery-section.gallery-page {
  padding-top: 30px;
}
.holder .gallery-section .photo-heading h3 {
  color: var(--color-text-primary);
  font-size: 33px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Oswald";
  margin-bottom: 30px;
  margin-top: 0px;
}
.holder .gallery-section .photo-heading h3 span{
  color: var(--color-accent-amber);
  font-size: 33px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Oswald";
}
.holder .gallery-section .view-btn {
	text-align: right;
}
.holder .gallery-section .view-btn a {
  background-color: transparent;
  border: 2px solid var(--color-text-primary);
  border-radius: 50px;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 700;
  padding: 12px 21px;
  text-decoration: none;
  transition: border-color 0.2s ease 0s;
  text-transform: uppercase;
}
/* Hover state for the site's white outline pill buttons ("Our
   History", "See More"/"Meet Members"/"Learn More", "View All", and
   the Gallery/Current-Members-style Previous/Next pagination
   controls) - just the ring, not the text, on the site's existing
   amber accent (#ffb932 - see the comment further up explaining why
   this exact shade, not #f39e09/#ffb22a, is the one used for
   hover/focus states). Background and text color are deliberately
   untouched. */
.holder .welcome-section .welcome-contents a.btn:hover,
.holder .welcome-section .welcome-contents a.btn:focus-visible,
.holder .training-section .training-contents a:hover,
.holder .training-section .training-contents a:focus-visible,
.holder .gallery-section .view-btn a:hover,
.holder .gallery-section .view-btn a:focus-visible,
.holder .gallery-section .gallery-pagination .btn:hover,
.holder .gallery-section .gallery-pagination .btn:focus-visible,
.holder .history-section .history-pagination .btn:hover,
.holder .history-section .history-pagination .btn:focus-visible {
  border-color: var(--color-accent-amber);
}
.holder .gallery-section .gallery-heading {
	margin-bottom: 25px;
}
.holder .gallery-section .gallery-wrap {
  padding: 6px 0;
}
.holder .gallery-section .gallery-wrap .gallery-img img {
	width: 100%;
	height: 178px;
	object-fit: cover;
}
.nopadding {
	padding: 0px 6px;
}
/* The whole overlay is the clickable element (an <a>, not just the icon
   button in the middle), covering the full tile. Hidden until hover by
   default (matching the site's original reveal-on-hover design); see
   the touch-active override below for touch devices, where a hover
   state either doesn't exist or (worse) requires an extra tap first to
   simulate one before the real tap registers. */
.holder .gallery-section .gallery-wrap .gallery-img .overlay {
  /* A <button>, not an <a> (no navigation happens - it opens a modal),
     so reset the UA default border/font/cursor chrome browsers apply
     to buttons that a plain <a> never had. */
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: inherit;
  background-color: rgba(255, 167, 0, 0.9);
  bottom: 0;
  color: var(--color-text-inverse);
  display: block;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 80px 20px 20px;
  position: absolute;
  right: 0;
  text-decoration: none;
  top: 100%;
  transition: all 0.3s ease 0s;
  visibility: hidden;
  width: 100%;
}
.holder .gallery-section .gallery-wrap .gallery-img:hover .overlay {
  opacity: 1;
  top: 0;
  visibility: visible;
}
.holder .gallery-section .gallery-wrap .gallery-img .overlay .topic-img i {
  /* <i> is inline by default, so width/height never actually applied
     here - the "circle" was really just this glyph's own inline content
     box (its font-size-driven width, its line-height plus the vertical
     padding below stacked on top of that) with border-radius:50% bent
     around whatever that inline box happened to be: much taller than
     wide, so it rendered as a stretched vertical oval/eye shape instead
     of a circle. display:flex makes width/height (and centering) real.
     bi-arrows-angle-expand is also a solid glyph filling almost its whole
     character box (same discovery as bi-facebook above), so its
     font-size is sized close to the circle's own diameter rather than
     inheriting the page's plain body text size the old padding-based
     rule silently relied on. */
  background-color: rgb(0, 0, 0);
  border-radius: 50%;
  /* inline-flex, not flex - the parent .topic-img centers this icon
     horizontally via text-align: center, which only works on an
     inline-level box. flex would make this a block box (filling
     .topic-img's own full width) and break that centering; inline-flex
     keeps the outer box inline (so the parent's text-align still
     centers it) while making width/height/centering real internally. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  height: 50px;
  opacity: 0.7;
  transition: all 0.5s ease 0s;
  width: 50px;
}
.holder .gallery-section .gallery-wrap .gallery-img {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
  /* Matching the rounding used elsewhere (hub cards, Equipment truck
     cards, homepage feature tiles) - already has overflow: hidden,
     so this clips the .overlay hover layer along with the image
     itself, not just the image. */
  border-radius: 3px;
}
.holder .gallery-section .gallery-wrap .gallery-img .gallery-images {
  position: relative;
}
.holder .gallery-section .gallery-wrap .gallery-img .topic-img {
  text-align: center;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 35%;
}
/* Set by custom.js on the first real touchstart anywhere on the page -
   more reliable than @media (hover: hover)/(pointer: coarse), which
   describe what a device is capable of rather than what the visitor is
   actually using right now (a touchscreen laptop with a mouse attached
   can report either, inconsistently across browsers). Once touch is
   detected, the overlay stays invisible (opacity: 0) rather than
   lighting up on every tile at once - visibility: visible (instead of
   the default hidden) is what actually matters here, since that's what
   makes it clickable. A single tap opens the lightbox directly, with
   nothing to reveal first. */
html.touch-active .holder .gallery-section .gallery-wrap .gallery-img .overlay {
  opacity: 0;
  top: 0;
  transition: none;
  visibility: visible;
}
.holder .gallery-section .gallery-pagination {
	margin-top: 20px;
}
.holder .gallery-section .gallery-pagination .btn {
	background-color: transparent;
	border: 2px solid var(--color-text-primary);
	border-radius: 50px;
	color: var(--color-text-primary);
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	margin: 0 10px;
	padding: 12px 21px;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color 0.2s ease 0s;
}
.holder .gallery-section .gallery-pagination .page-info {
	color: var(--color-text-muted);
	display: inline-block;
	font-family: "Oswald";
	font-weight: bold;
	margin: 0 15px;
}
/* Gallery lightbox modal - full-screen, dark backdrop (Bootstrap's
   modal-content defaults to a white box, which would look jarring
   against the site's dark theme). The image is centered and scaled to
   fit within the viewport without cropping (object-fit: contain - the
   thumbnails crop to fill their tile, but the lightbox should show the
   whole photo). */
.gallery-modal .modal-content {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.75);
	border: none;
	display: flex;
	height: 100%;
	justify-content: center;
}
.gallery-modal .modal-content img {
	max-height: 90vh;
	max-width: 90vw;
	object-fit: contain;
}
/* Close button shares this base with the prev/next chevrons below (same
   circle, same Font Awesome icon weight, same hover fill) rather than
   Bootstrap's default .btn-close - that's a much smaller box with a
   thin SVG X and a plain opacity hover, which read as visually
   inconsistent with the two chevron buttons right below it. */
.gallery-modal .gallery-nav,
.gallery-modal .gallery-close {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5);
	border: none;
	border-radius: 50%;
	color: var(--color-text-inverse);
	display: flex;
	font-size: 20px;
	height: 50px;
	justify-content: center;
	position: absolute;
	transition: background-color 0.3s ease 0s;
	width: 50px;
	z-index: 10;
}
.gallery-modal .gallery-nav:hover,
.gallery-modal .gallery-close:hover {
	background-color: var(--color-brand-red);
}
.gallery-modal .gallery-nav {
	top: 50%;
	transform: translateY(-50%);
}
.gallery-modal .gallery-close {
	top: 24px;
	right: 24px;
	/* Cancel out .gallery-nav's translateY(-50%) above - the close
	   button matches that selector too (it shares the .gallery-nav
	   class for the rest of its styling), but that transform is only
	   meant for vertically-centering the prev/next buttons. Left in
	   place here, it shifted the close button up by half its own
	   height on top of its top: 24px, landing it at top: -1px -
	   clipped off the top of the viewport entirely. */
	transform: none;
}
/* Font Awesome's fa-chevron-left/-right glyphs used to need a px-level
   optical-centering nudge here (their ink wasn't centered in the
   character box). Bootstrap Icons' bi-chevron-left/-right don't have
   that problem - measured via a canvas pixel scan (equal gaps on
   every side, both icons) after the Font Awesome -> Bootstrap Icons
   switch - so the nudge is gone rather than carried forward unverified. */
.gallery-modal .gallery-nav-prev {
	left: 24px;
}
.gallery-modal .gallery-nav-next {
	right: 24px;
}
.holder .top-section {
  background-image: url("/images/homepage/top-firefighters-bg.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 50px 0 80px;
}
.holder .top-section .top-heading {
	margin: 20px 0px 60px;
}
.holder .top-section .top-heading h3 {
  /* text-inverse, not text-primary - this sits on .top-section's own
     background-image (a photo), not the page's themeable background,
     same category as the hero carousel caption. Missed this one in the
     first audit pass - .top-section reads like a plain content section
     by class name alone, but isn't one. */
  color: var(--color-text-inverse);
  font-size: 33px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Oswald";
  margin: 0px;
}
.holder .top-section .top-heading h3 span{
  color: var(--color-accent-amber);
  font-size: 33px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Oswald";
}
.holder .top-section .top-wrap {
  left: -9%;
  position: relative;
}
.holder .top-section .top-wrap table {
	margin-bottom: 0;
}
.holder .top-section .top-wrap .logo-img {
  position: relative;
  right: -40%;
  top: -2px;
  z-index: 100;
}
.holder .top-section .top-wrap .table-responsive {
  height: auto;
  overflow: auto;
  /* Moved here from the <table> itself: border-radius is silently
     ignored on a border-collapse: collapse table (the default, and
     what this table uses) regardless of what the computed style
     reports - the border/radius still needed to live somewhere that
     actually clips, and overflow: auto clips to its border-radius
     shape the same as hidden would, without losing horizontal
     scroll on narrow viewports. */
  border: 3px solid var(--color-brand-red);
  border-radius: 3px;
}
.holder .top-section .top-wrap .logo-img img {
  /* max-height, not a fixed height - the <img> also carries Bootstrap's
     .img-fluid (max-width: 100%; height: auto;). A fixed height fights
     that: once the .col-md-4 column gets narrower than this image's
     natural aspect ratio needs (verified: happens anywhere from ~768px
     up through ~1199px viewport width, where the Bootstrap container's
     own max-width shrinks the column below ~340px), max-width caps the
     rendered width while the fixed height stays put, stretching/
     squishing the logo. max-height lets the browser satisfy both
     constraints by scaling on whichever dimension is more restrictive,
     preserving the aspect ratio at every width. */
  max-height: 445px; /*480px*/
  position: relative;
}
.holder .top-section .top-wrap table tr th {
	background-color: var(--color-brand-red);
	font-size: 20px;
	color: var(--color-text-inverse);
	font-family: "Roboto";
	border: 1px solid var(--color-brand-red);
	text-align:center;
}
.holder .top-section .top-wrap table tr td span{
  /*color: #404040;*/
  color: var(--color-accent-amber);
  font-size: 14px;
  margin-left: 15px;
  font-weight: 600;
}
.holder .top-section .top-wrap table tr td {
  background-color: var(--color-table-bg);
  border: 1px solid var(--color-table-border);
  color: var(--color-text-table);
  font-size: 14px;
  padding: 8px;
  text-align: center;
}
/* Zebra-striping/hover to match the .historic-table pattern used on
   the History/Alarms/Training tables. */
.holder .top-section .top-wrap table tbody tr:nth-child(even) td {
  background-color: var(--color-table-bg-alt);
}
.holder .top-section .top-wrap table tbody tr:hover td {
  background-color: var(--color-table-bg-hover);
}
footer .footer-top {
	background-color: var(--color-bg-black);
	padding: 60px 0px 20px;
}
/* footer-logo.png is sourced from the higher-res images/homepage/kcvfd-logo.png
   (564x738) for crispness on high-DPI screens - pin the display width to
   its original 151px so the file's own resolution never changes its
   on-page size. */
footer .footer-logo img {
  width: 151px;
}
/* Matching the rounding used everywhere else on the site - iframes
   are a replaced element, so border-radius clips their content
   directly without needing a wrapping overflow: hidden. */
footer .footer-map iframe {
  border-radius: 3px;
}
footer .footer-top .top-wrap h3 {
  color: var(--color-text-inverse);
  font-family: "Oswald";
  font-size: 19px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 15px;
}
footer .footer-top .top-wrap h3 span {
	color: var(--color-accent-amber);
	font-family: "Oswald";
	font-weight: 600;
}
/* Contact icons are Font Awesome glyphs in a CSS circle (matching the
   header's phone/Facebook icons) instead of small raster PNGs, so they
   stay crisp at any resolution instead of looking soft on HiDPI
   screens. */
footer .footer-top .footer-address ul li {
	margin-bottom: 15px;
	padding: 0 0 6px 40px;
	position: relative;
}
footer .footer-top .footer-address ul li i {
  align-items: center;
  background-color: var(--color-brand-red);
  border-radius: 50%;
  color: var(--color-text-inverse);
  display: flex;
  font-size: 13px;
  height: 28px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
}
/* Same treatment as the header's Facebook icon (see header .header-top
   ul li.facebook above for the full reasoning): bi-facebook is already
   the classic circular badge shape on its own, so a separate CSS
   circle behind it just doubles up the same shape - color the glyph
   itself instead of giving it a background. Red here, not the
   header's navy, to match its 3 sibling contact icons in this same
   list. Sized to this icon's own 28px box (matching those siblings'
   footprint) rather than the 13px they use, since here the icon draws
   its own circle instead of sitting inside a smaller CSS one.

   The white backing for the "f" cutout has to attach to this element
   differently than the header's version did: there, the icon and its
   backing were on separate elements (an <i> inside an <a>), so the
   icon could just get a higher z-index than its ancestor's ::after.
   Here <i> and <a> are siblings, not parent/child, so both the glyph
   and its backing have to live on <i> itself, as its own ::before
   (the glyph - promoted to its own stacking context so it paints
   above the backing) and ::after (the backing, sized/margined the
   same 0.92em way as the header's, since it's the same glyph). */
footer .footer-top .footer-address ul li.facebook i {
  background-color: transparent;
  color: var(--color-brand-red);
  font-size: 28px;
  line-height: 1;
}
footer .footer-top .footer-address ul li.facebook i::before {
  position: relative;
  z-index: 1;
}
footer .footer-top .footer-address ul li.facebook i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.92em;
  height: 0.92em;
  transform: translate(-50%, -50%);
  background-color: var(--color-surface-white);
  border-radius: 50%;
  z-index: 0;
}
footer .footer-top .footer-address ul li a {
  color: var(--color-text-inverse);
  font-size: 14px;
  text-decoration: none;
}
footer .footer-top .footer-menu ul li {
	margin-bottom: 3px;
}
footer .footer-top .footer-menu ul li a {
  color: var(--color-text-inverse);
  font-size: 14px;
  text-decoration: none;
}
footer .footer-top .top-wrap {
  border-bottom: 1px solid var(--color-border-footer);
  padding-bottom: 30px;
}
footer .copyrights p {
	color: var(--color-text-inverse);
	font-size: 14px;
	margin-top: 30px;
}
footer .copyrights p .sep {
	/* The "|" glyph in Open Sans has the same ascent as letters but an
	   extra ~3px of descent they don't have, making it hang visibly
	   lower. Nudge it up (em-based so it scales with the font-size
	   overrides below). */
	vertical-align: 0.12em;
}
/*history*/
/* Shared template for the History sub-pages (entire/honoraryff/maltese/
   mascots/pastchiefs/pastmarshals/topten), generalized since these
   pages alternate between prose and a data table rather than a fixed
   two-column layout. .alt swaps to a lighter #404040 panel tone so
   consecutive sections on the same page - not used yet, but here if a
   future page needs it - can alternate like the homepage does. */
.holder .history-section {
  background-color: var(--color-bg-surface);
  padding: 80px 0 110px;
}
.holder .history-section.alt {
  background-color: var(--color-bg-surface-alt);
}
.holder .history-section .history-heading {
  margin-bottom: 40px;
}
/* For pages that dropped the in-page heading (banner already states the
   title - repeating it right below felt redundant) but still want a
   visual break between the banner and a longer stretch of body text,
   e.g. timeline.php's long chronological list. */
.holder .history-section .history-divider {
  width: 200px;
  height: 3px;
  background-color: var(--color-accent-amber);
  margin: 0 auto 40px;
  /* .history-section's own 80px top padding (shared with pages that
     still use .history-heading) would otherwise leave twice as much
     space above the divider as below it - cancel half of that so the
     gap above matches the 40px margin-bottom below. */
  margin-top: -30px;
}
.holder .history-section .history-heading h3 {
  color: var(--color-text-primary);
  font-family: "Oswald";
  font-size: 33px;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
}
.holder .history-section .history-heading h3 span {
  color: var(--color-accent-amber);
  font-family: "Oswald";
  font-size: 33px;
  font-weight: 600;
  text-transform: uppercase;
}
.holder .history-section .history-body p {
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 14px;
}
/* Inline links within body copy (e.g. join.php's mailto/document
   links) - default browser blue clashed with the dark theme. */
.holder .history-section .history-body p a {
  color: var(--color-accent-amber);
}
.holder .history-section .history-body p a:hover {
  color: var(--color-text-primary);
}
/* Matches the inline document links above - homepage Welcome section
   isn't part of .history-section, so needs its own copy of the rule. */
.holder .welcome-section .welcome-contents p a {
  color: var(--color-accent-amber);
}
.holder .welcome-section .welcome-contents p a:hover {
  color: var(--color-text-primary);
}
/* firefighters-prayer.php's prayer text, at 17px instead of the site-wide 15px
   default. The extra .history-body qualifier (already implied by
   nesting) bumps specificity above both the rule above and its
   13px narrow-viewport override further down, so 17px holds at
   every breakpoint regardless of source order. */
.holder .history-section .history-body .prayer-text p {
  font-size: 17px;
}
/* Decade labels breaking up timeline.php's long run of chronological
   paragraphs into scannable chunks. */
.holder .history-section .history-body .timeline-decade {
  color: var(--color-accent-amber);
  font-family: "Oswald";
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  margin-top: 36px;
  margin-bottom: 14px;
}
.holder .history-section .history-body .timeline-decade:first-child {
  margin-top: 0;
}
/* History section hub (history/index.php) - a card grid linking out to
   the 7 sub-pages, each thumbnailed with that page's own banner image
   (banners are much wider than this card shape, so object-fit:cover
   center-crops them down - fine, since the crop was already chosen to
   keep the main subject centered). */
.holder .history-section .history-hub {
  margin-top: 40px;
  row-gap: 24px;
}
.holder .history-section .history-hub-card {
  display: block;
  background-color: var(--color-bg-panel);
  border: 1px solid var(--color-border-subtle);
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.holder .history-section .history-hub-card:hover {
  border-color: var(--color-accent-amber);
  transform: scale(1.05);
}
.holder .history-section .history-hub-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.holder .history-section .history-hub-card img.obj-right {
  object-position: 100% 50%;
}
.holder .history-section .history-hub-card-title {
  padding: 14px 16px;
  background-color: var(--color-brand-red);
  color: var(--color-text-inverse);
  font-family: "Oswald";
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}
.holder .history-section .history-hub-card-title span {
  color: var(--color-accent-amber);
  font-family: inherit;
}
/* equipment/index.php - Fire Station intro carousel + Current/Retired
   Apparatus card grids. Cards reuse .history-hub's grid gap; the card
   look itself is its own set of classes since it needs a two-line
   detail body (like .member-card) rather than .history-hub-card's
   single title bar, plus a no-photo placeholder for apparatus with no
   picture on file yet. */
.holder .history-section .equipment-station img {
  border-radius: 3px;
  max-height: 320px;
  object-fit: cover;
  width: 100%;
}
/* "View larger photos" trigger on the small Fire Station preview - a
   corner button rather than making the whole carousel clickable, since
   the carousel already has its own prev/next controls/indicators that
   need to keep working for in-place paging without also opening the
   modal on every click. */
.holder .history-section .equipment-station-photo {
  position: relative;
}
.holder .history-section .equipment-station-expand {
  /* Resets native OS button chrome some browsers (notably Safari)
     apply by default. */
  appearance: none;
  cursor: pointer;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  color: var(--color-text-inverse);
  display: flex;
  font-size: 15px;
  height: 38px;
  justify-content: center;
  /* Bottom-right, matching the fullscreen/expand icon placement most
     video players (YouTube, etc.) use - pairs with the pause/play
     toggle's bottom-left corner instead of a top/bottom diagonal. */
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  z-index: 5;
  /* Same dim-at-rest/brighten-on-hover treatment as the homepage
     carousel's pause/play toggle (0.5 at rest, 0.9 on hover/focus),
     replacing the solid-color-swap hover this and the pause/play
     toggle below used to share - background/color now stay constant,
     opacity is the only thing that moves. */
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.holder .history-section .equipment-station-expand:hover,
.holder .history-section .equipment-station-expand:focus-visible {
  /* :focus-visible, not plain :focus - a mouse click focuses the
     button too, and that focus lingers after the click, which made it
     look stuck in its hover state. Same fix as the homepage carousel's
     prev/next/pause controls. */
  opacity: 0.9;
}
/* Suppress the native focus/tap-highlight glow on mouse click, but
   give real keyboard users a visible amber outline instead of
   nothing - same pattern as the homepage carousel's prev/next/pause
   controls. */
.holder .history-section .equipment-station-expand:focus {
  outline: none;
}
.holder .history-section .equipment-station-expand:focus-visible {
  outline: 2px solid var(--color-accent-amber);
  outline-offset: 2px;
}
/* Carousel pause/play toggle shared by the Fire Station intro photo,
   the Station modal's bigger carousel, and every truck modal's
   carousel (see carouselHtml() in equipment/index.php). Bottom-left
   (video-player pause/play convention) rather than sharing a corner
   with .equipment-station-expand above, which stays top-right -
   they're unrelated actions and don't need to read as a paired unit.
   Two ancestor forms, not one: the Station intro's carousel is
   printed inline inside .holder .history-section, but the Station
   modal and every truck modal are built by $modalsHtml and printed
   *after* that section's closing </div> (equipment/index.php) - a
   deliberate Bootstrap convention that keeps modals out of nested
   stacking/overflow contexts. A selector requiring .history-section
   ancestry silently never matched those, so position: absolute never
   applied and the button fell into normal document flow instead of
   overlaying the photo. */
.holder .history-section .carousel-pause-toggle,
.equipment-modal .carousel-pause-toggle {
  appearance: none;
  cursor: pointer;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  color: var(--color-text-inverse);
  display: flex;
  font-size: 15px;
  height: 38px;
  justify-content: center;
  left: 12px;
  position: absolute;
  bottom: 12px;
  width: 38px;
  z-index: 5;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.holder .history-section .carousel-pause-toggle:hover,
.holder .history-section .carousel-pause-toggle:focus-visible,
.equipment-modal .carousel-pause-toggle:hover,
.equipment-modal .carousel-pause-toggle:focus-visible {
  /* :focus-visible, not plain :focus - same stuck-after-click fix as
     the homepage carousel's prev/next/pause controls. */
  opacity: 0.9;
}
.holder .history-section .carousel-pause-toggle:focus,
.equipment-modal .carousel-pause-toggle:focus {
  outline: none;
}
.holder .history-section .carousel-pause-toggle:focus-visible,
.equipment-modal .carousel-pause-toggle:focus-visible {
  outline: 2px solid var(--color-accent-amber);
  outline-offset: 2px;
}
.holder .history-section .equipment-section-heading {
  margin-top: 50px;
}
.holder .history-section .equipment-retired-intro {
  color: var(--color-text-dim);
  font-size: 14px;
  margin-top: -30px;
}
.holder .history-section .equipment-card {
  /* A <button>, not an <a> (no navigation happens - it opens a
     modal), so reset the UA default font/cursor/text-align/padding/
     margin chrome a button carries that a plain <a> never had -
     border/background below are already real declared values, not
     resets. Missing the padding/margin reset left the browser's
     default button padding in place, showing as a black gap around
     the image plus the red title band below it - "red and black
     boards" around each card. */
  appearance: none;
  cursor: pointer;
  font: inherit;
  text-align: inherit;
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
  background-color: var(--color-bg-panel);
  border: 1px solid var(--color-border-subtle);
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
  height: 100%;
}
.holder .history-section .equipment-card:hover {
  border-color: var(--color-accent-amber);
  transform: scale(1.03);
}
.holder .history-section .equipment-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  background-color: var(--color-bg-panel);
}
.holder .history-section .equipment-card-nophoto {
  width: 100%;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--color-bg-panel);
}
.holder .history-section .equipment-card-nophoto .icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--color-accent-amber);
  display: flex;
  align-items: center;
  justify-content: center;
}
.holder .history-section .equipment-card-nophoto .icon-circle i {
  color: var(--color-accent-amber);
  font-size: 24px;
}
.holder .history-section .equipment-card-nophoto span {
  color: var(--color-text-dimmer);
  font-size: 12px;
  font-family: "Oswald";
  text-transform: uppercase;
  letter-spacing: 1px;
}
.holder .history-section .equipment-card-body {
  background-color: var(--color-brand-red);
  padding: 12px 14px;
  text-align: center;
}
.holder .history-section .equipment-card-name {
  color: var(--color-text-inverse);
  font-family: "Oswald";
  font-weight: 600;
  font-size: 16px;
}
.holder .history-section .equipment-card-detail {
  color: var(--color-accent-amber);
  font-family: "Oswald";
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}
/* Truck detail modals (equipment/index.php) - dark panel matching the
   site's theme, since Bootstrap's modal-content defaults to a white
   box (same problem the Gallery lightbox modal solved, but this one
   needs a normal in-flow dialog rather than a full-screen viewer). */
.equipment-modal .modal-content {
  background-color: var(--color-bg-panel);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
}
.equipment-modal .modal-header {
  border-bottom: 1px solid var(--color-border-subtle);
}
/* Bootstrap's default .btn-close carries a -0.5rem negative right
   margin (by design, so it sits flush with a plain modal's edge) -
   here that pulled it in only ~9px from modal-content's own right
   edge, close enough to the 8px corner radius to look cramped/almost
   clipped by the curve. Zeroing it out lines the button's edge up
   with the header's own 16px padding inset instead, same as the
   title text's inset on the left. */
.equipment-modal .modal-header .btn-close {
  margin-right: 0;
}
.equipment-modal .modal-title {
  color: var(--color-text-primary);
  font-family: "Oswald";
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
}
.equipment-modal .modal-title span {
  color: var(--color-accent-amber);
  display: block;
  font-family: "Oswald";
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
  text-transform: none;
}
.equipment-modal .equipment-modal-single-img {
  border-radius: 3px;
  display: block;
  margin: 0 auto 20px;
  max-height: 55vh;
  max-width: 100%;
}
.equipment-modal .equipment-modal-nophoto {
  border-radius: 3px;
  height: 320px;
  margin-bottom: 20px;
}
.equipment-modal .equipment-carousel {
  margin-bottom: 20px;
}
.equipment-modal .equipment-carousel img {
  background-color: var(--color-bg-black);
  max-height: 55vh;
  object-fit: contain;
}
/* The Fire Station modal has no Model/Description/Purchased details
   list underneath (that context already lives in the paragraph next to
   the small preview, not repeated here) - so its photo can run taller
   than a truck modal's and still land at roughly the same overall
   modal height instead of looking stubby. */
.equipment-modal .station-modal-photo img,
.equipment-modal img.station-modal-photo {
  max-height: 75vh;
}
.equipment-modal .equipment-modal-details li {
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 15px;
  padding: 8px 0;
}
.equipment-modal .equipment-modal-details li:last-child {
  border-bottom: none;
}
.equipment-modal .equipment-modal-details li strong {
  color: var(--color-accent-amber);
  font-family: "Oswald";
  font-weight: 600;
  margin-right: 6px;
}
/* Members hub: percentage-based photo hotspots (replaces the legacy
   page's fixed-pixel <map>/<area> image map, which broke at any
   display width other than the one it was hand-measured against and
   wasn't keyboard/screen-reader accessible - percentages scale with
   the photo at any width, and real <a> elements are focusable). */
.holder .history-section .member-photo-wrap {
  position: relative;
  display: block;
  max-width: 720px;
}
.holder .history-section .member-photo-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.holder .history-section .member-hotspot {
  position: absolute;
  display: block;
}
.holder .history-section .member-hotspot:hover,
.holder .history-section .member-hotspot:focus-visible {
  outline: 2px solid var(--color-accent-amber);
  outline-offset: 1px;
}
.holder .history-section .member-photo-caption {
  color: var(--color-text-dim);
  font-size: 13px;
  margin-top: 10px;
}
/* current-members.php's intro paragraph is the only place a plain <p>
   sits directly before a .row.g-4 grid (every other .row.g-4 on the
   site - Equipment's station intro, Join, Firefighter's Prayer - is
   the first child of .history-body, with no preceding sibling to
   collide with) - g-4's own -24px negative top margin (cancelling out
   its columns' top gutter padding) pulled the card grid up into the
   paragraph's much smaller 14px margin-bottom, a net ~10px overlap.
   This overrides that with real breathing room instead. */
.holder .history-section .history-body p.current-members-intro {
  margin-bottom: 40px;
}
/* Current Members roster cards. */
.holder .history-section .member-card {
  /* Real <button> now (opens the member's detail modal) - same reset
     as .equipment-card, since a plain <button> carries UA chrome
     (border/font/padding/margin) a <div> never had. */
  appearance: none;
  cursor: pointer;
  font: inherit;
  text-align: inherit;
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
  text-decoration: none;
  background-color: var(--color-bg-panel);
  border: 1px solid var(--color-border-subtle);
  border-radius: 3px;
  overflow: hidden;
  height: 100%;
  /* Same hover treatment as .history-hub-card/.equipment-card. */
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.holder .history-section .member-card:hover {
  border-color: var(--color-accent-amber);
  transform: scale(1.03);
}
.holder .history-section .member-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: 50% 0%;
  display: block;
  /* Real photos are background-removed transparent PNGs where
     available (see current-members.php) - explicit background here (matching
     .member-card-nophoto below) so every photo sits on the same
     consistent panel color instead of each one's own old backdrop,
     regardless of how the img ends up nested in the DOM. */
  background-color: var(--color-bg-panel);
}
/* "No photo yet" placeholder - a plain CSS panel instead of a stock
   image, so it never needs cropping and stays calm/uniform even
   repeated across many cards at once (currently 14 of 23 members). */
.holder .history-section .member-card-nophoto {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--color-bg-panel);
}
.holder .history-section .member-card-nophoto .icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--color-accent-amber);
  display: flex;
  align-items: center;
  justify-content: center;
}
.holder .history-section .member-card-nophoto .icon-circle i {
  color: var(--color-accent-amber);
  font-size: 28px;
}
.holder .history-section .member-card-nophoto span {
  color: var(--color-text-dimmer);
  font-size: 12px;
  font-family: "Oswald";
  text-transform: uppercase;
  letter-spacing: 1px;
}
.holder .history-section .member-card-body {
  padding: 12px 14px;
}
.holder .history-section .member-card-name {
  color: var(--color-text-primary);
  font-family: "Oswald";
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}
.holder .history-section .member-card-detail {
  color: var(--color-text-muted-alt);
  font-size: 13px;
  line-height: 1.5;
}
/* Current Members pagination - same look as the Gallery page's, just
   scoped to .history-section instead of .gallery-section. */
.holder .history-section .history-pagination {
  margin-top: 30px;
}
/* Member detail modal (current-members.php) - same dark modal-content/
   header/title treatment as .equipment-modal, not shared with it
   directly since the two are unrelated content types (see .member-card
   vs .equipment-card below it - same "each content type gets its own
   prefixed rules" convention already established for cards). */
.member-modal .modal-content {
  background-color: var(--color-bg-panel);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
}
.member-modal .modal-header {
  border-bottom: 1px solid var(--color-border-subtle);
}
.member-modal .modal-header .btn-close {
  margin-right: 0;
}
.member-modal .modal-title {
  color: var(--color-text-primary);
  font-family: "Oswald";
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
}
.member-modal .modal-title span {
  color: var(--color-accent-amber);
  display: block;
  font-family: "Oswald";
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
  text-transform: none;
}
.member-modal .member-modal-img {
  border-radius: 3px;
  display: block;
  margin: 0 auto 20px;
  max-height: 45vh;
  max-width: 100%;
  background-color: var(--color-bg-panel);
}
/* Same look as .member-card-nophoto, but its own full rule rather than
   reusing that class - .member-card-nophoto's styling (icon-circle,
   its icon, the label) is scoped under .holder .history-section,
   which this modal sits outside of in the DOM (see the
   .member-modal-table comment above for the same reason), so none of
   it would actually apply here. */
.member-modal .member-modal-nophoto {
  border-radius: 3px;
  height: 240px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--color-bg-panel);
}
.member-modal .member-modal-nophoto .icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--color-accent-amber);
  display: flex;
  align-items: center;
  justify-content: center;
}
.member-modal .member-modal-nophoto .icon-circle i {
  color: var(--color-accent-amber);
  font-size: 28px;
}
.member-modal .member-modal-nophoto span {
  color: var(--color-text-dimmer);
  font-size: 12px;
  font-family: "Oswald";
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Bootstrap's base typography reset gives every <ul> (list-unstyled
   only strips list-style/padding-left, not this) a default 1rem
   margin-bottom - harmless on .equipment-modal-details, which has
   nothing after it, but here it was stacking with
   .member-modal-totals's own top spacing, doubling the real gap
   (measured: 16px of dead space beyond the list's own last-row
   padding, vs. 0px between any two rows within the list). */
.member-modal .member-modal-details {
  margin-bottom: 0;
}
.member-modal .member-modal-details li {
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 15px;
  padding: 8px 0;
}
.member-modal .member-modal-details li:last-child {
  border-bottom: none;
}
.member-modal .member-modal-details li strong {
  color: var(--color-accent-amber);
  font-family: "Oswald";
  font-weight: 600;
  margin-right: 6px;
}
/* Lifetime attendance totals - a 4-across stat row, matching the
   celebratory "big number, small label" framing used on the Members
   hub/Top Ten Attendance rather than a dense table, since this is the
   headline number, not the detail (that's the year-by-year table
   below it). */
.member-modal .member-modal-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  /* Top padding alone (no margin) matches the details list's own row
     rhythm exactly: each <li> is 8px+8px padding with zero gap between
     rows, so 8px here plus the last <li>'s own 8px bottom padding
     lands on that same 16px total, now that .member-modal-details's
     stray margin-bottom (above) isn't also adding to it. Bottom
     spacing (before the year table) left as its own, more generous,
     real section break. */
  margin-bottom: 20px;
  padding-top: 8px;
  padding-bottom: 16px;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}
.member-modal .member-modal-totals > div {
  flex: 1 1 100px;
  text-align: center;
}
.member-modal .member-modal-totals strong {
  display: block;
  color: var(--color-accent-amber);
  font-family: "Oswald";
  font-weight: 600;
  font-size: 22px;
}
.member-modal .member-modal-totals span {
  color: var(--color-text-muted-alt);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Year-by-year breakdown - same visual language as .historic-table
   (red header, light zebra-striped body) but its own rules, not a
   shared selector: .historic-table's is scoped under .holder
   .history-section, which this modal sits outside of in the DOM (see
   $modalsHtml in current-members.php, printed after .holder closes -
   same reason .equipment-modal doesn't reuse .historic-table either). */
.member-modal .member-modal-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 3px;
  overflow: hidden;
}
.member-modal .member-modal-table th {
  background-color: var(--color-brand-red);
  border: 1px solid var(--color-brand-red);
  color: var(--color-text-inverse);
  font-family: "Roboto";
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}
.member-modal .member-modal-table td {
  background-color: var(--color-table-bg);
  border: 1px solid var(--color-table-border);
  color: var(--color-text-table);
  font-size: 14px;
  padding: 8px;
  vertical-align: middle;
}
.member-modal .member-modal-table tbody tr:nth-child(even) td {
  background-color: var(--color-table-bg-alt);
}
.member-modal .member-modal-table tbody tr:hover td {
  background-color: var(--color-table-bg-hover);
}
.holder .history-section .history-pagination .btn {
  background-color: transparent;
  border: 2px solid var(--color-text-primary);
  border-radius: 50px;
  color: var(--color-text-primary);
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  margin: 0 10px;
  padding: 12px 21px;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.2s ease 0s;
}
.holder .history-section .history-pagination .page-info {
  color: var(--color-text-muted);
  display: inline-block;
  font-family: "Oswald";
  font-weight: bold;
  margin: 0 15px;
}
/* error.php's "Return Home" button - same white-outline pill style
   every other .btn on the site uses (there's no unscoped default;
   .history-pagination's Previous/Next buttons are the closest
   existing match), just scoped for this page's own class instead of
   reusing "history-pagination" for a button that isn't pagination. */
.holder .history-section .history-body .error-btn {
  background-color: transparent;
  border: 2px solid var(--color-text-primary);
  border-radius: 50px;
  color: var(--color-text-primary);
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  margin-top: 20px;
  padding: 12px 21px;
  text-decoration: none;
  text-transform: uppercase;
}
/* A future History page adding an actual photo (not an inlined SVG
   graphic like the Maltese Cross below) can use this for the same
   white-card treatment the old template used elsewhere on the site. */
.holder .history-section .history-body img.framed {
  background-color: var(--color-surface-white);
  border: 2px solid var(--color-border-framed);
  border-radius: 3px;
  padding: 2px;
}
/* Maltese Cross graphic (maltese-cross.php) - Matt's own cross artwork
   (img/others/maltese-cross.png) centered in a 3x3 grid, with the 8
   traditional virtue words placed one per surrounding cell so each
   gets its own spread-out position instead of stacking multiple words
   in one corner. Plain HTML/CSS instead of an inlined SVG, so the
   words are just normal page text (no separate font-loading concerns). */
.maltese-cross-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: repeat(3, auto);
  align-items: center;
  justify-items: center;
  gap: 2px;
  padding: 20px 0;
}
.maltese-cross-wrap .mc-img {
  grid-column: 2;
  grid-row: 2;
  width: 280px;
  max-width: 100%;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
}
.maltese-cross-wrap .mc-word {
  font-family: "Oswald";
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.maltese-cross-wrap .mc-white { color: var(--color-text-primary); }
.maltese-cross-wrap .mc-amber { color: var(--color-accent-amber); }
.maltese-cross-wrap .mc-nw { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.maltese-cross-wrap .mc-n  { grid-column: 2; grid-row: 1; }
.maltese-cross-wrap .mc-ne { grid-column: 3; grid-row: 1; justify-self: start; text-align: left; }
.maltese-cross-wrap .mc-w  { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; }
.maltese-cross-wrap .mc-e  { grid-column: 3; grid-row: 2; justify-self: start; text-align: left; }
.maltese-cross-wrap .mc-sw { grid-column: 1; grid-row: 3; justify-self: end; text-align: right; }
.maltese-cross-wrap .mc-s  { grid-column: 2; grid-row: 3; }
.maltese-cross-wrap .mc-se { grid-column: 3; grid-row: 3; justify-self: start; text-align: left; }
/* Alarm Totals (alarmtotals.php) decade-average bar chart, sitting above
   the full year-by-year table. Bar height is set inline per-bar as a
   percentage of .alarm-chart's fixed height. */
.holder .history-section .alarm-chart {
  align-items: flex-end;
  display: flex;
  gap: 10px;
  height: 220px;
  justify-content: center;
  margin-top: 30px;
}
.holder .history-section .alarm-chart-bar {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  max-width: 80px;
}
.holder .history-section .alarm-chart-fill {
  background-color: var(--color-accent-amber);
  border-radius: 3px 3px 0 0;
  transition: background-color 0.2s ease;
  width: 100%;
}
.holder .history-section .alarm-chart-bar:hover .alarm-chart-fill {
  background-color: var(--color-accent-amber);
}
.holder .history-section .alarm-chart-value {
  color: var(--color-text-secondary);
  font-size: 13px;
  margin-bottom: 6px;
}
.holder .history-section .alarm-chart-label {
  color: var(--color-text-secondary);
  font-family: "Oswald";
  font-weight: 600;
  font-size: 13px;
  margin-top: 10px;
}
.holder .history-section p.alarm-chart-caption {
  color: var(--color-text-faint);
  font-size: 13px;
  margin-bottom: 50px;
  text-align: center;
}
/* Bootstrap's own .table forces width:100%, which stretches a short
   Name/Year table (mascots.php) absurdly wide on desktop. Let it size to
   its own content instead and center it - min-width keeps a sparse
   table from shrinking too far, max-width leaves a wider table (e.g.
   top-ten-attendance.php's 7 columns) free to use the full column if it needs to. */
.holder .history-section .historic-table {
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  min-width: 55%;
  max-width: 100%;
  /* border-collapse: separate (not the default collapse) + spacing: 0
     is required for border-radius/overflow to actually round this
     table's own corners - collapse mode ignores border-radius on the
     <table> entirely, and even rounding the four corner cells
     directly (tried first) only rounded their background/outline,
     not their collapsed border line, which stayed square. Cells sit
     flush (spacing: 0) so this doesn't reintroduce visible gaps -
     adjacent cells now each draw their own 1px border rather than
     sharing one collapsed line, which in principle doubles the
     internal grid line width, but at 1px and the same light color on
     both sides it reads the same as before. */
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 3px;
  overflow: hidden;
}
.holder .history-section .historic-table caption {
  caption-side: top;
  color: var(--color-text-secondary);
  font-size: 14px;
  text-align: center;
}
.holder .history-section .historic-table th {
  background-color: var(--color-brand-red);
  border: 1px solid var(--color-brand-red);
  color: var(--color-text-inverse);
  font-family: "Roboto";
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
}
/* Explicit corner-radius on the header row's own end cells, on top of
   the table-level rounding above - normally redundant (the table's
   own overflow: hidden already clips this same corner), except on
   Top Ten Attendance, whose <caption> sits above the header row as
   part of the table's own box, ends up occupying the table's true
   top corners instead, and (being just centered text, no fill) shows
   no visible rounding there - leaving the header row's corners
   square since they're no longer at the outer edge. Needs
   border-collapse: separate (set above) to render at all; harmless
   to apply everywhere else since it just matches what the table-level
   clip already shows. */
.holder .history-section .historic-table thead tr:first-child th:first-child {
  border-top-left-radius: 3px;
}
.holder .history-section .historic-table thead tr:first-child th:last-child {
  border-top-right-radius: 3px;
}
.holder .history-section .historic-table td {
  background-color: var(--color-table-bg);
  border: 1px solid var(--color-table-border);
  color: var(--color-text-table);
  font-size: 14px;
  padding: 10px;
  vertical-align: middle;
}
.holder .history-section .historic-table tbody tr:nth-child(even) td {
  background-color: var(--color-table-bg-alt);
}
.holder .history-section .historic-table tbody tr:hover td {
  background-color: var(--color-table-bg-hover);
}
/* The decade-average rowspan cell on alarmtotals.php's table is a
   summary, not another row of data - set it apart from the regular
   grid instead of letting it blend into the zebra striping. Gray
   (not a pale yellow/amber tone) is deliberate: it needs to read as
   clearly un-reactive to row hover, and an amber-family resting
   color was too close to the hover highlight below to tell apart -
   hovering the rowspan cell's own first row (the only row it's
   actually a DOM child of) made it look like the cell itself was
   reacting, when its color was in fact already pinned. */
.holder .history-section .historic-table td[rowspan] {
  background-color: var(--color-table-bg-summary);
  color: var(--color-brand-red);
  font-family: "Oswald";
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
}
/* Needed in addition to the plain rule above: on a decade whose first
   (rowspan-owning) row lands on an even tbody row - e.g. 1930, 1950,
   1970... - the zebra-striping rule's higher specificity was winning
   over the plain td[rowspan] rule and painting it zebra-gray instead
   of this gray, even with no hover involved. */
.holder .history-section .historic-table tbody tr:nth-child(even) td[rowspan] {
  background-color: var(--color-table-bg-summary);
}
.holder .history-section .historic-table tbody tr:hover td[rowspan] {
  background-color: var(--color-table-bg-summary);
}
/* alarmtotals.php's table specifically (the alarm-history-table modifier
   keeps this off the other History tables, which rely on their Name
   column staying left-aligned). Center every data column except the
   decade-average summary, which reads better left-aligned as running
   text.

   What "Total" means for each of the two Total columns is now spelled
   out by the grouped header ("Meetings & Practices" / "Alarms"
   spanning their 3 columns each, in getAlarmHistory()) - column 5 is
   just a thin amber accent line marking the boundary between those
   two groups, not a wide blank column (that read as two separate
   tables, since Year still applies across both halves of the row).
   The thead spacer cell carries an explicit alarm-col-divider class
   (row 1's child count changes once the group headers use colspan,
   so a plain nth-child(5) would hit the wrong cell there); tbody/
   tfoot keep their normal 9-cell rows, so nth-child(5) still works
   for those. */
.holder .history-section .alarm-history-table td:not([rowspan]) {
  text-align: center;
}
.holder .history-section .alarm-history-table .alarm-col-divider,
.holder .history-section .alarm-history-table tbody tr td:nth-child(5),
.holder .history-section .alarm-history-table tfoot tr th:nth-child(5) {
  /* tbody tr td:nth-child(5) matches the zebra-striping/row-hover
     rules' specificity exactly (both 0,4,3) - needed so this wins on
     even rows and on hover instead of losing to those. */
  background-color: var(--color-accent-amber);
  border: none;
  padding: 0;
  width: 2px;
}
/* Year and Averages both rowspan the full two-row header - align them
   to the bottom (level with the Meetings/Practice/Fires/Non-Fires
   sub-header row) instead of the shared .historic-table th rule's
   default vertical-align: middle. */
.holder .history-section .alarm-history-table th.alarm-col-anchor {
  vertical-align: bottom;
}
/* Totals preview row, right after the header (getAlarmHistory()) - a
   copy of the tfoot totals so they're visible without scrolling all
   the way down. Styled to match the tfoot's th look even though these
   are plain td's (it's not part of the header, just placed right
   under it). */
.holder .history-section .alarm-history-table .alarm-totals-preview td {
  background-color: var(--color-brand-red);
  border-color: var(--color-brand-red);
  color: var(--color-text-inverse);
  font-family: "Roboto";
  font-size: 16px;
  font-weight: bold;
}
/* Without this, hovering the preview row matches the generic
   "tbody tr:hover td" rule (higher specificity than the plain rule
   above) and turns it row-hover peach instead of staying red like
   the header/footer it's meant to match. */
.holder .history-section .alarm-history-table .alarm-totals-preview tr:hover td {
  background-color: var(--color-brand-red);
}
/* join.php's member document list. */
/* Caps the intro paragraph + "Member Documents" heading + list to the
   same width as the document list itself, so the paragraph doesn't
   stretch wider than the list sitting right below it. join-doc-list's
   own max-width is now redundant with this (kept as a fallback in
   case it's ever used without this wrapper). */
.holder .history-section .join-intro-col {
  width: 500px;
  max-width: 100%;
}
/* Explicit width (not a max-width on the <img> itself) - a col-auto
   column's shrink-to-fit sizing doesn't reliably respect an image's
   max-width when computing the column's own width, and was falling
   back to the source image's full natural size (928px) instead. */
.holder .history-section .join-image-col {
  width: 380px;
  max-width: 100%;
}
.holder .history-section .join-doc-list {
  max-width: 500px;
}
.holder .history-section .join-doc-list li {
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 14px 0;
}
.holder .history-section .join-doc-list li:last-child {
  border-bottom: none;
}
.holder .history-section .join-doc-list a {
  color: var(--color-text-primary);
  font-family: "Oswald";
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.holder .history-section .join-doc-list a:hover {
  color: var(--color-accent-amber);
}
.holder .history-section .join-doc-list a i {
  color: var(--color-brand-red);
  margin-right: 10px;
  width: 18px;
  text-align: center;
}
.holder .history-section .join-doc-list .join-doc-size {
  color: var(--color-text-faint);
  font-size: 13px;
}
/* national-memorial.php's list of outbound links to the organizations
   that actually maintain national line-of-duty-death records (NFFF,
   IAFF, USFA) - same bordered-list treatment as join-doc-list above,
   plus a description line under each link since these need more
   context than a document filename does. */
.holder .history-section .external-link-list li {
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 16px 0;
}
.holder .history-section .external-link-list li:last-child {
  border-bottom: none;
}
.holder .history-section .external-link-list a {
  color: var(--color-text-primary);
  font-family: "Oswald";
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.holder .history-section .external-link-list a:hover {
  color: var(--color-accent-amber);
}
.holder .history-section .external-link-list a i {
  color: var(--color-brand-red);
  margin-right: 10px;
  width: 18px;
  text-align: center;
}
.holder .history-section .external-link-list .external-link-desc {
  color: var(--color-text-muted);
  display: block;
  font-size: 14px;
  margin-top: 6px;
}
/*RESPONSIVE*/
@media screen and (max-width: 1920px) {
	.holder .top-section .top-wrap {
	  left: -9%;
	  position: relative;
	}
}
@media screen and (max-width: 1366px) {
	.holder .top-section .top-wrap {
	  left: -9%;
	  position: relative;
	}
}
@media screen and (max-width: 1365px) {
	header .header-top ul li.facebook a {
		font-size: 40px;
	}
	header .header-top ul li.facebook {
		height: 40px;
		width: 40px;
	}
	header .header-top ul li.theme-toggle button {
		height: 40px;
		width: 40px;
		font-size: 21px;
	}
	header .mainmenu .navbar ul.navbar-nav li a {
	  padding: 15px 11px;
	}
	/* Same fixed 50px logo clearance as the base and <=1023px tiers
	   below, kept identical across all three rather than scaled with
	   each tier's shrinking link padding (23px here down to 11px). */
	header .mainmenu .navbar ul.navbar-nav.left {
	  padding-right: 50px;
	}
	header .mainmenu .navbar ul.navbar-nav.right {
	  padding-left: 50px;
	}
	header .header-top .top-contact span i {
	  font-size: 30px;
	  line-height: 2.1;
	  top: 0px;
	}
	header .header-top .top-contact span {
	  font-size: 15px;
	}
	header .header-top .top-contact a:hover {
	  text-decoration: none;
	}
	header .header-top ul li.join a {
	  font-size: 12px;
	}
	.holder .welcome-section .welcome-contents h3 span {
	  font-size: 25px;
	}
	.holder .welcome-section .welcome-contents h3 {
	  font-size: 25px;
	}
	.holder .training-section .training-contents p br{
	  display: none;
	}
	.holder .training-section .training-contents p {
	  font-size: 16px;
	}
}

@media screen and (max-width: 1023px) {
	header .mainmenu .navbar ul.navbar-nav li a {
	  font-size: 13px;
	  padding: 15px 6px;
	}
	/* Same fixed 50px logo clearance as the two tiers above - see the
	   base rule near the top of the file for the full reasoning. */
	header .mainmenu .navbar ul.navbar-nav.left {
	  padding-right: 50px;
	}
	header .mainmenu .navbar ul.navbar-nav.right {
	  padding-left: 50px;
	}
	header .header-bottom .carousel-caption h3 {
	  font-size: 38px;
	}
	header .header-bottom .carousel-caption {
	  top: 15%;
	}
	header .header-bottom .carousel-caption a {
	  font-size: 13px;
	  margin-top: 20px;
	  padding: 9px 21px;
	}
	.holder .welcome-section .welcome-contents h3 span {
	  font-size: 18px;
	}
	.holder .welcome-section .welcome-contents h3 {
	  font-size: 18px;
	}
	.holder .welcome-section .welcome-contents p {
	  font-size: 13px;
	}
	.holder .top-section .top-wrap table tr th {
	  font-size: 15px;
	}
	.holder .top-section .top-wrap table tr td {
	  font-size: 11px;
	}
	.holder .top-section .top-wrap {
	  left: -5%;
	}
	.holder .welcome-section .welcome-contents a {
	  font-size: 12px;
	}
	.holder .training-section .training-heading h3 {
	  font-size: 18px;
	}
	.holder .training-section .training-contents p {
	  font-size: 14px;
	}
	.holder .training-section .training-contents a {
	  font-size: 13px;
	}
	.holder .gallery-section .photo-heading h3 {
	  font-size: 23px;
	}
	.holder .gallery-section .photo-heading h3 span{
	  font-size: 23px;
	}
	.holder .gallery-section .view-btn a {
	  font-size: 13px;
	}
	.holder .top-section .top-wrap .table-responsive {
	  background-color: var(--color-surface-white);
	  height: auto;
	  overflow: visible;
	}
	.holder .top-section .top-wrap .logo-img img {
	  /* max-height, not height - see the base rule's comment above for
	     why (Bootstrap's img-fluid + a fixed height fight each other on
	     narrow columns). This used to be two conflicting height
	     declarations in this same media query (476px, then this 375px
	     right below it silently overriding it) - consolidated into one. */
	  max-height: 375px;
	}
	.holder .top-section .top-heading h3 {
	  font-size: 23px;
	}
	.holder .top-section .top-heading h3 span{
	  font-size: 23px;
	}
	footer .footer-top .top-wrap h3 {
	  font-size: 15px;
	  margin-bottom: 20px;
	}
	.holder .top-section .top-wrap table tr td span {
	  font-size: 11px;
	}
	footer .footer-top .footer-address ul li a {
	  font-size: 12px;
	}
	footer .footer-top .footer-menu ul li a {
	  font-size: 12px;
	}
	footer .copyrights p {
	  font-size: 12px;
	}
	header .header-bottom .carousel-caption.inner {
	  top: 35%;
	}
	.holder .history-section .history-heading h3 {
		font-size: 20px;
	}
	.holder .history-section .history-heading h3 span {
		font-size: 20px;
	}
	.holder .history-section .history-body p {
	  font-size: 14px;
	}
}
@media screen and (max-width: 767px) {
	.carousel-indicators {
	  bottom: 0px;
	}
	.carousel-indicators [data-bs-target] {
	  height: 12px;
	  width: 12px;
	}
	header .mainmenu .navbar ul.navbar-nav > li {
	  border-bottom: 1px solid var(--color-border-nav-mobile);
	  /* Positioning context for .submenu-toggle below. */
	  position: relative;
	}
	header .mainmenu .navbar ul.navbar-nav.right > li:last-child {
		border-bottom: none;
	}
	/* Reveals the caret button hidden by default (see the base rule) -
	   see nav.php for why a touchscreen needs a second, non-navigating
	   target to reach the submenu at all. */
	.mainmenu .submenu-toggle {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  appearance: none;
	  cursor: pointer;
	  background: none;
	  border: none;
	  color: var(--color-text-inverse);
	  font-size: 16px;
	  position: absolute;
	  right: 0;
	  top: 0;
	  /* Not height: 100% - the <li> grows to the submenu's full height
	     once expanded, and a 100%-tall button would stretch down with
	     it, centering the icon in the middle of that whole block
	     instead of keeping it pinned next to "History" at the top.
	     Matching the link's own vertical padding (18px, see the base
	     .nav-link rule) sizes this to just that top row instead. */
	  padding: 18px 0;
	  width: 50px;
	}
	.mainmenu .submenu-toggle i {
	  transition: transform 0.2s ease;
	}
	.mainmenu .submenu-toggle[aria-expanded="true"] i {
	  transform: rotate(180deg);
	}
	/* The flyout's desktop position: absolute overlays whatever sits
	   below it - fine when a mouse can hover it open without disturbing
	   the rest of the page, but here it needs to push the following nav
	   items down instead, the standard mobile accordion pattern. */
	.mainmenu .sub-menu {
	  position: static;
	  /* The parent <li> has its own 10px padding on all sides (see the
	     nav-item rule above), so a plain 100% width sits inset from the
	     full red bar by that same 10px on each side - bleed out past it
	     with matching negative margins so this lines up with the "History"
	     row above it instead of looking narrower. */
	  width: calc(100% + 20px);
	  margin-left: -10px;
	  margin-right: -10px;
	  min-width: 0;
	  border-radius: 0;
	  /* A little breathing room between "History" and the list below it,
	     instead of the submenu starting flush against the link's own
	     bottom edge. */
	  margin-top: 10px;
	}
	/* The collapsed mobile menu stacks both groups full-width in a single
	   column, not side-by-side around the logo - so the left/right
	   clearance padding from the desktop layout (see the base .left/.right
	   rules above) needs to be zeroed out here, or it just indents the
	   second group relative to the first. */
	header .mainmenu .navbar ul.navbar-nav.left {
	  padding-right: 0;
	}
	header .mainmenu .navbar ul.navbar-nav.right {
	  margin-left: 0;
	  padding-left: 0;
	}
	header .mainmenu .navbar ul.navbar-nav li a {
	  text-align: center;
	}
	.holder .training-section .training-contents p {
	  font-size: 13px;
	}
	.holder .top-section .top-wrap {
	  left: 0;
	}
	.holder .top-section .top-wrap .logo-img {
	  left: 0;
	  margin: auto;
	  position: relative;
	  right: 0;
	  top: 0;
	}
	.holder .top-section .top-wrap .table-responsive {
	  height: auto;
	  overflow: auto;
	}
	.holder .top-section .top-wrap table tr td {
	  font-size: 14px;
	}
	.holder .top-section .top-wrap table tr td span{
	  font-size: 14px;
	}
	.holder .top-section .top-wrap table tr th {
	  font-size: 15px;
	}
	.holder .top-section .top-wrap .logo-img img {
	  height: auto;
	  margin-bottom: 40px;
	  width: 30%;
	}
	header .header-bottom .carousel-caption.inner {
	  top: 25%;
	}
	
}
@media screen and (max-width: 576px) {
	header .header-middle .logo img {
		display: inline-block;
		position: relative;
		width: 20%;
		top: 5px;
	}
	.navbar-toggler {
	  border: medium none;
	}
	header .mainmenu .navbar ul.navbar-nav li a {
	  text-align: left;
	}
	header .header-top .join-links {
	  text-align: center;
	}
	/* .top-contact (Contact Us + Emergency, two lines) and .join-links
	   (Join Now!/Facebook, one line) are plain Bootstrap row/col
	   siblings with no vertical-alignment rule between them - fine on
	   desktop where .top-contact usually fits on one line too, but at
	   this width it wraps to two, so the single-line .join-links column
	   was sitting flush to the row's top instead of centered against
	   the now-taller sibling next to it. */
	header .header-top .top-wrap .row {
	  align-items: center;
	}
	header .header-top .top-contact span {
	  font-size: 12px;
	}
	header .header-top ul li.join a {
	  /* Tighter padding/margin than the base rule's (12px/10px) - adding
	     the theme toggle as a 3rd item in this row pushed the total past
	     this breakpoint's available width, with Facebook's icon paying
	     for it by overflowing past the container's own right edge.
	     Reclaims 18px this way rather than shrinking the icons further
	     (already down to 33px, close to a reasonable minimum tap
	     target) or dropping the "Join Now!" text (a primary CTA losing
	     its label isn't a great tradeoff just for a few px). */
	  font-size: 10px;
	  padding: 8px 6px;
	  margin-right: 4px;
	}
	header .header-top ul li.facebook a {
	  font-size: 33px;
	}
	header .header-top ul li.facebook {
	  height: 33px;
	  width: 33px;
	}
	header .header-top ul li.theme-toggle button {
	  height: 33px;
	  width: 33px;
	  font-size: 17px;
	}
	header .mainmenu .navbar ul.navbar-nav li a {
	  font-size: 13px;
	  padding: 5px 0;
	}
	header .mainmenu .navbar ul.navbar-nav.left > li {
	  padding: 10px;
	}
	header .mainmenu .navbar ul.navbar-nav.right > li {
	  padding: 10px;
	}
	header .mainmenu .navbar ul.navbar-nav.right {
	  margin-left: 0px;
	}
	header .header-top .join-links {
	  margin: 5px 0;
	}
	header .header-bottom .carousel-caption {
	  top: 0%;
	}
	header .header-bottom .carousel-caption h3 {
	  font-size: 20px;
	  margin: 0px;
	}
	header .header-bottom .carousel-caption a {
	  font-size: 10px;
	  margin-top: 5px;
	  padding: 6px 15px;
	}
	.holder .welcome-section {
	  padding: 30px 0 50px;
	}
	.holder .welcome-section .welcome-contents {
		margin-bottom: 30px;
	}
	.holder .welcome-section .welcome-contents h3 {
	  line-height: 1.7;
	  margin-bottom: 10px;
	}
	.holder .training-section {
	  padding: 40px 0 60px;
	}
	.holder .training-section .training-contents {
		margin-bottom: 30px;
	}
	.holder .gallery-section {
	  padding: 40px 0;
	}
	.holder .gallery-section .photo-heading h3 {
	  text-align: center;
	}
	.holder .gallery-section .view-btn {
	  text-align: center;
	}
	.holder .gallery-section .gallery-img {
		margin-bottom: 30px;
	}
	.holder .top-section .top-wrap {
	  left: 0;
	}
	.holder .top-section .top-wrap .logo-img {
	  left: 0;
	  margin: auto;
	  position: relative;
	  right: 0;
	  top: 0;
	}
	.holder .top-section .top-wrap table tr td {
	  font-size: 14px;
	}
	.holder .top-section .top-wrap table tr td span{
	  font-size: 14px;
	}
	.holder .top-section .top-wrap table tr th {
	  font-size: 15px;
	}
	.holder .top-section .top-wrap .logo-img img {
	  height: auto;
	  margin-bottom: 40px;
	  width: 40%;
	}
	footer .copyrights p {
	  font-size: 10px;
	}
	header .header-bottom .carousel-caption.inner {
	  top: 15%;
	}
}

@media screen and (max-width: 320px) {
	/* The ≤576px tier's own trim (join a's padding/margin) wasn't
	   enough at this narrowest tier - measured live: Facebook's icon
	   still ran ~18px past the header-top .container's own right edge.
	   Trims further here rather than pushing the ≤576px values down
	   further still (they're shared with everything down to 577px,
	   where they're already right-sized) - this deliberately-empty
	   breakpoint was already reserved for exactly this kind of
	   narrowest-device fix. */
	header .header-top ul li.join a {
		padding: 6px 4px;
		margin-right: 2px;
		font-size: 9px;
	}
	header .header-top ul li.facebook {
		height: 28px;
		width: 28px;
	}
	header .header-top ul li.facebook a {
		font-size: 28px;
	}
	header .header-top ul li.theme-toggle button {
		height: 28px;
		width: 28px;
		font-size: 15px;
	}
}