/* Records board — styles for the [records] shortcode (includes/shortcodes/records.php).
   Colors and typography come from the Elementor kit variables; the hex
   fallbacks match the current kit (same approach as .competition-password-gate). */

   .rec-board{
	--rec-deep:#003054;                                      /* deep navy (headers) — custom, not in the kit */
	--rec-deep2:var(--e-global-color-6becb43, #1B5685);      /* medium blue (active states, event column) */
	--rec-slate:var(--e-global-color-6becb43, #1B5685);      /* secondary labels on light */
	--rec-green:var(--e-global-color-f99a7df, #03956A);      /* green action accent + Records Provinciaux star */
	--rec-ice:var(--e-global-color-22a9c19, #EBF6FF);        /* iced background */
	--rec-ice2:var(--e-global-color-22a9c19, #EBF6FF);
	--rec-gold:var(--e-global-color-ba394e0, #F59E3D);       /* orange : club record */
	--rec-gold-text:#B76A08;                                 /* darker orange for text */
	--rec-purple:var(--e-global-color-e1f98b8, #9B80D9);     /* violet : Records 2024-2025 dot */
	--rec-hit:#6E4FC0;                                       /* darker violet : highlighted swimmer */
	--rec-ink:var(--e-global-color-26047ee, #1D1D1D);        /* body text */
	--rec-mist:rgba(29,29,29,.62);                           /* secondary text */
	--rec-faded:rgba(29,29,29,.42);
	--rec-line:rgba(0,48,84,.16);                            /* borders */
	--rec-cream:#FEF4E7;                                     /* club record column */
	--rec-cream-hover:#FCEBD3;
	--rec-font:var(--e-global-typography-text-font-family, "Rethink Sans"), sans-serif;
	--rec-radius:6px;
	background:#FFFFFF;
	color:var(--rec-ink);
	font-family:var(--rec-font);
	border-radius:var(--rec-radius);
}
.rec-board *{box-sizing:border-box}
.rec-board h2,.rec-board p{margin:0}

/* ---------- Filter bar — flat, underlined with the main blue ---------- */
.rec-filters{
	border-bottom:1px solid var(--rec-deep2);
	padding:2.5em 0 1em;
	margin-bottom:1em;
	display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
}

/* Hard reset — the theme / Elementor kit styles `button` globally (colors,
   padding, min-height…); wipe everything before applying our own styles.
   Every rule below this one re-declares what each control needs. */
.rec-board .rec-filters button{
	all:unset;
	box-sizing:border-box;
	cursor:pointer;
	text-align:center;
	font-family:var(--rec-font);
	text-transform:none;
	-webkit-tap-highlight-color:transparent;
}

.rec-fgroup{display:flex;align-items:center;gap:10px}
.rec-flabel{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rec-faded)}
.rec-spacer{flex:1}

/* ---------- Count line (under the filter island) ---------- */
.rec-count{
	font-size:13px;font-weight:600;color:var(--rec-mist);
	text-align:right;padding:0 4px;margin-bottom:2.5em;
	font-variant-numeric:tabular-nums;
}
.rec-count b{color:var(--rec-deep2);font-weight:700}
.rec-count:empty{display:none}

/* Segmented control with sliding thumb */
.rec-seg{
	position:relative;display:flex;gap:2px;
	background:var(--rec-ice2);border:1px solid var(--rec-line);
	border-radius:12px;padding:3px;
}
.rec-seg-thumb{
	position:absolute;top:3px;left:3px;width:0;height:calc(100% - 6px);
	background:var(--rec-deep2);border-radius:9px;
	box-shadow:0 2px 10px rgba(12,18,28,.28);
	transition:left .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1);
	will-change:left,width;pointer-events:none;
}
.rec-board .rec-seg button{
	display:inline-block;position:relative;z-index:1;
	background:transparent;border:0!important;
	font-weight:700;font-size:13px;line-height:1.2;
	color:var(--rec-slate);padding:7px 15px;border-radius:9px!important;
	transition:color .25s;white-space:nowrap;
}
.rec-board .rec-seg button:hover{color:var(--rec-deep);background:transparent}
.rec-board .rec-seg button[aria-pressed="true"]{color:#FFFFFF;background:transparent}

/* Chips (nage) — `button.rec-chip` keeps these rules above the hard reset
   (.rec-board .rec-filters button), which would otherwise win the cascade. */
.rec-chips{display:flex;flex-wrap:wrap;gap:6px}
.rec-board button.rec-chip{
	display:inline-block;
	background:#FFFFFF;color:var(--rec-slate);
	border:1px solid var(--rec-line)!important;border-radius:99px!important;
	font-weight:700;font-size:13px;line-height:1.2;
	padding:7px 15px;white-space:nowrap;
	transition:border-color .18s,color .18s,background .18s,transform .12s,box-shadow .18s;
}
.rec-board button.rec-chip:hover{color:var(--rec-deep);background:#FFFFFF;border-color:var(--rec-deep2)!important;box-shadow:0 2px 8px rgba(27,86,133,.18)}
.rec-board button.rec-chip:active{transform:scale(.95)}
.rec-board button.rec-chip[aria-pressed="true"]{background:var(--rec-deep2);border-color:var(--rec-deep2)!important;color:#FFFFFF;box-shadow:0 2px 10px rgba(12,18,28,.22)}

/* Reset — shown by JS only when a filter differs from the defaults */
.rec-board button.rec-reset{
	display:none;align-items:center;gap:6px;
	background:transparent;border:0!important;border-radius:99px!important;
	color:var(--rec-mist);
	font-weight:700;font-size:12.5px;line-height:1.2;
	padding:7px 12px;white-space:nowrap;
	transition:color .18s,background .18s;
}
.rec-board button.rec-reset svg{width:13px;height:13px;flex-shrink:0}
.rec-board button.rec-reset:hover{color:var(--rec-deep);background:var(--rec-ice2)}

/* Search — hard reset like the buttons: the theme styles inputs globally
   (background, radius, outline); wipe everything then re-declare. */
.rec-search{position:relative}
.rec-board .rec-search input[type="search"]{
	all:unset;
	box-sizing:border-box;display:inline-block;cursor:text;
	appearance:none!important;-webkit-appearance:none;
	background:#FFFFFF!important;border:1px solid var(--rec-line)!important;border-radius:12px!important;color:var(--rec-ink)!important;
	font-family:var(--rec-font);font-size:14px;font-weight:400;line-height:1.4;
	text-align:left;text-transform:none;letter-spacing:normal;
	margin:0;height:auto;min-height:0;box-shadow:none!important;
	padding:10px 10px 10px 36px;width:250px;
	transition:border-color .18s,box-shadow .18s;
}
/* Hide the native search-field clear control — the board has its own. */
.rec-board .rec-search input[type="search"]::-webkit-search-cancel-button,
.rec-board .rec-search input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.rec-board .rec-search input[type="search"]::-ms-clear{display:none}
.rec-board .rec-search input[type="search"]::placeholder{color:var(--rec-faded);opacity:1}
/* The green ring is the input's focus indicator (mouse AND keyboard) — text
   inputs match :focus-visible on click too, so it's excluded from the gold
   outline group below to avoid a double ring. */
.rec-board .rec-search input[type="search"]:focus,
.rec-board .rec-search input[type="search"]:focus-visible{border-color:var(--rec-deep2)!important;box-shadow:0 0 0 3px rgba(27,86,133,.18)!important;outline:0}
.rec-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--rec-faded)}
.rec-board button.rec-clear{
	display:none;place-items:center;position:absolute;right:10px;top:50%;transform:translateY(-50%);
	width:20px;height:20px;border:0!important;border-radius:99px!important;padding:0;
	background:var(--rec-ice2);color:var(--rec-slate);font-size:13px;line-height:1;font-weight:700;
}
.rec-board button.rec-clear:hover{background:var(--rec-line);color:var(--rec-slate)}

/* Focus rings — re-declared after the hard reset so they always apply */
.rec-board .rec-seg button:focus-visible,
.rec-board button.rec-chip:focus-visible,
.rec-board button.rec-reset:focus-visible,
.rec-board button.rec-clear:focus-visible{outline:2px solid var(--rec-gold);outline-offset:2px}

@media(max-width:860px){
	.rec-search{width:100%}
	.rec-board .rec-search input[type="search"]{width:100%}
}

/* ---------- Sections ---------- */
.rec-sections{margin-top:6px;}
.rec-stroke{margin-top:42px}
.rec-stroke-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.rec-stroke-head h2{
	font-family:var(--e-global-typography-secondary-font-family, "Rethink Sans"), sans-serif;
	font-weight:700;letter-spacing:-.01em;
	font-size:clamp(22px,2.6vw,30px);color:var(--rec-ink);
}
.rec-mono{font-size:13px;font-weight:600;color:var(--rec-mist)}
.rec-rope{height:4px;width:56px;margin:10px 0 18px;border-radius:2px;background:var(--rec-green)}

/* ---------- Table ---------- */
.rec-table-wrap{
	overflow-x:auto;border:1px solid var(--rec-line);border-radius:var(--rec-radius);
	background:#FFFFFF;
}
/* Cell rules are prefixed with .rec-table-wrap so they outrank the theme's
   global table styling (zebra nth-child(odd) backgrounds, cell borders) —
   the base rule below re-declares background and borders explicitly. */
/* border-collapse:separate keeps each border owned by its cell, so scrolling
   rows slide UNDER the sticky event column instead of painting over it. */
.rec-board .rec-table-wrap table{
	border-collapse:separate;border-spacing:0;
	width:100%;min-width:900px;margin:0;border:0;background:transparent;
}
.rec-board .rec-table-wrap th,
.rec-board .rec-table-wrap td{
	background:transparent;border:0;border-bottom:1px solid var(--rec-line);
	padding:13px 16px;text-align:left;vertical-align:middle;
}
.rec-board .rec-table-wrap tbody tr:last-child td{border-bottom:0}
/* The theme adds a border-block-start on the first header row — cancel it. */
.rec-board .rec-table-wrap thead tr:first-child th,
.rec-board .rec-table-wrap thead tr:first-child td{border-block-start:0}
.rec-board .rec-table-wrap thead th{
	font-family:var(--rec-font);font-size:11px;font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;color:var(--rec-slate);
	background:var(--rec-ice2);
}
.rec-board .rec-table-wrap thead th.rec-club{color:var(--rec-gold-text)}
.rec-board .rec-table-wrap td.rec-event,
.rec-board .rec-table-wrap th.rec-event{
	position:sticky;left:0;z-index:2;background:var(--rec-deep2);color:#FFFFFF;
	font-weight:700;font-size:15px;white-space:nowrap;min-width:104px;
	border-right:1px solid var(--rec-line);border-bottom-color:var(--rec-slate);
}
.rec-board .rec-table-wrap th.rec-event{background:var(--rec-deep);z-index:3}
.rec-entry{display:block}
.rec-entry + .rec-entry{margin-top:8px}
.rec-time{
	display:flex;align-items:center;font-weight:700;font-size:16px;color:var(--rec-ink);
	font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rec-star{color:var(--rec-green);margin-left:5px;cursor:help}
.rec-dot{color:var(--rec-purple);font-size:1.5rem;line-height:1;margin-left:5px;margin-top:-2px;cursor:help}
.rec-name{display:block;font-size:12.5px;font-weight:500;color:var(--rec-mist);margin-top:2px;white-space:nowrap}
.rec-board .rec-table-wrap td.rec-empty{color:var(--rec-faded)}
.rec-board .rec-table-wrap td.rec-club{background:var(--rec-cream);border-left:2px solid var(--rec-gold)}
.rec-board .rec-table-wrap td.rec-club .rec-time{color:var(--rec-gold-text);font-size:17px}
.rec-board .rec-table-wrap tbody tr:hover td{background:var(--rec-ice)}
.rec-board .rec-table-wrap tbody tr:hover td.rec-event{background:var(--rec-slate)}
.rec-board .rec-table-wrap tbody tr:hover td.rec-club{background:var(--rec-cream-hover)}

/* Pool badges — shown next to the distance in the "Tout" (both bassins) view */
.rec-badge{
	display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;
	letter-spacing:.05em;padding:2px 9px;border-radius:99px;vertical-align:1px;
}
.rec-b25{background:var(--rec-ice);color:var(--rec-deep)}
.rec-b50{background:var(--rec-green);color:#FFFFFF;}
.rec-legend .rec-badge{margin-left:0}

/* Thick separator between distance groups in the "Tout" view */
.rec-board .rec-table-wrap tr.rec-group-end td{border-bottom:6px solid var(--rec-ice2)}

/* Swimmer highlight (search + hover) */
.rec-entry.rec-hit{background:rgba(155,128,217,.10);box-shadow:0 0 0 4px rgba(155,128,217,.10);border-radius:4px}
.rec-entry.rec-hit .rec-name{color:var(--rec-hit);font-weight:700}
.rec-entry.rec-hit .rec-time{color:var(--rec-hit)}
.rec-board .rec-table-wrap td.rec-club .rec-entry.rec-hit .rec-time{color:var(--rec-gold-text)}
.rec-entry.rec-dim{opacity:.3}

/* ---------- Skeleton — server-rendered placeholder shown until the JS's
   first render() overwrites the sections container. The sheen animates
   `transform` so it runs on the compositor thread and keeps shimmering
   while the main thread is busy executing the page scripts. */
.rec-skel-row{display:flex;align-items:center;gap:16px;padding:19px 16px;border-bottom:1px solid var(--rec-line)}
.rec-skel-row:last-child{border-bottom:0}
.rec-skel-line{
	position:relative;overflow:hidden;
	height:14px;border-radius:6px;flex:1;
	background:rgba(0,48,84,.09);
}
.rec-skel-line::after{
	content:"";position:absolute;inset:0;
	transform:translateX(-100%);
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
	animation:rec-skel-shimmer 1.4s ease infinite;
}
.rec-skel-head{width:180px;max-width:180px;height:22px;margin-bottom:10px;flex:none}
@keyframes rec-skel-shimmer{
	100%{transform:translateX(100%)}
}

/* ---------- Legend & empty state ---------- */
.rec-legend{
	font-size:13px;color:var(--rec-mist);
	display:flex;gap:8px 22px;flex-wrap:wrap;align-items:self-start;flex-direction:column;
	padding:44px 0 0;
}
.rec-legend:empty{display:none}
.rec-legend > span{display:inline-flex;align-items:center;gap:5px}
.rec-legend .rec-star,.rec-legend .rec-dot{margin-left:0;cursor:default}
.rec-legend .rec-dot{font-size:1.5rem;line-height:1}
.rec-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--rec-cream);border:1px solid var(--rec-gold);vertical-align:-1px;margin-right:6px}
.rec-none{padding:60px 16px;text-align:center;color:var(--rec-mist)}
.rec-none-big{font-weight:700;font-size:26px;color:var(--rec-ink);line-height: 1.6;}

@media (prefers-reduced-motion: reduce){
	.rec-board *{transition:none!important}
	.rec-seg-thumb{transition:none}
	.rec-skel-line::after{animation:none!important}
}