/* ==========================================================================
   Host4u support portal theme for SupportPal (frontend template "host4u").
   Loaded after SupportPal's own stylesheets. SupportPal's CSS sits in cascade
   layers, so these rules win without !important. Same look as host4u.hosting:
   floating glass header, gradient hero, glass cards, pill buttons.
   ========================================================================== */

/* Fonts (self-hosted on host4u.hosting, SIL Open Font License) */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Colours: the Host4u palette replaces SupportPal's blue scheme (light only) */
:root, .sp-theme-dark {
  --h4-navy: #0A1A3C;
  --h4-ink: #050E24;
  --h4-blue: #0A6CF1;
  --h4-blue-dark: #0857C7;
  --h4-cyan: #1FB6FF;
  --h4-wash: #F7F9FC;
  --h4-ease: cubic-bezier(0.16, 0.84, 0.3, 1);
  --h4-grad: linear-gradient(160deg, #2257B0 0%, #153A80 48%, #0C2556 100%);

  --color-primary-100: #DCE9FD;
  --color-primary-200: #B9D3FB;
  --color-primary-300: #8FB8F8;
  --color-primary-400: #4E93F4;
  --color-primary-500: #1F78EE;
  --color-primary-600: #0A6CF1;
  --color-primary-700: #0857C7;
  --color-primary-800: #0857C7;
  --color-primary-900: #0A1A3C;
  --color-background-primary: #FFFFFF;
  --color-background-secondary: #F1F5FB;
  --color-background-tertiary: #E1E7F0;
  --color-text-primary: #0F172A;
  --color-text-secondary: #4A5468;
  --color-text-tertiary: #66718A;
}

html.h4-html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body.h4 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background: var(--h4-wash);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
body.h4 h1, body.h4 h2, body.h4 h3, body.h4 h4 { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; color: var(--h4-navy); }
body.h4 a { color: var(--h4-blue); }
body.h4 a:hover { color: var(--h4-blue-dark); }
body.h4 :focus-visible { outline: 3px solid var(--h4-cyan); outline-offset: 3px; border-radius: 8px; }
.h4-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.h4-skip { position: absolute; left: 12px; top: -64px; z-index: 100000; background: #fff; color: var(--h4-navy) !important; padding: 10px 18px; border-radius: 999px; font-weight: 600; transition: top .2s; }
.h4-skip:focus { top: 12px; }

/* ---------- Header: floating glass pill ---------- */
.h4-header { position: fixed; inset: 0 0 auto 0; z-index: 10002; padding: 14px 20px 0; pointer-events: none; }
.h4-bar {
  pointer-events: auto; position: relative; max-width: 1120px; margin: 0 auto;
  padding: 9px 10px 9px 22px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)), rgba(14,38,92,0.62);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 18px 40px -22px rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.h4-bar > .sp\:flex { min-height: 46px; }
.h4-brand { display: inline-flex; align-items: center; }
.h4-logo { height: 34px; width: auto; display: block; transition: scale .4s var(--h4-ease); }
.h4-brand:hover .h4-logo { scale: 1.06; }
.h4-logo-print { display: none; }
.h4-links { display: none; gap: 4px; align-items: center; }
@media (min-width: 1024px) { .h4-links { display: flex; } }
.h4-link, .h4-links .sp-action {
  color: rgba(255,255,255,0.92) !important; font: 500 15px/1 'Inter', sans-serif; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  transition: background .2s ease, color .2s ease; cursor: pointer;
}
.h4-link:hover, .h4-links .sp-action:hover { background: rgba(255,255,255,0.1); color: #fff !important; }
.h4-link.is-current { background: rgba(255,255,255,0.16); color: #fff !important; }
.h4-link--cta { background: #fff; color: var(--h4-navy) !important; font-weight: 600; margin-left: 6px; box-shadow: 0 10px 24px -14px rgba(5,14,36,0.8); }
.h4-link--cta:hover { background: #fff; color: var(--h4-ink) !important; translate: 0 -1px; }
.h4-links .sp-avatar { width: 28px; height: 28px; border-radius: 50%; }
.sp-search-button { color: rgba(255,255,255,0.92) !important; cursor: pointer; }
.h4-burger { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.1); }
.h4-burger svg { width: 22px; height: 22px; fill: #fff; }
.h4-header .sp-mobile-nav-button, body.sp-mobile-nav-open .h4-header .sp-mobile-nav-button { background: transparent !important; border-radius: 50%; padding: 0 !important; }
.h4-header .sp-mobile-nav-button .h4-burger { border-color: rgba(255,255,255,0.28); color: #fff; background: rgba(255,255,255,0.1); }
.h4-header .sp-mobile-nav-button .h4-burger:hover, body.sp-mobile-nav-open .h4-header .sp-mobile-nav-button .h4-burger { background: rgba(255,255,255,0.22); color: #fff; }
.h4-searchbar { inset: 0; border-radius: 999px; background: rgba(8,24,64,0.97); padding: 6px 8px 6px 20px; }
.h4-searchbar input[type=search] { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; border-radius: 999px; height: 44px; padding-inline: 44px 16px; width: 100%; }
.h4-searchbar input[type=search]::placeholder { color: rgba(255,255,255,0.7); }
.h4-searchbar form:before { color: #fff !important; top: 11px !important; }
.h4-searchbar .sp-search-close { background: rgba(255,255,255,0.14); color: #fff; border-radius: 999px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }
.h4-header .sp-dropdown { background: rgba(10,26,64,0.97); border: 1px solid rgba(255,255,255,0.16); border-radius: 22px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.7); padding: 8px; min-width: 220px; }
.h4-header .sp-dropdown a { color: rgba(255,255,255,0.92); border-radius: 14px; display: block; padding: 10px 14px; text-align: start; }
.h4-header .sp-dropdown a:hover { background: rgba(255,255,255,0.1); color: #fff; }
.h4-header .sp-dropdown ul { margin: 0; padding: 0; list-style: none; }

/* Mobile menu panel (opened by SupportPal's own script) */
.h4-mobile-nav { margin-top: 0 !important; background: rgba(10,26,64,0.98); padding-top: 96px; padding-bottom: 24px; max-height: 100vh; border-radius: 0 0 28px 28px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.7); }
.h4-mobile-nav ul.sp-nav { margin: 0; padding: 0; }
.h4-mobile-nav ul.sp-nav li a { display: flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 18px; color: rgba(255,255,255,0.94); text-decoration: none; font-weight: 500; }
.h4-mobile-nav ul.sp-nav li a:hover, .h4-mobile-nav ul.sp-nav li a.current { background: rgba(255,255,255,0.12); color: #fff; }

/* ---------- Hero band ---------- */
.h4-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: var(--h4-grad); padding: clamp(112px, 15vh, 150px) 0 clamp(88px, 11vh, 120px); }
.h4-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('/images/hero-bg.jpg') 75% 50% / cover no-repeat; opacity: .38; }
.h4-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,30,76,0.86) 0%, rgba(10,30,76,0.55) 46%, rgba(10,30,76,0.1) 80%), linear-gradient(0deg, rgba(10,30,76,0.5), transparent 40%); }
.h4-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; margin-bottom: 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.26); background: rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); font: 600 13px/1 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.h4-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--h4-cyan); box-shadow: 0 0 0 4px rgba(31,182,255,0.28); }
body.h4 .h4-title { color: #fff; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.06; font-weight: 800; letter-spacing: -0.04em; margin: 0; max-width: 860px; text-wrap: balance; }
.h4-breadcrumb, .h4-breadcrumb a { color: rgba(255,255,255,0.92) !important; }
.h4-breadcrumb { margin-top: 18px; font-size: 15px; }
.h4-breadcrumb a { text-decoration: none; }
.h4-breadcrumb a:hover { text-decoration: underline; color: #fff !important; }
.h4-hero--home { padding-bottom: clamp(104px, 13vh, 140px); }
.h4-hero--home .h4-title { font-size: clamp(36px, 5vw, 64px); }

/* Home search lives in the hero */
.h4-search { position: static !important; top: auto !important; margin-top: 30px; padding: 0 !important; background: none !important; box-shadow: none !important; max-width: 640px; }
.h4-search > div { padding: 0 !important; margin: 0 !important; max-width: none; }
.h4-search .sp-search { text-align: start !important; width: 100% !important; margin: 0 !important; }
.h4-search .sp-search > div:first-child { color: #fff; font: 700 clamp(18px, 2vw, 22px)/1.2 'Manrope', sans-serif !important; margin-bottom: 14px !important; }
.h4-search .sp-search form { position: relative; }
.h4-search .sp-search form:before { color: var(--h4-navy) !important; top: 17px !important; inset-inline-start: 22px !important; font-size: 16px; z-index: 1; }
.h4-search input[type=search] { width: 100%; height: 56px; max-height: 56px; border: 1px solid rgba(255,255,255,0.6); border-radius: 999px; background: rgba(255,255,255,0.96); color: var(--h4-navy); padding-inline: 54px 24px; font-size: 16px; box-shadow: 0 18px 40px -22px rgba(0,0,0,0.6); }
.h4-search input[type=search]::placeholder { color: #66718A; }

/* ---------- Main content: glass card pulled up over the hero ---------- */
.h4-main { position: relative; z-index: 2; margin-top: -64px; padding: 0 !important; flex: 1 0 auto; }
.h4-main > .h4-wrap { margin-top: 0 !important; margin-bottom: 0 !important; }
.h4-main .sp-content-inner {
  border-radius: 28px; padding: clamp(24px, 3vw, 36px);
  background: #fff;
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 34px 46px -38px rgba(10,26,60,0.5), 0 0 0 1px rgba(10,26,60,0.07);
}
/* SupportPal clips the content area, so leave room for the card shadow */
.h4-main .sp-content { padding-bottom: 48px; margin-bottom: -48px; }
.h4-main .sp-description { color: var(--color-text-tertiary); }
.h4-main .sp-sidebar { background: #fff; border: 1px solid rgba(255,255,255,0.95); border-radius: 28px; padding: 24px; box-shadow: 0 30px 40px -34px rgba(10,26,60,0.45), 0 0 0 1px rgba(10,26,60,0.07); align-self: flex-start; }
@media (max-width: 1023px) { .h4-main .sp-sidebar { margin-bottom: 20px !important; } }

/* Dashboard tiles */
.h4-tile { border-radius: 24px !important; background: linear-gradient(180deg, #FFFFFF, #F3F7FD) !important; border: 1px solid #E1E7F0; box-shadow: 0 20px 40px -30px rgba(10,26,60,0.45) !important; text-decoration: none !important; padding: 22px 26px !important; transition: transform .5s var(--h4-ease), box-shadow .3s ease, border-color .3s ease; }
.h4-tile:hover { transform: translateY(-5px); border-color: var(--h4-blue); box-shadow: 0 30px 50px -28px rgba(10,108,241,0.5) !important; }
.h4-tile .sp-icon { width: 68px; height: 68px; flex: none; border-radius: 22px; display: grid; place-items: center; margin-inline-end: 22px !important; background: linear-gradient(135deg, #1A74EA, #0857C7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 14px 28px -16px var(--h4-blue); }
.h4-tile .sp-dashboard-section .sp-icon i, .h4-tile .sp-icon i { font-size: 28px !important; color: #fff !important; line-height: 1; }
.h4-tile h4 { font-size: 21px; margin: 0 0 4px; color: var(--h4-navy); }
.sp-dashboard-section .sp-icon i { color: var(--h4-blue); }
.sp-dashboard-section h4 a { color: var(--h4-navy); text-decoration: none; }
.sp-dashboard-section h4 a:hover { color: var(--h4-blue); }

/* ---------- Buttons ---------- */
.h4-main .sp-button, .h4-main input[type=submit], .h4-main input[type=button].sp-button-submit, .h4 .sp-button-submit {
  border-radius: 999px; font-weight: 600; padding: 12px 26px; min-height: 46px; border: 1px solid transparent;
  transition: background .2s ease, translate .4s var(--h4-ease), box-shadow .3s ease; text-decoration: none;
}
.h4-main .sp-button { background: var(--color-background-secondary); color: var(--h4-navy); box-shadow: none; }
.h4-main .sp-button:hover { background: var(--color-background-tertiary); translate: 0 -1px; color: var(--h4-navy); }
.h4-main input[type=submit], .h4-main .sp-button-submit, .h4-main input[type=button].sp-button-submit {
  background: linear-gradient(180deg, #1A74EA, var(--h4-blue) 45%, var(--h4-blue-dark)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 12px 28px -14px rgba(10,108,241,0.9);
}
.h4-main input[type=submit]:not([disabled]):hover, .h4-main .sp-button-submit:not([disabled]):hover, .h4-main input[type=button].sp-button-submit:not([disabled]):hover {
  background: linear-gradient(180deg, #1A74EA, var(--h4-blue) 45%, var(--h4-blue-dark)); color: #fff; translate: 0 -2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), 0 18px 34px -14px rgba(10,108,241,1);
}
.h4-main .sp-button-sm { padding: 8px 18px; min-height: 38px; }

/* ---------- Forms ---------- */
.h4-main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
.h4-main select, .h4-main textarea {
  border-radius: 14px; border: 1.5px solid #D3DAE6; background: #fff; color: var(--color-text-primary);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.h4-main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) { min-height: 44px; padding-inline: 16px; }
.h4-main select { min-height: 44px; }
.h4-main textarea { padding: 12px 16px; }
.h4-main input:focus, .h4-main select:focus, .h4-main textarea:focus { border-color: var(--h4-blue); box-shadow: 0 0 0 4px rgba(10,108,241,0.16); outline: none; }
.h4-main .sp-form-row > label { color: var(--h4-navy); }
/* Make text fields the same width in every form row (SupportPal sizes some by character count) */
.h4-main .sp-form-row .sp-input-container input[type=text], .h4-main .sp-form-row .sp-input-container input[type=email],
.h4-main .sp-form-row .sp-input-container input[type=password], .h4-main .sp-form-row .sp-input-container input[type=url],
.h4-main .sp-form-row .sp-input-container input[type=number], .h4-main .sp-form-row .sp-input-container select,
.h4-main .sp-form-row .sp-input-container textarea { width: 100%; }
.h4-main .sp-form-row .sp-input-container > div:not([class]), .h4-main .sp-form-row .sp-input-container .hideShowPassword-wrapper { display: block !important; width: 100%; }
.h4-main .sp-search input[type=search] { padding-inline: 44px 16px; }

/* ---------- Tables, tabs, alerts, badges ---------- */
.h4-main table.sp-table-grid thead th { font-family: 'Manrope', sans-serif; color: var(--h4-navy); border-color: #E1E7F0; }
.h4-main table.sp-table-grid tbody tr:hover { background: #F3F7FD; }
.h4-main .sp-alert { border-radius: 18px; }
.h4-main .sp-badge { background: var(--h4-navy); }
.h4-main .sp-tabs li.sp-active, .h4-main .sp-tabs li.active { border-color: var(--h4-blue); }
.h4-main .sp-sidebar ul.sp-nav li a { border-radius: 14px; }
.h4-main .sp-sidebar ul.sp-nav li a.current { background: var(--h4-blue); color: #fff; }

/* ---------- Footer ---------- */
.h4-footer { margin-top: clamp(48px, 7vw, 88px); background: #0F2A62; color: rgba(255,255,255,0.78); }
.h4-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; padding: clamp(44px, 6vw, 64px) 0 28px; align-items: start; }
.h4-footer__brand img { height: 36px; width: auto; display: block; margin-bottom: 18px; }
.h4-footer__brand p { font-size: 15px; line-height: 1.7; max-width: 320px; margin: 0; }
body.h4 .h4-footer h2 { font: 700 13px/1 'Manrope', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
body.h4 .h4-footer__brand p { color: rgba(255,255,255,0.8); }
.h4-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
body.h4 .h4-footer a { display: inline-block; padding: 3px 0; color: rgba(255,255,255,0.84); text-decoration: none; font-size: 14.5px; line-height: 1.75; transition: color .2s ease; }
body.h4 .h4-footer a:hover { color: var(--h4-cyan); }
.h4-footer__bottom { border-top: 1px solid rgba(255,255,255,0.16); padding: 22px 0 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.7); }
.h4-lang select { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.24); color: #fff; border-radius: 999px; padding: 6px 14px; min-height: 40px; }
.h4-lang select option { color: #0F172A; }
@media (max-width: 760px) { .h4-footer__grid { grid-template-columns: 1fr 1fr; } .h4-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .h4-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Small screens ---------- */
@media (max-width: 1023px) {
  .h4-hero { padding-top: 104px; }
  .h4-main { margin-top: -48px; }
}
@media (max-width: 640px) {
  .h4-header { padding: 10px 12px 0; }
  .h4-bar { padding: 7px 8px 7px 16px; }
  .h4-logo { height: 30px; }
  .h4-wrap { padding: 0 14px; }
  .h4-tile .sp-icon { width: 56px; height: 56px; border-radius: 18px; margin-inline-end: 16px !important; }
  .h4-tile .sp-icon i { font-size: 23px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.h4-html { scroll-behavior: auto; }
  .h4-tile, .h4-main .sp-button, .h4-main input[type=submit], .h4-logo { transition: none; }
}

/* Print: plain page, no hero or glass */
@media print {
  .h4-header, .h4-footer, .h4-skip, .h4-mobile-nav { display: none !important; }
  .h4-hero { background: none; color: #000; padding: 0 0 12px; }
  .h4-hero::before, .h4-hero::after { display: none; }
  body.h4 .h4-title, .h4-breadcrumb, .h4-breadcrumb a { color: #000 !important; }
  .h4-eyebrow { display: none; }
  .h4-main { margin-top: 0; }
  .h4-main .sp-content-inner { box-shadow: none; border: 0; background: none; padding: 0; }
}