/*
Theme Name:  CCR Hall of Fame Child
Theme URI:   https://hof.ccr-mag.com
Description: Child theme of Hello Elementor for the CCR Hall of Fame. Holds global CSS, hooks and template fallbacks only - no layout. All layout is built in Elementor.
Author:      Derrick Ruff, DRDG Design
Template:    hello-elementor
Version:     0.8.32
License:     GPL-2.0-or-later
Text Domain: ccr-hof-child
*/

/* Global CSS lives here (e.g. the vertical word stacks). Colours and type come
   from Elementor Site Settings via --e-global-color-* / --e-global-typography-*. */

/* ---------------------------------------------------------------------------
   Global CSS only. No layout - layout is Elementor. See CLAUDE.md s3.
   --------------------------------------------------------------------------- */

/* --- word stacks: horizontal words stacked vertically (matches the mockup) --- */
.ccr-wordstack {
	display: flex;
	flex-direction: column;
	gap: 13px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--e-global-color-greymuted);
	writing-mode: horizontal-tb;
	transform: none;
}
.ccr-wordstack span { display: block; }
.ccr-wordstack--light { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 1024px) {
	.ccr-wordstack, .ccr-wordstack-wrap { display: none !important; }
}

/* --- heading flanked by horizontal rules (class sits on the widget wrapper) --- */
.ccr-ruled-heading {
	display: flex;
	align-items: center;
	gap: 45px;
	width: 100%;
}
.ccr-ruled-heading::before,
.ccr-ruled-heading::after {
	content: "";
	flex: 1 1 0%;
	min-width: 30px;
	height: 1px;
	background: #C8CBD0;
}
.ccr-ruled-heading > .elementor-widget-container {
	flex: 0 0 auto;
	width: max-content;
	max-width: 100%;
}
.ccr-ruled-heading .elementor-heading-title { margin: 0; white-space: nowrap; }
@media (max-width: 767px) {
	.ccr-ruled-heading { gap: 12px; }
	.ccr-ruled-heading > .elementor-widget-container { width: auto; }
	.ccr-ruled-heading .elementor-heading-title { white-space: normal; }
	.ccr-ruled-heading::before,
	.ccr-ruled-heading::after { min-width: 12px; }
}

/* "CARTERSVILLE, GEORGIA" caption over the building photo. */
.ccr-caption-chip {
	position: absolute; left: 0; bottom: 0; z-index: 2;
	padding: 12px 20px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
	color: #FFFFFF; background: rgba(35, 43, 51, 0.72);
}

/* Faint line-art building behind the Experience Center copy. */
.ccr-lineart {
	position: absolute; right: 0; bottom: 0; width: 58%; max-width: 520px;
	color: #C9CED4; opacity: 0.55; pointer-events: none; z-index: 0;
}
.ccr-lineart svg { width: 100%; height: auto; display: block; }

/* No horizontal scroll at 360px. */
html, body { overflow-x: hidden; }


/* --- Homepage red legacy band ------------------------------------- *
 * The section is built from Elementor containers; these few rules cover
 * the things Elementor has no control for. Elementor's tablet breakpoint
 * starts at 1025px, so 1024px is "tablet and below".
 */

/* Desktop keeps the three forced lines; below that the text wraps naturally. */
@media (max-width: 1024px) {
	.hof-band-statement br { display: none; }
}

@media (min-width: 1025px) {
	/* Lock the three columns. Elementor resolves container flex through its own
	 * custom properties (.e-con.e-flex { flex: var(--flex-grow) var(--flex-shrink)
	 * var(--flex-basis) }), and that selector sets --flex-shrink and --flex-basis
	 * itself. Setting the variables is right, but the selector has to carry the
	 * same two-class weight or Elementor's defaults win.
	 */
	.e-con.hof-band-left {
		--flex-grow: 0;
		--flex-shrink: 0;
		--flex-basis: 48%;
	}

	.e-con.hof-band-divider {
		--flex-grow: 0;
		--flex-shrink: 0;
		--flex-basis: 2px;
	}

	.e-con.hof-band-right {
		--flex-grow: 1;
		--flex-shrink: 1;
		--flex-basis: 0%;
		min-width: 0;
	}
}

/* Elementor's default paragraph margin pushes this block off centre. */
.hof-band-text p { margin: 0; }

/* The address reads as part of the sentence; it underlines only on hover. */
.hof-band-text a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.hof-band-text a:hover,
.hof-band-text a:focus-visible {
	text-decoration: underline;
}

/* Source Sans 3 is self-hosted as a variable font, but Elementor registers it
 * at discrete weights (400/600/700) only. Without these the browser matches
 * the 400 face and renders 300 and 500 identically to it; setting the axis
 * directly gets the real weights out of the same file.
 */
.hof-band-line-1 p { font-variation-settings: "wght" 300; }
.hof-band-line-2 p { font-variation-settings: "wght" 500; }


/* The founding-class and Reception word stacks share a right-hand column,
 * so their left edges line up down the page. Both derive from this one
 * value: the founding stack is flush to the container's right edge and is
 * exactly this wide, and the Reception stack starts at the same x. It only
 * needs to be wide enough for the founding stack's longest word (INDUSTRY,
 * 101.3px at 15px/0.35em) - widen it if that type ever changes.
 */
:root { --hof-stack-col: 102px; }

/* --- Homepage founding-class band --------------------------------- *
 * Charcoal band above the red one. Elementor has no control for flex
 * basis, so the three columns are pinned here; everything else is set
 * on the elements themselves.
 */

@media (min-width: 1025px) {
	/* 1051 + 2 + 247 = 1300, the container width. */
	.e-con.hof-fc-left    { --flex-grow: 0; --flex-shrink: 0; --flex-basis: 1051px; }
	.e-con.hof-fc-divider { --flex-grow: 0; --flex-shrink: 0; --flex-basis: 2px; }
	.e-con.hof-fc-right   { --flex-grow: 0; --flex-shrink: 0; --flex-basis: 247px; }

	/* Keeps the title and body clear of the rule. Elementor sets
	 * max-width:100% on widgets, so this needs the extra weight.
	 * 750px rather than 740 so the 744px title stays on one line.
	 */
	.e-con.hof-fc-left > .elementor-element { max-width: 750px; }
}

@media (max-width: 1024px) {
	/* Stacked: the columns size themselves and the rule runs full width. */
	.e-con.hof-fc-left,
	.e-con.hof-fc-divider,
	.e-con.hof-fc-right {
		--flex-grow: 0;
		--flex-shrink: 0;
		--flex-basis: auto;
	}

	.e-con.hof-fc-left > .elementor-element { max-width: none; }

	/* Breaks are a desktop-only device; below that the text wraps. */
	.hof-fc-body br { display: none; }
}

/* Optical centring: the hat reads high against the rule. line-height:0
 * removes the inline baseline gap under the SVG, which otherwise eats
 * most of the nudge; 16px of margin then lands the icon centre 8px low.
 */
.hof-fc-icon {
	line-height: 0;
	margin-top: 16px;
}

/* This stack is content, not decoration, so unlike the others it stays
 * on below desktop - it moves under the rule rather than disappearing.
 */
/* flex-basis as well as width, or the flex line shrinks it back to its
 * content and the two stacks drift apart again.
 */
.hof-fc-stackwrap {
	width: var(--hof-stack-col);
	flex: 0 0 var(--hof-stack-col);
}

.hof-fc-stack.ccr-wordstack {
	gap: 0;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.35em;
	line-height: 27px;
	color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1024px) {
	.hof-fc-stack.ccr-wordstack { display: flex !important; }
}

@media (max-width: 767px) {
	.hof-fc-stack.ccr-wordstack {
		font-size: 13px;
		line-height: 23px;
	}
}


/* --- Homepage: Experience Center and Reception -------------------- *
 * Both are full-bleed splits. The pieces Elementor has no control for
 * live here: the image filling its column exactly, the caption and its
 * wash, the line-art, and the two word-stack treatments.
 */

/* ---- Experience Center: media column ---- */

.hof-xc-media { position: relative; overflow: hidden; }

/* The image fills the column and is taken out of flow, so its intrinsic
 * ratio cannot drive the section height - the column stretches to the
 * section instead, and nothing can hang below the image.
 */
.hof-xc-media .elementor-widget-image {
	position: absolute;
	inset: 0;
}

.hof-xc-media .elementor-widget-image,
.hof-xc-media .elementor-widget-image > .elementor-widget-container,
.hof-xc-media figure,
.hof-xc-media .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.hof-xc-media .elementor-widget-image img { object-fit: cover; }

/* Legibility wash behind the caption only - no box on the text itself. */
.hof-xc-media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 140px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45));
	pointer-events: none;
	z-index: 1;
}

.hof-xc-caption {
	position: absolute;
	bottom: 24px;
	z-index: 2;
	width: auto !important;
	max-width: none !important;

	/* Sits on the 1300px container's left edge, like every other section's
	 * content. The caption lives inside the media column, so the gutter has
	 * to be expressed in that column's own width: the column is 47.8% of the
	 * section, so the section is 100/47.8 = 209.205% of it, and the gutter is
	 * (209.205% - 1300px) / 2 = 104.6025% - 650px. Deriving it from 100vw
	 * instead would be half a scrollbar out. Keep in step with the 47.8%.
	 */
	left: max(20px, calc(104.6025% - 650px));
}

.hof-xc-caption .hof-cap {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ---- Experience Center: text column ---- */

.hof-xc-copy { position: relative; z-index: 1; }

.hof-xc-lineart {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	height: 70%;
	color: #C9CED4;
	opacity: 0.55;
	pointer-events: none;
	width: auto !important;
	max-width: none !important;
}

.hof-xc-lineart svg {
	display: block;
	width: auto;
	height: 100%;
}

/* Top-aligned with the eyebrow, right edge on the container.
 * Anchored to the section, so (100% - 1300px)/2 is the real container
 * gutter. Deriving it from 100vw instead would be half a scrollbar out.
 */
.hof-xc-section { position: relative; }

.hof-xc-stackwrap {
	position: absolute;
	top: 10px;
	right: max(30px, calc((100% - 1300px) / 2));
	z-index: 1;
	width: auto !important;
	max-width: none !important;
}

.hof-xc-stackgroup {
	display: flex;
	align-items: stretch;
	gap: 22px;
}

.hof-xc-rule {
	width: 1px;
	background: #B8BCC2;
}

.hof-xc-stackgroup .ccr-wordstack {
	gap: 0;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.35em;
	line-height: 27px;
	color: #6B7280;
}

/* ---- Reception ---- */

.hof-rc-section { position: relative; }

/* 57% of the section, bleeding right, with 8px of white above and below,
 * which lands the image at ~270px inside the 288px section.
 */
.hof-rc-media {
	position: absolute;
	top: 8px;
	right: 0;
	bottom: 8px;
	left: 57%;
	width: auto !important;
}

.hof-rc-stackwrap {
	position: absolute;
	top: 50%;
	/* Same left edge as the founding-class stack below it. The image is
	 * inset equally top and bottom, so the section's centre is the
	 * image's centre.
	 */
	left: calc(100% - max(30px, (100% - 1300px) / 2) - var(--hof-stack-col));
	transform: translateY(-50%);
	width: auto !important;
	max-width: none !important;
}

.hof-rc-stackwrap .ccr-wordstack {
	gap: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.35em;
	line-height: 26px;
	color: #FFFFFF;
}

/* ---- Standing responsive rules ---- */

@media (max-width: 1024px) {
	/* Forced breaks are a desktop device. */
	.hof-xc-body br,
	.hof-xc-title br,
	.hof-rc-body br { display: none; }

	/* Decorative only - these go when the columns stack. */
	.hof-xc-lineart,
	.hof-xc-stackwrap,
	.hof-rc-stackwrap { display: none !important; }

	.hof-rc-media {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: 100% !important;
	}

	.hof-xc-media::after { height: 110px; }

	/* Full-width column now, so match the padding of the copy below. */
	.hof-xc-caption { left: 30px; }
}

@media (max-width: 767px) {
	/* Matches the section's 24px mobile padding. Must come after the
	 * 1024 block, which also matches here.
	 */
	.hof-xc-caption { left: 24px; }
}


/* --- Homepage: intro and two-column ------------------------------- */

/* Paragraph spacing is set per block; Elementor has no control for it. */
.hof-intro-body p,
.hof-bp-body p,
.hof-std-intro p { margin: 0; }

.hof-bp-body p + p { margin-top: 26px; }

/* The left column matches the card's height so the button can sit on the
 * card's bottom edge; margin-top:auto pushes it there and the copy above
 * takes up the slack.
 */
@media (min-width: 1025px) {
	.hof-bp-col { align-self: stretch; }
	.hof-bp-btn { margin-top: auto !important; }
}

/* The icon widget's box is narrower than the circle it draws, so the
 * circle overflows and eats into the flex gap. Pinning the box to the
 * circle's diameter makes the 36px gap the gap you actually see.
 */
.hof-std-icon { flex: 0 0 99px; }
.hof-std-icon .elementor-icon { display: block; }

/* Standards checklist: the icon stays on the first line so a wrapped
 * second line aligns with the text, not under the check.
 */
.hof-std-list .elementor-icon-list-item { align-items: flex-start; }
.hof-std-list .elementor-icon-list-icon { margin-top: 5px; }
.hof-std-list .elementor-icon-list-text { padding-inline-start: 0; }

@media (max-width: 1024px) {
	/* Forced breaks are a desktop device. */
	.hof-intro-body br,
	.hof-bp-title br,
	.hof-bp-body br,
	.hof-std-intro br,
	.hof-std-list br { display: none; }

	/* The card stops being a fixed slab once the columns stack. */
	.hof-std-card { min-height: 0 !important; }

	/* The flanking rules are a desktop flourish. Below 1025 there is not
	 * enough room beside the heading and they collapse to a stub, so they
	 * come off with the rest of the desktop-only treatment.
	 */
	.ccr-ruled-heading { gap: 0; }
	.ccr-ruled-heading::before,
	.ccr-ruled-heading::after { display: none; }
}


/* --- Homepage hero ------------------------------------------------ *
 * Two 50% halves carry the background images; the seal and copy sit in
 * a centred layer on top of both, so swapping an image cannot move the
 * content or the seam.
 */

.hof-hero { position: relative; }

.hof-hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 66px;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
}

/* Elementor containers are width:100% by default, so the copy filled the
 * overlay and squeezed the seal. Both are sized to their content instead,
 * which is what lets justify-content:center give equal margins.
 */
@media (min-width: 1025px) {
	.hof-hero-overlay > .ccr-hero-seal {
		flex: 0 0 375px;
		width: 375px !important;
		max-width: 375px !important;
	}

	.hof-hero-overlay > .hof-hero-copy {
		flex: 0 0 auto;
		width: auto !important;
		max-width: none !important;
	}
}

.hof-hero-overlay .ccr-hero-seal img {
	display: block;
	width: 100%;
	height: auto;
}

/* Anchored to the section, so (100% - 1300px)/2 is the true container
 * gutter; 100vw would be half a scrollbar out.
 */
.hof-hero-stack-l,
.hof-hero-stack-r {
	position: absolute;
	bottom: 45px;
	width: auto !important;
	max-width: none !important;
}

.hof-hero-stack-l { left: max(30px, calc((100% - 1300px) / 2)); }
.hof-hero-stack-r { right: max(30px, calc((100% - 1300px) / 2)); }

.hof-hero-stack-l .ccr-wordstack,
.hof-hero-stack-r .ccr-wordstack {
	gap: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.3em;
	line-height: 28px;
	color: #7A7F85;
}

.hof-hero-stack-r .ccr-wordstack { text-align: right; }

/* Exact button boxes; border-box means the border is inside the 50px. */
.hof-hero-buttons .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 16px;
	border-radius: 4px;
}

.hof-hero-btn-primary .elementor-button { width: 316px; }
.hof-hero-btn-secondary .elementor-button { width: 173px; }

@media (max-width: 1024px) {
	/* One background, one column. The left half becomes the backdrop and
	 * the overlay returns to normal flow so it can set the height.
	 */
	.hof-hero-right { display: none !important; }

	.hof-hero-left {
		position: absolute;
		inset: 0;
		width: 100% !important;
	}

	/* The column direction is set on the element itself, because
	 * .e-con.e-flex drives it from --flex-direction and outranks this.
	 */
	.hof-hero-overlay {
		position: static;
		padding: 52px 30px !important;
		width: 100% !important;
	}

	/* Decorative, and there is no room for them once stacked. */
	.hof-hero-stack-l,
	.hof-hero-stack-r { display: none !important; }

	.hof-hero-copy {
		align-items: center !important;
		text-align: center;
	}

	.hof-hero-buttons { justify-content: center; }

	.hof-hero-title br,
	.hof-hero-sub br { display: none; }
}

@media (max-width: 767px) {
	.hof-hero-overlay { padding: 40px 24px !important; }

	.hof-hero-buttons {
		flex-direction: column;
		width: 100%;
	}

	.hof-hero-buttons .elementor-widget-button,
	.hof-hero-btn-primary .elementor-button,
	.hof-hero-btn-secondary .elementor-button {
		width: 100% !important;
	}
}

/* Experience Center photo: hold both wall texts clear of the cover crop.
   object-position centre clips the top of CONSTRUCTION BUILDS MORE... at
   1920px and again at 768px; 30% keeps both text blocks framed everywhere. */
.hof-xc-media img {
	object-position: center 30%;
}

/* ---- Experience Center line-art, raster variant (section .hof-xc-v2) ----
 * The original inline SVG is a placeholder shape. The mockup uses the
 * detailed wireframe building, anchored bottom-right and bleeding off both
 * the right and bottom edges, so it is scaled past the column and clipped
 * by the section.
 */
.hof-xc-v2 {
	overflow: hidden;
}

.hof-xc-lineart-img {
	height: 132%;
	right: -2%;
	bottom: -14%;
	opacity: 0.5;
}

.hof-xc-lineart-img img {
	display: block;
	width: auto;
	height: 100%;
}

/* ==================================================================
 * Intermediate desktop range (1025px - 1360px)
 * ------------------------------------------------------------------
 * The desktop layout assumes a 1300px container with fixed,
 * non-shrinking columns and decorative elements anchored to the
 * container gutters. Below ~1360px those run into real content, but
 * the stacked <=1024px rules do not engage yet, so this range was
 * unhandled. Measured clearance in px at 1060 / 1200 / 1300 / 1400
 * (negative = overlapping):
 *   hero stacks vs seal and buttons   -116 / -46 /  +4 / +41
 *   REAL STORIES stack vs heading     -162 / -89 / -37 /  +3
 *   founding-class row off-canvas      285 / 145 /  45 /  ok
 *   red-band divider vs statement        0 /   0 /  48 /  84
 *   header nav rows                      2 /   2 /   1 /   1
 * ================================================================== */

@media (min-width: 1025px) and (max-width: 1360px) {

	/* Decorative word stacks and their rules go before they reach the
	 * content beside them, rather than waiting for the 1024px stack point.
	 * The line-art stays: it sits behind the copy by design. */
	.hof-hero-stack-l,
	.hof-hero-stack-r,
	.hof-rc-stackwrap {
		display: none !important;
	}

	/* Founding Class: the row is pinned to 1051 + 2 + 247 = 1300px at
	 * flex-shrink 0, so below a 1300px container the divider, icon and
	 * word stack land off-canvas and the heading is clipped mid-word.
	 * Let the copy column absorb the shrink. The two-class weight is
	 * needed to beat Elementor's own .e-con.e-flex defaults.
	 */
	.e-con.hof-fc-left {
		--flex-grow: 1;
		--flex-shrink: 1;
		--flex-basis: 0%;
		min-width: 0;
	}

	/* Red band: the 48% left column could not shrink either, so the
	 * divider sat flush against the statement text. */
	.e-con.hof-band-left {
		--flex-shrink: 1;
		--flex-basis: 44%;
		min-width: 0;
		padding-right: 44px;
	}

	.e-con.hof-band-right {
		padding-left: 44px;
	}

	/* Experience Center copy is a flex item with the default
	 * min-width:auto, so it refused to shrink and the heading overflowed
	 * its column by up to 65px. */
	.hof-xc-copy {
		/* Elementor pins --width: 570px from 768px up and only releases it
		 * at <=1024px, so the copy stayed 570px wide inside a 527px column. */
		--width: 100% !important;
		min-width: 0;
	}

	/* The forced line break in this heading is sized for a 1300px
	 * container. Below that it makes an unbreakable 531px line inside a
	 * 527px column, so the heading overflowed. Let it wrap on its own.
	 */
	.hof-xc-title br,
	.hof-xc-body br,
	.hof-rc-body br,
	.hof-fc-body br,
	.hof-band-statement br {
		display: none;
	}

	/* Header and footer navs: compact so all seven items hold one row.
	 * The hamburger already takes over at <=1024px. */
	.elementor-nav-menu .elementor-item {
		font-size: 16px !important;
		padding-right: 15px !important;
		padding-left: 15px !important;
	}
}

@media (min-width: 1025px) and (max-width: 1200px) {

	.elementor-nav-menu .elementor-item {
		font-size: 15px !important;
		padding-right: 8px !important;
		padding-left: 8px !important;
	}
}

@media (min-width: 1025px) and (max-width: 1360px) {

	/* Reception: the trophy image is absolutely positioned from left:57%,
	 * so nothing stopped the copy running underneath it. Reserve the
	 * image's share of the row plus a gutter. Proportional, so it holds
	 * at every desktop width. */
	.hof-rc-section > .e-con:not(.hof-rc-media):not(.hof-rc-stackwrap) > .e-con-inner {
		padding-right: calc(43% + 40px);
	}
}


/* The Experience Center stack keeps overlapping the heading a little past
 * 1360 (-5px at 1361, only +3px at 1400), because it is anchored to the
 * container gutter while the heading grows toward it. Hold it back until it
 * actually clears. Above 1400 it behaves exactly as it always has.
 */
@media (min-width: 1025px) and (max-width: 1400px) {

	.hof-xc-stackwrap {
		display: none !important;
	}
}

/* ==================================================================
 * Stacked layout (<=1024px) corrections
 * ------------------------------------------------------------------
 * Everything here is bounded to the stacked range and must not reach
 * the desktop layout.
 * ================================================================== */

@media (max-width: 1024px) {

	/* The two media slots keep the fixed heights they had as side-by-side
	 * columns (300px and 260px), so once they go full width they crop hard:
	 * 44% off the height of the building and a third off the awards. Give
	 * each the ratio of its own image instead, with the old height kept as
	 * a floor so narrow phones do not end up with a letterbox strip.
	 */
	.hof-xc-media {
		--min-height: 220px;
		height: auto;
		aspect-ratio: 1614 / 975;
	}

	.hof-rc-media {
		--min-height: 260px;
		height: auto;
		aspect-ratio: 1906 / 825;
	}

	/* Founding Class: stacked, the rule and the hard-hat/word-stack column
	 * sit under the copy and add roughly 150px of purely decorative height.
	 * They are a desktop device - drop them and the band comes back down.
	 */
	.hof-fc-divider,
	.hof-fc-right {
		display: none !important;
	}

	/* A hamburger does not belong in a footer. Elementor collapses this menu
	 * at the same breakpoint as the header one; keep the header's toggle and
	 * give the footer back its text links, wrapped and centred.
	 */
	[data-elementor-type="footer"] .elementor-menu-toggle,
	[data-elementor-type="footer"] .elementor-nav-menu--dropdown {
		display: none !important;
	}

	[data-elementor-type="footer"] .elementor-nav-menu--main {
		display: block !important;
	}

	[data-elementor-type="footer"] .elementor-nav-menu--main .elementor-nav-menu {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 2px;
	}

	[data-elementor-type="footer"] .elementor-nav-menu .elementor-item {
		font-size: 13px !important;
		padding: 6px 8px !important;
	}
}
/* ==================================================================
 * Interior pages: sticky footer + Coming Soon placeholder
 * ------------------------------------------------------------------
 * The interior pages are plain WordPress content on hello-elementor's
 * default template, so a short page left the footer floating in the
 * middle. Scoped to .page-template-default so the Elementor-built
 * homepage (page-template-elementor_header_footer) is untouched.
 * ================================================================== */

body.page-template-default {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.page-template-default > main.site-main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

body.page-template-default > main.site-main > .page-content {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ---- Coming Soon placeholder ---- */

.hof-soon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 0 auto;
	padding: 96px 24px;
	text-align: center;
}

.hof-soon__inner {
	width: 100%;
	max-width: 640px;
}

.hof-soon__eyebrow {
	margin: 0 0 18px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #BE1E2D);
}

.hof-soon__title {
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family), serif;
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 700;
	line-height: 1.08;
	color: var(--e-global-color-secondary, #232B33);
}

.hof-soon__rule {
	display: block;
	width: 64px;
	height: 1px;
	margin: 28px auto;
	background: #C8CBD0;
}

.hof-soon__status {
	margin: 0 0 14px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--e-global-color-secondary, #232B33);
}

.hof-soon__body {
	margin: 0 auto;
	max-width: 52ch;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 17px;
	line-height: 1.72;
	color: var(--e-global-color-text, #6B7280);
}

.hof-soon__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 36px;
}

/* hello-elementor underlines every link inside .page-content, which needs
 * out-weighting here or the buttons come out underlined. */
.page-content .hof-soon__btn,
.hof-soon__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 30px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.hof-soon__btn--primary {
	background: var(--e-global-color-primary, #BE1E2D);
	color: #FFFFFF;
}

.hof-soon__btn--primary:hover,
.hof-soon__btn--primary:focus-visible {
	background: var(--e-global-color-ccrreddeep, #A3161F);
	color: #FFFFFF;
}

.hof-soon__btn--ghost {
	border-color: var(--e-global-color-primary, #BE1E2D);
	color: var(--e-global-color-primary, #BE1E2D);
	background: transparent;
}

.hof-soon__btn--ghost:hover,
.hof-soon__btn--ghost:focus-visible {
	background: var(--e-global-color-primary, #BE1E2D);
	color: #FFFFFF;
}

/* Visitors get the placeholder only. Logged-in editors keep the page
 * title and the draft copy underneath it, so the drafts stay editable. */
body:not(.logged-in) main:has(.hof-soon) > .page-header {
	display: none;
}

body:not(.logged-in) .page-content > .hof-soon ~ * {
	display: none;
}

/* Logged-in: separate the draft from the placeholder so it is obvious
 * which part visitors cannot see. */
body.logged-in .page-content > .hof-soon {
	border-bottom: 1px solid #E3E5E8;
	padding-bottom: 72px;
}

body.logged-in .page-content > .hof-soon ~ * {
	max-width: 1300px;
	margin-inline: auto;
}

@media (max-width: 1024px) {

	.hof-soon {
		padding: 72px 24px;
	}
}

@media (max-width: 767px) {

	.hof-soon {
		padding: 56px 20px;
	}

	.hof-soon__body {
		font-size: 16px;
	}

	.hof-soon__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hof-soon__btn {
		width: 100%;
	}
}
/* ==================================================================
 * Mobile header (<=767px)
 * ------------------------------------------------------------------
 * The header row wraps, and logo (190px) + nav (254px) + NOMINATE
 * (154px) came to 598px in a 350px row, so it broke onto three lines
 * and stood 252px tall. Tablet and desktop are untouched.
 * ================================================================== */

@media (max-width: 767px) {

	/* The hero carries its own NOMINATE button, so the header one is a
	 * duplicate on a phone - and it is what forced the third row. */
	.hof-hdr-cta {
		display: none !important;
	}

	/* Logo and toggle share one row, vertically centred. */
	[data-elementor-type="header"] .e-con-inner {
		--flex-wrap: nowrap;
		--flex-wrap-mobile: nowrap;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 16px;
		min-height: 64px;
	}

	/* The logo keeps its size; the nav widget absorbs the spare width so
	 * its dropdown panel still has a sane width to open into. */
	.hof-hdr-logo {
		--width: auto;
		flex: 0 0 auto;
		/* The widget box is 46px around a 40px image because of inline
		 * leading, which pushed the logo off the header's centre line. */
		display: flex;
		align-items: center;
		line-height: 0;
	}

	.hof-hdr-logo img {
		display: block;
		width: auto;
		max-width: 100%;
		height: 40px;
	}

	.hof-hdr-nav {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The widget has no .elementor-widget-container: the toggle and the
	 * dropdown are direct children of a column flex box, and Elementor
	 * gives the toggle an auto left margin that centres it. Zero the gap
	 * so the closed dropdown stops padding the widget's height, and send
	 * the toggle to the right edge. */
	.hof-hdr-nav {
		gap: 0;
	}

	/* The closed dropdown is zero-height but keeps a 10px top margin, which
	 * padded the widget box and left the toggle 5px above the logo's centre
	 * line. */
	.hof-hdr-nav .elementor-nav-menu--dropdown {
		margin-top: 0 !important;
	}

	/* The open menu panel inherited the nav widget's 144px width, so
	 * EXPERIENCE CENTER and 2026 CLASS wrapped onto two lines and the panel
	 * pushed the header taller instead of overlaying the page. The widget is
	 * position:relative, which was anchoring it; making it static hands the
	 * containing block to the full-width header container.
	 */
	.hof-hdr-nav {
		position: static !important;
	}

	.hof-hdr-nav .elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 100%;
		right: 0;
		left: 0;
		width: auto !important;
		max-width: none !important;
		z-index: 99;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
	}

	.hof-hdr-nav .elementor-nav-menu--dropdown .elementor-item {
		justify-content: flex-start;
	}

	.hof-hdr-nav .elementor-menu-toggle {
		margin: auto 0 auto auto !important;
		/* 33px was under the 44px minimum tap target. */
		padding: 11px !important;
	}
}

/* ==================================================================
 * Tablet header menu (768px - 1024px)
 * ------------------------------------------------------------------
 * Phones got this in 0.8.x; tablets did not. At 768-1024 the open menu
 * panel was a 275px column sitting in the flow under the toggle, so it
 * pushed the header from 99px to 245px and shoved the logo and INQUIRE
 * button down the page. Same remedy as the phone: take the panel out of
 * the flow and let it overlay the page across the full header width.
 * Bounded at both ends - phones (<=767px) and desktop (>=1025px) keep
 * their own rules and must not move.
 * ================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

	/* The widget is position:relative, which anchored the panel to itself.
	 * Static hands the containing block to the full-width header. */
	.hof-hdr-nav {
		position: static !important;
		gap: 0;
	}

	.hof-hdr-nav .elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 100%;
		right: 0;
		left: 0;
		width: auto !important;
		max-width: none !important;
		margin-top: 0 !important;
		z-index: 99;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
	}

	.hof-hdr-nav .elementor-nav-menu--dropdown .elementor-item {
		justify-content: flex-start;
	}

	/* The hamburger was 33px, under the 44px minimum tap target. Same padding
	 * as the phone rule. Padding only: the toggle keeps its place between the
	 * logo and INQUIRE, and the 80px header is unaffected (44px < 80px). */
	.hof-hdr-nav .elementor-menu-toggle {
		padding: 11px !important;
	}
}

/* ==================================================================
 * Founding Class band: text aligned with the Reception copy above
 * ------------------------------------------------------------------
 * The Reception copy starts at its icon column (110px) + 62px gap, i.e.
 * 172px in from its box. Only the Founding Class copy column's left
 * padding needs to move, and it has to follow the Reception text through
 * three regimes (W = page width, the Founding box is W - 60px below
 * 1360px because of its 30px section padding):
 *
 *   >= 1361px      both boxes are 1300px wide and centred, so the copy
 *                  column needs the same 172px.
 *   1302-1360px    Reception keeps its icon at full size but loses its
 *                  right-hand 43% to the trophy, and its copy slides right
 *                  at 0.426px per px of width.
 *   1025-1301px    the icon column is being squeezed by the trophy
 *                  reserve (see the 1025-1360 block above): the copy
 *                  starts at 44.47px + 0.098 * W.
 *
 * The two lower expressions are written as percentages of the copy
 * column's own box, so no viewport arithmetic (and no scrollbar error) is
 * involved, and max() picks whichever regime applies. Desktop only:
 * stacked (<=1024px) the band has no icon column and keeps its gutter.
 * ================================================================== */
@media (min-width: 1361px) {
	.e-con.hof-fc-left {
		padding-left: 172px !important;
	}
}

@media (min-width: 1025px) and (max-width: 1360px) {
	.e-con.hof-fc-left {
		padding-left: max(calc(9.797% + 20.35px), calc(42.6% - 386.4px)) !important;
	}
}

/* Phones: with the band's gutter now matching Reception's 24px, the title
 * gained 12px of line width and "Soon" fell onto a line of its own.
 * Balancing keeps the three even lines it had before. */
@media (max-width: 767px) {
	.hof-fc-left .elementor-heading-title {
		text-wrap: balance;
	}
}

/* Standalone 2026 Class page: there is no Reception block above the band to
 * line its copy up with, so the copy sits at the container edge. */
@media (min-width: 1025px) {
	.e-con.hof-fc-left.hof-fc-solo {
		padding-left: 0 !important;
	}
}

/* ==================================================================
 * Experience Center (page 22) and Reception (page 23)
 * ------------------------------------------------------------------
 * Both pages are one section long, so on a tall screen the footer rode up
 * the page. The body becomes a column that is at least one screen tall;
 * header and footer keep their own height and the page content takes
 * whatever is left (viewport minus header minus footer). Content taller
 * than that simply makes the page taller. dvh is used where supported, so
 * a phone's collapsing address bar cannot leave a gap; vh is the fallback.
 * Scoped by page id: the homepage's copies of these sections are untouched.
 * ================================================================== */
body.page-id-22,
body.page-id-23 {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

body.page-id-22 > .elementor-location-header,
body.page-id-22 > .elementor-location-footer,
body.page-id-23 > .elementor-location-header,
body.page-id-23 > .elementor-location-footer {
	flex: 0 0 auto;
}

body.page-id-22 > .elementor.elementor-22,
body.page-id-23 > .elementor.elementor-23 {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

body.page-id-22 .hof-xc-section,
body.page-id-23 .hof-rc-section {
	flex: 1 0 auto;
}

/* The last paragraph of each text block kept its bottom margin, which with
 * the status line's own top margin and the column gap made a gap of about
 * 55px. The column gap alone now spaces the blocks. */
body.page-id-22 .hof-xc-body p:last-child,
body.page-id-23 .hof-rc-body p:last-child {
	margin-bottom: 0;
}

body.page-id-22 .hof-xc-body + .hof-xc-body {
	margin-top: 0 !important;
}

body.page-id-22 .hof-xc-copy .elementor-widget-button,
body.page-id-23 .hof-rc-section .elementor-widget-button {
	margin-top: 10px !important;
}

@media (min-width: 1025px) {

	/* Experience Center: copy column centred in the space, with room above
	 * and below so the eyebrow no longer sits on the section's top edge. */
	body.page-id-22 .hof-xc-section > .e-con:not(.hof-xc-media) {
		justify-content: center;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	/* Reception: the content row is centred in the section. */
	body.page-id-23 .hof-rc-section > .e-con-boxed {
		justify-content: center;
	}

	body.page-id-23 .hof-rc-section > .e-con-boxed > .e-con-inner {
		padding-top: 44px;
		padding-bottom: 44px;
	}
}

/* The three-line word stack beside the title: the 531px title line meets
 * the stack's rule below about 1480px, so it goes there rather than at
 * 1400 (the homepage keeps its own breakpoint). */
@media (min-width: 1025px) and (max-width: 1480px) {
	body.page-id-22 .hof-xc-stackwrap {
		display: none !important;
	}
}

/* Reception: below 1361px the 1300px content box is wider than the window,
 * so the red icon sat flush against the screen edge. */
@media (min-width: 1025px) and (max-width: 1360px) {
	body.page-id-23 .hof-rc-section > .e-con-boxed > .e-con-inner {
		padding-left: 30px;
	}
}

/* Stacked: the text block takes up any spare height, centred, and the
 * picture stays against the footer. */
@media (max-width: 1024px) {
	body.page-id-22 .hof-xc-section > .e-con:not(.hof-xc-media) {
		flex: 1 0 auto;
		justify-content: center;
	}

	body.page-id-23 .hof-rc-section > .e-con-boxed {
		flex: 1 0 auto;
		justify-content: center;
	}
}

/* Where the word stack is shown (above 1480px) its rule sat only 5 to 15px
 * from the end of the 531px title line, and the gap never grew past 28px even
 * at 2500px (the stack follows the 1300px container, the copy follows the
 * 48% image column). A 33px title (it was 35px) leaves 35px at 1481px and
 * more as the window widens. */
@media (min-width: 1481px) {
	body.page-id-22 .hof-xc-title .elementor-heading-title {
		font-size: 33px !important;
	}
}

/* Reception: the red people icon is taken off the page. Its box stays in the
 * layout (visibility, not display) wherever the text sits beside it, so the
 * heading, copy, button and photo keep exactly the positions they had, down
 * to the squeeze between 1025 and 1360px. On phones the icon sits above the
 * text, so there it is removed outright and the text moves up to fill the
 * space rather than leaving a blank block. */
body.page-id-23 .hof-rc-section .elementor-widget-icon {
	visibility: hidden;
}

@media (max-width: 767px) {
	body.page-id-23 .hof-rc-section .elementor-widget-icon {
		display: none;
	}
}

/* Homepage Experience Center: the same title-versus-word-stack fix as the
 * Experience Center page. Between 1401 and 1480px the stack's rule sat 3 to
 * 5px from the end of the title line, and 6 to 15px at wider windows. The
 * homepage hid the stack up to 1400px; it now hides it up to 1480px, and above
 * that the title is 33px (was 35px), which leaves 35px or more clear. */
@media (min-width: 1025px) and (max-width: 1480px) {
	body.page-id-19 .hof-xc-stackwrap {
		display: none !important;
	}
}

@media (min-width: 1481px) {
	body.page-id-19 .hof-xc-title .elementor-heading-title {
		font-size: 33px !important;
	}
}

/* ==================================================================
 * Stay Informed signup, thank-you page, and the Experience Center buttons
 * ================================================================== */

/* Any page whose main section carries .hof-fill-section fills the screen
 * between header and footer, exactly as the Experience Center and Reception
 * pages do (vh, then dvh); taller content just grows the page. */
body:has(.hof-fill-section) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

body:has(.hof-fill-section) > .elementor-location-header,
body:has(.hof-fill-section) > .elementor-location-footer {
	flex: 0 0 auto;
}

body:has(.hof-fill-section) > .elementor[data-elementor-type="wp-page"] {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

.hof-fill-section {
	flex: 1 0 auto;
}

/* Thank-you buttons: the same width, side by side, full width on phones. */
.hof-thanks-buttons {
	--flex-wrap: nowrap;
}

/* Sign-up form: roomy, tappable fields and a full-width button. */
.hof-signup-section .elementor-field-textual {
	min-height: 52px;
	padding-left: 14px;
	padding-right: 14px;
}

.hof-signup-section .elementor-field-group .elementor-button {
	width: 100%;
	min-height: 52px;
	justify-content: center;
}

.hof-signup-section .elementor-field-group label {
	margin-bottom: 6px;
}

/* Experience Center: STAY UP TO DATE and NOMINATE SOMEONE are one width and
 * stack with one gap. The column gap (14px) spaces them; only the first gets
 * a margin to separate it from the paragraph above. */
body.page-id-22 .hof-xc-copy .elementor-widget-button {
	margin-top: 0 !important;
}

body.page-id-22 .hof-xc-body + .elementor-widget-button {
	margin-top: 10px !important;
}

/* Title centring on the two new pages below 1025px: the ruled heading drops
 * its rules there and then left-aligned a single-line title under a centred
 * eyebrow. (About, Standards and Contact, pages 20, 21 and 25, are covered too as of 0.8.29.) */
@media (max-width: 1024px) {
	.hof-thanks-section .ccr-ruled-heading,
	body:has(.hof-signup-section) .ccr-ruled-heading,
	body.page-id-20 .ccr-ruled-heading,
	body.page-id-21 .ccr-ruled-heading,
	body.page-id-25 .ccr-ruled-heading {
		justify-content: center;
		text-align: center;
	}
}

/* Experience Center: the section is now as tall as the content needs, so the
 * photo crops from the sides; keep the "CCR HALL OF FAME" wall and the glass
 * entrance, which is where the picture's weight is. */
@media (min-width: 1025px) {
	body.page-id-22 .hof-xc-media img {
		object-position: 44% 40%;
	}
}


/* ==================================================================
 * Experience Center photo: neither wall sign is ever cropped
 * (2026-10-13, 0.8.25). Applies wherever the photo sits in a .hof-xc-media
 * column: the Experience Center page and the homepage section.
 *
 * Both signs ("CCR HALL OF FAME / CONSTRUCTION BUILDS MORE..." and
 * "Georgia's MUSEUM CITY / CARTERSVILLE") span 83% of the picture's width,
 * so the whole picture has to be shown across the column. From 1025px the
 * column is often not as wide-and-short as the picture (aspect 0.8 to 1.7),
 * and cover cropped the sides. The picture now keeps its own proportions at
 * the column's full width, centred, and a blurred copy of the same picture
 * (.hof-xc-backdrop, added by ccr_hof_tune_xc_image()) fills any strip above
 * and below (the picture's own top and bottom rows, stretched and blurred), with the picture's top and bottom edges faded into it. Where
 * the column is wider than the picture is tall (1920px) the picture simply
 * fills it. At 1024px and below the column already has the picture's exact
 * ratio, so nothing is cropped and nothing is added.
 * ================================================================== */
.hof-xc-backdrop { display: none; }

@media (min-width: 1025px) {

	/* The strips above and below the picture continue its own top and bottom
	 * rows (sky above, lawn below), stretched and blurred, so they read as
	 * more of the same photograph and not as a frame. Each half shows only
	 * the outermost ~45 source rows, whatever the column height. */
	.hof-xc-backdrop {
		display: block;
		position: absolute;
		inset: -30px;
		z-index: 0;
		background-size: 0 0; /* the span only carries the image URL for the two halves */
		background-repeat: no-repeat;
		filter: blur(22px);
	}

	.hof-xc-backdrop::before,
	.hof-xc-backdrop::after {
		content: "";
		position: absolute;
		right: 0;
		left: 0;
		height: 50%;
		background-image: inherit;
		background-repeat: no-repeat;
		background-size: 100% 6000px;
	}

	.hof-xc-backdrop::before {
		top: 0;
		background-position: 50% 0;
	}

	.hof-xc-backdrop::after {
		bottom: 0;
		background-position: 50% 100%;
	}

	.hof-xc-media .elementor-widget-image {
		display: flex;
		align-items: center;
	}

	.hof-xc-media .elementor-widget-image > .elementor-widget-container,
	.hof-xc-media .elementor-widget-image figure {
		height: auto;
	}

	/* Placed 40% of the way down the free space (60% of it below), so when
	 * the column is shorter than the picture (the homepage at 1440px and up)
	 * the trim comes mostly off the lawn, not off the top of the left sign;
	 * when the column is taller, the extra sky above is the smaller strip. */
	.hof-xc-media .elementor-widget-image img,
	body.page-id-22 .hof-xc-media img {
		position: absolute;
		top: 40%;
		left: 0;
		transform: translateY(-40%);
		z-index: 1;
		height: auto;
		aspect-ratio: 1614 / 975;
		object-fit: cover;
		object-position: center;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
	}
}


/* Contact card below 1025px: the forced line break between the phone number and
 * the email is hidden with the other desktop-only breaks, which ran the two links
 * together ("678.940.6433davidc@ccr-mag.com"). Each link takes its own line there.
 * (0.8.30, page 25 only; the links keep their 44px-tall tap area.) */
@media (max-width: 1024px) {
	body.page-id-25 .hof-std-intro p a[href^="tel:"],
	body.page-id-25 .hof-std-intro p a[href^="mailto:"] {
		display: block !important; /* beats the inline display set on the links */
		width: fit-content;
	}
}


/* Contact card links: identical gaps at every width (0.8.32).
 * The links are display:block with 11px padding and a fractional line height
 * (1.6 x 20.5px = 32.8px, 1.6 x 16.5px = 26.4px), so each box was 54.8px / 48.4px
 * and sat at a fractional offset: the browser snapped the first gap to 55px and
 * the next to 54px, which reads as "the gap after the phone number is bigger".
 * Rounding the line height up to a whole pixel makes every box the same whole
 * height, so all three gaps are identical. min-height keeps the 44px tap target.
 * (An earlier fix in this file, 0.8.30, only made the links display:block; it is
 * not the cause.) */
body.page-id-25 .hof-std-intro p a {
	line-height: 1.6;
	line-height: round(up, 1.6em, 1px);
	box-sizing: border-box;
	min-height: 44px;
}