/*
 * Jim & Tim — Section Styles
 * wavlt-network child theme | jnt-sections.css
 * Version: 1.0.1
 * Site: dev.jimntim.com → jimntim.com
 *
 * ARCHITECTURE RULE: This file is Jim & Tim ONLY.
 * No rules in this file may reference or affect:
 *   - gcs-sections.css
 *   - gcs-header.css
 *   - wavlt-goodrichcaroling.json
 *   - Any Goodrich Caroling or other spoke site
 *
 * Token reference (from wavlt-jimntim.json):
 *   --wp--preset--color--brand             #800001  Dark Red
 *   --wp--preset--color--brand-accent      #FAF8F5  Warm White
 *   --wp--preset--color--brand-alt         #663399  Royal Purple
 *   --wp--preset--color--brand-alt-accent  #FAF8F5  Warm White
 *   --wp--preset--color--contrast          #1A1A1A  Near Black
 *   --wp--preset--color--contrast-accent   #999999  Light Gray (dark bg ONLY)
 *   --wp--preset--color--base              #FAF8F5  Warm White
 *   --wp--preset--color--base-accent       #333333  Dark Gray
 *   --wp--preset--color--tint              #F0EEF0  Lavender Mist
 *   --wp--preset--color--border-base       #ffcc00  Gold
 *   --wp--preset--color--border-contrast   #996600  Dark Gold
 *
 *   --wp--preset--font-family--lora        Lora, Georgia, Times New Roman, serif
 *   --wp--preset--font-family--raleway     Raleway, Trebuchet MS, Arial, sans-serif
 *
 * Usage rules enforced by this file:
 *   - contrast-accent (#999999) — dark backgrounds ONLY, never on light
 *   - brand-alt (#663399)       — light backgrounds ONLY, never on #1A1A1A
 *   - border-base (#ffcc00)     — decorative/borders ONLY, never body text on light
 */


/* ============================================================
   @FONT-FACE DECLARATIONS
   Self-hosted woff2 — no Google Fonts CDN dependency
   WAVLT Network standard: all fonts self-hosted
   font-display: swap — required for Core Web Vitals / LCP
   Path: /wp-content/themes/wavlt-network/fonts/
   Version: v37
   ============================================================ */

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lora-v37-latin-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Lora';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lora-v37-latin-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/lora-v37-latin-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Lora';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/lora-v37-latin-700italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/raleway-v37-latin-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/raleway-v37-latin-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/raleway-v37-latin-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/raleway-v37-latin-500italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/raleway-v37-latin-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/raleway-v37-latin-600italic.woff2') format('woff2');
}


/* ============================================================
   GLOBAL BASE — Jim & Tim
   Body, text, background
   ============================================================ */

body.jimntim,
.jimntim body {
	font-family: var(--wp--preset--font-family--lora);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}


/* ============================================================
   TYPOGRAPHY — FLUID SCALE
   CSS clamp() — mobile-first, no media query required
   Mobile min → Desktop max
   WCAG: 18px minimum body text
   ============================================================ */

body {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* 18px → 20px */
	line-height: 1.7;
}

h1 {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 700;
	font-size: clamp(2.5rem, 2rem + 2vw, 4rem); /* 40px → 64px */
	line-height: 1.15;
}

h2 {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 700;
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); /* 28px → 36px */
	line-height: 1.2;
}

h3 {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 700;
	font-size: clamp(1.375rem, 1.25rem + 0.75vw, 1.75rem); /* 22px → 28px */
	line-height: 1.25;
}

h4 {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 700;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18px → 22px */
	line-height: 1.3;
}

h5, h6 {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 400;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16px → 18px */
	line-height: 1.4;
}


/* ============================================================
   LINKS — LIGHT BACKGROUNDS
   Royal Purple #663399 on Base #FAF8F5 = 7.93:1 AAA
   Royal Purple #663399 on Tint #F0EEF0 = 7.28:1 AAA
   Underline satisfies WCAG 1.4.1 non-color distinction
   ============================================================ */

a:link {
	color: var(--wp--preset--color--brand-alt);
	text-decoration: underline;
}

a:visited {
	color: var(--wp--preset--color--brand-alt);
	text-decoration: underline;
}

a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

a:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   LINKS — DARK BACKGROUNDS (contrast sections, hero)
   Royal Purple #663399 on #1A1A1A = 2.07:1 FAIL
   Warm White #FAF8F5 on #1A1A1A = 16.42:1 AAA
   Gold #ffcc00 on #1A1A1A = 11.51:1 AAA (hover only)
   ============================================================ */

.has-contrast-background-color a:link,
.has-contrast-background-color a:visited,
.wp-block-cover a:link,
.wp-block-cover a:visited {
	color: var(--wp--preset--color--brand-accent);
	text-decoration: underline;
}

.has-contrast-background-color a:hover,
.wp-block-cover a:hover {
	color: var(--wp--preset--color--border-base);
	text-decoration: underline;
}

.has-contrast-background-color a:focus,
.wp-block-cover a:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   LINKS — BRAND RED BACKGROUNDS
   Warm White #FAF8F5 on Brand #800001 = 10.33:1 AAA
   Gold #ffcc00 on Brand #800001 = 3.26:1 AA large only (hover)
   ============================================================ */

.has-brand-background-color a:link,
.has-brand-background-color a:visited {
	color: var(--wp--preset--color--brand-accent);
	text-decoration: underline;
}

.has-brand-background-color a:hover {
	color: var(--wp--preset--color--border-base);
	text-decoration: underline;
}

.has-brand-background-color a:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   NAVIGATION
   Raleway 500 — nav standard
   Touch targets: 44×44px minimum (WCAG 2.5.5)
   ============================================================ */

.wp-block-navigation a {
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 500;
	text-decoration: none;
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
}

.wp-block-navigation a:hover {
	color: var(--wp--preset--color--border-base);
	text-decoration: none;
}

.wp-block-navigation a:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   BUTTONS
   Raleway 600 — UI standard
   Touch targets: 44×44px minimum (WCAG 2.5.5)
   Brand Red bg + Warm White text = 10.33:1 AAA
   Hover: Brand Alt bg + Warm White text = 7.93:1 AAA
   ============================================================ */

.wp-block-button__link,
.wp-element-button {
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 600;
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-accent);
	border: 2px solid transparent;
	min-height: 44px;
	padding: 0.625rem 1.5rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--wp--preset--color--brand-alt);
	color: var(--wp--preset--color--brand-alt-accent);
	border-color: transparent;
}

.wp-block-button__link:focus,
.wp-element-button:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   SECTION BACKGROUNDS
   Tint (#F0EEF0) — alternate sections, subtle zone separation
   contrast-accent (#999999) scoped to dark bg ONLY
   Gold (#ffcc00) — decorative/borders ONLY, never body text on light
   ============================================================ */

.has-tint-background-color {
	background-color: var(--wp--preset--color--tint);
}

/* Muted text: dark bg only — enforces usage rule */
.has-contrast-background-color .has-contrast-accent-color {
	color: var(--wp--preset--color--contrast-accent);
}

/* Gold as border/decorative element — block-level */
.jnt-gold-border {
	border-color: var(--wp--preset--color--border-base);
}

/* Gold on dark bg (decorative) — AAA 11.51:1 */
.has-contrast-background-color .jnt-gold-accent {
	color: var(--wp--preset--color--border-base);
}


/* ============================================================
   IMAGES — LAZY LOAD EXCLUSIONS
   LiteSpeed filter targets img tag classes directly.
   TEC uses PNG base64 placeholders (independent of LiteSpeed GIF).
   Exclusions added via PHP filter in functions.php — not CSS.
   This comment block is a placeholder for future lazy load work.
   ============================================================ */


/* ============================================================
   TOUCH TARGETS — GLOBAL ENFORCEMENT
   WCAG 2.5.5: 44×44px minimum on all interactive elements
   ============================================================ */

button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
label[for] {
	min-height: 44px;
	min-width: 44px;
}


/* ============================================================
   HEADER — JNT HEADER BAR
   v1.0.1 additions
   Background: Base #FAF8F5 — logo fully visible on warm white
   Sticky: locks at top on scroll, pushes content down (a11y preferred)
   Gold bottom border: decorative rule only
   z-index 100: above page content, below overlays/modals
   ============================================================ */

.jnt-header-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: 60px;
}


/* ============================================================
   HEADER — LOGO TOUCH TARGET
   WCAG 2.5.5: 44×44px minimum
   Logo block width set to 44 in block attrs — CSS enforces
   the link wrapper meets the touch target requirement
   ============================================================ */

.jnt-nav-logo a,
.jnt-nav-logo .wp-block-site-logo a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}


/* ============================================================
   HEADER — SITE TITLE
   Color: Contrast #1A1A1A on Base #FAF8F5 = 16.42:1 AAA
   Touch target: padding ensures 44px minimum height (WCAG 2.5.5)
   No underline on site title link — not a body content link
   font-variant: small-caps — Lora supports true small caps
   ============================================================ */

.jnt-nav-title a,
.jnt-nav-title a:link,
.jnt-nav-title a:visited {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.jnt-nav-title a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.jnt-nav-title a:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   HEADER — NAV LINKS ON LIGHT BACKGROUND
   #1A1A1A on #FAF8F5 = 16.42:1 AAA
   Hover: Brand Red #800001 on Base = 10.33:1 AAA
   Override any global link color that bleeds into nav context
   ============================================================ */

.jnt-header-bar .wp-block-navigation a,
.jnt-header-bar .wp-block-navigation a:link,
.jnt-header-bar .wp-block-navigation a:visited {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.jnt-header-bar .wp-block-navigation a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.jnt-header-bar .wp-block-navigation a:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   HEADER — BOOK US BUTTON
   Brand Red #800001 bg + Brand Accent #FAF8F5 text = 10.33:1 AAA
   Raleway 600 uppercase — UI standard
   Touch target: min-height 44px (WCAG 2.5.5)
   Hover: Brand Alt #663399 bg = 7.93:1 AAA
   ============================================================ */

.jnt-nav-cta .wp-block-button__link,
.jnt-nav-cta.wp-block-button .wp-block-button__link {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 0.5rem 1.25rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}