/* =============================================================================
   Cheap Traffic School 24-7: affiliate stylesheet for cacourseprovider.com
   Path: includes/templates/affiliates/{affiliateID}/style.css
   Loaded by header.inc AFTER global.css. register.php loads register.css later
   in the body; nothing here competes with it.

   Two parts:
   1. The new header and footer, copied from the site's own styles.css. Every
      selector starts with a "ct24-" class, so no rule here can reach the
      existing pages, and the existing sheets cannot reach the header
      (global.css's *{margin:0 auto} is neutralised in scope).
   2. Mobile fixes for register, login and home content. Every selector starts
      with body.ct24-page, so they only apply on pages using this header.

   No existing stylesheet is modified.
   ========================================================================== */


/* =============================================================================
   1. HEADER AND FOOTER
   ========================================================================== */

/* ---- tokens (the site's values; scoped, nothing set on :root) ------------- */
.ct24-skip, .ct24-head, .ct24-foot {
	--ct24-deep: #14526E;
	--ct24-deep-d: #0F3D52;
	--ct24-act: #E23D22;
	--ct24-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--ct24-wrap: 1140px;
	--ct24-pad: clamp(16px, 4vw, 32px);
}

/* ---- scoped reset: undoes global.css *{margin:0 auto;padding:0} ---------- */
.ct24-skip, .ct24-head, .ct24-head *, .ct24-foot, .ct24-foot * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.ct24-head, .ct24-foot {
	font-family: var(--ct24-sans);
	font-size: 16px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}
.ct24-head :focus-visible, .ct24-foot :focus-visible, .ct24-skip:focus-visible {
	outline: 3px solid var(--ct24-act);
	outline-offset: 2px;
	border-radius: 4px;
}

.ct24-wrap { width: 100%; max-width: var(--ct24-wrap); margin: 0 auto; padding-inline: var(--ct24-pad); }

/* ---- skip link ------------------------------------------------------------ */
.ct24-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--ct24-deep); color: #fff; padding: 10px 16px;
	font: 700 15px var(--ct24-sans); text-decoration: none;
}
.ct24-skip:focus { left: 8px; top: 8px; color: #fff; }

/* ---- header / nav ----------------------------------------------------------
   Student login is visible at EVERY width. It never collapses into the menu.
   -------------------------------------------------------------------------- */
.ct24-head {
	background: var(--ct24-deep); color: #fff;
	position: -webkit-sticky; position: sticky; top: 0; z-index: 100;
}
.ct24-head a { color: #fff; text-decoration: none; }
.ct24-head-in {
	display: flex; align-items: center; gap: 14px;
	width: 100%; max-width: var(--ct24-wrap); margin: 0 auto; padding: 12px var(--ct24-pad);
}

.ct24-dial { width: 1.75em; height: 1.75em; flex: 0 0 auto; display: block; }
.ct24-head .ct24-brand {
	display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0;
	font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.62;
}
.ct24-brand .ct24-dial { font-size: 17px; }
.ct24-brand b { font-weight: 800; white-space: nowrap; }
.ct24-brand i { font-style: normal; color: #FFC4B6; }

.ct24-nav { margin-left: auto; }
.ct24-nav-list { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 24px); list-style: none; }
.ct24-nav-list li { list-style: none; }
.ct24-head .ct24-nav-link { font-size: 13.5px; font-weight: 600; letter-spacing: .02em; opacity: .94; padding-block: 6px; }
.ct24-head .ct24-nav-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

.ct24-head .ct24-login {
	flex: 0 0 auto; font-size: 13px; font-weight: 700; letter-spacing: .02em;
	border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 7px; padding: 8px 14px; white-space: nowrap;
}
.ct24-head .ct24-login:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.ct24-toggle {
	display: none; flex: 0 0 auto; align-items: center; gap: 8px;
	background: transparent; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 7px;
	color: #fff; font: 700 13px/1 var(--ct24-sans); padding: 9px 12px; cursor: pointer;
}
.ct24-bars { display: block; width: 16px; height: 2px; background: #fff; position: relative; }
.ct24-bars::before, .ct24-bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: #fff; }
.ct24-bars::before { top: -5px; }
.ct24-bars::after { top: 5px; }

@media (max-width: 900px) {
	.ct24-toggle { display: flex; margin-left: auto; }
	.ct24-head-in { flex-wrap: wrap; }
	.ct24-nav { margin-left: 0; order: 5; flex-basis: 100%; display: none; }
	.ct24-nav[data-open="true"] { display: block; }
	.ct24-nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0 10px; }
	.ct24-head .ct24-nav-link { display: block; padding: 12px 2px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 15px; }
}
/* Narrow header: brand, menu control and Student login stay on one row.
   The brand may wrap to two lines and the menu control drops its label. */
@media (max-width: 620px) {
	.ct24-head-in { gap: 10px; }
	.ct24-head .ct24-brand { font-size: 13.5px; gap: 8px; line-height: 1.15; }
	.ct24-brand .ct24-dial { font-size: 15px; }
	.ct24-brand b { white-space: normal; }
	.ct24-toggle-label { display: none; }
	.ct24-toggle { padding: 9px 11px; }
	.ct24-head .ct24-login { padding: 8px 11px; font-size: 12.5px; }
}

/* ---- footer --------------------------------------------------------------- */
.ct24-foot {
	background: var(--ct24-deep-d); color: #A9C4D0;
	padding-block: 26px; font-size: 13.5px; clear: both;
}
.ct24-foot-in { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; }
.ct24-foot-text { color: #A9C4D0; }
.ct24-foot a { color: #DCEAF1; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ct24-foot a:hover { color: #fff; }
.ct24-foot-links { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; }
.ct24-foot-links li { list-style: none; }
@media (max-width: 620px) {
	.ct24-foot-links { gap: 4px 18px; }
	.ct24-foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media print { .ct24-head, .ct24-foot, .ct24-skip { display: none; } }


/* =============================================================================
   2. PAGE CONTENT: MOBILE FIXES (register.php, login.php, home.php)
   Scoped to body.ct24-page. global.css and register.css already carry most of
   the phone layout; these rules fix what they leave overflowing.
   ========================================================================== */
/* Clip sideways overflow without creating a scroll container, so the sticky
   bar keeps working. */
body.ct24-page { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body.ct24-page #aff_content { max-width: 100%; }

@media only screen and (max-width: 40em) {

	/* Content box: global.css sets width 100% with zero side padding, so text
	   touched the screen edge. Give it a gutter and count padding in the width. */
	body.ct24-page #aff_content {
		box-sizing: border-box;
		width: 100% !important;
		padding: 20px 16px !important;
		margin: 0 0 24px 0;
		border: 0;
	}
	body.ct24-page #aff_content img { max-width: 100%; height: auto; }

	/* 16px stops iOS from zooming into a field on focus. */
	body.ct24-page #aff_content input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=image]),
	body.ct24-page #aff_content select,
	body.ct24-page #aff_content textarea {
		font-size: 16px;
		max-width: 100%;
	}

	/* Fixed-width legacy blocks that ran off the side of a phone. */
	body.ct24-page #crossroads,
	body.ct24-page #final_note,
	body.ct24-page #post_shipping,
	body.ct24-page #evaluation,
	body.ct24-page #payment_container,
	body.ct24-page #contact_container,
	body.ct24-page #login_container,
	body.ct24-page .tcont {
		box-sizing: border-box;
		width: auto !important;
		max-width: 100%;
	}
	body.ct24-page #receipt { width: 100%; }

	/* ---- register.php -------------------------------------------------- */
	body.ct24-page #registration_left_panel {
		margin: 0 0 16px 0;
		padding: 0;
		border-right: 0;
	}
	body.ct24-page #registration_panel { padding: 0; }
	body.ct24-page #registration_container .contact_field,
	body.ct24-page #registration_container select,
	body.ct24-page .registration_subdivision {
		box-sizing: border-box;
		max-width: 100%;
	}
	body.ct24-page .registration_subdivision { padding: 10px 12px; }
	body.ct24-page #registration_container select { width: 100%; }
	body.ct24-page #registration_container .reg_row,
	body.ct24-page #registration_container .frm_row,
	body.ct24-page #registration_container .row_err {
		text-align: left;
	}
	body.ct24-page .reg_bread,
	body.ct24-page #reg_bread { margin-right: 0; font-size: 15px; }

	/* ---- login.php ----------------------------------------------------- */
	body.ct24-page #login_container { margin-top: 16px; }
	body.ct24-page #login_panel { height: auto; padding: 16px 0; }
	body.ct24-page #login_panel .login_form {
		box-sizing: border-box;
		width: 100%;
		max-width: 320px;
		font-size: 18px;
	}
	body.ct24-page #login_panel input[type=submit],
	body.ct24-page #login_container input[type=submit] {
		min-height: 44px;
		padding: 0 24px;
		font-size: 16px;
	}
	body.ct24-page #login_container table { width: 100%; }
	body.ct24-page #login_container table td { display: block; text-align: left; }
}