/* Competitions calendar board — styles for the [competitions] shortcode
   (includes/shortcodes/competitions-search.php). Colors come from the
   Elementor kit variables with the current hex as fallback. */

   .comp-board{
	--comp-deep:#003054;
	--comp-deep2:var(--e-global-color-6becb43, #1B5685);
	--comp-slate:var(--e-global-color-6becb43, #1B5685);
	--comp-green:var(--e-global-color-f99a7df, #03956A);
	--comp-ice:var(--e-global-color-22a9c19, #EBF6FF);
	--comp-gold:var(--e-global-color-ba394e0, #F59E3D);
	--comp-ink:var(--e-global-color-26047ee, #1D1D1D);
	--comp-mist:rgba(29,29,29,.62);
	--comp-faded:rgba(29,29,29,.42);
	--comp-line:rgba(0,48,84,.16);
	--comp-font:var(--e-global-typography-text-font-family, "Rethink Sans"), sans-serif;
	--comp-radius:7px;
	color:var(--comp-ink);
	font-family:var(--comp-font);
}
.comp-board *{box-sizing:border-box}
.comp-board h2,.comp-board p{margin:0}

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

/* Hard reset — the theme styles buttons globally; wipe then re-declare. */
.comp-board .comp-filters button{
	all:unset;
	box-sizing:border-box;
	cursor:pointer;
	text-align:center;
	font-family:var(--comp-font);
	text-transform:none;
	-webkit-tap-highlight-color:transparent;
}

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

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

/* Month dropdown — explicit !important re-declarations against the theme's
   global select styling. */
.comp-select-wrap{position:relative;display:inline-flex;align-items:center}
.comp-board .comp-select-wrap select{
	appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;
	cursor:pointer;
	background:#FFFFFF!important;background-image:none!important;
	border:1px solid var(--comp-line)!important;border-radius:12px!important;color:var(--comp-ink)!important;
	font-family:var(--comp-font);font-weight:700;font-size:13.5px;line-height:1.3;
	margin:0;height:auto;min-height:0;box-shadow:none!important;
	padding:9px 38px 9px 14px;min-width:170px;
	transition:border-color .18s,box-shadow .18s;
}
.comp-board .comp-select-wrap select:hover{border-color:var(--comp-deep2)!important}
.comp-board .comp-select-wrap select:focus{border-color:var(--comp-deep2)!important;box-shadow:0 0 0 3px rgba(27,86,133,.18)!important;outline:0}
.comp-select-wrap svg{position:absolute;right:12px;width:14px;height:14px;color:var(--comp-slate);pointer-events:none}

/* Segmented control with sliding thumb */
.comp-seg{
	position:relative;display:flex;gap:2px;
	background:var(--comp-ice);border:1px solid var(--comp-line);
	border-radius:12px;padding:3px;
}
.comp-seg-thumb{
	position:absolute;top:3px;left:3px;width:0;height:calc(100% - 6px);
	background:var(--comp-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;
}
.comp-board .comp-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(--comp-slate);padding:7px 15px;border-radius:9px!important;
	transition:color .25s;white-space:nowrap;
}
.comp-board .comp-seg button:hover{color:var(--comp-deep);background:transparent}
.comp-board .comp-seg button[aria-pressed="true"]{color:#FFFFFF;background:transparent}

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

/* Search */
.comp-search{position:relative}
.comp-board .comp-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(--comp-line)!important;border-radius:12px!important;color:var(--comp-ink)!important;
	font-family:var(--comp-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;
}
.comp-board .comp-search input[type="search"]::-webkit-search-cancel-button,
.comp-board .comp-search input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.comp-board .comp-search input[type="search"]::-ms-clear{display:none}
.comp-board .comp-search input[type="search"]::placeholder{color:var(--comp-faded);opacity:1}
/* The blue 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. */
.comp-board .comp-search input[type="search"]:focus,
.comp-board .comp-search input[type="search"]:focus-visible{border-color:var(--comp-deep2)!important;box-shadow:0 0 0 3px rgba(27,86,133,.18)!important;outline:0}
.comp-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--comp-faded)}
.comp-board button.comp-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(--comp-ice);color:var(--comp-slate);font-size:13px;line-height:1;font-weight:700;
}
.comp-board button.comp-clear:hover{background:var(--comp-line);color:var(--comp-slate)}

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

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

/* ---------- Month sections ---------- */
.comp-sections{margin-top:6px}
.comp-month{margin-top:42px}
.comp-month-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.comp-month-head h2{
	font-family:var(--e-global-typography-secondary-font-family, "Rethink Sans"), sans-serif;
	font-weight:700;letter-spacing:-.01em;
	font-size:clamp(21px,2.4vw,28px);color:var(--comp-ink);text-transform:capitalize;
}
.comp-mono{font-size:13px;font-weight:600;color:var(--comp-mist)}
.comp-month-bar{height:4px;width:56px;margin:10px 0 18px;border-radius:2px;background:var(--comp-green)}

/* ---------- Tables — anchored under .comp-table-wrap so they outrank the
   theme's global table styling (zebra rows, cell borders, thead border). */
.comp-table-wrap{
	overflow-x:auto;border:1px solid var(--comp-line);border-radius:var(--comp-radius);
	background:#FFFFFF;
}
/* table-layout:fixed + explicit column widths → every month table shares
   the exact same column grid instead of sizing to its own content. */
.comp-board .comp-table-wrap table{
	border-collapse:separate;border-spacing:0;table-layout:fixed;
	width:100%;min-width:640px;margin:0;border:0;background:transparent;
}
.comp-board .comp-table-wrap thead th:nth-child(1){width:38%}
.comp-board .comp-table-wrap thead th:nth-child(2){width:23%}
.comp-board .comp-table-wrap thead th:nth-child(3){width:25%}
.comp-board .comp-table-wrap thead th:nth-child(4){width:14%}
.comp-board .comp-table-wrap th,
.comp-board .comp-table-wrap td{
	background:transparent;border:0;border-bottom:1px solid var(--comp-line);
	padding:14px 16px;text-align:left;vertical-align:top;
}
.comp-board .comp-table-wrap tbody tr:last-child td{border-bottom:0}
.comp-board .comp-table-wrap thead tr:first-child th,
.comp-board .comp-table-wrap thead tr:first-child td{border-block-start:0}
.comp-board .comp-table-wrap thead th{
	font-family:var(--comp-font);font-size:11px;font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;color:var(--comp-slate);
	background:var(--comp-ice);
}
.comp-board .comp-table-wrap td.comp-ev-name{font-weight:700;font-size:15.5px;color:var(--comp-ink)}
/* The name link must render exactly like the plain text did — the theme
   styles `a` globally (color, underline, weight), so re-declare everything. */
.comp-board .comp-table-wrap td.comp-ev-name a,
.comp-board .comp-table-wrap td.comp-ev-name a:visited,
.comp-board .comp-table-wrap td.comp-ev-name a:focus,
.comp-board .comp-table-wrap td.comp-ev-name a:active{
	color:var(--comp-ink)!important;
	font-family:inherit!important;font-weight:700!important;font-size:inherit!important;
	line-height:inherit!important;letter-spacing:inherit!important;text-transform:none!important;
	text-decoration:none!important;border-bottom:0!important;box-shadow:none!important;
	background:transparent!important;transition:color .15s;
}
.comp-board .comp-table-wrap tr[data-href]{cursor:pointer}
.comp-board .comp-table-wrap tr[data-href]:hover td.comp-ev-name a,
.comp-board .comp-table-wrap td.comp-ev-name a:hover{
	color:var(--comp-deep2)!important;text-decoration:underline!important;background:transparent!important;
}
.comp-board .comp-table-wrap td.comp-ev-name a:focus-visible{outline:2px solid var(--comp-gold);outline-offset:2px}
.comp-past-tag{
	display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
	color:var(--comp-faded);border:1px solid var(--comp-line);border-radius:99px;padding:1px 8px;vertical-align:2px;
}
/* No nowrap — under table-layout:fixed a long date must wrap, not overflow. */
.comp-date{font-weight:700;color:var(--comp-ink);font-variant-numeric:tabular-nums}
.comp-lieu{color:var(--comp-mist);font-weight:500}
.comp-badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.03em;border-radius:99px;padding:4px 12px}
.comp-badge.comp-oui{background:var(--comp-green);color:#FFFFFF}
.comp-badge.comp-non{background:transparent;color:var(--comp-slate);border:1px solid var(--comp-line)}
.comp-board .comp-table-wrap tbody tr:hover td{background:var(--comp-ice)}
.comp-board .comp-table-wrap tr.comp-past td{opacity:.55}
.comp-board .comp-table-wrap tr.comp-past:hover td{opacity:.8}

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

/* ---------- Legend & empty state — same treatment as the records board */
.comp-legend{
	font-size:13px;color:var(--comp-mist);
	display:flex;gap:8px 22px;flex-wrap:wrap;align-items:self-start;flex-direction:column;
	padding:44px 0 0;
}
.comp-legend:empty{display:none}
.comp-legend > span{display:inline-flex;align-items:center;gap:5px}
.comp-none{padding:60px 16px;text-align:center;color:var(--comp-mist)}
.comp-none-big{font-weight:700;font-size:26px;color:var(--comp-ink);line-height:1.6}

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