/**
 * RP Fitness, shared site chrome only (header, footer, buttons, reviews badge).
 * The homepage section styles live in rp-home.css. The old .rp-* section
 * design system (hero, proof strip, zones, review, membership, intro, USP,
 * triptych, online) has been removed as dead weight. Brand tokens come from
 * theme.json CSS vars. Breakpoint 782px.
 */

/* ===== Section rhythm token =====
   Shared vertical padding for full-width content bands. Encodes the homepage
   and membership section standard (88px desktop, 52px mobile) as one token, so
   inner pages breathe the same way and cannot drift back to per-page values.
   Use: padding: var(--rp-section-y) 0; on each band. */
:root { --rp-section-y: 88px; }
@media (max-width: 860px) { :root { --rp-section-y: 52px; } }

/* ===== Buttons (solid red, glow) ===== */
.wp-block-button__link { box-shadow: 0 8px 18px rgba(228, 2, 46, 0.26); box-sizing: border-box; }
/* Solid red buttons keep the exact same red on hover/focus/active (no colour change,
   so the button never disappears on the navy bands). Navy-outline style excluded. */
.wp-block-button:not(.is-style-rp-navy-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-rp-navy-outline) > .wp-block-button__link:focus,
.wp-block-button:not(.is-style-rp-navy-outline) > .wp-block-button__link:active {
	background-color: var(--wp--preset--color--action) !important;
	color: #ffffff !important;
}
.rp-header .wp-block-button__link,
.wp-block-button.is-style-rp-navy-outline .wp-block-button__link { box-shadow: none; }
.wp-block-button.is-style-rp-navy-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--navy);
}

/* ===== Google reviews badge (shared; used in the footer) ===== */
.rp-reviews { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.25rem; }
.rp-stars { color: #FBBC05; letter-spacing: 1px; font-size: 1rem; }
.rp-gtxt { font-size: 0.78rem; color: #5a6168; font-weight: 600; }
.rp-gtxt strong { color: var(--wp--preset--color--navy); }
.rp-goog { font-weight: 700; }
.rp-goog .b { color: #4285F4; }
.rp-goog .o { color: #EA4335; }
.rp-goog .o2 { color: #FBBC05; }
.rp-goog .g { color: #34A853; }

/* Neutralise WordPress flow-layout sibling margins inside footer rows */
.rp-foot-top > *, .rp-foot-col > * { margin-top: 0; margin-block-start: 0; }

/* ===== Shared heading scale =====
   H2 lives here so the homepage and membership use one size and can't drift.
   Section-specific overrides (colour on navy bands, centring) stay per page. */
.h2{font-size:42px;font-weight:800;line-height:1.08;text-transform:uppercase;letter-spacing:.005em;margin:0;color:var(--ink,#0a2233)}
@media (max-width:860px){ .h2{font-size:28px} }

/* ===== Focus rings (sitewide): none on pointer/touch, brand navy for keyboard =====
   Mouse/touch focus draws no ring; :focus-visible (keyboard) shows a navy ring.
   .rp-kb-focus is toggled by JS for programmatically-returned keyboard focus,
   which Safari otherwise won't gate through :focus-visible. */
a,button,input,select,textarea,summary,label,[tabindex]{-webkit-tap-highlight-color:transparent}
:where(a,button,input,select,textarea,summary,[tabindex]):focus:not(:focus-visible){outline:none}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--wp--preset--color--navy,#002c41);outline-offset:2px;border-radius:3px}
.rp-kb-focus:focus{outline:2px solid var(--wp--preset--color--navy,#002c41);outline-offset:2px;border-radius:3px}

/* ===== Header ===== */
.rp-header { padding-left: clamp(1.1rem, 5vw, 2.4rem); padding-right: clamp(1.1rem, 5vw, 2.4rem); }
.rp-logo { margin: 0; }
.rp-logo img { height: 40px; width: auto; display: block; }
.rp-logo a { display: inline-block; line-height: 0; }
@media (max-width: 1240px) {
	.rp-header { flex-wrap: nowrap !important; }
	.rp-logo img { width: 130px; height: auto; }
	.rp-navwrap > .wp-block-buttons { order: 1; }
	.rp-navwrap > .rp-burger { order: 2; }
	.rp-navwrap > .wp-block-navigation { order: 3; }
}
/* Scoped to .rp-header so page-level paragraph rules (e.g. .rp-online p) cannot
   inflate the header microtext. Size/position stay identical on every page. */
.rp-header .rp-brand__est { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; color: #676d73; margin: 2px 0 0; }

/* Mobile: level the top of the logo with the top of the Join now button.
   The header is a centred flex row. The brand column (logo + EST. 2012) is
   exactly as tall as the header's content box, so it starts at the very top,
   while the shorter button column is centred and therefore starts 6.6px lower.
   That 6.6px is half the difference between the 56px content box and the 42.8px
   button. Moving the padding onto the figure and zeroing its line-height keeps
   the figure at its original 28.4px, so the brand column and the 88px header
   height are both unchanged. The burger is already centred on the button and is
   deliberately untouched. */
@media (max-width: 860px) {
	.rp-header .rp-logo { line-height: 0; padding-top: 6.6px; }
}

/* Mobile: centre the hero content in the space BELOW the floating header rather
   than in the whole hero. Without this the block is centred against the full
   hero height, so the visible band under the header reads as top heavy. The
   66px matches the bottom edge of the Join now button (22.6px top + 42.8px
   tall), which is the point the content should start balancing from. The
   homepage is excluded: its hero is a bottom-left cover, not a centred one. */
@media (max-width: 860px) {
	body.rp-hero-header:not(.rp-home) .entry-content > .wp-block-cover:first-child > .wp-block-cover__inner-container {
		padding-top: 66px;
	}
}

/* ===== Floating-header-over-hero pattern (body.rp-hero-header) =====
   On pages with a full-bleed image hero, the header floats transparently over
   it in a light treatment and the hero image runs to the very top. Opt a page
   in via the body_class filter in functions.php. Homepage uses this shared
   pattern too (no page-specific copy). */
body.rp-hero-header .wp-block-post-content{position:relative}
body.rp-hero-header header.rp-header{position:absolute;top:0;left:0;right:0;z-index:30;width:100%;max-width:none;margin:0;background:transparent}
body.rp-hero-header .rp-header .wp-block-navigation a,
body.rp-hero-header .rp-header .wp-block-navigation .wp-block-navigation-item__content{color:#fff !important}
body.rp-hero-header .rp-header .wp-block-navigation a:hover{color:#fff !important}
body.rp-hero-header .rp-header .rp-brand__est{color:rgba(255,255,255,.85)}
body.rp-hero-header .rp-header .rp-logo img{filter:brightness(0) invert(1)}
body.rp-hero-header .rp-header .wp-block-button__link{color:#fff}
/* ===== Desktop nav links (SITE-WIDE; homepage overrides colour to white) ===== */
.rp-header .wp-block-navigation a,
.rp-header .wp-block-navigation .wp-block-navigation-item__content{font-family:'Montserrat',Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--wp--preset--color--navy)}
.rp-header .wp-block-navigation a:hover{color:var(--wp--preset--color--red,#e4022e)}
.rp-header .wp-block-navigation-item__content:focus:not(:focus-visible){outline:none;box-shadow:none}

/* ===== Custom burger + full-screen overlay (replaces the core nav overlay) =====
   >=1240px: inline desktop nav shows, burger hidden (desktop unchanged).
   <1240px: inline nav hidden, burger shows, tap opens the navy overlay. */
.rp-burger{display:none;position:relative;width:30px;height:22px;padding:0;margin:0;background:none;border:0;cursor:pointer;color:var(--wp--preset--color--navy);z-index:1001;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-webkit-user-select:none;user-select:none}
.rp-burger span{position:absolute;left:0;right:0;height:2.5px;background:currentColor;border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.rp-burger span:nth-child(1){top:0}
.rp-burger span:nth-child(2){top:50%;transform:translateY(-50%)}
.rp-burger span:nth-child(3){bottom:0}
.rp-burger.active span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.rp-burger.active span:nth-child(2){opacity:0}
.rp-burger.active span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}
body.rp-hero-header .rp-burger{color:#fff}
.rp-burger.active,body.rp-hero-header .rp-burger.active{color:var(--wp--preset--color--navy,#002c41)}
.rp-burger:focus{outline:none}
.rp-burger:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.rp-burger.rp-kb-focus:focus{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}

.rp-navoverlay{position:fixed;inset:0;z-index:1000;height:100dvh;background:#F6F5EE;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s linear .35s}
.rp-navoverlay.open{visibility:visible;opacity:1;transition:opacity .35s ease,visibility 0s linear 0s}
.rp-navoverlay__inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;width:100%;padding:1.5rem}
.rp-navoverlay__links{display:flex;flex-direction:column;align-items:center;gap:28px}
.rp-navoverlay__links a{font-family:'Montserrat',Arial,sans-serif;font-size:22px;font-weight:600;line-height:1.2;color:var(--wp--preset--color--navy,#002c41);text-decoration:none;padding:9px 6px}
.rp-navoverlay__links a:hover,.rp-navoverlay__links a:focus-visible{color:var(--wp--preset--color--red,#e4022e)}
.rp-navoverlay__cta{margin-top:6px}
/* Focus rings only in keyboard mode (.rp-kb); never on touch. */
.rp-navoverlay{outline:none}
.rp-navoverlay a{-webkit-tap-highlight-color:transparent}
.rp-navoverlay a:focus{outline:none}
.rp-navoverlay.rp-kb .rp-navoverlay__links a:focus,
.rp-navoverlay.rp-kb .rp-navoverlay__cta a:focus{outline:2px solid var(--wp--preset--color--navy,#002c41);outline-offset:3px;border-radius:4px}

/* While the menu is open, lift the header above the overlay and blank out
   everything except the burger, so only the navy X shows over the ivory. */
body.rp-menu-open .rp-header{position:relative;z-index:1001 !important}
body.rp-hero-header.rp-menu-open .rp-header{position:absolute}
body.rp-menu-open .rp-header .rp-brand,
body.rp-menu-open .rp-header .rp-navwrap .wp-block-buttons{visibility:hidden}

@media (max-width:1240px){
	.rp-burger{display:block}
	.rp-header .wp-block-navigation{display:none !important}
	/* compact header Join now (homepage's smaller size), now sitewide */
	.rp-header .wp-block-buttons .wp-block-button__link{font-size:13px;padding:11px 18px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
	.rp-burger span{transition:none}
	.rp-navoverlay,.rp-navoverlay.open{transition:visibility 0s}
	/* Honour reduced motion site wide: neutralise all transitions and animations
	   so any remaining interface feedback becomes instant. Scoped away from the
	   online personal training page, which manages its own motion safe reveals. */
	body:not(.rp-online) *,
	body:not(.rp-online) *::before,
	body:not(.rp-online) *::after{
		animation-duration:.001ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.001ms !important;
		scroll-behavior:auto !important;
	}
}

/* ===== Footer (fuller, navy). Stacks left-aligned on mobile. ===== */
.rp-footer { text-align: left; padding-left: clamp(1.25rem, 5vw, 3.5rem); padding-right: clamp(1.25rem, 5vw, 3.5rem); }
.rp-foot-top { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.rp-foot-tag { color: #aebcc4; margin: 0; font-size: 0.9rem; }
.rp-footer .rp-reviews { justify-content: flex-start; margin-top: 0; }
.rp-footer .rp-gtxt { color: #cdd6db; }
.rp-footer .rp-gtxt strong { color: #ffffff; }
.rp-footer .wp-block-social-links { margin: 0; gap: 0.85rem; }
.rp-footer .wp-social-link { color: #ffffff; }
.rp-footer .wp-social-link:hover { color: #cdd6db; }
/* Larger, legible social glyphs (logos-only style) */
.rp-footer .wp-block-social-links .wp-social-link svg { width: 1.9rem; height: 1.9rem; }
.rp-foot-cols { display: grid; grid-template-columns: 1fr; gap: 1.75rem 2rem; margin-top: 2rem; }
@media (min-width: 560px) { .rp-foot-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .rp-foot-cols { grid-template-columns: repeat(4, 1fr); } }
.rp-foot-h { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; margin: 0 0 0.85rem; }
.rp-foot-col p { margin: 0 0 0.5rem; line-height: 1.45; }
.rp-footer a { color: #cdd6db; text-decoration: none; font-size: 0.85rem; }
.rp-footer a:hover { color: #ffffff; text-decoration: underline; }
.rp-foot-contact p { color: #aebcc4; font-size: 0.85rem; }
.rp-foot-contact a { color: #cdd6db; }
.rp-foot-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 2.25rem; padding-top: 1.4rem; }
.rp-foot-bottom p { color: #899ba5; font-size: 0.72rem; line-height: 1.6; margin: 0; }