/* ==========================================================================
   ADA audit fixes (Smoky Mountains / Blount Tourism, July 2026 audit)

   Hand-maintained. Not produced by gulp, so a rebuild never touches it.
   Enqueued in functions/enqueue-scripts.php as 'ada-css', after 'site-css'.

   Why not new-styles.css: header.php links new-styles.css with
   media="print" onload="this.media='all'". On the live site the CSS
   optimiser combines that file into a bundle wrapped in @media print {} and
   drops the onload swap, so nothing in new-styles.css reaches the screen.
   Rules here must therefore work whether or not new-styles.css applies, which
   is why a few of them carry !important: they have to beat new-styles.css's
   own !important rules in case it ever loads again.

   Contrast ratios are WCAG 2 relative-luminance ratios, measured against the
   real background of each element.
   ========================================================================== */


/* --------------------------------------------------------------------------
   #2 CTA Newsletter
   -------------------------------------------------------------------------- */

/* Submit button text. new-styles.css forces black text (4.09:1 on the
   #447a3b background the block sets inline). White gives 5.13:1, and 4.86:1
   on the #956922 hover. Two IDs, so it wins over new-styles.css's one. */
body .cta .container .row #gform_wrapper_1.gform_wrapper form .gform_footer #gform_submit_button_1,
body .cta .container .row #gform_wrapper_1.gform_wrapper form .gform_footer #gform_submit_button_1:hover,
body .cta .container .row #gform_wrapper_1.gform_wrapper form .gform_footer #gform_submit_button_1:focus {
	color: #fff !important;
}

/* "Join Our Email List" was promoted from h3 to h2. The block's inline
   <style> kept it white with ".row h3 { color: #fff !important }", which no
   longer matches, and new-styles.css sets "h2 { color: #537B88 !important }",
   which would put teal text on the dark photo. Keep it white. */
.cta-newsletter .container .row h2.white {
	color: #fff !important;
}

/* The stylesheet sized the heading by element name. Reproduce the h3 sizing
   it had: 1.5rem, the responsive calc below 1200px, and 22px on phones. */
.cta-newsletter .container .row h2 {
	font-size: 1.5rem;
	font-weight: 300;
	margin-bottom: 0;
}

@media (max-width: 1200px) {
	.cta-newsletter .container .row h2 {
		font-size: calc(1.275rem + 0.3vw);
	}
}

@media (max-width: 767.98px) {
	.cta-newsletter .container .row h2 {
		font-size: 22px;
	}
}


/* --------------------------------------------------------------------------
   #3 Links in editorial copy
   The link colour sits at roughly 1:1 against the body text and
   "a { text-decoration: none }" is global, so a link inside a paragraph is
   indistinguishable from the text around it (WCAG 1.4.1). Underline them.

   Scoped to a:not([class]) inside p/li in the content wrappers. Links typed in
   the editor carry no class, while every component link in the theme has one
   (button, slide-link, stretched-link, lmore, ...), so buttons, cards and nav
   are left alone.
   -------------------------------------------------------------------------- */
.inner-content p a:not([class]),
.inner-content li a:not([class]),
.entry-content p a:not([class]),
.entry-content li a:not([class]),
.content-wrapper p a:not([class]),
.content-wrapper li a:not([class]) {
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   #4 Category Slider controls (#cat-carousel)
   The arrows were Bootstrap's white chevrons at opacity .5 over the slide
   image and text, and Bootstrap removes their focus outline. The dots were
   #cecfd0, 1.56:1 on white. Non-text controls need 3:1 (WCAG 1.4.11).

   The arrows move off the slide into the dot row, bottom right, as 32px
   round buttons: #414141 chevron (10.2:1 on white), #757575 border (4.61:1),
   full opacity, visible focus ring. The dots stay where they were.
   -------------------------------------------------------------------------- */
#cat-carousel .carousel-control-prev,
#cat-carousel .carousel-control-next {
	top: auto;
	bottom: -10px;
	left: auto;
	width: 32px;
	height: 32px;
	background: #fff;
	border: 1px solid #757575;
	border-radius: 50%;
	opacity: 1;
	z-index: 16;
}

#cat-carousel .carousel-control-next {
	right: 15px;
}

#cat-carousel .carousel-control-prev {
	right: 55px;
}

#cat-carousel .carousel-control-prev-icon,
#cat-carousel .carousel-control-next-icon {
	width: 14px;
	height: 14px;
}

#cat-carousel .carousel-control-prev:focus,
#cat-carousel .carousel-control-next:focus {
	outline: 2px solid #414141;
	outline-offset: 2px;
}

#cat-carousel .carousel-control-prev-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23414141' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

#cat-carousel .carousel-control-next-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23414141' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

/* Dots. Three things were wrong after the first pass:
   - Bootstrap keeps inactive indicators at opacity .5, so #757575 rendered as
     roughly #bababa on white (~1.9:1). Opacity is now 1.
   - This id-scoped rule also outranked the theme's `li.active` style, so every
     dot looked the same and the current slide was not shown at all.
   - They were bare <li>s: not focusable and unnamed. Each now holds a
     <button> (see cat-carousel*.php) with a 24px hit area (WCAG 2.5.8); the
     wider margin keeps the targets from overlapping.
   Inactive: solid #757575 (4.61:1 on white). Current: white centre with a 2px
   #457A3B ring (5.12:1), the theme's own active style made heavier. */
#cat-carousel .indicator-row .carousel-indicators li {
	position: relative;
	margin: 0 6px;
	border: 1px solid #757575;
	background-color: #757575;
	opacity: 1;
}

#cat-carousel .indicator-row .carousel-indicators li.active {
	width: 10px;                       /* 10 + 2 x 2px border = same 14px as inactive */
	height: 10px;
	border: 2px solid #457A3B;
	background-color: #fff;
}

#cat-carousel .indicator-row .carousel-indicators li button {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

#cat-carousel .indicator-row .carousel-indicators li button:focus {
	outline: 2px solid #414141;
	outline-offset: 0;
}

/* Stacked layout: keep the slide text clear of the dot/arrow row. */
@media (max-width: 991.98px) {
	#cat-carousel .carousel-item .row > div:last-child {
		padding-bottom: 40px;
	}
}

@media (max-width: 767.98px) {
	#cat-carousel .carousel-control-prev,
	#cat-carousel .carousel-control-next {
		bottom: -40px;             /* the dot row hangs 30px below here */
	}

	#cat-carousel {
		margin-bottom: 20px;
	}
}

/* Slide titles are now real headings (<h2|h3 class="h4">). No margin-top so
   the rendered result matches the old <a class="h4">. */
#cat-carousel .carousel-inner .h4 {
	margin-top: 0;
}


/* --------------------------------------------------------------------------
   #5 Passport page -- Bandwango listing links
   The Bandwango script injects its markup into the page (no iframe) along with
   a <style> of ".bw-whats-included-txt a { color: #e87b36 !important }" and
   similar. #e87b36 is 2.87:1 on the white listing. The audit's #60765E gives
   4.94:1. Prefixing the block's own wrapper class out-specifies their
   !important rules.
   -------------------------------------------------------------------------- */
.bandwango-elements .bw-whats-included-txt a,
.bandwango-elements .bw-vl--description--btn,
.bandwango-elements .bw-vl-map__button,
.bandwango-elements .bw-show-more-less,
.bandwango-elements .bw-hours-text-container {
	color: #60765E !important;
	fill: #60765E !important;
}


/* --------------------------------------------------------------------------
   #7 / #8 Hero H1s that wrap the hero's text image
   Where a hero shows its title as an image, the h1 now wraps that image (its
   alt is the title), replacing the old screen-reader-only h1. Keep the h1 from
   adding any space around the image.
   -------------------------------------------------------------------------- */
.sub-header h1.hero-title-img,
.text-poster-header h1.hero-title-img {
	margin: 0;
	font-size: inherit;
	line-height: 0;
}


/* --------------------------------------------------------------------------
   #9 Media room contrast
   The search panel sits on #e7e9f2; the article cards are white.
   -------------------------------------------------------------------------- */

/* Keyword / Date labels: #457a3b is 4.23:1 on #e7e9f2. #476976 -> 4.88:1. */
body .media-room-archive-wrapper #media-room-search #mediaRoomForm .form-group label {
	color: #476976;
}

/* Pagination numbers -> #476976 as the audit asked (4.88:1 on #e7e9f2).
   The compiled #414141 already passed, but new-styles.css forces #60765E
   !important on ".pagination li a", which is 4.08:1 here. */
.media-room-archive-wrapper .pagination li a:not(.next):not(.prev) {
	color: #476976 !important;
}

/* Pagination ellipsis. ".pagination li span" paints every span as the green
   current-page box, so the "..." rendered #414141 on #60765E (2.07:1) and looked
   like a second current page. Plain text on the page instead: 8.43:1 on #e7e9f2. */
.pagination li span.dots {
	background-color: transparent !important;
	border-color: transparent !important;
	color: #414141 !important;
}

/* Article dates and Read More: #ca7728 is 3.40:1 on the white card. #3a6632
   is 6.72:1 on white and still 5.54:1 if a card ever sits on the gray. */
body .media-room-archive-wrapper main article .text-col time,
body .media-room-archive-wrapper main article .text-col .slide-link,
body .media-room-archive-wrapper .pagination li a.next,
body .media-room-archive-wrapper .pagination li a.prev {
	color: #3a6632;
}

/* new-styles.css forces #60765E !important on every ".pagination li a", which
   beat the rule above for the arrows (they still passed, at 4.08:1). */
body .media-room-archive-wrapper .pagination li a.next,
body .media-room-archive-wrapper .pagination li a.prev {
	color: #3a6632 !important;
}


/* --------------------------------------------------------------------------
   #13 Team page
   /team/ is rendered by page-team.php, whose inline <style> carries the tab
   and Learn More colours (fixed at source there). These rules cover
   archive-personnel.php, which shares the markup but has no inline style.
   -------------------------------------------------------------------------- */
body #team-main .team-tabs .nav-item .nav-link {
	color: #757575;                    /* was #979797, 2.92:1 -> 4.61:1 */
}

body #team-main .team-tabs .nav-item .nav-link.active,
body #team-main .tab-content .tab-pane .team-grid .lmore {
	color: #AC6522;                    /* was #ca7728, 3.40:1 -> 4.53:1 */
}

/* Staff names went from h3 to p.h3; keep the green the h3 had
   (#457a3b, 5.12:1 on the white card). */
.team-grid .profile-title {
	color: #457a3b;
}


/* --------------------------------------------------------------------------
   #14 POI listings -- modal title and city
   The attraction modal title (was h3) and the city line (was h4, from
   parts/vendor-info.php) are no longer headings. Keep their old look.
   -------------------------------------------------------------------------- */
.attr-info-modal .modal-inner .modal-body .attr-info-title {
	margin-bottom: 5px;
}

.attr-info-modal .modal-inner .modal-body .attr-info-title,
.info .vendor-city {
	color: #457a3b;                    /* the h2,h3,h4 colour they had; 5.12:1 on white */
}

.attr-info-modal .modal-inner .modal-body .vendor-city {
	font-size: 80%;
	margin: 0;
}

.single-vendor .inner-content .info .vendor-city {
	font-size: 16px;
	font-weight: 500;
}