/* =====================================================================
   REGERA — Polish & Elegance Layer
   Loaded after the base theme to refine spacing, contrast, motion and
   interaction. Built around the existing brand teal (#006166).
   Purely additive overrides — no base theme files were modified.
   ===================================================================== */

:root {
  --brand: #006166;
  --brand-dark: #004a4e;
  --brand-light: #0a8288;
  --brand-tint: rgba(0, 97, 102, 0.08);
  --ink: #1f2a2c;          /* strong heading ink */
  --body-text: #566063;    /* slightly darker than base #707070 for contrast */
  --hairline: #e8ecec;
  --shadow-sm: 0 4px 14px rgba(15, 40, 42, 0.06);
  --shadow-md: 0 12px 30px rgba(15, 40, 42, 0.10);
  --shadow-lg: 0 22px 48px rgba(15, 40, 42, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Global feel ---------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* clear the fixed navbar when jumping to #anchors */
}
body {
  color: var(--body-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* guard against horizontal jitter from AOS transforms */
}
::selection {
  background: var(--brand);
  color: #fff;
}
img { image-rendering: auto; }

/* Refined, on-brand scrollbar (WebKit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #eef2f2; }
::-webkit-scrollbar-thumb {
  background: #b7c6c6;
  border-radius: 8px;
  border: 3px solid #eef2f2;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ---------- Typography ----------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: -0.01em; }
h1 { line-height: 1.12; }
h2 { line-height: 1.2; }
p { line-height: 1.75; }
.lead { color: #3c4547; line-height: 1.7; }

/* Elegant accent bar under section headings */
.section-heading h2 {
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 14px;
}
.section-heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
}
.text-center .section-heading h2::after,
.section-heading.text-center h2::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Links ---------------------------------------------------- */
a { transition: color 0.2s var(--ease); }
/* Content links (leave nav, buttons and footer chrome untouched) */
p a:not(.btn),
.lead a,
.footer-address a,
a[href^="mailto"]:not(.btn),
a[href^="tel"]:not(.btn) {
  color: var(--brand);
}
p a:not(.btn):hover,
.lead a:hover,
.footer-address a:hover,
a[href^="mailto"]:not(.btn):hover {
  color: var(--brand-dark);
}

/* ---------- Buttons -------------------------------------------------- */
.btn,
.solid-btn,
.outline-btn {
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
    background-color 0.28s var(--ease), color 0.28s var(--ease),
    border-color 0.28s var(--ease);
  letter-spacing: 0.02em;
  font-weight: 600;
  will-change: transform;
}
.solid-btn {
  background: linear-gradient(135deg, var(--brand-light), var(--brand)) !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(0, 97, 102, 0.22);
  padding: 11px 30px;
}
.solid-btn:hover,
.solid-btn:focus {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 97, 102, 0.30);
}
.solid-btn:active { transform: translateY(0); }
.outline-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* ---------- Navbar --------------------------------------------------- */
.navbar { transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.navbar .nav-link {
  position: relative;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}
/* Subtle animated underline for nav items */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.85;
  transition: transform 0.3s var(--ease);
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
  transform: scaleX(1);
}

/* ---------- Navbar contrast ------------------------------------------ */
/* At the top of the page the navbar is transparent and its links are white.
   The hero image is dark on the left but bright on the right, so white text
   loses contrast. A soft dark scrim behind the transparent bar guarantees the
   links stay legible over ANY part of the hero, and disappears once the bar
   becomes solid white on scroll. */
nav.bg-transparent:not(.affix)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(4, 22, 24, 0.62) 0%,
    rgba(4, 22, 24, 0.34) 55%,
    rgba(4, 22, 24, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}
/* Keep nav content above the scrim */
nav .container { position: relative; z-index: 1; }

/* Stronger, shadowed white links while transparent → readable everywhere */
nav.bg-transparent:not(.affix) ul li a.nav-link {
  color: #ffffff !important;
  opacity: 0.96;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
nav.bg-transparent:not(.affix) ul li a.nav-link:hover {
  color: #ffffff !important;
  opacity: 1;
}

/* Scrolled (solid white) state: default links stay dark for contrast, and
   hover becomes brand teal instead of the theme's white-on-white (a real
   legibility bug). */
nav.affix ul li a.nav-link {
  color: #263133 !important;
  opacity: 1;
}
nav.affix ul li a.nav-link:hover {
  color: var(--brand) !important;
  opacity: 1;
}

/* ---------- Cards & feature blocks ----------------------------------- */
.card {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
  overflow: hidden;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

/* Pricing / service cards commonly used in this theme */
.single-pricing-pack,
.single-price,
.price-card {
  border-radius: 14px;
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.single-pricing-pack:hover,
.single-price:hover,
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

/* ---------- Forms ---------------------------------------------------- */
.form-control {
  border: 1px solid #e2e7e7;
  border-radius: 10px;
  padding: 12px 16px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease);
  background-color: #fbfcfc;
}
.form-control:focus {
  border-color: var(--brand);
  background-color: #fff;
  box-shadow: 0 0 0 4px var(--brand-tint);
  outline: none;
}
.form-control::placeholder { color: #9aa4a5; }

/* Subscribe pill input group keeps its rounded look but gains a focus ring */
.subscribe-form .form-control:focus,
.subscribe-form .input:focus {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

/* ---------- Footer location list ------------------------------------- */
/* Fixed-width icon column so every address / email / website line starts
   at the same left edge, and icons align with their first line of text. */
.footer-location li {
  align-items: flex-start;
}
.footer-location li > span[class*="ti-"] {
  flex: 0 0 22px;
  width: 22px;
  margin-top: 3px;
  font-size: 15px;
  color: #ffffff;
  opacity: 0.85;
}
.footer-location li span,
.footer-location li a {
  line-height: 1.55;
}
.footer-location li strong {
  margin-bottom: 2px;
}

/* ---------- Motion: gentle, consistent AOS reveals ------------------- */
[data-aos] {
  transition-timing-function: var(--ease) !important;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-aos] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .solid-btn:hover,
  .card:hover,
  .outline-btn:hover { transform: none; }
}