/*
Theme Name: AshbyIT Client Portal
Theme URI: https://ashbyit.co.uk
Author: AshbyIT
Description: Private client portal theme for portal.ashbyit.co.uk. Matches the AshbyIT website and brand, brands the login page, keeps the whole site behind a login and styles WP Customer Area.
Version: 1.0.16
Requires at least: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: ashbyit-portal
*/

/* ---------- Layout ---------- */
body { background: var(--wp--preset--color--paper); }
.aitp-header { background: var(--wp--preset--color--white); border-bottom: 1px solid var(--wp--preset--color--line); padding: 16px clamp(20px, 5vw, 48px); }
.aitp-header-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.aitp-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.aitp-brand img { width: 150px; height: auto; display: block; }
.aitp-brand span { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--ember); border-left: 1px solid var(--wp--preset--color--line); padding-left: 14px; }
.aitp-user { display: flex; align-items: center; gap: 18px; font-size: 15px; color: var(--wp--preset--color--slate); }
.aitp-user a { color: var(--wp--preset--color--navy); font-weight: 600; text-decoration: none; }
.aitp-user a:hover { color: var(--wp--preset--color--blue); }
.aitp-user .aitp-logout { border: 1.5px solid var(--wp--preset--color--navy); border-radius: 999px; padding: 7px 16px; }
.aitp-main { padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 48px); }
.aitp-card { max-width: 1100px; margin: 0 auto; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: clamp(22px, 4vw, 44px); }
.aitp-card > h1, .aitp-card .wp-block-post-title { margin-top: 0; font-size: clamp(26px, 4vw, 34px); }
.aitp-help { max-width: 1100px; margin: 20px auto 0; display: flex; gap: 12px 28px; flex-wrap: wrap; font-size: 15px; color: var(--wp--preset--color--slate); }
.aitp-help a { color: var(--wp--preset--color--blue); }
.aitp-footer { padding: 24px clamp(20px, 5vw, 48px) 40px; text-align: center; font-size: 14px; color: var(--wp--preset--color--slate); }
.aitp-footer a { color: var(--wp--preset--color--slate); }

/* ---------- WP Customer Area ---------- */
.cuar-css-wrapper, .cuar-css-wrapper * { font-family: inherit !important; }
.cuar-css-wrapper { color: var(--wp--preset--color--navy); }
.cuar-css-wrapper a { color: var(--wp--preset--color--blue); }
.cuar-css-wrapper .btn, .cuar-css-wrapper button, .cuar-css-wrapper input[type=submit],
.cuar-css-wrapper .cuar-btn {
	background: var(--wp--preset--color--orange) !important; border-color: var(--wp--preset--color--orange) !important;
	color: var(--wp--preset--color--navy) !important; border-radius: 999px !important; font-weight: 600 !important; box-shadow: none !important;
}
.cuar-css-wrapper .btn:hover, .cuar-css-wrapper button:hover { background: #E07A24 !important; border-color: #E07A24 !important; }
.cuar-css-wrapper .panel, .cuar-css-wrapper .cuar-panel, .cuar-css-wrapper .card {
	border: 1px solid var(--wp--preset--color--line) !important; border-radius: 14px !important; box-shadow: none !important; overflow: hidden;
}
.cuar-css-wrapper .panel-heading, .cuar-css-wrapper .cuar-panel-heading {
	background: var(--wp--preset--color--sky) !important; color: var(--wp--preset--color--navy) !important; border: 0 !important; font-weight: 600;
}
.cuar-css-wrapper table { width: 100%; border-collapse: collapse; }
.cuar-css-wrapper table th { background: var(--wp--preset--color--navy); color: #fff; font-weight: 600; text-align: left; padding: 10px 12px; }
.cuar-css-wrapper table td { border-bottom: 1px solid var(--wp--preset--color--line); padding: 10px 12px; }
.cuar-css-wrapper .nav > li > a, .cuar-css-wrapper .cuar-menu a { color: var(--wp--preset--color--navy) !important; font-weight: 600; }
.cuar-css-wrapper .nav > li.active > a, .cuar-css-wrapper .nav > li > a:hover { color: var(--wp--preset--color--ember) !important; }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
	.aitp-brand img { width: 120px; }
	.aitp-brand span { display: none; }
	.aitp-user .aitp-name { display: none; }
}

/* ---------- WP Customer Area: tidy the dashboard (v1.0.2) ---------- */
/* Sidebar column only (never the page wrapper, which is called cuar-page-without-sidebar) */
.cuar-css-wrapper .cuar-page-sidebar,
.cuar-css-wrapper #cuar-js-mobile-sidebar { display: none !important; }
.cuar-css-wrapper .cuar-page-with-sidebar .cuar-page-content { width: 100% !important; float: none !important; }

/* Menu bar */
.cuar-css-wrapper .cuar-menu-container { margin-bottom: 0; }
.cuar-css-wrapper .navbar {
	background: #FFFFFF !important; border: 1px solid var(--wp--preset--color--line) !important; border-radius: 12px !important; min-height: 0; margin-bottom: 0;
}
.cuar-css-wrapper .navbar .nav > li > a { padding: 14px 20px !important; background: transparent !important; color: var(--wp--preset--color--navy) !important; font-weight: 600; }
.cuar-css-wrapper .navbar .nav > li.active > a,
.cuar-css-wrapper .navbar .nav > li.active > a:hover,
.cuar-css-wrapper .navbar .nav > li.active > a:focus { background: var(--wp--preset--color--navy) !important; color: #FFFFFF !important; }
.cuar-css-wrapper .navbar .nav > li:first-child > a { border-radius: 11px 0 0 11px; }
.cuar-css-wrapper .navbar .nav > li > a:hover { color: var(--wp--preset--color--ember) !important; }
.cuar-css-wrapper .navbar-brand { color: var(--wp--preset--color--navy) !important; font-weight: 600; }
.cuar-css-wrapper .dropdown-menu { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(16,41,59,.10) !important; padding: 6px 0; }
.cuar-css-wrapper .dropdown-menu > li > a { color: var(--wp--preset--color--navy) !important; padding: 8px 18px !important; }
.cuar-css-wrapper .dropdown-menu > li > a:hover { background: var(--wp--preset--color--sky) !important; }

/* The avatar strip repeats the header's name and Log out, so hide it */
.aitp-card .cuar-css-wrapper .cuar-toolbar { display: none !important; }

/* Remove the plugin's own frame so content lines up with the menu */
.aitp-card .cuar-content-container.cuar-css-wrapper { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
.aitp-card .cuar-css-wrapper .cuar-page,
.aitp-card .cuar-css-wrapper .cuar-page-content,
.aitp-card .cuar-css-wrapper .cuar-page-content-main { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.aitp-card .cuar-css-wrapper .cuar-page { margin-top: 24px !important; }
.aitp-card .cuar-css-wrapper .dropdown-menu { background: #FFFFFF !important; }

/* Content */
.cuar-css-wrapper .cuar-page-header:empty { display: none; }
.cuar-css-wrapper .panel { margin-bottom: 20px; }
.cuar-css-wrapper .panel-heading { padding: 14px 20px !important; }
.cuar-css-wrapper .panel-icon { color: var(--wp--preset--color--orange); margin-right: 8px; }
.cuar-css-wrapper .panel-body { padding: 18px 20px !important; }
/* Only files are shared: hide the empty "Recent Pages" panel */
.cuar-css-wrapper .panel.cuar_private_page { display: none !important; }

.cuar-css-wrapper input[type=search], .cuar-css-wrapper input[type=text] {
	border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 8px 12px; font-size: 16px;
}

/* WordPress "Caps lock is on" warning on the password fields (v1.0.3):
   hidden until WordPress shows it, and with a small icon instead of a giant arrow */
.cuar-css-wrapper .caps-warning:not([style*="display: block"]):not([style*="display:block"]) { display: none !important; }
.cuar-css-wrapper .caps-warning { margin-top: 6px; font-size: 14px; color: var(--wp--preset--color--ember); }
.cuar-css-wrapper .caps-warning .caps-icon { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.cuar-css-wrapper .caps-warning .caps-icon svg { width: 16px !important; height: 16px !important; }

/* Category links under Files (v1.0.4) */
.cuar-css-wrapper .dropdown-menu > li:not(.aitp-file-category) + li.aitp-file-category { border-top: 1px solid var(--wp--preset--color--line); }

/* ---------- Home tiles and help strip (v1.0.8: strong enough to beat the plugin's CSS resets) ---------- */
html body.customer-area-active .cuar-css-wrapper .aitp-intro { color: var(--wp--preset--color--slate); font-size: 17px; line-height: 1.55; margin: 24px 0 20px; max-width: 640px; }
html body.customer-area-active .cuar-css-wrapper .aitp-tiles { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 32px; padding: 0; }
html body.customer-area-active .cuar-css-wrapper .aitp-tiles .aitp-tile {
	display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; padding: 20px;
	border: 1px solid var(--wp--preset--color--line) !important; border-radius: 16px; background: #fff;
	color: var(--wp--preset--color--navy); text-decoration: none !important; box-sizing: border-box;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
html body.customer-area-active .cuar-css-wrapper .aitp-tiles .aitp-tile:hover, html body.customer-area-active .cuar-css-wrapper .aitp-tiles .aitp-tile:focus-visible { border-color: var(--wp--preset--color--orange) !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,41,59,.08); }
html body.customer-area-active .cuar-css-wrapper .aitp-tiles .aitp-tile:focus-visible { outline: 3px solid var(--wp--preset--color--blue); outline-offset: 2px; }
html body.customer-area-active .cuar-css-wrapper .aitp-tiles .aitp-tile-icon {
	display: flex !important; align-items: center; justify-content: center; flex: none;
	width: 48px; height: 48px; margin: 0 0 10px; border-radius: 12px;
	background: var(--wp--preset--color--navy); color: var(--wp--preset--color--orange);
}
html body.customer-area-active .cuar-css-wrapper .aitp-tiles .aitp-tile-icon svg { display: block; width: 26px; height: 26px; margin: 0; }
html body.customer-area-active .cuar-css-wrapper .aitp-tiles .aitp-tile-name { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; }
html body.customer-area-active .cuar-css-wrapper .aitp-tiles .aitp-tile-blurb { display: block; font-size: 14px; color: var(--wp--preset--color--slate); line-height: 1.4; }
.aitp-help { align-items: center; }
.aitp-help .aitp-report {
	background: var(--wp--preset--color--orange); color: var(--wp--preset--color--navy); font-weight: 600; text-decoration: none;
	border-radius: 999px; padding: 9px 20px;
}
.aitp-help .aitp-report:hover { background: #E07A24; }
@media (max-width: 900px) { html body.customer-area-active .cuar-css-wrapper .aitp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
	html body.customer-area-active .cuar-css-wrapper .aitp-tiles { gap: 10px; }
	html body.customer-area-active .cuar-css-wrapper .aitp-tiles .aitp-tile { padding: 14px; }
	html body.customer-area-active .cuar-css-wrapper .aitp-tiles .aitp-tile-icon { width: 40px; height: 40px; margin-bottom: 8px; }
	html body.customer-area-active .cuar-css-wrapper .aitp-tiles .aitp-tile-name { font-size: 16px; }
	html body.customer-area-active .cuar-css-wrapper .aitp-tiles .aitp-tile-blurb { font-size: 13px; }
}

/* ---------- Document panels (v1.0.9): clean white card, no stray icon gap ---------- */
html body.customer-area-active .cuar-css-wrapper .panel {
	overflow: hidden !important; border: 1px solid var(--wp--preset--color--line) !important; border-radius: 16px !important;
	background: #fff !important; margin: 0 0 20px !important;
}
html body.customer-area-active .cuar-css-wrapper .panel .panel-heading {
	display: flex !important; align-items: center; gap: 10px; padding: 16px 20px !important; margin: 0 !important;
	background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 0 !important; color: var(--wp--preset--color--navy) !important;
}
html body.customer-area-active .cuar-css-wrapper .panel .panel-icon { display: none !important; }
html body.customer-area-active .cuar-css-wrapper .panel .panel-heading::before {
	content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--wp--preset--color--orange); flex: none;
}
html body.customer-area-active .cuar-css-wrapper .panel .panel-title { padding: 0 !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.3; }
html body.customer-area-active .cuar-css-wrapper .panel .panel-body { padding: 18px 20px !important; }
html body.customer-area-active .cuar-css-wrapper .panel.cuar-empty .panel-body p { color: var(--wp--preset--color--slate) !important; font-size: 16px !important; margin: 0 !important; }

/* ---------- Menu: highlight the section you're in (v1.0.11) ---------- */
html body.customer-area-active .cuar-css-wrapper .cuar-menu-container .navbar .navbar-nav > li.current-menu-item > a,
html body.customer-area-active .cuar-css-wrapper .cuar-menu-container .navbar .navbar-nav > li.current-menu-ancestor > a,
html body.customer-area-active .cuar-css-wrapper .cuar-menu-container .navbar .navbar-nav > li.current-menu-parent > a,
html body.customer-area-active .cuar-css-wrapper .cuar-menu-container .navbar .navbar-nav > li.active > a {
	background: var(--wp--preset--color--navy) !important; color: #fff !important;
}
html body.customer-area-active .cuar-css-wrapper .cuar-menu-container .navbar .navbar-nav > li.current-menu-ancestor > a .caret,
html body.customer-area-active .cuar-css-wrapper .cuar-menu-container .navbar .navbar-nav > li.current-menu-parent > a .caret { border-top-color: #fff !important; }
/* The page you're on inside a dropdown */
html body.customer-area-active .cuar-css-wrapper .cuar-menu-container .dropdown-menu > li.current-menu-item > a,
html body.customer-area-active .cuar-css-wrapper .cuar-menu-container .dropdown-menu > li.active > a {
	background: var(--wp--preset--color--sky) !important; color: var(--wp--preset--color--navy) !important; font-weight: 700 !important;
	box-shadow: inset 3px 0 0 var(--wp--preset--color--orange);
}

/* ---------- Empty document lists: proper padding (v1.0.11) ---------- */
html body.customer-area-active .cuar-css-wrapper .collection.panel .collection-content { padding: 18px 20px !important; }
html body.customer-area-active .cuar-css-wrapper .collection.panel.cuar-empty p { color: var(--wp--preset--color--slate) !important; font-size: 16px !important; margin: 0 !important; }

/* ---------- Your account pages (v1.0.12) ---------- */
/* The page title already says who you are: hide the grey picture and "admin – Profile" */
html body.customer-area-active .cuar-css-wrapper .cuar-account-fields ~ .page-heading,
html body.customer-area-active .cuar-css-wrapper .cuar-page-content-main > .page-heading { display: none !important; }
/* On the edit page the Save button lives in that heading, so keep it but hide the picture and name, and move it below the form */
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form { display: flex !important; flex-direction: column; }
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form > .page-heading { display: block !important; order: 2; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form > .page-heading .media-left,
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form > .page-heading .media-heading,
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form > .page-heading .cuar-title { display: none !important; }
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form > .page-heading .media,
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form > .page-heading .media-body { display: block !important; margin: 0 !important; padding: 0 !important; }
/* Only show the fields clients need: email, password, first and last name */

/* Simple two-column layout instead of the plugin's jumpy masonry */
html body.customer-area-active .cuar-css-wrapper .cuar-account-fields,
html body.customer-area-active .cuar-css-wrapper .cuar-edit-account-form .tab-pane.active {
	display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; height: auto !important; margin: 0 !important;
}
html body.customer-area-active .cuar-css-wrapper .cuar-account-fields > .panel,
html body.customer-area-active .cuar-css-wrapper .cuar-edit-account-form .tab-pane > .panel {
	position: static !important; left: auto !important; top: auto !important; width: auto !important; float: none !important; margin: 0 !important;
}
html body.customer-area-active .cuar-css-wrapper .cuar-account-fields .panel-body,
html body.customer-area-active .cuar-css-wrapper .cuar-edit-account-form .panel-body { border: 0 !important; margin: 0 !important; }
html body.customer-area-active .cuar-css-wrapper .panel .panel-heading { font-size: 17px !important; font-weight: 700 !important; }
html body.customer-area-active .cuar-css-wrapper .cuar-field { display: flex !important; flex-wrap: wrap; gap: 4px 16px; padding: 12px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--wp--preset--color--line); }
html body.customer-area-active .cuar-css-wrapper .cuar-field:last-child { border-bottom: 0; }
html body.customer-area-active .cuar-css-wrapper .cuar-field > .cuar-field-label { flex: 0 0 150px; width: auto !important; float: none !important; padding: 0 !important; font-weight: 600; color: var(--wp--preset--color--navy); }
html body.customer-area-active .cuar-css-wrapper .cuar-field > .cuar-field-value { flex: 1 1 220px; width: auto !important; float: none !important; padding: 0 !important; }
html body.customer-area-active .cuar-css-wrapper .cuar-readonly-field .cuar-field-value:empty::before { content: "Not added yet"; color: var(--wp--preset--color--slate); font-style: italic; }
html body.customer-area-active .cuar-css-wrapper .cuar-field input[type="text"],
html body.customer-area-active .cuar-css-wrapper .cuar-field input[type="email"],
html body.customer-area-active .cuar-css-wrapper .cuar-field input[type="password"] {
	width: 100% !important; box-sizing: border-box; padding: 10px 12px !important; font-size: 16px !important;
	border: 1px solid var(--wp--preset--color--line) !important; border-radius: 10px !important; background: #fff !important;
}
html body.customer-area-active .cuar-css-wrapper .cuar-edit-account-form input[type="submit"] {
	margin-top: 20px !important; padding: 12px 28px !important; border-radius: 999px !important; font-size: 16px !important; font-weight: 600 !important;
	background: var(--wp--preset--color--orange) !important; border-color: var(--wp--preset--color--orange) !important; color: var(--wp--preset--color--navy) !important;
}
.aitp-account-actions { margin: 24px 0 0; }
.aitp-account-actions a {
	display: inline-block; padding: 12px 24px; border-radius: 999px; background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--navy); font-weight: 600; text-decoration: none;
}
.aitp-account-actions a:hover { background: #E07A24; }
@media (max-width: 781px) {
	html body.customer-area-active .cuar-css-wrapper .cuar-account-fields,
	html body.customer-area-active .cuar-css-wrapper .cuar-edit-account-form .tab-pane.active { grid-template-columns: 1fr; }
}

html body.customer-area-active .cuar-css-wrapper .cuar-field.cuar-form-field { display: block !important; }
/* Hide fields clients don't need (after the field layout rules so it wins) */
html body.customer-area-active .cuar-css-wrapper .cuar-field.cuar-field-id-user_login,
html body.customer-area-active .cuar-css-wrapper .cuar-field.cuar-field-id-nickname,
html body.customer-area-active .cuar-css-wrapper .cuar-field.cuar-field-id-display_name,
html body.customer-area-active .cuar-css-wrapper .cuar-field.cuar-field-id-user_url,
html body.customer-area-active .cuar-css-wrapper .cuar-field.cuar-field-id-description,
html body.customer-area-active .cuar-css-wrapper .panel:has(.cuar-address),
html body.customer-area-active .cuar-css-wrapper .cuar-edit-account-form .tab-pane:not(.active),
html body.customer-area-active .cuar-css-wrapper .cuar-js-msnry-sizer { display: none !important; }
html body.customer-area-active .cuar-css-wrapper .cuar-field.cuar-form-field .control-label { display: block; margin: 0 0 6px !important; padding: 0 !important; width: auto !important; float: none !important; font-weight: 600; color: var(--wp--preset--color--navy); text-align: left !important; }
html body.customer-area-active .cuar-css-wrapper .cuar-field.cuar-form-field .control-container { width: auto !important; float: none !important; padding: 0 !important; }
html body.customer-area-active .cuar-css-wrapper .cuar-field.cuar-form-field .help-block { font-size: 13px; color: var(--wp--preset--color--slate); margin: 6px 0 0; }

/* ---------- Account page fixes (v1.0.13) ---------- */
/* The plugin's clearfix adds invisible items to the grid, pushing boxes out of line */
html body.customer-area-active .cuar-css-wrapper .cuar-account-fields::before,
html body.customer-area-active .cuar-css-wrapper .cuar-account-fields::after,
html body.customer-area-active .cuar-css-wrapper .cuar-edit-account-form .tab-pane.active::before,
html body.customer-area-active .cuar-css-wrapper .cuar-edit-account-form .tab-pane.active::after,
html body.customer-area-active .cuar-css-wrapper .cuar-account-fields > .panel::before,
html body.customer-area-active .cuar-css-wrapper .cuar-account-fields > .panel::after { display: none !important; content: none !important; }
html body.customer-area-active .cuar-css-wrapper .cuar-account-fields > .panel,
html body.customer-area-active .cuar-css-wrapper .cuar-edit-account-form .tab-pane > .panel { align-self: start; }
/* No divider lines between rows: hidden fields made them land in odd places */
html body.customer-area-active .cuar-css-wrapper .cuar-field { border: 0 !important; box-shadow: none !important; padding: 10px 0 !important; }
html body.customer-area-active .cuar-css-wrapper .panel .panel-body { border: 0 !important; box-shadow: none !important; padding: 12px 20px 18px !important; }
/* Edit page: hide the General / Addresses tabs and give the Save button room */
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form .nav-tabs,
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form .nav,
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form .tray-right,
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form .media-heading { display: none !important; }
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form .submit-container,
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form > .page-heading .form-group { margin: 0 !important; padding: 0 !important; float: none !important; position: static !important; }
html body.customer-area-active .cuar-css-wrapper form.cuar-edit-account-form input[type="submit"] { position: static !important; float: none !important; margin: 24px 0 0 !important; line-height: 1.2 !important; height: auto !important; }

/* ==========================================================================
   Your IT hub (v1.0.14)
   ":is(body.customer-area-active, body)" keeps these strong enough to beat
   the customer area plugin's CSS resets.
   ========================================================================== */
/* Five tiles once the hub is switched on */
html :is(body.customer-area-active, body) .aitp-tiles:has(.aitp-tile-hub) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { html :is(body.customer-area-active, body) .aitp-tiles:has(.aitp-tile-hub) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 900px)  { html :is(body.customer-area-active, body) .aitp-tiles:has(.aitp-tile-hub) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

html :is(body.customer-area-active, body) .aitp-hub { color: var(--wp--preset--color--navy); font-size: 17px; line-height: 1.6; max-width: none; }
html :is(body.customer-area-active, body) .aitp-hub > * + * { margin-top: 16px; }
html :is(body.customer-area-active, body) .aitp-hub p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: var(--wp--preset--color--navy); }
html :is(body.customer-area-active, body) .aitp-hub h2 {
	font-size: 26px; font-weight: 700; line-height: 1.25; margin: 44px 0 14px; padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--navy);
}
html :is(body.customer-area-active, body) .aitp-hub h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
html :is(body.customer-area-active, body) .aitp-hub h3 { font-size: 19px; font-weight: 700; margin: 24px 0 8px; color: var(--wp--preset--color--navy); }
html :is(body.customer-area-active, body) .aitp-hub ul,
html :is(body.customer-area-active, body) .aitp-hub ol { margin: 0 0 14px; padding-left: 24px; }
html :is(body.customer-area-active, body) .aitp-hub ul { list-style: disc; }
html :is(body.customer-area-active, body) .aitp-hub ol { list-style: decimal; }
html :is(body.customer-area-active, body) .aitp-hub li { margin: 0 0 6px; display: list-item; font-size: 17px; }
html :is(body.customer-area-active, body) .aitp-hub li::marker { color: var(--wp--preset--color--orange); }
html :is(body.customer-area-active, body) .aitp-hub a { color: var(--wp--preset--color--blue); text-decoration: underline; }
html :is(body.customer-area-active, body) .aitp-hub strong { font-weight: 700; }

/* Intro strip at the top of a hub */
html :is(body.customer-area-active, body) .aitp-hub .aitp-hub-intro {
	background: var(--wp--preset--color--navy); color: #fff; border-radius: 18px; padding: 26px 28px; margin: 0 0 28px;
}
html :is(body.customer-area-active, body) .aitp-hub .aitp-hub-intro p { color: #fff; margin: 0 0 6px; }
html :is(body.customer-area-active, body) .aitp-hub .aitp-hub-intro .aitp-hub-kicker { color: var(--wp--preset--color--orange); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html :is(body.customer-area-active, body) .aitp-hub .aitp-hub-intro .aitp-hub-title { font-size: 28px; font-weight: 700; line-height: 1.2; margin-bottom: 10px; }

/* Contents list */
html :is(body.customer-area-active, body) .aitp-hub .aitp-hub-contents ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
html :is(body.customer-area-active, body) .aitp-hub .aitp-hub-contents li { margin: 0; }
html :is(body.customer-area-active, body) .aitp-hub .aitp-hub-contents a {
	display: inline-block; padding: 7px 14px; border: 1px solid var(--wp--preset--color--line); border-radius: 999px;
	text-decoration: none; color: var(--wp--preset--color--navy); font-size: 15px; font-weight: 600; background: #fff;
}
html :is(body.customer-area-active, body) .aitp-hub .aitp-hub-contents a:hover { border-color: var(--wp--preset--color--orange); }

/* Callouts */
html :is(body.customer-area-active, body) .aitp-hub .aitp-callout { border-radius: 14px; padding: 18px 20px; margin: 18px 0; background: var(--wp--preset--color--sky); border-left: 5px solid var(--wp--preset--color--blue); }
html :is(body.customer-area-active, body) .aitp-hub .aitp-callout p:last-child,
html :is(body.customer-area-active, body) .aitp-hub .aitp-callout ul:last-child { margin-bottom: 0; }
html :is(body.customer-area-active, body) .aitp-hub .aitp-callout-warn { background: var(--wp--preset--color--peach); border-left-color: var(--wp--preset--color--orange); }
html :is(body.customer-area-active, body) .aitp-hub .aitp-callout-tip { background: #EEF6EF; border-left-color: #2E7D4F; }

/* Tables (your setup, key dates) */
html :is(body.customer-area-active, body) .aitp-hub .wp-block-table { margin: 12px 0 18px; overflow-x: auto; }
html :is(body.customer-area-active, body) .aitp-hub table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; overflow: hidden; display: table; }
html :is(body.customer-area-active, body) .aitp-hub th,
html :is(body.customer-area-active, body) .aitp-hub td { padding: 12px 16px; text-align: left; vertical-align: top; font-size: 16px; border-bottom: 1px solid var(--wp--preset--color--line); display: table-cell; }
html :is(body.customer-area-active, body) .aitp-hub thead th { background: var(--wp--preset--color--navy); color: #fff; font-weight: 600; }
html :is(body.customer-area-active, body) .aitp-hub tbody td:first-child { font-weight: 600; width: 34%; background: var(--wp--preset--color--paper); }
html :is(body.customer-area-active, body) .aitp-hub tr:last-child td { border-bottom: 0; }

/* Placeholders for Elliot to fill in: hard to miss */
html :is(body.customer-area-active, body) .aitp-hub mark.aitp-todo,
html :is(body.customer-area-active, body) mark.aitp-todo { background: #FFE58A; color: var(--wp--preset--color--navy); padding: 1px 6px; border-radius: 4px; font-style: normal; }

/* Support cards from [aitp_support] */
html :is(body.customer-area-active, body) .aitp-support-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 8px 0 12px; }
html :is(body.customer-area-active, body) .aitp-support-card { border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 18px; background: #fff; }
html :is(body.customer-area-active, body) .aitp-support-card p { font-size: 15px; line-height: 1.5; margin: 0 0 8px; color: var(--wp--preset--color--navy); }
html :is(body.customer-area-active, body) .aitp-support-card .aitp-support-label { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--wp--preset--color--sky); padding: 3px 10px; border-radius: 999px; }
html :is(body.customer-area-active, body) .aitp-support-urgent { border-color: var(--wp--preset--color--orange); box-shadow: inset 0 4px 0 var(--wp--preset--color--orange); }
html :is(body.customer-area-active, body) .aitp-support-urgent .aitp-support-label { background: var(--wp--preset--color--orange); }
html :is(body.customer-area-active, body) .aitp-support-card .aitp-support-how { font-size: 17px; font-weight: 700; }
html :is(body.customer-area-active, body) .aitp-support-card .aitp-support-time { font-weight: 600; margin-bottom: 0; }
html :is(body.customer-area-active, body) .aitp-support-note { font-size: 15px; color: var(--wp--preset--color--slate); }
@media (max-width: 781px) {
	html :is(body.customer-area-active, body) .aitp-support-cards { grid-template-columns: 1fr; }
	html :is(body.customer-area-active, body) .aitp-hub h2 { font-size: 22px; }
	html :is(body.customer-area-active, body) .aitp-hub .aitp-hub-intro { padding: 20px; }
	html :is(body.customer-area-active, body) .aitp-hub tbody td:first-child { width: 42%; }
}
@media print {
	.aitp-header, .aitp-footer, .aitp-help, .cuar-menu-container, .aitp-hub-contents { display: none !important; }
	html :is(body.customer-area-active, body) .aitp-hub .aitp-hub-intro { background: #fff; color: #000; border: 2px solid #10293B; }
	html :is(body.customer-area-active, body) .aitp-hub .aitp-hub-intro p { color: #000; }
}
/* Menu bar on hub pages (matches the customer area menu) */
.aitp-hub-nav { display: flex; flex-wrap: wrap; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; overflow: hidden; margin: 0 0 28px; background: #fff; }
.aitp-hub-nav a { padding: 14px 22px; color: var(--wp--preset--color--navy); font-weight: 600; font-size: 15px; text-decoration: none; }
.aitp-hub-nav a:hover { color: var(--wp--preset--color--ember); }
.aitp-hub-nav a.is-current { background: var(--wp--preset--color--navy); color: #fff; }
@media (max-width: 600px) { .aitp-hub-nav a { padding: 12px 14px; font-size: 14px; } }