/* Rugby Player Profiles — front-end styling for the [rpp_player_videos],
   [rpp_coach_videos] and [rpp_coach_history] shortcodes.
   Feel free to override any of this from your theme / Elementor's custom CSS. */

.rpp-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin: 20px 0;
}

.rpp-video-grid__frame {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}

.rpp-video-grid__frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.rpp-history-timeline {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	border-left: 3px solid #c9a227;
}

.rpp-history-timeline__item {
	position: relative;
	padding: 0 0 18px 22px;
}

.rpp-history-timeline__item::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #1a5632;
	border: 2px solid #fff;
}

.rpp-history-timeline__years {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #8a8f8c;
	margin-bottom: 2px;
}

.rpp-history-timeline__detail {
	display: block;
	font-size: 15px;
}

/* Training Program — weekly schedule */
.rpp-program {
	font-family: inherit;
}

.rpp-program-empty {
	padding: 16px;
	background: #f7f8f7;
	border-radius: 8px;
	color: #767b78;
}

.rpp-program__title {
	margin: 0 0 6px;
}

.rpp-program__intro {
	margin: 0 0 20px;
	color: #55605c;
}

.rpp-program-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	align-items: start;
}

.rpp-program-day {
	background: #fbfbfa;
	border: 1px solid #e5e8e5;
	border-radius: 10px;
	overflow: hidden;
}

.rpp-program-day__name {
	background: #3D3E85;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-align: center;
	padding: 10px 8px;
}

.rpp-program-day__slots {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
}

.rpp-slot-card {
	border-left: 4px solid #94a3ad;
	border-radius: 6px;
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rpp-slot-card.is-empty {
	opacity: 0.65;
}

.rpp-slot-card__time {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #55605c;
}

.rpp-slot-card__title {
	font-size: 14px;
	font-weight: 600;
	color: #1f2724;
}

.rpp-slot-card__coach {
	font-size: 12px;
	color: #6b716e;
}

.rpp-program-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #e5e8e5;
}

.rpp-program-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #55605c;
}

.rpp-program-legend__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.rpp-program-contacts {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #e5e8e5;
}

.rpp-program-contacts__title {
	margin: 0 0 8px;
	font-size: 14px;
}

.rpp-program-contacts__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	font-size: 13px;
	color: #55605c;
}

/* ==========================================================================
   Colour & font controls for the [rpp_player_name] / [rpp_player_stats]
   SHORTCODES only. If you're using the imported single-player template, the
   name is a native Heading widget and the stats are the native "Player
   Stats" widget — both styled directly from Elementor's own Style tab, and
   these CSS variables have no effect on them. This block only matters if
   you've deliberately used the raw shortcodes instead (see SETUP-GUIDE.md).

   Every value below has a sensible default, but is driven by a CSS variable
   so you can override just the colours you want — paste new values for any
   of these into Elementor's Site Settings -> Custom CSS (or a page's Advanced
   -> Custom CSS in Elementor Pro) without touching this file. Example:

     :root {
       --rpp-name-first-color: #ffffff;
       --rpp-name-last-color: #c9a227;
       --rpp-stat-label-color: rgba(255, 255, 255, 0.75);
       --rpp-stat-value-color: #ffffff;
     }
   ========================================================================== */
:root {
	--rpp-name-first-color: #ffffff;
	--rpp-name-last-color: #c9a227;
	--rpp-name-font-family: inherit;

	--rpp-stat-card-bg: rgba(0, 0, 0, 0.28);
	--rpp-stat-card-border: rgba(255, 255, 255, 0.18);
	--rpp-stat-label-color: rgba(255, 255, 255, 0.75);
	--rpp-stat-value-color: #ffffff;
}

/* Player hero — full-bleed photo with a gradient overlay and the name sitting
   on top of the image, sports-card style (photo + name are two shortcodes
   stacked in one Elementor column tagged "rpp-hero-col" — see the imported
   single-player template). Falls back gracefully to a plain stacked layout
   anywhere the "rpp-hero-col" wrapper isn't present. */
.rpp-hero-col {
	position: relative;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	align-items: flex-end;
}

.rpp-hero-col::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(18, 61, 35, 0) 35%, rgba(10, 20, 14, 0.55) 70%, rgba(6, 14, 10, 0.88) 100%);
	pointer-events: none;
	z-index: 1;
}

.rpp-hero-col .rpp-player-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.rpp-hero-col .rpp-player-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	max-width: none;
}

.rpp-hero-col .rpp-player-photo--placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
}

/* The hero name is two separate native Heading widgets (first name, surname)
   stacked in the hero column — this just keeps them above the gradient
   overlay, removes the browser's default heading margins so they sit snugly
   together, and adds breathing room below the last one. Color, size and
   weight are all set on each Heading widget's own Style tab in Elementor. */
.rpp-hero-col .elementor-widget-heading {
	position: relative;
	z-index: 2;
	padding: 0 40px;
}

.rpp-hero-col .elementor-widget-heading:last-child {
	padding-bottom: 32px;
}

.rpp-hero-col .elementor-heading-title {
	margin: 0;
	line-height: 1.05;
}

/* Player hero photo — fallback styling when used outside .rpp-hero-col
   (e.g. if you rebuild the hero manually with photo/name in separate columns) */
.rpp-player-photo img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
}

.rpp-player-photo--placeholder {
	width: 100%;
	max-width: 420px;
	aspect-ratio: 3 / 4;
	background: rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rpp-player-photo--placeholder .dashicons {
	font-size: 96px;
	width: 96px;
	height: 96px;
	color: rgba(255, 255, 255, 0.35);
}

/* Player hero name — an <h1>, so it inherits your theme's own heading font,
   weight and size automatically. Only the two name colours are set here
   (via --rpp-name-first-color / --rpp-name-last-color, see the :root block
   above) — no outline/stroke effect, no forced font, so it matches your
   theme's typography by default no matter what background colour you use. */
.rpp-player-name {
	display: inline-block;
	line-height: 1.15;
	margin: 0;
	font-family: var(--rpp-name-font-family);
}

.rpp-player-name__first {
	color: var(--rpp-name-first-color);
	display: block;
}

.rpp-player-name__last {
	color: var(--rpp-name-last-color);
	display: block;
}

.rpp-player-name--single {
	color: var(--rpp-name-last-color);
}

/* Player stat-card row (Age / Position / Height / Weight / Caps / Points).
   Cards use a dark semi-transparent overlay (not a light one), so the white
   label/value text stays readable regardless of what colour the section
   behind it is — navy, gold, dark green, all work without extra tweaking.
   Override --rpp-stat-card-bg / --rpp-stat-label-color / --rpp-stat-value-color
   in the :root block above if you want a light-card look instead.

   Sizing is deliberately NOT a fixed width per card. Every card starts with
   equal grow/shrink (flex: 1 1 0%) and no min-width override, so the browser
   falls back to its default "auto" minimum — which is each card's own text
   width (thanks to white-space: nowrap on the label/value below). A short
   value like "24" settles to a narrow card; a long one like "Loose Forward"
   or "Blindside Flanker" simply claims the width it actually needs, and its
   neighbours share whatever's left — without ever overlapping or wrapping
   onto a second line. On narrow screens, flex-wrap lets cards that no longer
   fit drop to a new row instead of getting squeezed unreadably thin, and the
   label/value font sizes scale down slightly with viewport width. */
.rpp-player-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0;
}

.rpp-player-stats__card {
	background: var(--rpp-stat-card-bg);
	border: 1px solid var(--rpp-stat-card-border);
	border-radius: 10px;
	padding: 14px 20px;
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rpp-player-stats__label {
	font-size: clamp(10px, 1.6vw, 11px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	color: var(--rpp-stat-label-color);
}

.rpp-player-stats__value {
	font-size: clamp(16px, 2.6vw, 22px);
	font-weight: 800;
	color: var(--rpp-stat-value-color);
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.rpp-player-stats {
		gap: 8px;
	}

	.rpp-player-stats__card {
		padding: 10px 14px;
	}
}

/* Player search — [rpp_player_search] filter bar + live results grid.
   Every colour is a CSS variable (defaults below) so you can match your own
   brand without touching this file — paste overrides into Elementor's Site
   Settings -> Custom CSS. Card defaults are navy/gold to match the rest of
   the site; the old green defaults elsewhere in this file were left over
   from an early template and don't apply here.

     :root {
       --rpp-search-card-bg: #1b1f3b;
       --rpp-search-card-bg-2: #12142b;
       --rpp-search-accent: #c9a227;
     }
*/
:root {
	--rpp-search-card-bg: #1b1f3b;
	--rpp-search-card-bg-2: #12142b;
	--rpp-search-accent: #c9a227;
	--rpp-search-bar-bg: #f7f8f7;
}

.rpp-player-search {
	--rpp-field-height: 42px;
}

.rpp-player-search__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 28px;
	padding: 18px 20px;
	background: var(--rpp-search-bar-bg);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	box-sizing: border-box;
}

.rpp-player-search__field {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	flex: 0 0 auto;
}

.rpp-player-search__field label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #55605c;
}

.rpp-player-search__field input,
.rpp-player-search__field select {
	box-sizing: border-box;
	height: var(--rpp-field-height);
	padding: 0 12px;
	border: 1px solid #d8dbd8;
	border-radius: 6px;
	font-size: 14px;
	line-height: var(--rpp-field-height);
	background: #fff;
	color: #1f2724;
}

.rpp-player-search__field input:focus,
.rpp-player-search__field select:focus {
	outline: none;
	border-color: var(--rpp-search-accent);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}

.rpp-player-search__field--name {
	flex: 1 1 220px;
	min-width: 180px;
}

.rpp-player-search__field--name input {
	width: 100%;
}

.rpp-player-search__field--position select {
	min-width: 190px;
}

.rpp-player-search__age-range {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rpp-player-search__age-range input {
	width: 64px;
	text-align: center;
}

.rpp-player-search__age-range span {
	color: #9aa19d;
}

.rpp-player-search__reset {
	height: var(--rpp-field-height);
	padding: 0 18px;
	border: 1px solid #d8dbd8;
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #55605c;
	cursor: pointer;
	align-self: flex-end;
}

.rpp-player-search__reset:hover {
	background: #f0f1f0;
	border-color: #c3c7c3;
}

.rpp-player-search__results[aria-busy="true"] {
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.rpp-player-search__empty {
	color: #767b78;
	padding: 24px 0;
}

.rpp-player-search__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 18px;
}

.rpp-player-search__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	background: linear-gradient(160deg, var(--rpp-search-card-bg) 0%, var(--rpp-search-card-bg-2) 100%);
	border-radius: 12px;
	padding: 20px 14px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.rpp-player-search__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.rpp-player-search__photo {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	border: 2px solid var(--rpp-search-accent);
	flex-shrink: 0;
}

.rpp-player-search__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: none;
}

.rpp-player-search__photo-placeholder {
	font-size: 36px;
	color: rgba(255, 255, 255, 0.6);
}

.rpp-player-search__name {
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.rpp-player-search__meta {
	color: var(--rpp-search-accent);
	font-size: 12px;
	margin-top: 6px;
}

.rpp-player-search__team {
	color: rgba(255, 255, 255, 0.6);
	font-size: 11px;
	margin-top: 3px;
}

@media (max-width: 560px) {
	.rpp-player-search__bar {
		flex-direction: column;
		align-items: stretch;
	}

	.rpp-player-search__field--name,
	.rpp-player-search__field--position,
	.rpp-player-search__reset {
		width: 100%;
	}
}

/* Coach bio — [rpp_coach_bio] paragraph. Inherits your theme's body text by
   default; this just adds a little breathing room. */
.rpp-coach-bio {
	line-height: 1.6;
	margin: 0 0 20px;
}

/* Coach Info widget (Age/Role/Team/Hometown/Experience) — sane defaults for
   before you've touched the Style tab. Deliberately its own class namespace
   (not shared with .rpp-player-stats) so the two widgets never interfere. */
.rpp-coach-info {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0;
}

.rpp-coach-info__card {
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	padding: 14px 20px;
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rpp-coach-info__label {
	font-size: clamp(10px, 1.6vw, 11px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.75);
}

.rpp-coach-info__value {
	font-size: clamp(15px, 2.4vw, 20px);
	font-weight: 800;
	color: #ffffff;
}

/* Related players — other players who share the current player's exact position */
.rpp-related-players {
	margin: 32px 0;
}

.rpp-related-players__title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #123d23;
}

.rpp-related-players__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}

.rpp-related-players__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	background: linear-gradient(160deg, #1a5632 0%, #123d23 100%);
	border-radius: 12px;
	padding: 18px 12px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rpp-related-players__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(18, 61, 35, 0.25);
}

.rpp-related-players__photo {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
	border: 2px solid #c9a227;
}

.rpp-related-players__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rpp-related-players__photo-placeholder {
	font-size: 36px;
	color: rgba(255, 255, 255, 0.6);
}

.rpp-related-players__name {
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.rpp-related-players__team {
	color: #c9a227;
	font-size: 12px;
	margin-top: 4px;
}