/* ═══════════════════════════════════════════
   KeyShare Brand Overrides
   Loaded AFTER Unify theme.css
   Only override what's necessary.
   ═══════════════════════════════════════════ */

/* Global: prevent horizontal overflow on mobile */
html, body { overflow-x: hidden; }

/* Override Unify's green primary to KeyShare teal */
:root {
  --bs-primary: #028599;
  --bs-primary-rgb: 2, 133, 153;
  --bs-link-color: #028599;
  --bs-link-hover-color: #016a7a;
}

/* Primary button override */
.btn-primary {
  background-color: #028599;
  border-color: #028599;
}

.btn-primary:hover {
  background-color: #016a7a;
  border-color: #016a7a;
}

/* Soft primary backgrounds */
.bg-soft-primary {
  background-color: rgba(2, 133, 153, 0.1) !important;
}

/* Text primary */
.text-primary {
  color: #028599 !important;
}

/* List checked primary */
.list-checked-soft-bg-primary .list-checked-item::before {
  background-color: rgba(2, 133, 153, 0.1);
}

/* Badge primary */
.badge.bg-primary {
  background-color: #028599 !important;
}

/* KeyShare logo styling */
.keyshare-logo {
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.02em;
}

.keyshare-logo .logo-key {
  color: #677788;
}

.keyshare-logo .logo-share {
  color: #028599;
}

/* Navbar scroll state */
.navbar-scrolled {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: #fff !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Section divider */
.section-divider {
  border-top: 1px solid rgba(220, 224, 229, 0.6);
}

/* Icon circle sizing for capability blocks */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: rgba(2, 133, 153, 0.1);
  flex-shrink: 0;
}

.icon-circle i {
  font-size: 1.5rem;
  color: #028599;
}

/* ═══════════════════════════════════════════
   Dark-hero page: white nav before scroll
   Add bodyClass="ks-dark-hero-page" to <BaseLayout>
   ═══════════════════════════════════════════ */
.ks-dark-hero-page #header:not(.navbar-scrolled) .nav-link,
.ks-dark-hero-page #header:not(.navbar-scrolled) .btn-ghost-dark,
.ks-dark-hero-page #header:not(.navbar-scrolled) .navbar-brand .logo-key,
.ks-dark-hero-page #header:not(.navbar-scrolled) .navbar-brand .logo-share {
  color: rgba(255, 255, 255, 0.85) !important;
}
.ks-dark-hero-page #header:not(.navbar-scrolled) .nav-link:hover,
.ks-dark-hero-page #header:not(.navbar-scrolled) .nav-link:focus,
.ks-dark-hero-page #header:not(.navbar-scrolled) .btn-ghost-dark:hover,
.ks-dark-hero-page #header:not(.navbar-scrolled) .btn-ghost-dark:focus {
  color: #fff !important;
}
.ks-dark-hero-page #header:not(.navbar-scrolled) .navbar-toggler-default i {
  color: rgba(255, 255, 255, 0.85) !important;
}
.ks-dark-hero-page #header:not(.navbar-scrolled) .nav-link.dropdown-toggle::after {
  background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='rgba(255,255,255,0.85)' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.72,15.78a.75.75,0,0,1-.53.22h-.38a.77.77,0,0,1-.53-.22L6.15,10.64a.5.5,0,0,1,0-.71l.71-.71a.49.49,0,0,1,.7,0L12,13.67l4.44-4.45a.5.5,0,0,1,.71,0l.7.71a.5.5,0,0,1,0,.71Z'/%3e%3c/svg%3e") !important;
}
/* After scroll: revert to normal light navbar */
.ks-dark-hero-page #header.navbar-scrolled .navbar-brand .logo-key {
  color: #677788 !important;
}
.ks-dark-hero-page #header.navbar-scrolled .navbar-brand .logo-share {
  color: #028599 !important;
}
.ks-dark-hero-page #header.navbar-scrolled .nav-link {
  color: #2d374b !important;
}
.ks-dark-hero-page #header.navbar-scrolled .btn-ghost-dark {
  color: #2d374b !important;
}
.ks-dark-hero-page #header.navbar-scrolled .nav-link.dropdown-toggle::after {
  background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='%232d374b' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.72,15.78a.75.75,0,0,1-.53.22h-.38a.77.77,0,0,1-.53-.22L6.15,10.64a.5.5,0,0,1,0-.71l.71-.71a.49.49,0,0,1,.7,0L12,13.67l4.44-4.45a.5.5,0,0,1,.71,0l.7.71a.5.5,0,0,1,0,.71Z'/%3e%3c/svg%3e") !important;
}

/* Ghost light button (translucent white on dark hero backgrounds) */
.btn-ghost-light.btn-ghost-light {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-ghost-light.btn-ghost-light:hover,
.btn-ghost-light.btn-ghost-light:focus {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Active link on dark hero: full white for emphasis */
body.ks-dark-hero-page #header:not(.navbar-scrolled) .nav-link.ks-active {
  color: #fff !important;
  font-weight: 600;
}
/* Active link after scroll: teal */
body.ks-dark-hero-page #header.navbar-scrolled .nav-link.ks-active {
  color: #028599 !important;
  font-weight: 600;
}

/* Link primary */
.link-primary {
  color: #028599 !important;
}
.link-primary:hover,
.link-primary:focus {
  color: #016a7a !important;
}

/* Outline primary button */
.btn-outline-primary {
  --bs-btn-color: #028599;
  --bs-btn-border-color: #028599;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #028599;
  --bs-btn-hover-border-color: #028599;
  color: #028599 !important;
  border-color: #028599 !important;
}
.btn-outline-primary:hover {
  background-color: #028599 !important;
  border-color: #028599 !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════
   POLISH: Hero → content curve divider
   ═══════════════════════════════════════════ */
.ks-hero-divider {
  display: block;
  width: 100%;
  line-height: 0;
  margin-top: -1px;
}
.ks-hero-divider svg {
  width: 100%;
  height: 60px;
  display: block;
}

/* ═══════════════════════════════════════════
   POLISH: Scroll-reveal animation
   ═══════════════════════════════════════════ */
.ks-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.ks-reveal.ks-visible {
  opacity: 1;
  transform: translateY(0);
}
.ks-reveal-delay-1 { transition-delay: 0.1s; }
.ks-reveal-delay-2 { transition-delay: 0.2s; }
.ks-reveal-delay-3 { transition-delay: 0.3s; }
.ks-reveal-delay-4 { transition-delay: 0.4s; }

/* ═══════════════════════════════════════════
   POLISH: Download button shimmer
   ═══════════════════════════════════════════ */
.ks-shimmer {
  position: relative;
  overflow: hidden;
}
.ks-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: ksShimmer 3s ease-in-out infinite;
}
@keyframes ksShimmer {
  0% { left: -100%; }
  50%, 100% { left: 150%; }
}

/* ═══════════════════════════════════════════
   POLISH: Custom range slider
   ═══════════════════════════════════════════ */
input[type="range"].ks-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #028599, #4dd9ec);
  border-radius: 3px;
  outline: none;
}
input[type="range"].ks-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #028599;
  box-shadow: 0 2px 8px rgba(2,133,153,0.3);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
input[type="range"].ks-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 12px rgba(2,133,153,0.4);
}
input[type="range"].ks-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #028599;
  box-shadow: 0 2px 8px rgba(2,133,153,0.3);
  cursor: pointer;
}

/* ═══════════════════════════════════════════
   POLISH: Feature card hover accent
   ═══════════════════════════════════════════ */
.ks-feature-card-accent {
  border-left: 3px solid transparent;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.ks-feature-card-accent:hover {
  border-left-color: #028599;
}

/* ═══════════════════════════════════════════
   POLISH: Stats count-up pulse
   ═══════════════════════════════════════════ */
.ks-stat-pulse {
  transition: transform 0.3s ease;
}
.ks-stat-pulse.ks-counted {
  animation: ksPulse 0.4s ease;
}
@keyframes ksPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════
   POLISH: Reading progress bar (blog)
   ═══════════════════════════════════════════ */
.ks-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, #028599, #4dd9ec);
  z-index: 1050;
  transition: width 0.15s linear;
  box-shadow: 0 1px 8px rgba(2,133,153,0.35);
}

/* ═══════════════════════════════════════════
   POLISH: Blog comparison table
   ═══════════════════════════════════════════ */
.ks-comparison-table thead {
  background: linear-gradient(135deg, #0a1a20, #0e3a44) !important;
}
.ks-comparison-table thead th {
  color: #fff !important;
  border: none !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600;
}
.ks-comparison-table tbody tr:nth-child(even) {
  background-color: rgba(2,133,153,0.03);
}
.ks-comparison-table tbody tr {
  transition: background-color 0.2s ease;
}
.ks-comparison-table tbody tr:hover {
  background-color: rgba(2,133,153,0.06);
}
.ks-comparison-table td {
  padding: 0.7rem 1rem !important;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════
   On-brand form validation (global)
   Replaces Bootstrap maroon (#692340) with
   brand-adjacent coral for softer, premium feel.
   ═══════════════════════════════════════════ */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #e07a5f !important;
  background-color: rgba(224, 122, 95, 0.03);
  box-shadow: none !important;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: #e07a5f !important;
  box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.12) !important;
  background-color: #fff;
}
.invalid-feedback {
  color: #c0523e;
}
.ks-field-error {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #c0523e;
  animation: ks-error-in 0.25s ease-out;
}
.ks-field-error i {
  font-size: 0.7rem;
  flex-shrink: 0;
}
@keyframes ks-error-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Required asterisk — coral instead of Bootstrap red */
.form-label .text-danger {
  color: #e07a5f !important;
}