/*
 * Customer portal (/portal/ and below): the look of the old portal.cabentry.com (Jeff, 10-14:
 * "the portal should look like the old one"). Numbers measured on the live portal at 1440px.
 * Loaded on portal pages only (inc/portal.php), after site.css.
 */

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("fonts/roboto-latin-var.woff2") format("woff2");
}

body.cab-portal { background: #fff; color: #000; font-family: Roboto, sans-serif; }
body.cab-portal .site-main.cab-portal-main { max-width: none; width: 100%; margin: 0; padding: 0; }
/* Full-width groups sit flush; the block layout's own offsets left a 150px white strip on the left. */
body.cab-portal .cab-portal-main > .alignfull { margin: 0; max-width: none; width: 100%; }
body.cab-portal .cab-portal-main h1,
body.cab-portal .cab-portal-main h2,
body.cab-portal .cab-portal-main p,
body.cab-portal .cab-portal-main li,
body.cab-portal .cab-portal-main summary,
body.cab-portal .cab-form { font-family: Roboto, sans-serif; color: #000; }
body.cab-portal .cab-portal-main a { color: #FF0200; }

/* ---------- Header ---------- */
.cab-portal-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 79px; padding: 0 55px 0 50px; background: #fff; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .5); }
.cab-portal-header__logo { display: block; line-height: 0; }
.cab-portal-header__logo img { width: 200px; height: auto; }
.cab-portal-header__contact { list-style: none; margin: 0; padding: 0; text-align: right; font: 400 16px/24px Roboto, sans-serif; color: #000; }
.cab-portal-header__contact a { color: #000; text-decoration: none; }
.cab-portal-header__contact a:hover, .cab-portal-header__contact a:focus-visible { color: #FF0200; }
.cab-portal-header__contact i { font-size: 14px; width: 18px; text-align: center; }

/* ---------- Red banner (portal home) ---------- */
body.cab-portal .cab-portal-banner { display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 10px; background: url("../../../uploads/2018/12/red-header-hexagon-1536x864.jpg") center / cover no-repeat; }
body.cab-portal .cab-portal-banner h1 { margin: 0; color: #fff; font-size: 40px; line-height: 1; font-weight: 800; }

/* ---------- Cards ---------- */
body.cab-portal .cab-portal-body { padding: 50px 0; }
body.cab-portal .cab-portal-body--msi { padding: 90px 0 50px; }
body.cab-portal .cab-portal-cards { max-width: 1140px; margin: 0 auto; gap: 0; align-items: stretch; }
body.cab-portal .cab-portal-card { flex: 1 1 0; margin: 15px; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5); background: #fff; }
body.cab-portal .cab-portal-cards--msi > .cab-portal-card { flex: 0 0 calc(61.3% - 30px); }
body.cab-portal .cab-portal-cards--msi > .cab-portal-card--form { flex: 0 0 calc(38.7% - 30px); }
body.cab-portal .cab-portal-card > * { margin-top: 0; }
body.cab-portal .cab-portal-card h2 { margin: 0 0 20px; font-size: 20px; line-height: 1; font-weight: 500; }
body.cab-portal .cab-portal-card p { margin: 0 0 14.4px; font-size: 14px; line-height: 21px; font-weight: 300; }
/* 34.4px = the old text widget's last 14.4px paragraph margin + Elementor's 20px widget gap */
body.cab-portal .cab-portal-card .wp-block-image { margin: 34.4px 0 0; }

/* Manufacturer page: logo, name and invite left, small laptop right */
body.cab-portal .cab-portal-intro { gap: 20px; margin: 0; align-items: flex-start; }
body.cab-portal .cab-portal-intro .wp-block-image { margin: 0; }
body.cab-portal .cab-portal-intro .cab-portal-logo img { max-width: 180px; max-height: 50px; width: auto; height: auto; }
body.cab-portal .cab-portal-intro h1 { margin: 20px 0; font-size: 34px; line-height: 1; font-weight: 600; }
body.cab-portal .cab-portal-intro p { margin: 0; font-size: 16px; line-height: 24px; font-weight: 400; }
body.cab-portal .cab-portal-intro__img img { width: 184px; height: auto; }
body.cab-portal .cab-portal-cards--msi > .cab-portal-card > h2 { margin: 52px 0 20px; font-size: 25px; line-height: 1; font-weight: 600; }

/* ---------- Numbered steps (manufacturer + download pages) ---------- */
body.cab-portal .cab-steps { list-style: none; counter-reset: cab-step; margin: 0; padding: 0; }
body.cab-portal .cab-steps li { counter-increment: cab-step; position: relative; display: flex; align-items: center; min-height: 69px; margin: 0; padding: 10px 10px 10px 79px; font-size: 18px; line-height: 27px; font-weight: 400; color: #000; border-bottom: 2px solid #e7e7e7; }
body.cab-portal .cab-steps li:last-child { border-bottom: 0; }
body.cab-portal .cab-steps li::before { content: counter(cab-step); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: #FF0200; color: #fff; font: 900 17px/42px Roboto, sans-serif; text-align: center; }
/* Manufacturer page: steps 2 and 3 are faded, as on the old portal */
body.cab-portal .cab-portal-body--msi .cab-steps li:not(:first-child) { color: rgba(0, 0, 0, .85); }
body.cab-portal .cab-portal-body--msi .cab-steps li:not(:first-child)::before { background: rgba(255, 2, 0, .59); }

/* ---------- Download form ---------- */
body.cab-portal .cab-form { gap: 17px 10px; }
body.cab-portal .cab-form label,
body.cab-portal .cab-form legend { margin: 0; padding: 0; font-size: 13px; line-height: 15px; font-weight: 300; color: #000; }
body.cab-portal .cab-form label > span[aria-hidden="true"],
body.cab-portal .cab-form legend > span[aria-hidden="true"] { display: none; }
body.cab-portal .cab-form .cab-field { gap: 0; }
body.cab-portal .cab-form input[type="text"],
body.cab-portal .cab-form input[type="email"] { height: 40px; padding: 8px 16px; border: 1px solid #69727d; border-radius: 5px; font: 500 15px/1.4 Roboto, sans-serif; color: #000; }
body.cab-portal .cab-form input::placeholder { color: #69727d; opacity: 1; }
body.cab-portal .cab-form .cab-field--radio { border: 0; margin: 0; padding: 0; }
body.cab-portal .cab-form .cab-field--radio { display: block; }
body.cab-portal .cab-form .cab-field--radio label { display: block; margin: 0; font-size: 15px; line-height: 24px; font-weight: 500; }
body.cab-portal .cab-form .cab-field--radio input { margin: 0 4px 0 0; }
body.cab-portal .cab-form button { justify-self: stretch; width: 100%; min-height: 56px; padding: 12px 24px; border-radius: 5px; background: #FF0200; color: #fff; font: 700 19px/1 Roboto, sans-serif; }
body.cab-portal .cab-form button::before { content: "\f019"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 18px; }
body.cab-portal .cab-form button:hover,
body.cab-portal .cab-form button:focus-visible { background: #000; }

/* ---------- Download in progress ---------- */
body.cab-portal .cab-portal-main > .has-light-background-color:first-child { background: #fff !important; padding: 100px 0 60px !important; }
body.cab-portal .cab-portal-main > .has-light-background-color:first-child > .wp-block-columns { max-width: 1120px; margin: 0 auto; gap: 35px; align-items: flex-start !important; }
body.cab-portal .cab-portal-main > .has-light-background-color:first-child > .wp-block-columns > .wp-block-column:first-child { flex: 0 0 635px !important; }
body.cab-portal .cab-portal-main > .has-light-background-color:first-child > .wp-block-columns > .wp-block-column { align-self: flex-start !important; }
/* The old page showed this square image cropped to 450x370 */
body.cab-portal .cab-portal-main > .has-light-background-color:first-child .wp-block-image img { width: 100%; height: auto; aspect-ratio: 450 / 370; object-fit: cover; }
body.cab-portal .cab-portal-main > .has-light-background-color:first-child > .wp-block-columns > .wp-block-column:last-child { flex: 0 0 450px !important; padding-top: 75px; }
body.cab-portal .cab-portal-main > .has-light-background-color:first-child h1 { margin: 0 0 20px; font-size: 44px; line-height: 1.2; font-weight: 700; }
body.cab-portal .cab-portal-main > .has-light-background-color:first-child .cab-notice { max-width: 1120px; margin: 0 auto 30px; }
body.cab-portal .cab-portal-main > .has-light-background-color:first-child + .wp-block-group { background: #f2f2f2; padding: 60px 0 80px !important; }
body.cab-portal .cab-portal-main > .has-light-background-color:first-child + .wp-block-group > * { max-width: 1120px !important; margin-left: auto !important; margin-right: auto !important; }
body.cab-portal .cab-portal-main > .has-light-background-color:first-child + .wp-block-group h2 { margin: 0 0 50px; font-size: 25px; font-weight: 600; }
body.cab-portal .wp-block-details { margin: 0; padding: 12px 15px; border-bottom: 1px solid #d5d8dc; }
body.cab-portal .wp-block-details summary { font-size: 17px; line-height: 24px; font-weight: 600; cursor: pointer; }
body.cab-portal .wp-block-details p { margin: 12px 0 0; font-size: 16px; line-height: 24px; font-weight: 400; }

/* ---------- Manufacturer list (/portal/msi/) ---------- */
body.cab-portal .cab-portal-list a { color: #000; }
/* Red "View Details" button as on the old portal tiles (Jeff, 10-14); #C90302 passes AA with white text. */
body.cab-portal .cab-portal-list__name { flex: 1; }
body.cab-portal .cab-portal-list__btn { display: inline-block; padding: 5px 20px; border-radius: 5px; background: #C90302; color: #fff; font-size: 16px; font-weight: 400; line-height: 24px; }
body.cab-portal .cab-portal-list a:hover .cab-portal-list__btn, body.cab-portal .cab-portal-list a:focus-visible .cab-portal-list__btn { background: #000; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1024px) {
	body.cab-portal .cab-portal-cards { padding: 0 10px; }
}
@media (max-width: 767px) {
	.cab-portal-header { flex-direction: column; justify-content: center; padding: 10px 16px; }
	.cab-portal-header__contact { text-align: center; }
	body.cab-portal .cab-portal-body--msi { padding-top: 40px; }
	body.cab-portal .cab-portal-cards, body.cab-portal .cab-portal-intro { flex-direction: column; }
	body.cab-portal .cab-portal-cards > .cab-portal-card { flex: 1 1 auto !important; }
	body.cab-portal .cab-portal-banner h1 { font-size: 32px; }
	body.cab-portal .cab-portal-intro h1 { font-size: 28px; }
	body.cab-portal .cab-portal-main > .has-light-background-color:first-child h1 { font-size: 32px; }
	body.cab-portal .cab-portal-main > .has-light-background-color:first-child { padding: 40px 16px !important; }
	body.cab-portal .cab-portal-main > .has-light-background-color:first-child + .wp-block-group { padding: 40px 16px !important; }
}