/* ==========================================================================
   ReampZone -- style polish
   Loaded by reampzone-enhancements.php after the theme's own stylesheet.

   Scope: polish within the existing design. No layout rewrites, no new
   framework, no changes to the Olam templates. Everything here is either an
   accessibility fix, a consistency fix, or breathing room.

   Every colour value below was measured in-browser, not estimated.
   ========================================================================== */

:root {
	/* Brand colours, unchanged. These pass comfortably on the dark surfaces
	   they were designed for: yellow 11.13:1 and cyan 9.31:1 on #1c2326. */
	--rz-yellow:        #ffd400;
	--rz-cyan:          #00d8ff;
	--rz-charcoal:      #1c2326;

	/* Same hue and saturation, darkened until they pass 4.5:1 on both white
	   and the #f4f6f5 section background. Used for TEXT on light surfaces,
	   where the originals measure 1.43:1 and 1.71:1 respectively. */
	--rz-yellow-ink:    #856e00;  /* 4.96:1 on white, 4.57:1 on #f4f6f5 */
	--rz-cyan-ink:      #007b91;  /* 4.94:1 on white, 4.55:1 on #f4f6f5 */

	/* Neutrals */
	--rz-body:          #5c5c5c;  /* was #6b6b6b; 7.0:1 on white */
	--rz-muted:         #6f6f6f;
	--rz-hairline:      #e3e6e8;

	/* One radius scale instead of the current 2px / 2.8px / 5px / 8px mix. */
	--rz-radius-sm:     3px;
	--rz-radius:        6px;

	/* One shadow instead of five near-identical definitions. */
	--rz-shadow:        0 2px 8px rgba(0, 0, 0, .08);
	--rz-shadow-lift:   0 6px 20px rgba(0, 0, 0, .12);

	/* Vertical rhythm. Sections currently all use 14px, which is why the page
	   reads as one continuous block with no grouping. */
	--rz-section-y:     64px;
}


/* --------------------------------------------------------------------------
   1. Accent text on LIGHT backgrounds
   The brand yellow and cyan stay exactly as they are on dark surfaces. These
   rules only cover the places they sit on white or #f4f6f5, where they were
   failing WCAG AA badly.
   -------------------------------------------------------------------------- */

/* "Featured Kemper Profiles" / "Recently Released ..." -- was 1.58:1 */
h2.fw-special-title span,
.fw-heading-h2 h2 span { color: var(--rz-cyan-ink); }

/* "Testimonials" heading -- was 1.32:1 */
h3.fw-testimonials-title { color: var(--rz-yellow-ink); }

/* Testimonial author names -- was 1.32:1 */
.fw-testimonials-author .author-name { color: var(--rz-yellow-ink); }

/* Testimonial "Facebook" links -- was 1.58:1, and at 12.6px */
.fw-testimonials-url a { color: var(--rz-cyan-ink); font-size: 13px; }
.fw-testimonials-url a:hover,
.fw-testimonials-url a:focus { color: var(--rz-charcoal); }


/* --------------------------------------------------------------------------
   2. Buttons -- keep the brand fill, darken the label
   White on cyan measured 1.71:1 and grey on yellow 1.92:1. Charcoal on the
   same fills gives 9.41:1 and 11.13:1, so the buttons keep their colour and
   simply become readable. This is also the conventional treatment for a
   high-luminance CTA.
   -------------------------------------------------------------------------- */

.btn-primary,
.dd-cart,
.boxed,
a.edd_go_to_checkout,
.edd_purchase_submit_wrapper a.edd_go_to_checkout.plain,
.edd-add-to-cart .edd-add-to-cart-label {
	color: var(--rz-charcoal);
	font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
a.edd_go_to_checkout:hover,
a.edd_go_to_checkout:focus {
	color: #000;
	box-shadow: var(--rz-shadow-lift);
}

/* The cart dropdown and login lightbox use cyan as a panel background with
   white body text -- same 1.71:1 problem, but these are surfaces rather than
   buttons, so darken the surface instead of the text. */
.dd-cart,
.boxed { background-color: #0b7d93; color: #fff; }

/* Archive sort tabs. The selected tab was white on cyan (1.71:1) and the
   unselected ones #9b9b9b on #f4f6f5 (2.56:1) -- both fail, and these are the
   only way to reorder 69 products.

   Selectors are deliberately over-qualified: the theme styles these as
   `.sidebar .sidebar-item .filter-by a`, which outranks a plainer rule. */
.sidebar .sidebar-item .filter-by a { color: #5a5a5a; }
.sidebar .sidebar-item .filter-by a.active,
.sidebar .sidebar-item .filter-by a.active:hover { color: var(--rz-charcoal); font-weight: 700; }
.sidebar .sidebar-item .filter-by a:hover { color: var(--rz-charcoal); }

/* Empty-cart prompt on checkout: cyan link on a light panel, 1.58:1. */
.empty-cart h5.primary a,
.empty-cart a { color: var(--rz-cyan-ink); }

/* Product page price panel: the headline price is white on the cyan cart box,
   measuring 1.71:1 -- it fails even the 3:1 large-text threshold at 39px.
   Charcoal on the same cyan gives 9.41:1 and keeps the panel colour. */
.cart-box .sw-price,
.cart-box .sw-price .edd_price,
.cart-box .sw-price * { color: var(--rz-charcoal); }

/* Testimonial slider pager: cyan numerals on #ababab measured 1.34:1.
   Charcoal on the same grey gives 7.01:1, so only the numeral changes. */
.fw-testimonials-pagination a,
.fw-testimonials-pagination a * { color: var(--rz-charcoal); }

/* The current slide's pager button is `.selected` (not `.active`) and the theme
   gives it a solid black fill, so it needs light text rather than charcoal.
   Brand cyan on black measures 12.3:1. */
.fw-testimonials-pagination a.selected,
.fw-testimonials-pagination a.selected *,
.fw-testimonials-pagination a:hover,
.fw-testimonials-pagination a:hover * { color: var(--rz-cyan); }

.fw-testimonials-pagination a:hover { background-color: var(--rz-charcoal); }

/* The cookie-consent banner is styled in theme-modern.css, which recolours the
   whole bar for the dark theme. The dark-green "Cookie settings" link that used
   to live here was written for the ORIGINAL white banner and is overridden
   there, so it is not repeated -- keeping it would only be a second, losing
   answer to the same question. */


/* --------------------------------------------------------------------------
   3. Vertical rhythm
   Every homepage section currently has 14px top/bottom padding, so nothing
   reads as a distinct block. The footer (75.6px) was the only element with
   real breathing room.
   -------------------------------------------------------------------------- */

.fw-main-row.section { padding-top: var(--rz-section-y); padding-bottom: var(--rz-section-y); }

/* The hero carries its own background band and sizing -- leave it alone. */
.fw-main-row.section:first-child { padding-top: 0; padding-bottom: 0; }

.fw-heading { margin-bottom: 28px; }


/* --------------------------------------------------------------------------
   4. Typography
   The theme's base is 14px with an em-compounded scale that produces values
   like 12.6px, 16.8px and 29.96px. Resetting the root to 16px would cascade
   unpredictably through Bootstrap 3, so this deliberately does NOT touch the
   root -- it improves readability where text is actually read.
   -------------------------------------------------------------------------- */

body { color: var(--rz-body); -webkit-font-smoothing: antialiased; }

p, .entry-content li, .fw-testimonials-content {
	font-size: 15px;
	line-height: 1.7;
}

/* Long-form copy shouldn't run the full container width. */
.entry-content p, .fw-testimonials-content { max-width: 72ch; }

h1, h2, h3, h4 { line-height: 1.25; }

/* Nothing below 13px -- 12.6px was being used for real links. */
small, .small, .fw-testimonials-url { font-size: 13px; }


/* --------------------------------------------------------------------------
   5. Consistency: radii, shadows, hairlines
   -------------------------------------------------------------------------- */

.btn, .btn-primary, input[type="text"], input[type="email"],
input[type="password"], input[type="search"], select, textarea {
	border-radius: var(--rz-radius-sm);
}

.download-item, .edd_download, .fw-testimonials-item, .panel, .well {
	border-radius: var(--rz-radius);
	box-shadow: var(--rz-shadow);
}


/* --------------------------------------------------------------------------
   6. Focus states
   The theme removes outlines (`.btn-primary:focus { outline: none!important }`
   in style.css line 1) without replacing them, leaving keyboard users with no
   visible focus anywhere.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
	outline: 3px solid var(--rz-cyan-ink);
	outline-offset: 2px;
	border-radius: var(--rz-radius-sm);
}

/* On dark surfaces the darkened cyan is too low-contrast for a focus ring. */
#footer a:focus-visible,
.header a:focus-visible,
.search-title a:focus-visible { outline-color: var(--rz-yellow); }


/* --------------------------------------------------------------------------
   7. Logo
   The current logo is a 200x32 PNG rendered at exactly 200x32, so it is soft
   on every retina display. These rules make it render crisply and give an SVG
   somewhere sensible to sit when one is supplied.
   -------------------------------------------------------------------------- */

/* The 2026 logo is 500x167 (roughly 3:1), where the old one was 200x32 (6.25:1).
   A wordmark that tall needs more vertical room to stay legible -- capped at 40px
   it renders only 120px wide. The header has 91px to work with, so 56px fills it
   without crowding the nav. */
.site-logo {
	max-height: 56px;
	max-width: 100%;
	width: auto;
	height: auto;
}

/* An SVG has no intrinsic pixel size, so constrain it explicitly. */
.site-logo[src$=".svg"] { height: 56px; width: auto; max-height: none; }

@media (max-width: 991px) {
	.site-logo { max-height: 44px; }
	.site-logo[src$=".svg"] { height: 44px; }
}


/* --------------------------------------------------------------------------
   8. Small-screen adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root { --rz-section-y: 40px; }
	.fw-heading { margin-bottom: 20px; }
	p, .entry-content li { font-size: 15px; }
	/* Touch targets */
	.btn, .edd-add-to-cart, a.edd_go_to_checkout { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

/* Footer body text was #6B7B82 on #1C2326 = 3.66:1, below the WCAG AA 4.5:1
   minimum for body copy. #7E9099 keeps the same cool-grey tone at 4.86:1. */
#footer,
#footer .footer-text,
#footer .textwidget,
#footer p { color: #7e9099; }

/* Links need to be distinguishable from body text, and visibly interactive. */
#footer a { color: #b9c6cc; transition: color .15s ease; }
#footer a:hover,
#footer a:focus { color: #ffd200; }

/* Keyboard focus was invisible against the dark footer. */
#footer a:focus-visible {
	outline: 2px solid #ffd200;
	outline-offset: 2px;
	border-radius: 2px;
}

/* The link row is a plain inline list with no separators and tight tap targets. */
#footer .menu li a,
#footer .footer-text a { padding: 4px 2px; display: inline-block; }

/* Social icons: even spacing and a real hover state. */
#footer .footer-social { padding-left: 0; }
#footer .footer-social li { margin: 0 6px; }
#footer .footer-social a { display: inline-block; opacity: .75; transition: opacity .15s ease, transform .15s ease; }
#footer .footer-social a:hover,
#footer .footer-social a:focus-visible { opacity: 1; transform: translateY(-2px); }

/* Copyright is the least important text in the page -- let it sit quieter and
   stop it running full width on desktop, which hurts readability. */
#footer .footer-text {
	max-width: 70ch;
	margin: 18px auto 0;
	line-height: 1.6;
	font-size: 13px;
}

@media (max-width: 767px) {
	#footer { padding: 48px 0; }
	#footer .footer-text { padding: 0 18px; }
	/* Stacked links need bigger targets on touch. */
	#footer .menu li a { padding: 8px 4px; }
}

@media (prefers-reduced-motion: reduce) {
	#footer a,
	#footer .footer-social a { transition: none; }
	#footer .footer-social a:hover { transform: none; }
}