/*
Theme Name:   Dog Poop Dudes — Optimized
Theme URI:    https://dogpoopdudes.com/
Description:  Child theme of "dogpoopdudes". Fixes the mobile PageSpeed issues found in the Aug 2026 audit: removes ~1.1 MB of unused render-blocking Google Font CSS (Murecho / Roboto / Roboto Slab), corrects WCAG AA contrast failures in the pricing cards and the SCOOP20 chip, gives the mobile menu button an accessible name, and reserves layout space for images to stop cumulative layout shift.
Author:       55 Social Management
Author URI:   https://55socialmanagement.com/
Template:     dogpoopdudes
Version:      1.0.2
Text Domain:  dogpoopdudes-child
*/

/* ==========================================================================
   1. CONTRAST — WCAG 2.1 AA (4.5:1 for normal text)
   Audited values on #fff, measured live 2026-08-25:
     .pc-freq  #999 -> 2.85:1  FAIL
     .pc-per   #888 -> 3.54:1  FAIL
     .pc-mo    #bbb -> 1.92:1  FAIL   <- this is the monthly price
   Replacements below are measured, not estimated.
   ========================================================================== */

.pc-freq {
	color: #595959; /* 7.00:1 on #fff */
}

.pc-per {
	color: #595959; /* 7.00:1 on #fff */
}

.pc-mo {
	/* The monthly price is the single most important number on the page.
	   It was the least readable text on the site at #bbb. */
	color: #4a4a4a; /* 9.02:1 on #fff */
}

/* The SCOOP20 chip sits on the brand red #D62B2B.
   A white 20% overlay lightened the red to rgb(222,85,85), leaving white
   text at 3.79:1. Darkening the chip instead keeps the same "raised chip"
   look and lands at 6.77:1.
   The promo bar carries no class in the template, so the output filter in
   functions.php tags the chip on its way out. */
.dpd-chip {
	background: rgba(0, 0, 0, 0.18) !important;
}

/* ==========================================================================
   2. LAYOUT SHIFT — CLS was 0.179 (needs < 0.1)
   All 28 images on the homepage ship with no width/height attribute, so the
   page reflows as each one arrives. LiteSpeed "Add Missing Sizes" handles
   content images; these two are hard-coded in the theme templates.
   ========================================================================== */

nav .logo img {
	width: 54px;
	height: 54px;
}

.foot-logo {
	width: 58px;
	height: 58px;
}

/* Emoji served as remote <img> from s.w.org — give them a reserved box so
   they don't shove text around as they load. */
img.wp-smiley,
img[src*="/images/core/emoji/"] {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.1em;
}

/* Note: no min-height is pinned on .hero. The hero's shift came from the
   webfont arriving late behind 1.1 MB of blocking font CSS, not from a
   missing box — removing that CSS is the fix. Hard-coding a height here
   would risk a visual regression at breakpoints we haven't measured. */

/* ==========================================================================
   3. KEYBOARD ACCESSIBILITY
   The theme ships no visible focus style. Keyboard and switch users need
   to see where they are.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #1a2b52;
	outline-offset: 2px;
	border-radius: 2px;
}

/* On the red strip, navy-on-red is invisible — flip to cream. */
.cta-strip a:focus-visible,
.cta-strip button:focus-visible {
	outline-color: #fff9f0;
}

/* Skip link — lets keyboard users jump the nav. Hidden until focused. */
.dpd-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: #1a2b52;
	color: #fff9f0;
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 4px 0;
}

.dpd-skip-link:focus {
	left: 0;
}

/* ==========================================================================
   4. TOUCH TARGETS — WCAG 2.5.5 asks for 44x44px minimum.
   ========================================================================== */

nav button.hamburger {
	min-width: 44px;
	min-height: 44px;
}

/* ==========================================================================
   5. REDUCED MOTION
   ========================================================================== */

@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;
	}
}