/*
	Britax corporate identity — product registration pages
	=======================================================

	Loaded from Views/MasterLayoutBasic.cshtml, which is used only by the five
	product registration views. Everything in here is scoped to those pages on
	purpose: the recall pages share css/clicktight-recall.css and still use the
	old red brand palette, so the overrides below must not live in that file.

	Loads after bundle.min.css, portal-customer-service.min.css and
	clicktight-recall.css, so plain selector-for-selector overrides win without
	needing !important.

	Note: css/*.scss is not a live build — the compiled css in this folder dates
	from 2017 and there is no sass tooling in the repo. Edit this file directly.
*/

/* ---------------------------------------------------------------------------
   Brand colors
   Charcoal, Cotton, Sand and White are the four used by the registration
   pages. Earth is included for completeness of the palette.
   --------------------------------------------------------------------------- */

:root {
	--britax-charcoal: #1b1b1b;
	--britax-earth: #9e887a;
	--britax-sand: #bcb3ac;
	--britax-cotton: #f8f3eb;
	--britax-white: #fff;
}

/* ---------------------------------------------------------------------------
   2 — Header
   The status bar above the logo goes from red (#e22242) to Cotton, and the
   horizontal divider under the logo from grey (#d1d1d1) to Sand.
   --------------------------------------------------------------------------- */

#status-header {
	background: var(--britax-cotton);
}

/* The five registration views mark their dividers up as
   <hr class="thin sand divider">. hr.grey is deliberately left alone — dozens
   of other views still use it and are still on the old palette. */
hr.sand {
	background: var(--britax-sand);
}

/* ---------------------------------------------------------------------------
   4 — Language dropdown (Canadian registration pages)
   Cotton panel, Charcoal type, Sand hover.
   --------------------------------------------------------------------------- */

.choose-language,
.choose-language .lang,
.choose-language h3 {
	background-color: var(--britax-cotton);
}

.choose-language,
.choose-language .lang a,
.choose-language h3 {
	color: var(--britax-charcoal);
}

.choose-language h3:hover,
.choose-language .lang a:hover,
.choose-language .lang a:focus-visible {
	background-color: var(--britax-sand);
}

/* The old hover was a translucent white overlay stacked on the red panel. Over
   Cotton it just washes the Sand hover out, so drop the overlay and let
   background-color do the work. */
.choose-language .lang a::after,
.choose-language h3:hover::after {
	display: none;
}

/* Keep the hover transition the overlay used to provide. */
.choose-language h3,
.choose-language .lang a {
	transition: background-color 0.255s linear;
}

/* ---------------------------------------------------------------------------
   5 — Copy
   Body copy, headings, page subtitles and form labels all go to Charcoal.
   Replaces #222 body text, #000 headings and #5c6670 subtitles/labels.

   The form markup nests the real <label> inside <div class="control-label">,
   and .form-group .control-label still sets #5c6670 on that div. A directly
   matched rule beats an inherited value, so .form-group label below wins on
   the label text itself.
   --------------------------------------------------------------------------- */

html, button, input, select, textarea {
	color: var(--britax-charcoal);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--britax-charcoal);
}

.pagesubtitle {
	color: var(--britax-charcoal);
}

.form-group label {
	color: var(--britax-charcoal);
}

/* ---------------------------------------------------------------------------
   6 — Form input
   Input outline from #8eb8c9 to Charcoal. This selector also matches
   input[type=submit], which is what gives the submit button the same Charcoal
   border as the fields around it.
   --------------------------------------------------------------------------- */

input, textarea, select {
	border: 1px solid var(--britax-charcoal);
}

/* ---------------------------------------------------------------------------
   7 — Submit button
   Charcoal fill, white copy, subtle opacity shift on hover.

   .btn-default is also worn by the CAR SEATS / STROLLERS tab links, but those
   carry the .brown modifier and .btn-default.brown is more specific, so the
   tabs keep their brown fill.

   #1b1b1b9e is Charcoal at ~62% alpha — the subtle hover the task list asked
   for. Left as a literal because it is not a palette color.
   --------------------------------------------------------------------------- */

.btn-default, input[type=submit] {
	background-color: var(--britax-charcoal);
	color: var(--britax-white);
}

.btn-default:hover, input[type=submit]:hover {
	background-color: #1b1b1b9e;
	border-color: var(--britax-charcoal);
	color: var(--britax-white);
}