/* =========================================================
   compact-pass.css — typography + spacing tightening pass.
   Loaded LAST so it overrides theme.css, glass-redesign.css,
   premium-chrome.css and homepage-pro.css.

   Goals (matching the notout5 / glass-2026 reference rhythm):
   - h1/h2/h3 reduced ~30% so each section fits one viewport
   - hero padding cut from clamp(4rem,10vw,8rem) to ~3rem max
   - section padding tightened across every page template
     (front page, about, FAQ, contact, blog, single, etc.)
   - mobile-safe button colours so iOS Safari and Chrome
     data-saver render brand colours instead of system blue
   ========================================================= */

/* -------- 1. UNIVERSAL TYPOGRAPHY BASELINE --------
   Targets every heading regardless of page template. Uses
   body-prefix + !important so it beats glass-redesign.css
   line 91-96 (h1=4.5rem, h2=2.75rem, h3=1.75rem) and
   homepage-pro.css's !important .pro-home rules. */
body, html {
	font-size: 16px !important;
}
body h1 { font-size: clamp(2rem, 4.4vw, 3.4rem) !important; line-height: 1.05 !important; }
body h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem) !important; line-height: 1.12 !important; }
body h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem) !important; line-height: 1.2 !important; }
body h4 { font-size: 1rem !important; line-height: 1.3 !important; }
body h5 { font-size: .92rem !important; }
body h6 { font-size: .82rem !important; }
body p, body li, body .lead, body .entry-content p { font-size: .95rem !important; line-height: 1.6 !important; }
body small { font-size: .82rem !important; }

/* -------- 2. PAGE-SPECIFIC HERO TITLES --------
   homepage-pro.css carries !important on these. Repeat with
   higher specificity to win. */
.pro-home h1, body.pro-home h1            { font-size: clamp(1.8rem, 3.6vw, 2.8rem) !important; }
.pro-home h2, body.pro-home h2            { font-size: clamp(1.4rem, 2.6vw, 2rem) !important; }
.pro-home h3, body.pro-home h3            { font-size: clamp(1.05rem, 1.8vw, 1.3rem) !important; }
.pro-home h4, body.pro-home h4            { font-size: clamp(.95rem, 1.4vw, 1.05rem) !important; }
.pro-hero h1                               { font-size: clamp(1.6rem, 3vw, 2.4rem) !important; margin-bottom: .85rem !important; }
.pro-hero p.lead                           { font-size: .95rem !important; margin-bottom: 1rem !important; }
.pro-section h2, .pro-app h2,
.pro-final h2, .pro-urgency h2,
.pro-hero-v2 h1                            { font-size: clamp(1.4rem, 2.6vw, 2rem) !important; }
.pro-hero-v2 .lead                         { font-size: .95rem !important; margin-bottom: 1.25rem !important; }

/* -------- 3. SECTION SPACING (every page) -------- */

/* glass-redesign.css line 304 — the main offender */
.home .entry-header,
.home .page-header,
.hero, .hero-section {
	padding: clamp(1.5rem, 3.4vw, 3rem) 1.25rem !important;
}

/* homepage-pro front-page sections */
.pro-section    { padding: clamp(1.25rem, 2.8vw, 2.25rem) 0 !important; }
.pro-hero       { padding: clamp(1.75rem, 3.6vw, 3rem) 0 !important; }
.pro-hero-v2    { padding: clamp(1.5rem, 3.2vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem) !important; }
.pro-app        { padding: clamp(1.25rem, 2.8vw, 2.25rem) !important; }
.pro-final      { padding: clamp(1.25rem, 2.8vw, 2.25rem) 1.25rem !important; }
.pro-urgency    { padding: clamp(1.25rem, 2.8vw, 2.25rem) 1.25rem !important; }
.pro-hero-winza { padding: clamp(1.75rem, 3.6vw, 2.75rem) 0 clamp(1.25rem, 2.4vw, 1.75rem) !important; }
.pro-section__head { margin-bottom: clamp(.85rem, 1.6vw, 1.25rem) !important; }

/* FAQ + Contact pages have their own wrapper classes */
.faq-hero, .contact-hero {
	padding: clamp(1.75rem, 3.6vw, 3rem) 1.25rem clamp(1rem, 2vw, 1.5rem) !important;
}
.faq-page section, .contact-page section {
	padding-top: clamp(1.25rem, 2.6vw, 2rem) !important;
	padding-bottom: clamp(1.25rem, 2.6vw, 2rem) !important;
}

/* Premium-chrome footer CTA strip */
.px-foot-cta { padding: clamp(1.25rem, 2.4vw, 2rem) 1.25rem !important; }

/* Generic section + section + section dividers in WP content */
.entry-content section, .entry-content .section { padding: clamp(1rem, 2vw, 1.5rem) 0 !important; }

/* Site footer */
.site-footer, footer.site-footer {
	padding: clamp(1.25rem, 2.8vw, 2.25rem) 1.25rem 1.25rem !important;
	margin-top: 2rem !important;
}

/* -------- 4. MOBILE BREAKPOINTS -------- */
@media (max-width: 900px) {
	body h1 { font-size: clamp(1.6rem, 5vw, 2.25rem) !important; }
	body h2 { font-size: clamp(1.3rem, 3.8vw, 1.8rem) !important; }
	body h3 { font-size: clamp(1rem, 2.4vw, 1.2rem) !important; }
	.pro-section, .pro-app, .pro-final, .pro-urgency, .pro-hero-winza,
	.faq-hero, .contact-hero, .home .entry-header, .home .page-header,
	.hero, .hero-section { padding: clamp(1rem, 3.2vw, 1.75rem) 1.25rem !important; }
	.pro-hero, .pro-hero-v2 { padding: clamp(1.25rem, 4vw, 2rem) 0 !important; }
}

@media (max-width: 480px) {
	body h1 { font-size: clamp(1.4rem, 6vw, 1.85rem) !important; }
	body h2 { font-size: clamp(1.15rem, 4.6vw, 1.55rem) !important; }
	body h3 { font-size: clamp(.98rem, 3.6vw, 1.1rem) !important; }
	body p, body .lead { font-size: .9rem !important; line-height: 1.55 !important; }
	.pro-section, .pro-app, .pro-final, .pro-urgency, .pro-hero-winza,
	.faq-hero, .contact-hero, .home .entry-header, .home .page-header,
	.hero, .hero-section { padding: clamp(.85rem, 3.6vw, 1.4rem) 1rem !important; }
	.pro-hero, .pro-hero-v2 { padding: clamp(1rem, 4.4vw, 1.65rem) 0 !important; }
	.pro-section__head { margin-bottom: .7rem !important; }
}

/* =========================================================
   5. MOBILE-SAFE BUTTON COLOURS
   On real iOS Safari / Chrome data-saver, var()-driven
   gradients sometimes fail and the browser falls back to the
   default link colour (blue/purple). Force solid colour
   fallbacks + -webkit-text-fill-color so brand colours
   reflect every time.
   ========================================================= */
.pro-btn,
a.pro-btn, a.pro-btn:link, a.pro-btn:visited {
	-webkit-appearance: none; appearance: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	text-decoration: none !important;
}

.pro-btn--primary,
a.pro-btn--primary, a.pro-btn--primary:link, a.pro-btn--primary:visited {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	background-color: #ff5a00;
	background-image: linear-gradient(135deg, #ff8a00 0%, #ff3b00 100%);
	background: linear-gradient(135deg, #ff8a00 0%, #ff3b00 100%) #ff5a00;
}
.pro-btn--primary:hover, .pro-btn--primary:focus,
a.pro-btn--primary:hover, a.pro-btn--primary:active {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
}

.pro-btn--ghost,
a.pro-btn--ghost, a.pro-btn--ghost:link, a.pro-btn--ghost:visited {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	background-color: transparent;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.pro-btn--ghost:hover, .pro-btn--ghost:focus,
a.pro-btn--ghost:hover, a.pro-btn--ghost:active {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	background-color: rgba(255,255,255,0.05);
	border-color: #00d4ff;
}

.pro-btn--cyan,
a.pro-btn--cyan, a.pro-btn--cyan:link, a.pro-btn--cyan:visited {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	background-color: #0066ff;
	background: linear-gradient(135deg, #00d4ff 0%, #0066ff 100%) #0066ff;
}

/* Premium-chrome buttons */
.px-btn--primary,
a.px-btn--primary, a.px-btn--primary:link, a.px-btn--primary:visited {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
}
.px-btn--lg { padding: .75rem 1.4rem !important; font-size: .9rem !important; }

/* Icons inside buttons must inherit colour, not pick up the
   system link colour on iOS. */
.pro-btn i, .pro-btn svg,
.px-btn i, .px-btn svg { color: inherit !important; -webkit-text-fill-color: inherit; }