/*
 * Soccer Academy Calgary UA — small front-end corrections that belong to the site rather
 * than to any one page generator.
 */

/*
 * Clicking a link or a logo left the browser's blue focus ring behind. The ring is removed
 * for pointer clicks only — :focus-visible still fires for keyboard navigation, so tabbing
 * through the site keeps showing where you are. Dropping the outline outright would make the
 * site unusable without a mouse.
 */
:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

:focus-visible {
	outline: 2px solid #c8102e;
	outline-offset: 3px;
}

/*
 * Programme card actions. Both live in one text widget, so the theme's link styling has to
 * be beaten on its own ground — hence the widget class in the selector rather than !important.
 */
.sac-card-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.sac-card-actions--center {
	justify-content: center;
}

.sac-card-apply-line {
	margin: 0;
}

.elementor-widget-text-editor .sac-card-actions a.sac-card-btn,
.sac-card-actions a.sac-card-btn {
	display: inline-block;
	padding: 15px 30px;
	background: #c8102e;
	border: 2px solid #c8102e;
	border-radius: 4px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.elementor-widget-text-editor .sac-card-actions a.sac-card-btn:hover,
.sac-card-actions a.sac-card-btn:hover {
	background: #8a0c22;
	border-color: #8a0c22;
	color: #fff;
}

/* The apply link now sits with the copy, not in the actions row, so it is matched on its
 * own class — and the colour is marked important because a bare anchor inside a text widget
 * otherwise belongs to the theme, which paints it black and underlines it. */
.elementor-widget-text-editor a.sac-card-apply,
a.sac-card-apply {
	color: #c8102e !important;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-decoration: none !important;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
}

.elementor-widget-text-editor a.sac-card-apply:hover,
a.sac-card-apply:hover {
	border-bottom-color: transparent;
}


/* Phones: long button labels used to force the page wider than the screen. */
@media (max-width: 767px) {
	.elementor-button,
	.sac-card-actions a.sac-card-btn {
		white-space: normal;
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------- expandable biography */

/*
 * The founder's full career, folded away. A hidden checkbox drives it, so the control can sit
 * at the top while closed and at the foot of the biography once open — the academy asked that
 * whoever has just read it be able to close it where they are.
 */
.sac-bio {
	margin-top: 18px;
}

/* Off-screen but still focusable: the keyboard reaches the labels through it. */
.sac-bio__state {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}

.sac-bio__toggle {
	display: inline-block;
	cursor: pointer;
	list-style: none;
	color: #c8102e;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
}
.sac-bio__toggle::-webkit-details-marker { display: none; }
.sac-bio__toggle:hover { border-bottom-color: transparent; }
.sac-bio__state:focus-visible ~ .sac-bio__toggle--head,
.sac-bio__state:focus-visible ~ .sac-bio__body .sac-bio__toggle--foot {
	outline: 2px solid #c8102e;
	outline-offset: 4px;
}

.sac-bio__body { display: none; }
.sac-bio__state:checked ~ .sac-bio__body { display: block; }
.sac-bio__state:checked ~ .sac-bio__toggle--head { display: none; }

.sac-bio__toggle--foot {
	margin-top: 26px;
}

.sac-bio__body {
	margin-top: 18px;
	border-top: 1px solid #DCDCDE;
	padding-top: 18px;
}

/*
 * The photograph beside a profile long enough to scroll. Centred, it jumped the moment the
 * biography opened and then sat opposite empty space; pinned, it stays level with whatever
 * is being read. `align-self: flex-start` is what gives a flex child a height to stick
 * within — stretched to full height it has nowhere to travel.
 */
.sac-coach-photo--sticky {
	align-self: flex-start;
	position: sticky;
	/* Clears the sticky site header. */
	top: 124px;
}
@media (max-width: 1024px) {
	.sac-coach-photo--sticky { position: static; }
}
.sac-bio__body h4 {
	margin: 22px 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: #121212;
}
.sac-bio__body h4:first-child { margin-top: 0; }
.sac-bio__body ul {
	margin: 0 0 14px;
	padding-left: 20px;
}

/* --- Academy Success Stories ---------------------------------------------
   The cards come from the Success Stories post type, so their number changes
   whenever the academy adds a player. The grid is written to look right at one,
   two or six entries rather than assuming a fixed count. */
.sac-stories {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 28px;
	text-align: left;
}

.sac-story {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #E8E8E8;
	border-radius: 10px;
	overflow: hidden;
}

/*
 * No fixed aspect ratio: the academy's photographs arrive in whatever shape the phone was
 * held, and forcing a landscape frame cut the players' legs — and the footballs at their
 * feet — out of the first entry. A photograph shows at its own proportions until it would
 * run past 660px, which is the point where a tall portrait starts pushing the text off the
 * screen; past that it crops, anchored high enough to keep faces.
 */
.sac-story__frame {
	background: #F6F6F6;
	max-height: 660px;
	overflow: hidden;
}

.sac-story__photo {
	width: 100%;
	height: auto;
	max-height: 660px;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}

.sac-story__body {
	padding: 28px 30px 30px;
}

.sac-story__name {
	margin: 0 0 12px;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: #121212;
}

.sac-story__text p {
	margin: 0 0 12px;
	color: #5A5A5A;
	font-size: 16px;
	line-height: 1.75;
}
.sac-story__text p:last-child { margin-bottom: 0; }

/* One lone entry would otherwise stretch across the whole band. */
.sac-stories:has(.sac-story:only-child) {
	max-width: 620px;
	margin: 0 auto;
}

@media (max-width: 480px) {
	.sac-story__body { padding: 24px 22px 26px; }
}

/* --- Planned training days -----------------------------------------------
   The academy asked that this not read as small print, so the table is set at
   body size with generous rows. On a phone it would need a horizontal scroll
   at this width, so below 640px each row becomes a stacked pair instead —
   scrolling sideways to find out which days your child trains is exactly the
   kind of friction that makes a parent give up and message the coach. */
.sac-days {
	width: 100%;
	border-collapse: collapse;
	font-size: 17px;
	/* Astra draws a box around tables; the row rules below are the only ones wanted, and in
	   the stacked mobile layout the theme's border survived as a line down the left edge. */
	border: 0;
}

.sac-days th,
.sac-days td {
	padding: 14px 18px;
	text-align: left;
	border-bottom: 1px solid #E8E8E8;
	vertical-align: baseline;
}

.sac-days thead th {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #C8102E;
	border-bottom: 2px solid #C8102E;
	white-space: nowrap;
}

.sac-days tbody th {
	font-weight: 700;
	color: #121212;
	white-space: nowrap;
	width: 34%;
}

.sac-days tbody td {
	color: #5A5A5A;
}

.sac-days tbody tr:last-child th,
.sac-days tbody tr:last-child td {
	border-bottom: 0;
}

.sac-days em {
	font-style: normal;
	color: #C8102E;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

@media (max-width: 640px) {
	.sac-days,
	.sac-days tbody,
	.sac-days tr,
	.sac-days th,
	.sac-days td { display: block; width: auto; }

	.sac-days thead { display: none; }

	.sac-days tbody tr {
		padding: 14px 0;
		border-bottom: 1px solid #E8E8E8;
	}
	.sac-days tbody tr:last-child { border-bottom: 0; }

	.sac-days tbody th {
		padding: 0 0 4px;
		border: 0;
		font-size: 18px;
	}
	.sac-days tbody td {
		padding: 0;
		border: 0;
		font-size: 16px;
	}
}

/* --- Tour photographs ----------------------------------------------------
   Side by side on a desktop, stacked on a phone. Elementor's container gap
   separates them across but not down once they wrap, so stacked they sat flush
   and read as one long collage instead of three photographs. */
@media (max-width: 767px) {
	.sac-tour-photo { margin-bottom: 24px; }
	.sac-tour-photo:last-child { margin-bottom: 0; }
}