/*
 * main.css — Bootstrap overrides & custom utilities
 * Rule: only add rules that Bootstrap cannot handle natively.
 */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
/* Syne: geometric, bold editorial personality (headings)                       */
/* Nunito: rounded, friendly, highly readable (body)                            */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Nunito:ital,wght@0,400;0,500;0,600;1,400&display=swap');


/* ── Light-mode palette (Bootstrap CSS variable overrides) ────────────────── */
:root {
  /* Primary sky-blue */
  --bs-primary:                   #38bdf8;   /* sky-400 */
  --bs-primary-rgb:               56, 189, 248;
  --bs-primary-text-emphasis:     #0369a1;   /* sky-700 — text on light bg */

  /* Body */
  --bs-body-bg:                   #f0f9ff;   /* sky-50 — cloud-white tint */
  --bs-body-bg-rgb:               240, 249, 255;
  --bs-body-color:                #0f2a3d;   /* deep navy prose */
  --bs-body-color-rgb:            15, 42, 61;

  /* Secondary */
  --bs-secondary-color:           #4a7a9b;   /* muted sky-slate */
  --bs-secondary-color-rgb:       74, 122, 155;

  /* Links */
  --bs-link-color:                #0284c7;   /* sky-600 */
  --bs-link-hover-color:          #0369a1;   /* sky-700 */
  --bs-link-color-rgb:            2, 132, 199;

  /* Borders */
  --bs-border-color:              #bae6fd;   /* sky-200 */
  --bs-border-color-translucent:  rgba(56, 189, 248, 0.18);

  /* Typography */
  --bs-font-sans-serif:           'Nunito', sans-serif;
  --bs-heading-color:             #0c2340;   /* darkest navy */

  /* Custom: heading font (applied manually below) */
  --hitc-heading-font:            'Syne', sans-serif;

  /* Custom: shared transition speed */
  --hitc-transition:              0.25s ease;
}


/* ── Dark-mode palette ─────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  /* Primary — brighter in dark context so it pops */
  --bs-primary:                   #7dd3fc;   /* sky-300 */
  --bs-primary-rgb:               125, 211, 252;
  --bs-primary-text-emphasis:     #38bdf8;   /* sky-400 */

  /* Body */
  --bs-body-bg:                   #0c1929;   /* deep navy */
  --bs-body-bg-rgb:               12, 25, 41;
  --bs-body-color:                #e0f2fe;   /* sky-100 */
  --bs-body-color-rgb:            224, 242, 254;

  /* Secondary */
  --bs-secondary-color:           #7eb8d4;
  --bs-secondary-color-rgb:       126, 184, 212;

  /* Links */
  --bs-link-color:                #7dd3fc;
  --bs-link-hover-color:          #bae6fd;   /* sky-200 */
  --bs-link-color-rgb:            125, 211, 252;

  /* Borders */
  --bs-border-color:              #1e3a52;
  --bs-border-color-translucent:  rgba(125, 211, 252, 0.15);

  /* Headings */
  --bs-heading-color:             #e0f2fe;
}


/* ── Smooth scroll ─────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}


/* ── WCAG focus-visible ring ───────────────────────────────────────────────── */
/* Complements Bootstrap's default :focus-visible — uses palette primary        */
:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ── Heading font ──────────────────────────────────────────────────────────── */
/* Bootstrap doesn't auto-apply --bs-heading-font-family in CDN builds          */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  font-family: var(--hitc-heading-font);
}


/* ── Scroll offset for sticky navbar ──────────────────────────────────────── */
html {
  scroll-padding-top: 72px;
}


/* ── Navbar ────────────────────────────────────────────────────────────────── */
@keyframes hitc-fade-down {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hitc-navbar {
  background-color: rgba(var(--bs-body-bg-rgb), 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: hitc-fade-down 0.45s ease both;
}

/* Only font-family and letter-spacing have no Bootstrap equivalent */
.hitc-wordmark {
  font-family: var(--hitc-heading-font);
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* Theme + viewport logo mapping */
.hitc-logo-set {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.hitc-logo-variant {
  display: none;
  object-fit: contain;
}

.hitc-logo-set--nav .hitc-logo-variant {
  width: clamp(140px, 15vw, 220px);
  height: auto;
}

.hitc-logo-set--footer .hitc-logo-variant {
  width: clamp(64px, 7vw, 88px);
  height: auto;
}

.hitc-logo-set--offline .hitc-logo-variant {
  width: clamp(120px, 20vw, 180px);
  height: auto;
}

@media (max-width: 767.98px) {
  .hitc-logo-set--nav .hitc-logo-variant {
    width: clamp(88px, 24vw, 128px);
  }

  .hitc-logo-set--footer .hitc-logo-variant {
    width: clamp(72px, 24vw, 108px);
  }
}

.hitc-logo-desktop-light {
  display: block;
}

@media (max-width: 767.98px) {
  .hitc-logo-desktop-light {
    display: none;
  }

  .hitc-logo-mobile-light {
    display: block;
  }
}

[data-bs-theme="dark"] .hitc-logo-desktop-light,
[data-bs-theme="dark"] .hitc-logo-mobile-light {
  display: none;
}

[data-bs-theme="dark"] .hitc-logo-desktop-dark {
  display: block;
}

@media (max-width: 767.98px) {
  [data-bs-theme="dark"] .hitc-logo-desktop-dark {
    display: none;
  }

  [data-bs-theme="dark"] .hitc-logo-mobile-dark {
    display: block;
  }
}

/* Fallback for documents that do not set data-bs-theme (offline page) */
@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme]) .hitc-logo-desktop-light,
  html:not([data-bs-theme]) .hitc-logo-mobile-light {
    display: none;
  }

  html:not([data-bs-theme]) .hitc-logo-desktop-dark {
    display: block;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 767.98px) {
  html:not([data-bs-theme]) .hitc-logo-desktop-dark {
    display: none;
  }

  html:not([data-bs-theme]) .hitc-logo-mobile-dark {
    display: block;
  }
}


/* ── Hero section ──────────────────────────────────────────────────────────── */
.hitc-hero {
  min-height: calc(90svh - 50px);
  padding-top: clamp(4.25rem, 10vh, 7rem);
  padding-bottom: clamp(4.5rem, 12vh, 8rem);
  background: linear-gradient(160deg,
    #e0f2fe 0%,
    #bae6fd 40%,
    #7dd3fc 100%);
}

@media (max-width: 767.98px) {
  .hitc-hero {
    min-height: calc(94svh - 50px);
    padding-top: clamp(3.5rem, 8vh, 5rem);
    padding-bottom: clamp(4.25rem, 10vh, 6.5rem);
  }
}

[data-bs-theme="dark"] .hitc-hero {
  background: linear-gradient(160deg,
    #0c1929 0%,
    #0f2a3d 50%,
    #0e3a56 100%);
}

/* Decorative SVG wave/cloud layer */
.hitc-hero-clouds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hitc-cloud-back {
  fill: rgba(255,255,255,0.18);
}
.hitc-cloud-mid {
  fill: rgba(255,255,255,0.10);
}
.hitc-cloud-puff {
  fill: rgba(255,255,255,0.22);
}

[data-bs-theme="dark"] .hitc-cloud-back  { fill: rgba(125,211,252,0.06); }
[data-bs-theme="dark"] .hitc-cloud-mid   { fill: rgba(125,211,252,0.04); }
[data-bs-theme="dark"] .hitc-cloud-puff  { fill: rgba(125,211,252,0.08); }

/* Eyebrow letter-spacing — no Bootstrap equivalent */
.hitc-hero-eyebrow { letter-spacing: 0.12em; font-size: 0.8rem; }

/* Entrance animations */
@keyframes hitc-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hitc-fade-up {
  opacity: 0;
  animation: hitc-fade-up 0.6s ease forwards;
}
.hitc-fade-up--delay-1 { animation-delay: 0.15s; }
.hitc-fade-up--delay-2 { animation-delay: 0.30s; }
.hitc-fade-up--delay-3 { animation-delay: 0.45s; }

/* Hero CTA hover treatment */
.hitc-hero-cta {
  transition: background-color var(--hitc-transition), color var(--hitc-transition), border-color var(--hitc-transition);
  width: 306px;
}

.hitc-hero-cta:hover,
.hitc-hero-cta:focus-visible {
  background-color: #6f4e37;
  border-color: #6f4e37;
  color: #f8f1e7;
}

[data-bs-theme="dark"] .hitc-hero-cta:hover,
[data-bs-theme="dark"] .hitc-hero-cta:focus-visible {
  background-color: #b08968;
  border-color: #b08968;
}

/* Scroll-down chevron */
@keyframes hitc-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

.hitc-scroll-indicator {
  color: var(--bs-primary-text-emphasis);
  opacity: 0.7;
  margin-bottom: calc(1.5rem + 10px) !important;
  animation: hitc-bounce 1.8s ease-in-out infinite;
  text-decoration: none;
}

[data-bs-theme="dark"] .hitc-scroll-indicator {
  color: var(--bs-primary);
}


/* ── Services section ──────────────────────────────────────────────────────── */
.hitc-service-card {
  transition: transform var(--hitc-transition), box-shadow var(--hitc-transition);
}
.hitc-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(var(--bs-body-color-rgb), 0.10) !important;
}

/* Scroll-triggered reveal */
.hitc-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.hitc-reveal.is-visible       { opacity: 1; transform: translateY(0); }
.hitc-reveal--delay-1         { transition-delay: 0.12s; }
.hitc-reveal--delay-2         { transition-delay: 0.24s; }


/* ── About section ─────────────────────────────────────────────────────────── */
.hitc-about {
  background: linear-gradient(175deg, var(--bs-body-bg) 0%, rgba(var(--bs-primary-rgb), 0.06) 100%);
  border-top: 1px solid var(--bs-border-color);
}

/* Subtle pulse on the SVG rings */
@keyframes hitc-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.12; }
  50%       { transform: scale(1.06); opacity: 0.22; }
}
.hitc-about-ring {
  transform-origin: 110px 88px;
  animation: hitc-pulse 3.5s ease-in-out infinite;
}
.hitc-about-ring--2 { animation-delay: 0.8s; }


/* ── Contact section ───────────────────────────────────────────────────────── */
.hitc-contact {
  background: linear-gradient(175deg, rgba(var(--bs-primary-rgb), 0.04) 0%, var(--bs-body-bg) 100%);
  border-top: 1px solid var(--bs-border-color);
}

/* ── Step 9: Cookie banner ─────────────────────────────────────────────────── */
.hitc-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1080;
  padding: .75rem 0;
  background: #0f2a3d;
  color: #e2f0fb;
  transform: translateY(100%);
  transition: transform .3s ease;
}

.hitc-cookie-banner--visible {
  transform: translateY(0);
}