/*
 * Snow Stream Core - base design layer
 * -----------------------------------------------------------------------------
 * Every Snow Stream stylesheet declares this file as a dependency, so it is
 * always loaded first and exactly once. It owns two things and nothing else:
 *
 *   1. Design tokens (custom properties) - the single source of truth for
 *      colour, spacing, radius, shadow and type scale.
 *   2. Shared primitives (.ssc-button, .ssc-alert, .ssc-card, .ssc-badge,
 *      form controls, responsive tables).
 *
 * Feature stylesheets must NOT redefine these primitives. Before v0.12 both
 * registration.css and gallery.css declared their own conflicting .ssc-button
 * and .ssc-alert rules, so the rendered result depended on enqueue order.
 *
 * FONT SIZES ARE IN px - DO NOT SWITCH THEM BACK TO rem
 * -----------------------------------------------------
 * Hestia loads Bootstrap 3, which sets `html { font-size: 10px }`. Every rem in
 * a Snow Stream stylesheet therefore rendered at 62.5% of its intended size:
 * `.84rem` meant 13.4px and shipped as 8.4px, and `.ssc-form-step h3` at 1.05rem
 * came out smaller than the 16px body text around it. Labels on the parent
 * dashboard were 7.8-9.2px on a phone - effectively unreadable.
 *
 * px keeps our type scale independent of whatever root size the theme picks.
 */

:root {
	/* Brand */
	--ssc-brand:            #123b70;
	--ssc-brand-dark:       #0c2d58;
	--ssc-brand-ink:        #173968;
	--ssc-brand-soft:       #eef3f8;
	--ssc-brand-softer:     #f8fbff;
	--ssc-accent:           #bd2385;

	/* Semantic */
	--ssc-success:          #176a45;
	--ssc-success-ink:      #17633b;
	--ssc-success-bg:       #e8f7ee;
	--ssc-success-border:   #b9dfc7;
	--ssc-warning:          #7a5d00;
	--ssc-warning-bg:       #fff5d9;
	--ssc-warning-border:   #e2c77e;
	--ssc-danger:           #a62929;
	--ssc-danger-bg:        #fdecec;
	--ssc-danger-border:    #e4a6a6;
	--ssc-info-bg:          #f2f8ff;
	--ssc-info-border:      #b9cce0;

	/* Neutrals */
	--ssc-text:             #23364d;
	--ssc-text-strong:      #1f3349;
	--ssc-text-muted:       #65778b;
	--ssc-ink-900:          #26384a;
	--ssc-ink-700:          #34475a;
	--ssc-surface:          #fff;
	--ssc-surface-subtle:   #f8fbff;
	--ssc-surface-sunken:   #f4f8fc;
	--ssc-surface-panel:    #fafbfd;
	--ssc-surface-muted:    #f7f9fc;
	--ssc-surface-thumb:    #eef2f7;
	--ssc-line:             #d8e4ef;
	--ssc-line-soft:        #dfe5ec;
	--ssc-line-brand:       #cedae6;
	--ssc-line-strong:      #bfcddd;
	--ssc-line-input:       #ccd6e0;
	--ssc-line-dashed:      #b8c6d5;

	/* Radius */
	--ssc-radius-sm:        8px;
	--ssc-radius:           11px;
	--ssc-radius-lg:        16px;
	--ssc-radius-pill:      999px;

	/* Spacing scale */
	--ssc-space-1:          4px;
	--ssc-space-2:          8px;
	--ssc-space-3:          12px;
	--ssc-space-4:          16px;
	--ssc-space-5:          22px;
	--ssc-space-6:          28px;

	/* Elevation */
	--ssc-shadow-sm:        0 4px 14px rgba(20, 48, 82, .06);
	--ssc-shadow:           0 12px 34px rgba(20, 48, 82, .08);

	/* Focus ring - one definition, used everywhere */
	--ssc-focus:            0 0 0 3px rgba(37, 111, 181, .28);

	/* Layout */
	--ssc-container:        1120px;
	--ssc-container-narrow: 980px;

	/*
	 * Minimum interactive size. 44px is the accessibility floor for touch
	 * targets; several v0.11 controls were 28-34px and hard to hit on phones.
	 */
	--ssc-tap:              44px;
}

/* ---------------------------------------------------------------- layout - */

.ssc-container {
	width: 100%;
	max-width: var(--ssc-container);
	margin-inline: auto;
	box-sizing: border-box;
}

.ssc-container-narrow {
	max-width: var(--ssc-container-narrow);
}

/*
 * Hestia applies uppercase to headings, which mangles Greek accented capitals
 * (ΑΊΤΗΣΗ instead of ΑΙΤΗΣΗ). Opt out inside every Snow Stream surface.
 */
.ssc-registration-wrap h2, .ssc-registration-wrap h3, .ssc-registration-wrap h4,
.ssc-dashboard h2, .ssc-dashboard h3, .ssc-dashboard h4,
.ssc-excursions-calendar h2, .ssc-excursions-calendar h3,
.ssc-private-gallery h2, .ssc-coach-workspace h2, .ssc-coach-workspace h3,
.ssc-registration-page .page-header .title, .ssc-registration-page .hestia-title,
.ssc-member-dashboard-page .page-header .title, .ssc-member-dashboard-page .hestia-title {
	text-transform: none !important;
}

/*
 * Hestia uppercases every <button> and submit input. The site is served as
 * lang="en-US", so the browser keeps the Greek tonos and labels shout with the
 * wrong accents: "ΑΠΌΚΡΥΨΗ ΓΙΑ ΕΜΈΝΑ" instead of "Απόκρυψη για εμένα".
 *
 * v0.13.0 opted out .ssc-button by name and missed .ssc-link-button and the
 * bare buttons in the gallery. Worse, the miss was visible: in the gallery
 * action row "Απόκρυψη για εμένα" is a <button> and shouted, while the
 * "Αναφορά" next to it is a <summary> and did not - two neighbouring controls
 * rendering differently.
 *
 * Opting out every control inside a Snow Stream component ends the whole class
 * of bug rather than one class name at a time. A class selector plus an element
 * beats Hestia's bare `button`, so no !important is needed.
 */
[class*="ssc-"] button,
[class*="ssc-"] input[type="submit"],
[class*="ssc-"] input[type="button"],
button[class*="ssc-"],
input[class*="ssc-"] {
	text-transform: none;
}

/* ---------------------------------------------------------------- button - */

/*
 * `.ssc-excursion-button` and `.ssc-coach-workspace-button` are legacy class
 * names used in the excursion calendar and coach workspace markup. Rather than
 * rewriting every template, they are aliased onto the same definition here, so
 * there is still exactly one source of truth for how a Snow Stream button
 * looks. The feature stylesheets only keep genuinely local overrides (width
 * constraints, wrapping behaviour).
 */
.ssc-button,
.ssc-excursion-button,
.ssc-coach-workspace-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ssc-space-2);
	min-height: var(--ssc-tap);
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--ssc-radius-sm);
	background: var(--ssc-brand);
	color: #fff !important;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none !important;
	/*
	 * Hestia uppercases every `button`. The site is served with lang="en-US", so
	 * the browser does not strip the Greek tonos and labels render as "ΕΠΌΜΕΝΟ"
	 * and "ΥΠΟΒΟΛΉ ΑΊΤΗΣΗΣ". A class beats Hestia's element selector, so no
	 * !important is needed here.
	 */
	text-transform: none;
	cursor: pointer;
}

.ssc-button:hover,
.ssc-button:focus,
.ssc-excursion-button:hover,
.ssc-excursion-button:focus,
.ssc-coach-workspace-button:hover,
.ssc-coach-workspace-button:focus {
	background: var(--ssc-brand-dark);
	color: #fff !important;
	text-decoration: none !important;
}

.ssc-button:focus-visible,
.ssc-excursion-button:focus-visible,
.ssc-coach-workspace-button:focus-visible {
	outline: none;
	box-shadow: var(--ssc-focus);
}

.ssc-button[disabled],
.ssc-button.is-disabled {
	opacity: .55;
	cursor: not-allowed;
}

.ssc-button-secondary,
.ssc-button-light,
.ssc-excursion-button-secondary,
.ssc-coach-workspace-button.secondary {
	background: var(--ssc-brand-soft);
	border-color: var(--ssc-line-brand);
	color: var(--ssc-brand-ink) !important;
}

.ssc-button-secondary:hover,
.ssc-button-secondary:focus,
.ssc-button-light:hover,
.ssc-button-light:focus,
.ssc-excursion-button-secondary:hover,
.ssc-excursion-button-secondary:focus,
.ssc-coach-workspace-button.secondary:hover,
.ssc-coach-workspace-button.secondary:focus {
	background: #e2ebf4;
	color: var(--ssc-brand-ink) !important;
}

.ssc-button-success,
.ssc-submit {
	background: var(--ssc-success);
}

.ssc-button-success:hover,
.ssc-submit:hover {
	background: #105235;
}

/*
 * Secondary/inline buttons stay visually compact on a mouse-driven screen.
 * Forcing all of them to 44px would turn every "Απόκρυψη" / "Αναφορά" link into
 * a chunky block on desktop. The accessibility floor matters on touch, so the
 * pointer: coarse block further down grows them there instead.
 */
.ssc-button-small {
	min-height: 34px;
	padding: 6px 12px;
	font-size: 14px;
}

.ssc-button-block {
	width: 100%;
}

/*
 * Quiet secondary control - the row of actions under a gallery photo
 * ("Απόκρυψη για εμένα", "Αναφορά", "Έγκριση", "Διαγραφή").
 *
 * This used to be a bare underlined button, and it inherited a mess from
 * Hestia, because zeroing border/background/padding is not enough - the theme
 * also sets, on every `button`:
 *
 *   - a pink Material elevation `box-shadow`, which on a transparent
 *     zero-padding button drew a detached pink frame below the label
 *   - `margin: 10px 1px`, which scattered the row out of alignment
 *   - `text-transform: uppercase`
 *
 * The shadow rule is `body:not(.woocommerce-page) button:not(...):not(...)`,
 * far more specific than a single class, so `!important` is the only way out -
 * the same approach `.ssc-button` already takes for colour and underline.
 *
 * `.ssc-report-details > summary` is styled together with it on purpose: the two
 * sit side by side in the same row, and while one was a <button> and the other a
 * <summary> they rendered nothing alike.
 */
.ssc-link-button,
.ssc-report-details > summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ssc-space-1);
	min-height: 0;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--ssc-line-input);
	border-radius: var(--ssc-radius-sm);
	background: var(--ssc-surface);
	box-shadow: none !important;
	color: var(--ssc-brand-ink);
	font: inherit;
	font-size: 14px;
	line-height: 1.25;
	text-decoration: none !important;
	text-transform: none;
	list-style: none;
	cursor: pointer;
}

/* Safari still paints the disclosure triangle without this. */
.ssc-report-details > summary::-webkit-details-marker {
	display: none;
}

.ssc-link-button:hover,
.ssc-link-button:focus,
.ssc-report-details > summary:hover,
.ssc-report-details > summary:focus {
	border-color: var(--ssc-line-brand);
	background: var(--ssc-brand-soft);
}

.ssc-link-button:focus-visible,
.ssc-report-details > summary:focus-visible {
	outline: none;
	box-shadow: var(--ssc-focus) !important;
}

.ssc-link-button.ssc-danger {
	border-color: var(--ssc-danger-border);
	color: #b42318;
}

.ssc-link-button.ssc-danger:hover,
.ssc-link-button.ssc-danger:focus {
	border-color: var(--ssc-danger-border);
	background: var(--ssc-danger-bg);
}

/*
 * Touch devices: every real control reaches the 44px floor. Scoped to
 * pointer: coarse so the desktop layout is untouched. These are all inside
 * flex/grid rows with a gap, so enlarging them cannot create overlapping hit
 * areas.
 */
@media (pointer: coarse) {
	.ssc-button-small,
	.ssc-link-button,
	.ssc-form select,
	.ssc-registration-form select,
	.ssc-gallery-filter select,
	.ssc-gallery-upload-form select,
	.ssc-month-filter select,
	.ssc-photo-tag-editor summary,
	.ssc-report-details summary,
	.ssc-coach-back {
		min-height: var(--ssc-tap);
		padding-block: 10px;
	}

	.ssc-button-small {
		padding-inline: 14px;
	}

	/*
	 * Checkbox rows: the label is the hit area, so it - not just the box -
	 * needs the height. display:flex keeps the text vertically centred.
	 */
	.ssc-photo-tag-options label,
	.ssc-equipment-options label,
	.ssc-athlete-choice,
	.ssc-consent {
		min-height: var(--ssc-tap);
		align-items: center;
	}

	/* The consent text is multi-line; keep the box aligned to the first line. */
	.ssc-consent {
		align-items: flex-start;
	}

	/* Taller rows need more room before the list starts scrolling. */
	.ssc-photo-tag-options {
		max-height: 260px;
	}
}

/* ----------------------------------------------------------------- alert - */

.ssc-alert {
	padding: var(--ssc-space-4) 18px;
	margin: 18px 0;
	border: 1px solid var(--ssc-info-border);
	border-radius: var(--ssc-radius);
	background: var(--ssc-info-bg);
	color: var(--ssc-text);
}

.ssc-alert-success {
	border-color: var(--ssc-success-border);
	background: var(--ssc-success-bg);
	color: #17633b;
}

.ssc-alert-error {
	border-color: var(--ssc-danger-border);
	background: #fff4f4;
	color: #7b2020;
}

.ssc-alert-warning {
	border-color: var(--ssc-warning-border);
	background: #fffaf0;
	color: #6b5930;
}

.ssc-alert ul {
	margin: var(--ssc-space-2) 0 0;
}

/* ------------------------------------------------------------------ card - */

.ssc-card {
	border: 1px solid var(--ssc-line);
	border-radius: var(--ssc-radius-lg);
	background: var(--ssc-surface);
	padding: var(--ssc-space-5);
	box-sizing: border-box;
}

.ssc-card-subtle {
	background: var(--ssc-surface-subtle);
}

/* ----------------------------------------------------------------- badge - */

.ssc-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	padding: 4px 10px;
	border-radius: var(--ssc-radius-pill);
	background: var(--ssc-brand-soft);
	color: var(--ssc-brand-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.ssc-badge-success { background: var(--ssc-success-bg); color: var(--ssc-success); }
.ssc-badge-warning { background: var(--ssc-warning-bg); color: var(--ssc-warning); }
.ssc-badge-danger  { background: var(--ssc-danger-bg);  color: var(--ssc-danger);  }
.ssc-badge-muted   { background: #eef0f3;               color: #4f5964;            }
/* WE applications sit in the same queue as ski ones and must be tellable apart at a glance. */
.ssc-badge-we      { background: #e4f1fb;               color: #10507f;            }

/* --------------------------------------------------------- form controls - */

.ssc-field-control,
.ssc-form input[type="text"],
.ssc-form input[type="email"],
.ssc-form input[type="tel"],
.ssc-form input[type="date"],
.ssc-form input[type="number"],
.ssc-form input[type="search"],
.ssc-form select,
.ssc-form textarea {
	display: block;
	width: 100%;
	min-height: var(--ssc-tap);
	padding: 11px 13px;
	border: 1px solid var(--ssc-line-strong);
	border-radius: var(--ssc-radius-sm);
	background: var(--ssc-surface);
	color: var(--ssc-text-strong);
	font: inherit;
	box-sizing: border-box;
}

.ssc-field-control:focus,
.ssc-form input:focus,
.ssc-form select:focus,
.ssc-form textarea:focus {
	outline: none;
	border-color: #256fb5;
	box-shadow: var(--ssc-focus);
}

.ssc-form textarea {
	min-height: 120px;
	line-height: 1.5;
	resize: vertical;
}

/*
 * Checkboxes and radios are drawn by the browser, so they ignore the tap-size
 * token. Enlarge them directly - the v0.11 defaults were ~13px on mobile.
 */
.ssc-form input[type="checkbox"],
.ssc-form input[type="radio"],
.ssc-consent input[type="checkbox"],
.ssc-athlete-choice input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	accent-color: var(--ssc-brand);
}

.ssc-hint,
.ssc-optional-note {
	display: block;
	margin-top: 6px;
	color: var(--ssc-text-muted);
	font-size: 14px;
	font-weight: 400;
}

.ssc-optional-note {
	font-style: italic;
}

/* ------------------------------------------------------- responsive table -
 *
 * On phones a wide table either overflows the viewport or (as in v0.11, which
 * used white-space: nowrap) forces horizontal scrolling inside the page. Below
 * 700px each row collapses into a stacked card and every cell prints its own
 * heading from the data-label attribute set in PHP.
 */

.ssc-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--ssc-line);
	border-radius: var(--ssc-radius);
	background: var(--ssc-surface);
	-webkit-overflow-scrolling: touch;
}

.ssc-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ssc-surface);
}

.ssc-table th,
.ssc-table td {
	padding: 11px 13px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #e8eef4;
}

.ssc-table th {
	background: var(--ssc-surface-sunken);
	color: #52657b;
	font-size: 14px;
	white-space: nowrap;
}

.ssc-table tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 700px) {
	.ssc-table-wrap {
		overflow-x: visible;
		border: 0;
		background: transparent;
	}

	.ssc-table,
	.ssc-table tbody,
	.ssc-table tr,
	.ssc-table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.ssc-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.ssc-table tr {
		margin-bottom: var(--ssc-space-3);
		border: 1px solid var(--ssc-line);
		border-radius: var(--ssc-radius);
		background: var(--ssc-surface);
		overflow: hidden;
	}

	.ssc-table td {
		display: grid;
		grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
		gap: var(--ssc-space-3);
		padding: 10px 13px;
	}

	.ssc-table td::before {
		content: attr(data-label);
		color: var(--ssc-text-muted);
		font-size: 13px;
		font-weight: 700;
	}

	.ssc-table td:last-child {
		border-bottom: 0;
	}
}

/* ---------------------------------------------------------------- helpers - */

.ssc-stack       { display: grid; gap: var(--ssc-space-3); }
.ssc-stack-lg    { display: grid; gap: var(--ssc-space-5); }
.ssc-row         { display: flex; flex-wrap: wrap; gap: var(--ssc-space-3); }
.ssc-row-between { display: flex; flex-wrap: wrap; gap: var(--ssc-space-4); justify-content: space-between; align-items: flex-start; }
.ssc-muted       { color: var(--ssc-text-muted); }
.ssc-empty       { padding: 22px; border: 1px dashed var(--ssc-line-dashed); border-radius: var(--ssc-radius); color: var(--ssc-text-muted); text-align: center; }

/* Screen-reader-only text. */
.ssc-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Honeypot field - visually and programmatically out of the way. */
.ssc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
	.ssc-button,
	.ssc-step-tab {
		transition: none !important;
	}
}

/* ------------------------------------------------- cards / table switch - */

/*
 * Shared by every member-facing list (SSC_View). Lives in base.css because four
 * different features render it and none of them owns it.
 */
.ssc-view-toggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ssc-space-2);
	margin: 0 0 var(--ssc-space-4);
	color: var(--ssc-text-muted);
	font-size: 14px;
}

.ssc-view-chip {
	padding: 5px 13px;
	border: 1px solid var(--ssc-line);
	border-radius: var(--ssc-radius-pill);
	background: var(--ssc-surface);
	color: var(--ssc-brand-ink) !important;
	font-size: 14px;
	text-decoration: none !important;
}

.ssc-view-chip.is-active {
	border-color: var(--ssc-brand);
	background: var(--ssc-brand);
	color: #fff !important;
}

.ssc-list-title {
	margin: 0 0 var(--ssc-space-3);
	text-transform: none;
}

/* Generic table containment. Several front-end screens reuse these classes
 * without loading coach-workspace.css, so the overflow rule belongs here. */
.ssc-summary-table-wrap,
.ssc-table-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
}
.ssc-summary-table,
.ssc-table {
	max-width: 100%;
}

/* --------------------------------------------- operations screens: width - */

/*
 * Hestia puts page content in `.col-md-8.col-md-offset-2` - two thirds of a
 * 1170px container, so ~750px of usable width no matter how large the monitor.
 * That is right for an article and wrong for a roster: the nine-column
 * "Όλη η εξόρμηση" table is ~850px at its narrowest and had to be scrolled
 * sideways on a 1600px screen.
 *
 * SSC_Site_Integration::wide_layout_body_class() adds `ssc-wide-layout` to the
 * pages that hold an operations shortcode, and only those pages give the column
 * back its full width. The 1120px cap on the Snow Stream sections themselves
 * still applies, so nothing stretches to the width of a desktop monitor.
 */
.ssc-wide-layout .page-content-wrap {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/*
 * Bootstrap 3's container is a fixed 1170px, which leaves 1140px inside the
 * gutters - enough for the 1120px sections. Widening it further is left alone
 * on purpose: the theme's header, footer and homepage share it.
 */
@media (min-width: 992px) {
	.ssc-wide-layout .section.section-text > .container > .row > .page-content-wrap {
		float: none;
	}
}