/*
 * The theme layer.
 *
 * Everything here styles markup the plugin does not render: the host theme's
 * page ground, the shell drawn by the Elementor page template, and the account
 * form Ultimate Member outputs. All of it sits OUTSIDE .sball-app, so it reads
 * the tokens from <html data-sball-theme> rather than from the app element.
 *
 * Hello Elementor is deliberately unopinionated, which is why it was chosen -
 * but "unopinionated" still means a white body and #333 text. Those are the
 * only defaults worth overriding; the rest is left alone.
 */

/* ------------------------------------------------------------ page ground */

body.sball-page {
	background: var(--bg);
	color: var(--ink);
	font-family: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

/*
 * The Elementor page template's shell. Transparent on purpose: the ground is
 * painted once, on the body, so there is no seam where one ends.
 */
body.sball-page .elementor-location-single {
	background: transparent;
}

body.sball-page a {
	color: var(--gold);
}

/*
 * ...but not inside the app, which dresses its own links.
 *
 * The rule above exists for the page chrome the host theme draws and for the
 * Ultimate Member forms. As written it also reached into .sball-app, where it
 * outranks the component classes - body.sball-page a is two elements and a
 * class, .sball-gameday is one class - and quietly repainted anything that had
 * not been given a colour explicitly. The game-day strip came out gold text on
 * a gold background.
 */
body.sball-page .sball-app a {
	color: inherit;
}

body.sball-page h1,
body.sball-page h2,
body.sball-page h3 {
	font-family: Oswald, sans-serif;
	color: var(--ink);
}

/* --------------------------------------------------------- account: shell */

/*
 * Ultimate Member ships a light card with its own blue. Every rule below is a
 * repaint in the site's tokens - no layout is changed, so UM's own responsive
 * behaviour (the uimob* classes) keeps working untouched.
 *
 * The .um in each selector is load-bearing, not decoration. UM's own rules are
 * .um .um-form input[type=text] - the same specificity as .sball-page .um-form
 * input[type=text] would be - and um-old-default.css is enqueued after this
 * file, so on a tie UM wins. The extra class puts these one step above it.
 */

.sball-page .um {
	color: var(--ink);
	max-width: none;
}

.sball-page .um .um-form {
	color: var(--ink);
}

/*
 * The three panels on the account page - the member's photo and name, the tab
 * list, and the tab's contents - are given a card's background, border and
 * corner here, and used to inherit their PADDING from Ultimate Member. UM's
 * numbers were written for UM's own look, and came out as 0, "0 30px" and
 * "18px 18px 6px": three things that plainly belong together, spaced as if they
 * did not. Worst on a phone, where the photo sat flush against the border.
 *
 * They now share the card padding the rest of the site uses. The .um in each
 * selector is still load-bearing - see the note above.
 */
.sball-page .um .um-account-side,
.sball-page .um .um-account-meta,
.sball-page .um .um-account-main {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: var(--card-pad);
}

/* The tab list pads itself; its rows must not pad again. */
.sball-page .um .um-account-side {
	padding: var(--s2) var(--card-pad);
}

.sball-page .um .um-account-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s2);
	margin-bottom: var(--s4);
}

/* UM stacks these with its own top padding, which double-counts the gap. */
.sball-page .um .um-account-meta .um-account-name,
.sball-page .um .um-account-meta .um-account-profile-link,
.sball-page .um .um-account-meta-img {
	padding: 0;
	margin: 0;
}

.sball-page .um .um-account-meta-img img,
.sball-page .um .um-account-meta img.um-avatar {
	display: block;
	border-radius: 50%;
}

.sball-page .um .um-account-name a,
.sball-page .um .um-account-profile-link a {
	color: var(--ink);
	font-family: Oswald, sans-serif;
	letter-spacing: .02em;
}

.sball-page .um .um-account-profile-link a {
	color: var(--ink2);
	font-family: Barlow, sans-serif;
	font-size: 13px;
}

/* ----------------------------------------------------------- account: nav */

.sball-page .um .um-account-side ul,
.sball-page .um .um-account-side li {
	background: transparent;
	border: 0;
}

.sball-page .um .um-account-side li a {
	background: transparent;
	color: var(--ink2);
	border-bottom: 1px solid var(--line);
	font-family: Oswald, sans-serif;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	/* UM's own tap targets are short; the dugout minimum is 44px. */
	min-height: 44px;
	display: flex;
	align-items: center;
}

.sball-page .um .um-account-side li a:hover,
.sball-page .um .um-account-side li a:focus {
	background: var(--surface);
	color: var(--ink);
}

.sball-page .um .um-account-side li.current a,
.sball-page .um .um-account-side li a.current {
	background: var(--surface);
	color: var(--gold);
}

.sball-page .um .um-account-side li a i,
.sball-page .um .um-account-side li a .um-account-icon {
	color: inherit;
}

.sball-page .um .um-account-side li a .um-account-arrow {
	color: var(--muted);
}

/* -------------------------------------------------------- account: fields */

.sball-page .um .um-account-main {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
}

.sball-page .um .um-account-heading {
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	font-family: Oswald, sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.sball-page .um .um-account-heading i {
	color: var(--gold);
}

.sball-page .um .um-form label,
.sball-page .um .um-field-label label {
	color: var(--ink2);
	font-family: Oswald, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sball-page .um .um-form input[type="text"],
.sball-page .um .um-form input[type="email"],
.sball-page .um .um-form input[type="tel"],
.sball-page .um .um-form input[type="number"],
.sball-page .um .um-form input[type="password"],
.sball-page .um .um-form input[type="search"],
.sball-page .um .um-form select,
.sball-page .um .um-form textarea {
	background: var(--bg);
	color: var(--ink);
	border: 1px solid var(--line2);
	border-radius: 8px;
	font-family: Barlow, sans-serif;
	font-size: 16px; /* iOS zooms anything smaller on focus */
	min-height: 44px;
	box-shadow: none;
}

.sball-page .um .um-form input:focus,
.sball-page .um .um-form select:focus,
.sball-page .um .um-form textarea:focus {
	border-color: var(--gold);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.sball-page .um .um-form input::placeholder,
.sball-page .um .um-form textarea::placeholder {
	color: var(--muted);
}

.sball-page .um .um-form input:disabled,
.sball-page .um .um-form input[readonly] {
	color: var(--muted);
	background: var(--ph2);
}

.sball-page .um .um-field-error,
.sball-page .um .um-notice.err {
	background: transparent;
	color: var(--red);
	border: 1px solid var(--red);
	border-radius: 8px;
}

.sball-page .um .um-field-arrow {
	color: var(--muted);
}

/* -------------------------------------------------------- account: button */

/*
 * The submit button is an <input>/<a> that UM paints in its own blue via an
 * inline-ish class. Match the app's primary button instead.
 */
.sball-page .um .um-button,
.sball-page .um input[type="submit"].um-button,
.sball-page .um a.um-button {
	background: var(--goldbg);
	color: var(--ongold);
	border: 0;
	border-radius: 999px;
	font-family: Oswald, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	min-height: 44px;
	box-shadow: none;
}

.sball-page .um .um-button:hover,
.sball-page .um .um-button:focus,
.sball-page .um a.um-button:hover,
.sball-page .um a.um-button:focus {
	background: var(--gold);
	color: var(--ongold);
	opacity: 1;
}

.sball-page .um .um-button.alt,
.sball-page .um a.um-button.alt {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line2);
}

/* The Appearance tab renders an .sball-app island; it brings its own tokens. */
.sball-app--inline {
	display: block;
	background: transparent;
}

/*
 * The Text alerts tab.
 *
 * Its fields sit inside UM's form, so three of UM's rules land on them. The
 * label repaint above turned the consent sentence beside the tick box into a
 * 12px uppercase caption wrapping under a bare 13px box. UM's
 * .um-account-main p gives every paragraph a 20px top margin and NO bottom one,
 * with !important, which left the Mobile number label jammed against the fine
 * print above it. And .um-form input[type=tel] forces 15px and a zero margin,
 * also !important, which put the label text flush on the field and let iOS
 * zoom the page on focus. The !importants below answer those three and
 * nothing else.
 *
 * Everything is scoped to the tab's own class names, so UM's own fields keep
 * UM's layout.
 */
.sball-page .um .sball-app--inline .sball-account-intro ~ .sball-hint {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink2);
}

.sball-page .um .um-form .sball-alert-number {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	margin: var(--s5) 0 var(--s4);
	line-height: 1.4;
}

.sball-page .um .um-form .sball-alert-number input {
	font-size: 16px !important; /* iOS zooms anything smaller on focus */
}

/* A sentence the member is agreeing to, not a field caption. */
.sball-page .um .um-form .sball-alert-optin {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-family: Barlow, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
	cursor: pointer;
}

.sball-page .um .um-form .sball-alert-optin input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--red);
}

/* "Added on ...", once opted in: belongs to the tick box, so it sits under the
   sentence rather than a UM paragraph's width away. 30px is the box plus the
   gap. */
.sball-page .um .um-account-main .sball-alert-optin + .sball-hint {
	/* A margin, not padding: UM zeroes paragraph padding with !important too. */
	margin: var(--s2) 0 0 30px !important;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink2);
}

/* ------------------------------------------------ sign-in / register cards */

/*
 * The standalone Ultimate Member forms. The homepage carries the real sign-in
 * bundle, so these are the fallback route - the page UM sends someone to when
 * they follow a password-reset link or hit /account/ signed out. They get the
 * same 460px card the app uses, so arriving here does not feel like leaving
 * the site.
 */
.sball-page .um-login,
.sball-page .um-register,
.sball-page .um-password,
.sball-page .um-profile {
	max-width: 460px;
	margin: 0 auto;
}

.sball-page .um-login .um-form,
.sball-page .um-register .um-form,
.sball-page .um-password .um-form {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 22px 20px;
}

.sball-page .um .um-col-alt,
.sball-page .um .um-col-alt-b {
	color: var(--ink2);
}

.sball-page .um .um-col-alt a,
.sball-page .um .um-col-alt-b a {
	color: var(--gold);
}

.sball-page .um .um-form-note,
.sball-page .um .um-misc-msg {
	color: var(--ink2);
}

.sball-page .um .um-profile-photo,
.sball-page .um .um-profile-meta {
	color: var(--ink);
}

/* ------------------------------------------------------- header sub-menus
 *
 * The Manage sections hang off the Manage item as a sub-menu. Elementor
 * positions the sub-menu correctly (absolute, top:100%) but leaves it
 * display:none and relies on SmartMenus to toggle it - and SmartMenus never
 * attaches here, because elementor's frontend.min.js executes once before its
 * own config object is defined and throws. Elementor recovers enough to render,
 * but the widget handlers do not run.
 *
 * Rather than depend on that being fixed, the dropdown opens on hover and on
 * focus-within. The second half is not a fallback - it is what makes the
 * sub-menu reachable by keyboard, which SmartMenus alone does not guarantee.
 */
.elementor-nav-menu--main li.menu-item-has-children > ul.sub-menu {
	display: block;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease;
}

.elementor-nav-menu--main li.menu-item-has-children:hover > ul.sub-menu,
.elementor-nav-menu--main li.menu-item-has-children:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/*
 * The dropdown has to sit above the rest of the nav. With enough items the
 * top-level row can wrap onto a second line, and without this the sub-menu
 * opens underneath that second row - the first section ends up hidden behind
 * whatever wrapped.
 */
.elementor-nav-menu--main li.menu-item-has-children > ul.sub-menu {
	min-width: 168px;
	padding-top: 4px;
	z-index: 60;
	background: var(--surface, #101F3C);
	border: 1px solid var(--line, #1B2842);
	border-radius: 8px;
	box-shadow: 0 10px 26px rgba(4, 9, 20, .5);
}

.elementor-nav-menu--main li.menu-item-has-children {
	position: relative;
	z-index: 50;
}

/*
 * In the burger menu the same list is rendered flat. There is no room for a
 * hover interaction on a phone, so the sections are simply shown, indented
 * under Manage.
 */
.elementor-nav-menu--dropdown li.menu-item-has-children > ul.sub-menu {
	display: block;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.elementor-nav-menu--dropdown ul.sub-menu a {
	padding-left: 32px !important;
	font-size: 13px;
}

/* ------------------------------------------- header and footer, light theme
 *
 * The Theme Builder templates carry their colours as literal hex values,
 * because Elementor has no way to say "whatever the member's palette is". So
 * the dark values live in the template and the light ones live here, keyed on
 * the same data-sball-theme attribute everything else reads.
 *
 * Selectors are prefixed with html[data-sball-theme="light"] purely for
 * specificity - Elementor's own rules are .elementor-550 .elementor-element...,
 * and a bare override would lose.
 *
 * The overlay is the interesting one: the photograph underneath is a sunset, so
 * a cream scrim at a slightly higher opacity keeps the header legible without
 * bleaching the picture to nothing.
 */

/* --- the header band --- */
html[data-sball-theme="light"] .elementor-element-site-header::before {
	background-color: #F6F1E6 !important;
	opacity: .62 !important;
}

html[data-sball-theme="light"] .elementor-element-site-header {
	border-color: var(--line2) !important;
}

html[data-sball-theme="light"] .elementor-element-header-title .elementor-heading-title {
	color: #0D2249 !important;
	text-shadow: 0 1px 8px rgba(255, 253, 248, .95) !important;
}

html[data-sball-theme="light"] .elementor-element-header-sub .elementor-heading-title {
	color: #4A453D !important;
	text-shadow: 0 1px 8px rgba(255, 253, 248, .95) !important;
}

/* --- the nav inside it --- */
html[data-sball-theme="light"] .elementor-element-header-menu .elementor-nav-menu--main .elementor-item {
	color: #2A3550 !important;
	fill: #2A3550 !important;
	text-shadow: 0 1px 6px rgba(255, 253, 248, .9);
}

html[data-sball-theme="light"] .elementor-element-header-menu .elementor-nav-menu--main .elementor-item:hover,
html[data-sball-theme="light"] .elementor-element-header-menu .elementor-nav-menu--main .elementor-item:focus {
	color: #0D2249 !important;
	fill: #0D2249 !important;
}

html[data-sball-theme="light"] .elementor-element-header-menu div.elementor-menu-toggle,
html[data-sball-theme="light"] .elementor-element-header-menu .elementor-menu-toggle {
	color: #0D2249 !important;
}

html[data-sball-theme="light"] .elementor-element-header-menu div.elementor-menu-toggle svg {
	fill: #0D2249 !important;
}

/* --- the Manage dropdown, and the burger panel, which share a background --- */
html[data-sball-theme="light"] .elementor-element-header-menu .elementor-nav-menu--dropdown {
	background-color: #FFFDF8 !important;
}

html[data-sball-theme="light"] .elementor-element-header-menu .elementor-nav-menu--dropdown a {
	color: #0D2249 !important;
	fill: #0D2249 !important;
}

html[data-sball-theme="light"] .elementor-nav-menu--main li.menu-item-has-children > ul.sub-menu {
	background: #FFFDF8;
	border-color: var(--line2);
	box-shadow: 0 10px 26px rgba(13, 34, 73, .14);
}

/* --- the footer --- */
html[data-sball-theme="light"] .elementor-element-site-footer {
	background-color: #FFFDF8 !important;
	border-color: var(--line2) !important;
}

html[data-sball-theme="light"] .elementor-element-footer-title .elementor-heading-title {
	color: #0D2249 !important;
}

html[data-sball-theme="light"] .elementor-element-footer-blurb {
	color: #4A453D !important;
}