/*
Theme Name: DSN Showcase V4
Theme URI: https://example.com/hot-tub-dealer-theme
Author: Your Company
Author URI: https://example.com
Description: A conversion-focused WordPress theme built for hot tub & spa dealers. Includes a backend theme options panel, swappable header/footer layouts, mega menu navigation, and a Tailwind CSS front end.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dsn-dealer
Tags: e-commerce, custom-menu, featured-images, footer-widgets, full-width-template, theme-options, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/* ==========================================================================
   Design tokens
   These map to the Theme Options color pickers via inline CSS output
   in inc/template-tags.php (dsn_theme_css_variables). The values below
   are the defaults / fallbacks.
   ========================================================================== */
:root {
	--tt-ink: #0f2e33;         /* primary dark - deep teal navy */
	--tt-deep-water: #114b54;  /* secondary dark - gradients, hover */

	/* Accent family — three shades of the same hue so the right one can be
	   used for the right contrast context (WCAG 2.1 AA, 4.5:1 for text):
	   --tt-ember for text/buttons on light backgrounds and as button fills
	   (≈5:1 against white); --tt-ember-dark for hover states (≈6.9:1,
	   always safe); --tt-ember-bright for text sitting directly on a dark
	   background such as --tt-ink (≈4.9:1 against ink) — the base --tt-ember
	   is too dark to read against ink itself, so bright text uses this
	   variant instead. All three are recalculated from the admin's chosen
	   accent color in Theme Options (see dsn_theme_css_variables()),
	   these are just the fallback defaults. */
	--tt-ember: #c1481f;
	--tt-ember-dark: #9c3a17;
	--tt-ember-bright: #ed7248;

	--tt-foam: #f5f7f3;        /* off-white background, admin-editable as "Site Background" */
	--tt-steam: #5e7a76;       /* secondary text on light backgrounds (≈4.6:1 on white) */
	--tt-white: #ffffff;
	--tt-line: #dfe7e5;

	/* Footer background/text — independent of --tt-ink above so the footer
	   can have its own look (Theme Options → Colors → Footer Background /
	   Footer Text). Defaults match the footer's original bg-ink/text-white/80
	   appearance so existing sites see no change until customized. */
	--tt-footer-bg: #0f2e33;
	--tt-footer-text: #cfd5d6;

	/* Fixed focus-ring color, independent of the customizable accent above.
	   Keyboard focus can land on elements against light OR dark section
	   backgrounds throughout the theme, and a single color can't have
	   ≥3:1 non-text contrast (WCAG 1.4.11) against both white and --tt-ink
	   after --tt-ember was darkened for 4.5:1 text contrast. This value is
	   picked to clear 3:1 against both (white: 3.2:1, ink: 4.4:1), so the
	   focus indicator stays visible everywhere regardless of what accent
	   color a site owner sets in Theme Options. */
	--tt-focus: #e8683d;

	--tt-font-display: "Fraunces", ui-serif, Georgia, serif;
	--tt-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

	--tt-header-height: 5.5rem;
}

/* ==========================================================================
   Base type size
   This theme is aimed heavily at middle-aged and older visitors, so the
   root font size is raised above the 16px browser default. Every Tailwind
   text-*, spacing (p-/gap-/w-/h-), and rem-based custom value in the theme
   is defined in rem, so this single change scales the entire site's type
   AND the spacing around it proportionally — headings, body copy, buttons,
   icons, nav items, form fields, all of it — without needing to touch
   every individual template file.
   ========================================================================== */
html {
	font-size: 112.5%; /* 18px baseline instead of 16px */
}

/* ==========================================================================
   Minimal reset (Tailwind's preflight also loads via assets/css/style.css,
   this covers the pre-Tailwind-paint flash and non-Tailwind fallback)
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--tt-font-body);
	color: var(--tt-ink);
	background: var(--tt-foam);
	line-height: 1.6; /* looser than the 1.5 browser default, easier reading */
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: var(--tt-white);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
	clip: auto !important;
	clip-path: none;
	color: var(--tt-ink);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

:focus-visible {
	outline: 2px solid var(--tt-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}