/* Saira Condensed (SIL Open Font License 1.1) — replaces the commercial Agency FB.
   Unlike Agency FB, this ships a real 700 weight, so headings are no longer faux-bolded. */
@font-face {
	font-family: "Saira Condensed";
	src: url(../fonts/saira-condensed-400.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Saira Condensed";
	src: url(../fonts/saira-condensed-700.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Brand tokens. A redesign should be largely a matter of changing these.
   The *-rgb pairs exist so rgba() can vary alpha without restating the colour. */
:root {
	/* GROUND LAYER — the surface the page sits on. Split out from the brand so
	   red can be an accent instead of being the entire page. Without these three
	   there is no token meaning "the paper", and red has nowhere to step back to. */
	--ccpl-ground:  #F7F5F2;
	--ccpl-surface: #FFFFFF;
	--ccpl-text:    #16181D;
	--ccpl-muted:   #5C6067;
	--ccpl-rule:    rgba(22, 24, 29, 0.14);
	--ccpl-ground-deep: #EFEBE6;   /* one step under the body: footer, sunken panels */
	--ccpl-navbar-offset: 4.5rem;

	/* Link colours are their own tokens so a dark surface can retarget them.
	   Hovering used to hard-reference --ccpl-red-dark, which on the hero photo
	   left the IFPA link at roughly 1.2:1 — effectively invisible. */
	--ccpl-link: #A8201A;
	--ccpl-link-hover: #6E1410;  /* body clears the fixed navbar by this; the hero cancels it */

	/* BRAND */
	--ccpl-red: #A8201A;
	--ccpl-red-rgb: 168, 32, 26;
	--ccpl-red-dark: #6E1410;
	--ccpl-on-brand: #FFF4F1;   /* text sitting ON a red field: navbar, masthead */

	/* ACCENT. --ccpl-yellow is kept as an alias, not a colour: 46 rules here and
	   every border in backend-contract.css reference it by that name. On a light
	   ground the accent is red, so the name is historical. Retarget
	   --ccpl-accent; leave the alias alone. */
	--ccpl-accent: var(--ccpl-red);
	--ccpl-yellow: var(--ccpl-accent);
	--ccpl-yellow-rgb: var(--ccpl-red-rgb);

	/* Links and eyebrows on a dark surface — currently the home page hero,
	   where red would not carry against the photo. */
	--ccpl-accent-on-dark: #E8A33D;

	/* Amber on a light ground: playoffs, on the league pages. The same hue as
	   --ccpl-accent-on-dark, as a tint to sit on, and a deep shade for text on
	   it (5.5:1 against the tint). */
	--ccpl-amber-rgb: 232, 163, 61;
	--ccpl-amber-deep: #8A5A12;

	/* The dark field under the league masthead's photo; the home hero's photo
	   falls back to the same colour. */
	--ccpl-ink: #0B0D10;
	--ccpl-ink-rgb: 11, 13, 16;

	--ccpl-white: #FFFFFF;
	--ccpl-grey: #BEC0C3;
	--ccpl-font-display: "Saira Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
	padding-top: var(--ccpl-navbar-offset);
	color: var(--ccpl-text);
	background-color: var(--ccpl-ground);
}

a {
    color: var(--ccpl-link);
    /* The underline always tracks the text, resting and hovered. currentColor
       is the initial value, so this is stated to keep it that way — an earlier
       pass set the underline to the hover colour and it should not come back. */
    text-decoration-color: currentColor;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:hover,
a:focus,
a.nav-link:hover,
a.nav-link:focus {
    text-decoration: underline;
    text-decoration-color: currentColor;
    color: var(--ccpl-link-hover);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 15px;
    font-family: var(--ccpl-font-display);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ccpl-red);
}

/* Uppercase is reserved for the page title and the navbar. When every level
   shouts there is no hierarchy; h2-h6 are authored in sentence case, so
   dropping the transform is all that is needed. */
h1 {
    text-transform: uppercase;
}

/* Pages on a bg-dark surface, where red headings would not carry, follow
   their container instead. (league-night is dark too, but by its own
   stylesheet, league-night.css.) */
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6 {
    color: inherit;
}

.navbar {
    border-bottom: 3px solid var(--ccpl-red);
    text-transform: uppercase;
    font-family: var(--ccpl-font-display);
}

.navbar-toggler {
	color: var(--ccpl-red);
}

.navbar-brand span {
	font-family: var(--ccpl-font-display);
	font-size: 22px;
	color: var(--ccpl-red);
}

.nav-link {
	color: var(--ccpl-red);
}

/* Current page: dark against the red of its siblings, as the light-editorial
   specimen had it. Colour alone does not carry the state, so the underline
   does the work for anyone who cannot separate the two hues. */
.nav-link.active {
	color: var(--ccpl-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
	text-decoration-color: currentColor;
}

.border-ccpl {
	border-color: var(--ccpl-yellow);
}

hr {
	border: 0;
	border-top: 1px solid var(--ccpl-rule);
	background: none;
	clear: both;
	height: 0;
	opacity: 1;
}

hr.left {
	border: 0;
	border-top: 1px solid var(--ccpl-rule);
	background: none;
	clear: both;
	height: 0;
	opacity: 1;
}

hr.right {
	border: 0;
	border-top: 1px solid var(--ccpl-rule);
	background: none;
	clear: both;
	height: 0;
	opacity: 1;
}

.btn {
    text-transform: uppercase;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.btn-default {
    border: 1px solid var(--ccpl-yellow);
    color: var(--ccpl-yellow);
    background-color: transparent;
}

.btn-default:hover,
.btn-default:focus {
    border: 1px solid var(--ccpl-yellow);
    outline: 0;
    color: var(--ccpl-yellow);
    background-color: var(--ccpl-red);
    color: var(--ccpl-on-brand);
}

.form-control {
	background-color: var(--ccpl-surface);
	border: 0;
	border-bottom: solid 1px var(--ccpl-red);
	border-radius: 0;
	color: var(--ccpl-text);
	outline: none;
}

textarea.form-control {
	border-radius: 4px;
	border: 1px solid red;
}

.form-control:focus {
	border-color: var(--ccpl-red);
	background-color: var(--ccpl-surface);
	box-shadow: 0 1px 0 0 var(--ccpl-red);
	color: var(--ccpl-text);
}

input.form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder {
	color: var(--ccpl-red-dark);
}

input.form-control:-moz-placeholder,
textarea.form-control:-moz-placeholder { /* Firefox 18- */
	color: var(--ccpl-red-dark);
	opacity: 1;
}

input.form-control::-moz-placeholder,
textarea.form-control::-moz-placeholder {  /* Firefox 19+ */
	color: var(--ccpl-red-dark);
	opacity: 1;
}

input.form-control:-ms-input-placeholder,
textarea.form-control:-ms-input-placeholder {  
	color: var(--ccpl-red-dark);
}

input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea {
	-webkit-appearance: none;
	-moz-appearance: none; /* mobile firefox too! */
}

option {
	background-color: #FFFFFF;
	color: #000000;
}

span.input-group-addon {
	background-color: rgba(22, 24, 29, 0.05);
	border-bottom: 1px solid var(--ccpl-red);
    border-left: medium none;
    border-top: medium none;
    border-radius: 0;
	color: var(--ccpl-text);
}

form button {
/* 	cursor: pointer; */
	width: 100%;
}

.help-block{
	color: var(--ccpl-muted);
	font-size: 12px;
}

img.img-thumbnail {
	border: none;
}

div.img-thumbnail {
	margin-bottom: 35px;
}

.img-thumbnail {
	background-color: var(--ccpl-surface);
	border-color: var(--ccpl-rule);
}

.img-thumbnail .caption {
	color: var(--ccpl-text);
}

.img-thumbnail .caption h3, .img-thumbnail .caption p {
	padding: 0;
	margin: 0;
} 

/* Page bands. Below the navbar a page steps darker, lighter, then darker
   again at the footer, each edge a 3px red rule: the home page's and the
   league pages' rhythm, for the pages that have no layout of their own for
   it. .page-width holds the content to the league pages' measure. */
.page-band {
	background-color: var(--ccpl-ground-deep);
	padding-top: 32px;
	padding-bottom: 32px;
}

.page-band-light {
	background-color: var(--ccpl-ground);
	border-top: 3px solid var(--ccpl-red);
}

/* The first band runs up under the fixed navbar, as the league masthead
   does, so no strip of body ground shows between them. */
.navbar + .page-band {
	margin-top: calc(-1 * var(--ccpl-navbar-offset));
	padding-top: calc(var(--ccpl-navbar-offset) + 28px);
}

/* The footer's top margin would leave a strip of page ground above it. */
.page-band + .footer {
	margin-top: 0;
}

.page-width {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}

/* Section headings: a small uppercase label over a red rule, rather than
   another centred red display heading. */
.section-label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	font-size: 22px;
	text-transform: uppercase;
	color: var(--ccpl-text);
	border-bottom: 2px solid var(--ccpl-red);
	padding-bottom: 6px;
	margin: 0 0 16px;
}

.section-label small {
	font-family: var(--ccpl-font-display);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: .5px;
	text-transform: none;
	color: var(--ccpl-muted);
}

/* Champion cards: the league pages' champion wall, the Inter-League pages
   and the tournaments page. Each card is the photo, flush, over a white
   caption under a red rule: the name in red, the season below it. The
   caption lines the names up across a row whatever the photo.
   The photo is locked to 3:4 with object-fit, so any source size scales
   without distortion — 80 of 86 champion photos are already exactly that. */
.champ-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	background-color: var(--ccpl-surface);
	border: 1px solid var(--ccpl-rule);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(var(--ccpl-ink-rgb), .05), 0 8px 20px rgba(var(--ccpl-ink-rgb), .07);
	transition: transform .2s ease, box-shadow .2s ease;
}

.champ-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(var(--ccpl-ink-rgb), .06), 0 14px 28px rgba(var(--ccpl-ink-rgb), .12);
}

@media (prefers-reduced-motion: reduce) {
	.champ-card, .champ-card:hover { transition: none; transform: none; }
}

.champ-card picture { display: block; }

.champ-card img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center;
	background-color: var(--ccpl-ground-deep);
}

.champ-card figcaption {
	margin-top: auto;
	padding: 10px 12px 12px;
	border-top: 3px solid var(--ccpl-red);
	text-align: left;
}

.champ-card h3 {
	font-size: 21px;
	line-height: 1.1;
	letter-spacing: .5px;
	color: var(--ccpl-red);
	margin: 0;
}

.champ-card p {
	font-family: var(--ccpl-font-display);
	font-size: 12.5px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ccpl-muted);
	margin: 2px 0 0;
}

/* The newest champion, first in the list. */
.champ-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 9px;
	border-radius: 999px;
	background-color: var(--ccpl-red);
	color: var(--ccpl-on-brand);
	font-family: var(--ccpl-font-display);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(var(--ccpl-ink-rgb), .25);
}

/* The reigning champion glows: a red ring with a soft red halo around it. */
.champ-card.reigning {
	border-color: var(--ccpl-red);
	box-shadow: 0 0 0 2px var(--ccpl-red), 0 0 22px 4px rgba(var(--ccpl-red-rgb), .38), 0 8px 20px rgba(var(--ccpl-red-rgb), .16);
}

.champ-card.reigning:hover {
	box-shadow: 0 0 0 2px var(--ccpl-red), 0 0 28px 6px rgba(var(--ccpl-red-rgb), .45), 0 14px 28px rgba(var(--ccpl-red-rgb), .2);
}

/* A year with a champion but no photo yet, or one not yet played: the same
   3:4 box, with the brand mark. */
.champ-card .photo-missing {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	aspect-ratio: 3 / 4;
	background-color: var(--ccpl-ground-deep);
	color: var(--ccpl-muted);
	font-family: var(--ccpl-font-display);
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 13px;
}

.champ-card .photo-missing .navbar-mark {
	width: 30%;
	height: auto;
	aspect-ratio: 1;
	opacity: .35;
}


/* The tournament pages, the Inter-League pages among them, are in
   tournaments.css. */

/* Footer */
.footer {
    width: 100%;
    color: var(--ccpl-text);
    background-color: var(--ccpl-ground-deep);
    border-top: 3px solid var(--ccpl-red);
    margin-top: 30px;
}

.footer .card {
	background-color: var(--ccpl-surface);
	border: 1px solid var(--ccpl-rule);
	border-radius: 4px;
	box-shadow: none;
	margin-bottom: 20px;
	min-height: 20px;
	padding: 19px;
}

.credits p {
	color: var(--ccpl-muted);
	font-size: 16px;
	font-family: var(--ccpl-font-display);
	text-align: center;
}

.footer-nav {
	margin-left: 0;
	list-style: none;
}

.footer-nav > li > a {
	display: block;
}

.footer-nav > li > a:hover,
.footer-nav > li > a:focus {
	text-decoration: underline;
	background-color: rgba(var(--ccpl-red-rgb), .08);
}

.footer-nav-header {
	font-family: var(--ccpl-font-display);
	letter-spacing: 2px;
	display: block;
	padding: 3px 15px;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	color: var(--ccpl-text);
	text-transform: uppercase;
}

.footer-nav li + .footer-nav-header {
	margin-top: 9px;
}

.footer-nav-list {
	padding-right: 15px;
	padding-left: 15px;
	margin-bottom: 0;
}

.footer-nav-list li {
	border-left: 1px solid var(--ccpl-rule);
}

.footer-nav-list > li > a {
	padding: 3px 25px;
}

th small {
	font-weight: normal;
}

.table-striped > tbody > tr:nth-child(2n+1) {
	background-color: rgba(22, 24, 29, 0.035);
}

table input {
	background-color: var(--ccpl-surface); 
    border: 1px solid red; 
    border-radius: 5px;
    color: black; 
    outline: none;
    padding: 0 5px; 
}

table label {
	margin-bottom: 0;
}

.win, .table-striped tbody>tr:nth-child(odd)>td.win, .table-hover tbody tr:hover>td.win {
	background-color: rgba(0,120,50,.5) !important;
}

/* App links in the shared footer. Sits between the social row and the
   copyright line, on every page that has a footer. */
.footer-apps {
	display: flex;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	margin: 0 0 4px;
	font-family: var(--ccpl-font-display);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13.5px;
}

.footer-apps a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
}

.footer-apps a:hover,
.footer-apps a:focus {
	text-decoration: underline;
}

/* The brand mark, as a CSS mask rather than an <img>.
   The SVG is a single flat silhouette, so masking it and painting with
   background-color lets one file serve every colour the palette needs —
   red here, white or amber on a dark surface — instead of committing a
   recoloured PNG per context. Inlining the SVG would have worked too, but
   it repeats 7.2KB on all 50 pages.
   Decorative: the wordmark sits beside it, so the span is aria-hidden. */
.navbar-mark {
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: -5px;
	background-color: var(--ccpl-red);
	-webkit-mask: url(../img/ccpl-mark.svg) center / contain no-repeat;
	mask: url(../img/ccpl-mark.svg) center / contain no-repeat;
}