/*
Theme Name: Rockvale Wrestling Club Child
Theme URI: https://rockvalewrestlingclub.com
Description: Child theme of Rockvale Wrestling Club. Adds the Registration page and its navigation link, and corrects the practice schedule and program groups, without modifying the parent theme. Switch back to the parent theme to remove everything it does.
Author: Rockvale Wrestling Club
Template: rockvale-theme-2
Version: 2.5.1
Requires PHP: 8.0
Requires at least: 6.0
Text Domain: rockvale-child
*/

/* ---------------------------------------------------------------------------
   The parent theme's stylesheet does all the work. Add any future custom CSS
   below this line and it will override the parent, because this file is
   enqueued after it.
   --------------------------------------------------------------------------- */

/* Registration sections: keep the ordered step lists tidy on small screens. */
@media (max-width: 768px) {
	#registration .card,
	#stack-team-app .card,
	#aau .card,
	#trackwrestling .card,
	#flowrestling .card {
		padding: 1.25rem;
	}
}

/* Smooth scrolling for the in-page anchors (#stack-team-app, #trackwrestling, etc.). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------------------------------------------------------------------------
   Quick-reference table.
   The parent's .schedule-table is a normal 4-column table, which overflows on a
   phone. Below 640px each row becomes its own stacked card with the column name
   shown as a label, so nothing is cut off and nobody has to scroll sideways.
   --------------------------------------------------------------------------- */

.rvwc-table-wrap {
	overflow-x: auto;
}

@media (max-width: 640px) {
	.rvwc-table-wrap {
		overflow-x: visible;
	}

	.schedule-table[data-rvwc-stack],
	.schedule-table[data-rvwc-stack] tbody,
	.schedule-table[data-rvwc-stack] tr,
	.schedule-table[data-rvwc-stack] td {
		display: block;
		width: 100%;
	}

	.schedule-table[data-rvwc-stack] thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.schedule-table[data-rvwc-stack] tr {
		margin-bottom: 1rem;
		padding: 0.5rem 0.25rem;
		background: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 0.5rem;
	}

	.schedule-table[data-rvwc-stack] td {
		display: flex;
		gap: 12px;
		align-items: baseline;
		justify-content: space-between;
		padding: 0.5rem 1rem;
		border-bottom: 1px solid #f3f4f6;
		text-align: right;
	}

	.schedule-table[data-rvwc-stack] tr td:last-child {
		border-bottom: none;
	}

	.schedule-table[data-rvwc-stack] td::before {
		content: attr(data-label);
		flex-shrink: 0;
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: #6b7280;
		text-align: left;
	}

	.schedule-table[data-rvwc-stack] tr:hover td {
		background: transparent;
	}
}

/* ---------------------------------------------------------------------------
   Jump cards.
   The four numbered cards are anchors that scroll to their section below. The
   parent's .card styling already handles the border and hover lift; these rules
   just stop the link from looking like a link and nudge the chevron on hover.
   --------------------------------------------------------------------------- */

.rvwc-jump {
	color: inherit;
	cursor: pointer;
}

.rvwc-jump h3,
.rvwc-jump p {
	text-decoration: none;
}

.rvwc-jump svg {
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.rvwc-jump:hover svg,
.rvwc-jump:focus-visible svg {
	transform: translateX(3px);
}

.rvwc-jump:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* Offset anchor targets so the fixed site header does not cover the heading. */
#registration,
#stack-team-app,
#aau,
#trackwrestling,
#flowrestling {
	scroll-margin-top: 90px;
}

/* ---------------------------------------------------------------------------
   Site-wide announcement banner.

   The parent's header is `position:fixed; top:0` and the page is cleared by
   `body{padding-top:70px}` (60px under 768px). A bar above the header therefore
   has to move BOTH: the header down by the bar's height, and the body padding
   down by the same amount. Everything keys off one custom property so there is
   a single number to change.

   --rvwc-notice-h has CSS fallbacks per breakpoint so the layout is still
   correct with JavaScript disabled; notice.js then measures the real rendered
   height and overwrites it, which is what handles the text wrapping to two or
   three lines at arbitrary widths.
   --------------------------------------------------------------------------- */

:root { --rvwc-notice-h: 44px; }

@media (max-width: 900px) { :root { --rvwc-notice-h: 68px; } }
@media (max-width: 560px) { :root { --rvwc-notice-h: 92px; } }
@media (max-width: 380px) { :root { --rvwc-notice-h: 112px; } }

.rvwc-notice {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: linear-gradient(90deg, #1D4ED8 0%, #2563EB 60%, #3B82F6 100%);
	color: #fff;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}

.rvwc-notice__inner {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	min-height: 44px;
	padding: 9px 46px 9px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 14px;
	text-align: center;
}

.rvwc-notice__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #fff;
}

.rvwc-notice__text strong { font-weight: 700; }

.rvwc-notice__sep { opacity: .55; }

.rvwc-notice__link {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.rvwc-notice__link:hover,
.rvwc-notice__link:focus { opacity: .82; }

.rvwc-notice__close {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 6px 10px;
	opacity: .75;
	border-radius: 4px;
}

.rvwc-notice__close:hover { opacity: 1; }
.rvwc-notice__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Push the fixed header and the page content down by the bar's height. */
.site-header { top: var(--rvwc-notice-h); }
body { padding-top: calc(70px + var(--rvwc-notice-h)); }

@media (max-width: 768px) {
	body { padding-top: calc(60px + var(--rvwc-notice-h)); }
	.rvwc-notice__inner { padding: 8px 42px 8px 16px; }
	.rvwc-notice__text,
	.rvwc-notice__link { font-size: 13px; }
}

/* Logged-in admins: WordPress pins its own 32px toolbar at top:0 and adds
   html{margin-top:32px}. The bar has to clear the toolbar, and the header has to
   clear both. The parent already ships `.admin-bar .site-header{top:32px}` at a
   higher specificity than a bare `.site-header`, so this has to match it and win
   on order. Visitors are never affected — logged out, body has no .admin-bar. */
body.admin-bar .rvwc-notice { top: 32px; }
body.admin-bar .site-header { top: calc(32px + var(--rvwc-notice-h)); }

@media screen and (max-width: 782px) {
	body.admin-bar .rvwc-notice { top: 46px; }
	body.admin-bar .site-header { top: calc(46px + var(--rvwc-notice-h)); }
}

/* Dismissed: collapse back to the original layout. Handled entirely by the
   custom property, so the admin-bar calc above stays correct. */
body.rvwc-no-notice { --rvwc-notice-h: 0px; }

@media print { .rvwc-notice { display: none; } }