/* =====================================================================
   Carrier Index – global custom styles
   Design: dark navy + purple accent, DM Sans font, Bootstrap 5 base
   ===================================================================== */

/* ---------- Font --------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&display=swap");

/* ---------- CSS variables (Bootstrap overrides) -------------------- */
:root {
  /* Landing page base colour — darker than Bootstrap's $primary (#1C167E).
     Used for page/section backgrounds throughout the landing page. */
  --ci-primary: var(--bs-primary);
  --ci-subtle: var(--bs-accent);

  /* Purple brand accent = Bootstrap's $secondary (#4D57BE).
     Referencing --bs-secondary means a single change in the Bootstrap SCSS
     propagates here automatically.
     Note: .text-accent / .bg-accent / .btn-accent intentionally override
     Bootstrap's generated orange $accent utilities with this purple. */
  --ci-accent:       var(--bs-accent);
  --ci-accent-hover: var(--bs-accent);;

  /* Muted text = Bootstrap's $tertiary (#A9A7D0), kept as a fixed value
     since it serves a different semantic role from --bs-border-color. */
  --ci-muted:        #a9a7d0;

  /* Accent colour with opacity — uses Bootstrap's generated secondary RGB
     so these stay in sync if the theme's $secondary ever changes. */
  --ci-accent-glow:     rgba(var(--bs-secondary-rgb), .08);
  --ci-accent-focus:    rgba(var(--bs-secondary-rgb), .25);
  --ci-accent-hover-bg: rgba(var(--bs-secondary-rgb), .15);

  /* Override Bootstrap primary so bg-primary / bg-dark = our dark navy
     (Bootstrap compiles $primary to #1C167E; we need the darker #0b0b1e
     for section backgrounds on the landing page). */
  /*--bs-primary:     var(--ci-primary);*/
  /*--bs-primary-rgb: 11, 11, 30;*/
  /*--bs-dark:        var(--ci-primary);*/
  /*--bs-dark-rgb:    11, 11, 30;*/
}

/* ---------- Alpine.js cloak ---------------------------------------- */
/* Must be defined before Alpine initialises so cloaked elements never
   flash on screen. Any element with [x-cloak] stays hidden until
   Alpine removes the attribute during init. */
[x-cloak] { display: none !important; }

/* ---------- Base --------------------------------------------------- */
* {
  font-family: "DM Sans", system-ui, sans-serif;
}

html,
body {
  background-color: var(--ci-primary);
  color: #ffffff;
  scroll-behavior: smooth;
}

.ci-bg-subtle{
  background-color: var(--ci-subtle)!important;
}

/* ---------- Blur / glass ------------------------------------------- */
.bg-white-blur {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bg-blur {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.blur {
  filter: blur(10px);
}

.bg-glass {
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  backdrop-filter: saturate(180%) contrast(90%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) contrast(90%) blur(10px);
}

.bg-glass-no-shadow {
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: saturate(180%) contrast(90%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) contrast(90%) blur(10px);
}

.glass {
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  filter: saturate(180%) contrast(90%) blur(3px);
  -webkit-filter: saturate(180%) contrast(90%) blur(3px);
}

/* ---------- Eclipse glow (decorative) ------------------------------ */
.eclipse {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 40%);
  filter: blur(50px);
  pointer-events: none;
}

/* ---------- Gradient overlays -------------------------------------- */
.gradient-primary-to-transparent {
  background: linear-gradient(
    to bottom,
    var(--bs-primary) 0%,
    var(--bs-primary) 40%,
    transparent 100%
  );
}

.gradient-primary-to-transparent-quick {
  background: linear-gradient(
    to bottom,
    var(--bs-primary) 0%,
    var(--bs-primary) 10%,
    transparent 100%
  );
}

/* ---------- Image + primary colour blend overlay ------------------- */
.bg-image-primary-blend {
  position: relative;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.bg-image-primary-blend::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(var(--bs-primary-rgb), 0.45);
  mix-blend-mode: multiply;
  z-index: -1;
}

/* ---------- Cursor / interaction ----------------------------------- */
.pointer            { cursor: pointer !important; }
.pointer-events-none { pointer-events: none; }
.pointer-events-all  { pointer-events: all; }
.no-shadow          { box-shadow: none !important; }

.bg-active {
  background-color: rgba(13, 110, 253, 0.04) !important;
  border-color: #dee2e6 !important;
  box-shadow: inset 3px 0 0 #0d6efd !important;
}

.opacity-1    { opacity: 1; }           /* Bootstrap uses .opacity-100 */
.bg-opacity-2 { --bs-bg-opacity: 0.02; } /* Bootstrap has no 2% variant */

.text-accent   { color: var(--ci-accent) !important; }
.bg-accent     { background-color: var(--ci-accent) !important; }
.border-accent { border-color: var(--ci-accent) !important; }
.ci-muted      { color: var(--ci-muted) !important; }

/* ---------- Accent button ------------------------------------------ */
.btn-accent {
  background-color: var(--ci-accent);
  border-color: var(--ci-accent);
  color: #fff;
  transition: background-color .2s, border-color .2s;
}
.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--ci-accent-hover);
  border-color: var(--ci-accent-hover);
  color: #fff;
}

/* ---------- Navbar ------------------------------------------------- */
.ci-navbar {
  background-color: rgba(var(--bs-primary-rgb), 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ci-navbar .navbar-brand span {
  font-weight: 800;
  font-size: 1.4rem;
  color: #fff;
}
.ci-navbar .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  transition: color .15s;
}
.ci-navbar .nav-link:hover {
  color: var(--ci-accent);
}
.ci-navbar .nav-link.active {
  color: var(--bs-accent) !important;
  font-weight: 700;
}

/* at the very top – fully transparent */
.ci-navbar--top {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color .35s ease, backdrop-filter .35s ease;
}

/* after scrolling 40px – opaque blur panel */
.ci-navbar--scrolled {
  background-color: rgba(var(--bs-primary-rgb), 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color .35s ease, backdrop-filter .35s ease;
}

/* ---------- Hero section ------------------------------------------- */
.ci-hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 80px;
}
.ci-hero .hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.ci-hero .hero-content {
  position: relative;
  z-index: 2;
}

/* ---------- Solution cards ----------------------------------------- */
.ci-solution-card {
  width: 240px;
  max-width: calc(100vw - 2rem);
  border: 1px solid var(--ci-accent);
  border-radius: 1rem;
  background-color: var(--bs-primary);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 1rem;
  flex-shrink: 0;
}
.ci-solution-card .icon-wrap {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid var(--ci-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.ci-solution-card .icon-wrap i { font-size: 2rem; color: var(--ci-accent); }
.ci-solution-card h5 { font-weight: 700; color: #fff; }
.ci-solution-card p  { color: var(--ci-muted); margin: 0; font-size: .9rem; }

/* ---------- Category cards (Carrier / Broker) ---------------------- */
.ci-category-card {
  border-radius: 1rem;
  border: 2px solid var(--ci-accent);
  overflow: hidden;
  height: 380px;
  position: relative;
  background-size: cover;
  background-position: center;
}
.ci-category-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--bs-primary) 0%,
    var(--bs-primary) 40%,
    transparent 100%
  );
}
.ci-category-card .card-body {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
}

/* ---------- CTA section ------------------------------------------- */
.ci-cta-section {
  position: relative;
  overflow: hidden;
}
.ci-cta-section .road-img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 45%;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}

/* ---------- Footer ------------------------------------------------- */
.ci-footer { background-color: var(--bs-dark); color: #fff; }
.ci-footer a { color: var(--ci-muted); text-decoration: none; transition: color .15s; }
.ci-footer a:hover { color: var(--ci-accent); }
.ci-footer .brand-name { font-size: 1.5rem; font-weight: 800; }

/* =====================================================================
   Utility classes – extracted from templates to centralise all styles
   ===================================================================== */

/* ---------- Text opacity utilities --------------------------------- */
.text-white-85 { color: rgba(255,255,255,.85) !important; }
.text-white-80 { color: rgba(255,255,255,.80) !important; }
.text-white-75 { color: rgba(255,255,255,.75) !important; }
.text-white-60 { color: rgba(255,255,255,.60) !important; }

/* ---------- Full-coverage background image (for hero/page bg) ------ */
.ci-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Dark overlay over hero backgrounds --------------------- */
.ci-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--bs-dark);
  opacity: 0.9;
  z-index: 1;
  pointer-events: none;
}

/* ---------- Eclipse size modifiers (use with .eclipse utility) ------ */
.ci-eclipse-xl { width: 2000px; height: 2000px; pointer-events: none; }
.ci-eclipse-lg { width: 1500px; height: 1500px; pointer-events: none; }
.ci-eclipse-md { width: 1000px; height: 1000px; pointer-events: none; }

/* ---------- Hero typography ---------------------------------------- */
.ci-hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
}
.ci-page-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.15;
}

/* ---------- Hero inner content wrapper ----------------------------- */
/* Constrains width of text within a hero section */
.ci-hero-inner {
  position: relative;
  max-width: 720px;
  z-index: 3;
}

/* ---------- Navbar toggler icon ------------------------------------ */
/*.ci-navbar .navbar-toggler-icon {*/
/*  filter: invert(1);*/
/*}*/
.ci-navbar {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.ci-navbar .navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

/* ---------- Full-page section (e.g. demo page) --------------------- */
.ci-section-page {
  position: relative;
  min-height: 100vh;
  padding-top: 80px;
  overflow: hidden;
}

/* ---------- Map block — two-click consent placeholder -------------- */
.ci-map-wrap { position: relative; }

.ci-map-placeholder {
  background-color: var(--ci-subtle);
  background-image:
    linear-gradient(rgba(77, 87, 190, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 87, 190, .06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.ci-map-wrap iframe,
.ci-map-wrap [x-ref="canvas"] { display: block; }

/* ---------- Company story block ------------------------------------ */
/* Makes any <b> or <strong> inside the richtext heading render in the
   accent colour — the editor bolds the highlighted keywords. */
.ci-about-heading b,
.ci-about-heading strong { color: var(--ci-accent); }

/* Override Wagtail's default richtext paragraph margin inside the
   story heading so the heading sits flush. */
.ci-about-heading p { margin-bottom: 0; }

/* Body copy inside the story column — slightly softer than pure white */
.ci-story-body p { color: rgba(255,255,255,.85); line-height: 1.8; }

/* ---------- Team member cards -------------------------------------- */
.ci-team-card {
  background-color: var(--bs-primary);
  transition: border-color .2s ease;
}
.ci-team-card:hover {
  border-color: color-mix(in srgb, var(--ci-accent) 60%, white) !important;
}

/* Square-crop photo — fills the card width, fixed 1:1 ratio */
.ci-team-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
}

/* Placeholder block when no photo is uploaded */
.ci-team-photo--placeholder { aspect-ratio: 1 / 1; }

/* ---------- Cookie notice banner ----------------------------------- */
.ci-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  padding: .875rem 0;
  background-color: rgba(13, 13, 37, 0.97);
  border-top: 1px solid var(--ci-accent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity .3s ease, transform .3s ease;
}

/* ---------- Article hero section (blog article page) --------------- */
.ci-article-hero {
  position: relative;
  min-height: 65vh;
  padding-top: 80px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-color: var(--bs-dark);
}
.ci-article-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--bs-dark) 0%,
    var(--bs-dark) 20%,
    rgba(11, 11, 30, .55) 60%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ---------- Blog index – article cards ----------------------------- */
.ci-article-card {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: border-color .2s ease;
}
.ci-article-card:hover { border-color: var(--ci-accent) !important; }

.ci-article-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 180px;
  max-height: 180px;
  border-radius: .375rem;
}
.ci-article-thumb-placeholder {
  min-height: 180px;
  max-height: 180px;
}
.ci-article-title      { font-size: 1.4rem; }
.ci-article-meta       { font-size: .85rem; }
.ci-article-read       { font-size: .9rem; }
.ci-article-badge      { font-size: .8rem; }
.ci-article-thumb-icon { font-size: 3rem; }

.ci-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Blog article body ------------------------------------- */
.article-body h2,
.article-body h3,
.article-body h4 {
  color: #fff;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.25;
}
.article-body h2 { font-size: 1.75rem; }
.article-body h3 { font-size: 1.4rem; }
.article-body h4 { font-size: 1.15rem; color: var(--ci-accent); }

.article-body p   { color: rgba(255,255,255,.85); line-height: 1.85; margin-bottom: 1.25rem; }
.article-body ul,
.article-body ol  { color: rgba(255,255,255,.85); line-height: 1.8; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-body li  { margin-bottom: .4rem; }
.article-body a   { color: var(--ci-accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--ci-accent-hover); }
.article-body strong { color: #fff; font-weight: 700; }
.article-body em     { color: rgba(255,255,255,.75); }

.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.3); }

/* ---------- Blog article – inline image and pull-quote ------------- */
.ci-article-img {
  width: 100%;
  object-fit: cover;
  max-height: 500px;
}
.ci-pullquote {
  background: var(--ci-accent-glow, rgba(77,87,190,.08));
}
.ci-pullquote-footer {
  font-size: .9rem;
  color: var(--ci-muted);
}

/* ---------- Features block – feature image ------------------------- */
.ci-feature-img {
  width: 100%;
  border-radius: 1rem;
  border: 2px solid var(--ci-accent);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  object-fit: cover;
  position: relative;
  z-index: 2;
}

/* ---------- Why Choose Us – category card details ------------------ */
.ci-category-arrow {
  font-size: 4rem;
  line-height: 1;
}
.ci-ls { letter-spacing: .5px; }

/* ---------- CTA section – road SVG decoration ---------------------- */
.ci-road-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}

/* ---------- Legal page -------------------------------------------- */
.ci-legal-section {
  background: var(--bs-dark);   /* very light on-brand lavender */
}

.ci-legal-card {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid rgba(77, 87, 190, .15);
  padding: 3rem 3.5rem;
}

@media (max-width: 575.98px) {
  .ci-legal-card { padding: 1.75rem 1.25rem; }
}

/* Typography — dark text on white card */
.ci-legal-body h2 {
  font-size: 1.45rem;
  font-weight: 700;
  color: #13114a;
  margin-top: 2.75rem;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--ci-accent);
}
.ci-legal-body h2:first-child { margin-top: 0; }

.ci-legal-body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #3a3a9e;         /* brand navy-purple, readable on white */
  margin-top: 1.75rem;
  margin-bottom: .5rem;
}

.ci-legal-body p,
.ci-legal-body li {
  color: #2a2854;
  line-height: 1.85;
  font-size: 1rem;
}

.ci-legal-body p { margin-bottom: .9rem; }
.ci-legal-body p:last-child { margin-bottom: 0; }

.ci-legal-body strong { color: #13114a; }

.ci-legal-body a {
  color: var(--ci-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ci-legal-body a:hover { opacity: .8; }

.ci-legal-body ul,
.ci-legal-body ol {
  padding-left: 1.6rem;
  margin-bottom: 1rem;
}
.ci-legal-body li         { margin-bottom: .4rem; }
.ci-legal-body li:last-child { margin-bottom: 0; }

/* ---------- Document items ---------------------------------------- */
.ci-doc-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .2s, border-color .2s;
}
.ci-doc-item:hover {
  background: var(--ci-accent-hover-bg, rgba(77,87,190,.15));
  border-color: var(--ci-accent);
}

/* ---------- Dark-theme form controls (demo page) ------------------- */
.ci-form .form-control,
.ci-form .form-select {
  background-color: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.ci-form .form-control::placeholder { color: rgba(255,255,255,.4); }
.ci-form .form-control:focus,
.ci-form .form-select:focus {
  background-color: rgba(255,255,255,.12);
  border-color: var(--ci-accent);
  color: #fff;
  box-shadow: 0 0 0 .2rem var(--ci-accent-focus, rgba(77,87,190,.25));
}
.ci-form .form-select option { background-color: #1a1a3e; color: #fff; }
.ci-form .input-group-text   { border-color: rgba(255,255,255,.2); }