/**
 * Football Pick 'Em Challenge landing page (/pickemchallenge/)
 * -----------------------------------------------------------------------------
 * Loaded only for this page — see theme_styles() in functions.php.
 *
 * The page is built in WPBakery, so its markup can't be edited from the theme.
 * Everything here corrects layout that the page's own builder CSS and the
 * shared header CSS get wrong on this template. Selectors are anchored to the
 * ids in header.php and to the section ids on the page, which are stable, and
 * are deliberately id-scoped so they outrank the builder's inline
 * <style data-type="vc_custom-css"> block (WPBakery prints that after all
 * enqueued stylesheets, so equal-specificity rules would lose to it).
 */

/* =============================================================================
   1. HEADER NAVIGATION
   -----------------------------------------------------------------------------
   custom.css targets this page's header menu through the ids WordPress
   auto-numbers per render (#menu-huddle-menu-1 / -2 / -3). That numbering
   depends on how many times the menu has already been rendered on the request,
   so the rules can land on the wrong list. When they land on the one inside
   #main-nav, it inherits an old vertical-nav treatment: a 300x234 logo image
   on the first item, 300px-wide items and 200px of top padding. In the current
   horizontal navbar that stretches the menu to 1280px — overflowing the
   viewport by ~400px — and inflates the sticky header to 434px tall, so the
   transparent header then covers the top of the page content.

   Re-anchor to #main-nav / #mobile-navigation and restore the same header nav
   the rest of the site uses.
   ========================================================================== */

#main-nav > ul {
	float: none;
	padding-top: 0;
}

/* The first menu item is a placeholder ("Logo", href="#") that only ever
   existed to carry the logo background image — it is not a destination.
   custom.css already tries to hide it, but via the unstable ids. */
#main-nav > ul > li:first-child,
#mobile-navigation > ul > li:first-child {
	display: none;
}

/* Was compensating for the hidden logo block above it. */
#main-nav > ul > li:nth-of-type(2) {
	margin-top: 0;
}

#main-nav > ul > li > a,
#main-nav > ul > li > a:visited,
#main-nav > ul > li:last-of-type > a,
#main-nav > ul > li:last-of-type > a:visited {
	width: auto;
	float: none;
	padding: 0.5rem 1rem;
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.5;
	color: #c2c1c1;
}

/* Same menu dropped into the hero as a WP nav-menu widget. On the live site
   an inline script renumbers its <ul> to #menu-huddle-menu-2 so custom.css's
   vertical logo-menu rules land on it (fixed top-right column: logo art on
   the placeholder first item, right-aligned green links below). Locally the
   auto-numbering doesn't line up, so the widget rendered unstyled. Re-anchor
   the same treatment to the stable #usply-logo-menu id; values mirror
   custom.css's #menu-huddle-menu-2 rules. Hidden below 992px by the page's
   own CSS, same as live. */
#usply-logo-menu .widget_nav_menu ul.menu {
	position: relative;
	float: right;
	padding-top: 200px;
}

/* First item is the "Logo" placeholder — becomes the logo image block. */
#usply-logo-menu .widget_nav_menu ul.menu > li:first-child {
	display: block;
	width: 300px;
	height: 234px;
	background-image: url('/wp-content/uploads/2026/02/USply-20th-Anniv-Partner-Logo-rgb-color-lg-box.png');
	background-repeat: no-repeat;
	margin-right: 0;
}

#usply-logo-menu .widget_nav_menu ul.menu > li:first-child a {
	display: none;
}

#usply-logo-menu .widget_nav_menu ul.menu > li:nth-of-type(2) {
	margin-top: 20px;
}

#usply-logo-menu .widget_nav_menu ul.menu li a,
#usply-logo-menu .widget_nav_menu ul.menu li a:visited {
	width: 300px;
	float: right;
	color: #4C721D;
	font-size: 1.5rem;
	line-height: 40px;
	text-align: right;
	padding: 0 35px 0 35px;
	margin: 0;
}

#usply-logo-menu .widget_nav_menu ul.menu li:last-of-type a {
	padding-bottom: 30px;
}

#usply-logo-menu .widget_nav_menu ul.menu li a:hover,
#usply-logo-menu .widget_nav_menu ul.menu li a:focus {
	background-color: transparent;
	color: #c2c1c1;
}

/* Header logo: forced to 130x90 while the source image is 300x234, which
   squashes it, and pinned hard against the right edge of the viewport. */
#header .mobileNav .site-branding-mobile {
	right: 12px;
}

#header .mobileNav .site-branding-mobile img {
	width: 110px;
	height: auto;
}

/* The nav is entirely in-page anchors and the header is sticky, so a section
   scrolled to by the browser itself — a deep link such as
   /pickemchallenge/#leaderboard, or a back/forward restore — would come to rest
   behind the header. In-page clicks are handled in page-pickemchallenge.js,
   which measures the header instead. */
#weekly-winners,
#leaderboard,
#news {
	scroll-margin-top: 145px;
}

@media only screen and (max-width: 991px) {

	#weekly-winners,
	#leaderboard,
	#news {
		scroll-margin-top: 190px;
	}
}

/* =============================================================================
   2. LEADERBOARD SECTION
   -----------------------------------------------------------------------------
   WPBakery renders #leaderboard as a flex container (.vc_section-flex), which
   makes its rows flex items. With no flex-basis they size to their content
   instead of the section, so below ~768px the whole leaderboard collapses to
   ~199px wide inside a 390px viewport — that is what shrinks the title art
   until the heading spills past it ("eaderboar") and crushes the rows.
   Normal block flow gives the rows the section's width at every size; the
   section's own vertical alignment setting (vc_section-o-content-top) is the
   default for block flow anyway.
   ========================================================================== */

#leaderboard {
	display: block;
}

/* The row's background was saved with an old dev hostname that no longer
   resolves, so the section renders with no background at all. Same asset,
   correct path. Long term this should be fixed by re-selecting the image in
   the row's WPBakery settings, which will regenerate the vc_custom_* class. */
#leaderboard {
	background-image: url('/wp-content/uploads/2022/08/pickem_background@2x.jpg') !important;
}

/* Title art is 1000x240. It was painted into a fixed 120px-tall band with
   background-size:contain, so on a narrow column the brush shrank to fit the
   height while the 38px heading kept its size and ran off both ends. Matching
   the box to the art's own ratio keeps the two locked together, and the text
   scales with the box. */
#leaderboard .leaderboard-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 460px;
	height: auto;
	aspect-ratio: 1000 / 240;
	margin: 40px auto 10px;
	padding: 0 6%;
	background-size: 100% 100%;
	font-size: clamp(20px, 6vw, 38px);
	line-height: 1;
}

/* Standings rows: the ACF/WPBakery repeater emits these as CSS table rows
   whose cells wrap plain <div>s, and the page CSS floats the image cell. Once
   the column narrows, the float and the anonymous table cells fight and the
   name/description stack on top of the position art. A two-column grid per
   row — art on the left, name over description — holds at any width. */
#leaderboard .leaderboard-postions .repeater-wrapper {
	display: block;
}

#leaderboard .leaderboard-postions .reapeater-row {
	display: grid;
	grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
	grid-template-areas:
		"art name"
		"art desc";
	align-items: center;
	column-gap: 16px;
	padding: 8px 0;
}

#leaderboard .leaderboard-image {
	grid-area: art;
	float: none;
}

#leaderboard .leaderboard-name {
	grid-area: name;
	align-self: end;
	padding-top: 0;
}

#leaderboard .leaderboard-desc {
	grid-area: desc;
	align-self: start;
}

#leaderboard .leaderboard-image img {
	display: block;
	width: 100%;
	max-width: 88px;
	height: auto;
}

/* Plugin default 1px #f1f1f1 cell borders — they read as stray boxes here. */
#leaderboard .reapeter-column {
	display: block;
	border: 0;
}

/* =============================================================================
   3. WEEKLY WINNERS CAROUSEL
   -----------------------------------------------------------------------------
   Same repeater markup as the leaderboard, wrapped in an Owl carousel. The
   repeater wrapper is display:table, so it sizes to its content rather than
   its container; Owl measures that width when it initialises (usply.js) and
   ends up with ~2140px slides inside a ~345px column, which is why all 18
   weeks render stacked and clipped on a phone instead of as one slide at a
   time. Making the wrapper a block gives Owl the real column width to measure.
   ========================================================================== */

.pickem_gallery .repeater-wrapper,
.pickem_gallery .repeater-child-wrapper {
	display: block;
	width: 100%;
}

.pickem_gallery .reapeater-row {
	display: flex;
}

.pickem_gallery .acfvc-sub-column {
	display: block;
	float: none;
	width: 100%;
}

/* Week banner art is also 1000x240 and had the same fixed-height treatment. */
.gallery-div .week_title .reapeter-column {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 460px;
	height: auto;
	aspect-ratio: 1000 / 240;
	margin: 30px auto 10px;
	padding: 0 6%;
	background-size: 100% 100%;
	font-size: clamp(18px, 5.5vw, 38px);
	line-height: 1;
	text-align: center;
}

.gallery-div .positions .repeater-child-wrapper > .reapeater-row {
	display: grid;
	grid-template-columns: minmax(0, 76px) minmax(0, 1fr);
	grid-template-areas:
		"art name"
		"art desc";
	align-items: center;
	column-gap: 14px;
	padding: 6px 0;
}

.gallery-div .position_image {
	grid-area: art;
	float: none;
}

.gallery-div .position_name {
	grid-area: name;
	align-self: end;
	padding-top: 0;
}

.gallery-div .position_desk {
	grid-area: desc;
	align-self: start;
}

.gallery-div .position_image img {
	display: block;
	width: 100%;
	max-width: 76px;
	height: auto;
}

.gallery-div .reapeter-column {
	border: 0;
}

/* Owl's arrows sit below the carousel; keep them clear of the last row. */
.gallery-div .pickem_gallery .owl-nav {
	position: relative;
	top: auto;
	margin-top: 20px;
	text-align: center;
}

.gallery-div .pickem_gallery .owl-nav .owl-prev,
.gallery-div .pickem_gallery .owl-nav .owl-next {
	position: static;
	display: inline-block;
	left: auto;
	right: auto;
	margin: 0 18px;
}

/* =============================================================================
   4. NARROW SCREENS
   ========================================================================== */

/* Tablet: the standings still sit in a half-width column here, so the 30px
   names wrap onto two lines. */
@media only screen and (max-width: 991px) {

	#leaderboard .leaderboard-name,
	.gallery-div .position_name {
		font-size: 24px;
		line-height: 1.05;
	}

	#leaderboard .leaderboard-desc,
	.gallery-div .position_desk {
		font-size: 16px;
		line-height: 1.2;
	}

	#leaderboard .leaderboard-postions .reapeater-row {
		grid-template-columns: minmax(0, 72px) minmax(0, 1fr);
		column-gap: 14px;
	}

	#leaderboard .leaderboard-image img {
		max-width: 72px;
	}
}

@media only screen and (max-width: 767px) {

	/* Section pulls a 120px top margin from the page CSS, which is a lot of
	   dead space once the section is only as wide as the phone. */
	#leaderboard .leaderboard-innerrow {
		margin-top: 40px;
	}

	/* The column's inner padding is zeroed by the page CSS, so keep the title
	   art off the edges of the screen. */
	#leaderboard .leaderboard-title {
		width: calc(100% - 30px);
	}

	#leaderboard .leaderboard-postions {
		padding-left: 15px;
		padding-right: 15px;
	}

	#leaderboard .leaderboard-name,
	.gallery-div .position_name {
		font-size: 22px;
		line-height: 1.05;
	}

	#leaderboard .leaderboard-desc,
	.gallery-div .position_desk {
		font-size: 15px;
		line-height: 1.2;
	}

	#leaderboard .leaderboard-postions .reapeater-row {
		grid-template-columns: minmax(0, 64px) minmax(0, 1fr);
		column-gap: 12px;
	}

	#leaderboard .leaderboard-image img {
		max-width: 64px;
	}

	.gallery-div .positions .repeater-child-wrapper > .reapeater-row {
		grid-template-columns: minmax(0, 58px) minmax(0, 1fr);
		column-gap: 10px;
	}

	.pickem_gallery .reapeater-row {
		flex-direction: column;
	}

	.gallery-div .position_image img {
		max-width: 58px;
	}
}