/*
 * SICP public pages (contact, lost password, register, news, privacy, terms, ...): the same
 * cleaner, wider look as the supplier portal (login/portal.css).
 *
 * Loaded by top.htm (the banner every public page includes) and the root header.htm, after the
 * site-wide standardstyle.css and style.css, so it overrides them. CSS only: the markup (one fixed
 * 800px page table, background images, 165px side columns) is unchanged; CSS takes precedence
 * over those HTML attributes. The home page (index.php) has its own design and does not load this.
 */

:root {
	--brand: #1f5c99;
	--brand-dark: #174a7c;
	--text: #1f2933;
	--muted: #5f6b7a;
	--border: #dde3ea;
	--page-bg: #f2f5f8;
	--page-width: 1180px;
}

/* ------------------------------ Page ------------------------------ */

html {
	background: var(--page-bg);
}

body {
	margin: 0;
	padding: 24px 16px 40px;
	background: var(--page-bg);
	color: var(--text);
	font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

/* standardstyle.css sets Arial and 12px on each of these separately */
td, p, li, a, input, select, textarea, button, label, h1, h2, h3, h4 {
	font-family: inherit;
}

/* The page is one 800px table (header, columns, footer) drawn on the pagebg.jpg strip, stretched
   to the window's height: make it one wide white card that is only as tall as its content (the
   stretching is what left short pages' content floating half way down). */
body > table {
	width: 100%;
	max-width: var(--page-width);
	height: auto;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
	box-sizing: border-box;
}

body table[height="100%"],
body td[height="100%"] {
	height: auto;
}

/* The header, footer and column tables inside are 800px too */
body table[width="800"] {
	width: 100%;
}

/* Content tables on Careers and Offers are drawn on the 800px pagebglogin.jpg strip, which would
   repeat (with its blue edge lines) once widened */
table[background*="pagebglogin"] {
	background: #fff;
}

/* The "Latest News" column (its feed is switched off) and the banner column are always empty:
   hide them so the content gets the full width. */
td[width="165"]:has(img[src*="newshead"]),
td[width="165"]:has(> table[width="160"]),
td[width="165"]:has(> img[src*="baseleft"]),
td[width="165"]:has(> img[src*="baseright"]) {
	display: none;
}

/* Breathing room round the content (pages built on the pagebg.jpg layout; Careers and Offers use
   their own padded content table) */
body > table[background*="pagebg."] > tbody > tr:nth-child(2) > td {
	padding: 8px 20px 16px;
	vertical-align: top;
}

/* ------------------------------ Text ------------------------------ */

h1, h2 {
	color: var(--brand-dark);
	font-size: 24px;
	font-weight: 600;
}

h3 {
	color: var(--brand-dark);
	font-weight: 600;
}

h4 {
	color: var(--text);
	font-size: 17px;
	font-weight: 600;
}

p {
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
	color: var(--text);
}

td {
	font-size: 14px;
	color: var(--text);
}

li {
	font-size: 14px;
}

a {
	color: var(--brand);
}

a:hover {
	color: var(--brand-dark);
	text-decoration: underline;
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
}

/* ------------------------------ Header ------------------------------ */

/* Banner: the 800px Glasscare image on the left, the rest filled with the same gradient its
   right edge has (see login/portal.css for the layers) */
td[background*="top.jpg"] {
	--banner-fill: linear-gradient(#9ccfff, #a8d3fd 30%, #b0d7fe 50%, #b9ddff 70%, #cce8fe 90%, #d2ebff);
	background:
		linear-gradient(#f3ffff 50%, #6eb0fa 50%) 0 0 / 100% 2px no-repeat,
		var(--banner-fill) 797px 0 / 4px 100% no-repeat,
		url(images/top.jpg) no-repeat left top,
		var(--banner-fill);
}

table[background*="top.jpg"] {
	background: none;
}

/* Navigation bar */
td[background*="navbg"] {
	background: var(--brand);
	padding: 0 12px;
}

td[background*="navbg"] td {
	padding: 11px 10px;
	font-size: 14px;
	white-space: nowrap;
}

td[background*="navbg"] a {
	color: #fff;
	font-weight: 500;
	text-decoration: none;
}

td[background*="navbg"] a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Old separator images between the links, and the thin strip under the bar */
img[src*="navspace"] {
	display: none;
}

td[background*="navbg"] td[width="10"] {
	padding: 0;
	width: 0;
}

tr:has(> td > img[src*="navbase"]) {
	display: none;
}

/* ------------------------------ Footer ------------------------------ */

table:has(> tbody > tr > td > img[src*="baseleft"]) {
	background: #f8fafc;
	border-top: 1px solid var(--border);
}

table:has(> tbody > tr > td > img[src*="baseleft"]) td {
	background: none;
	color: var(--muted);
	font-size: 12px;
	padding: 6px 0;
}

table:has(> tbody > tr > td > img[src*="baseleft"]) font[size="1"] {
	font-size: 12px;
}

/* ------------------------------ Forms ------------------------------ */

input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
	border: 1px solid #c9d2dc;
	border-radius: 6px;
	padding: 7px 10px;
	font-size: 14px;
	color: var(--text);
	background-color: #fff;
	box-sizing: border-box;
}

input:not([type]):focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(31, 92, 153, 0.15);
	outline: none;
}

input[type="submit"],
input[type="button"],
input.button,
form input.button,
button {
	background: var(--brand);
	background-image: none;
	border: 0;
	border-radius: 6px;
	padding: 8px 18px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input.button:hover,
form input.button:hover,
button:hover {
	background: var(--brand-dark);
}

/* Image buttons ("Go"): keep the image, lose the box drawn round it */
input[type="image"] {
	border: 0;
	padding: 0;
	vertical-align: middle;
}