/* FlexiCare v103 — UI polish
   Scope: appearance + button behavior + typography uniformity
   No new filters/features.
*/

:root{
  /* Font system (GDPR-safe: no external requests) */
  --fc-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";

  /* Button sizing */
  --fc-btn-radius: 14px;
  --fc-btn-font: 14.5px;
  --fc-btn-pad-y: 11px;
  --fc-btn-pad-x: 16px;

  /* Lighter petrol for CTAs (more “open” look) */
  --fc-primary-top: rgba(176, 246, 248, 1);
  --fc-primary-bot: rgba(72, 184, 196, 1);
  --fc-ring: rgba(47,143,158,.35);
}

html, body{
  font-family: var(--fc-font) !important;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p, li{ line-height: 1.65; }

/* Make helper text readable (was too tight) */
.small{ font-size: 14px !important; line-height: 1.45; }

/* ==========================
   Buttons
   ========================== */

/* Unify sizing across <a> and <button> */
a.btn, button.btn{
  font-size: var(--fc-btn-font) !important;
  padding: var(--fc-btn-pad-y) var(--fc-btn-pad-x) !important;
  border-radius: var(--fc-btn-radius) !important;
}

/* Default .btn acts as Secondary (so we don't have "naked" buttons anywhere) */
.btn:not(.primary):not(.ghost):not(.link){
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(47,143,158,.06)) !important;
  border: 1px solid rgba(12,112,118,.20) !important;
  color: rgba(7,53,64,.92) !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 16px 36px rgba(5,43,51,.10),
    0 0 0 1px rgba(47,143,158,.06) !important;
}

@media (hover:hover) and (pointer:fine){
  .btn:not(.primary):not(.ghost):not(.link):hover{
    transform: translateY(-1px);
    border-color: rgba(12,112,118,.32) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(47,143,158,.10)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.92),
      0 20px 48px rgba(5,43,51,.12),
      0 0 0 1px rgba(47,143,158,.10) !important;
  }
}

/* Primary CTA: lighter + less “closed” */
.btn.primary{
  background: linear-gradient(180deg, var(--fc-primary-top), var(--fc-primary-bot)) !important;
  border-color: rgba(12,112,118,.14) !important;
  text-shadow: 0 1px 0 rgba(5,43,51,.18) !important;
}

@media (hover:hover) and (pointer:fine){
  .btn.primary:hover{
    background: linear-gradient(180deg, rgba(188, 248, 250, 1), rgba(86, 196, 206, 1)) !important;
  }
}

/* Pressed state (feels responsive, avoids “dead click”) */
.btn:active{
  transform: translateY(0px) !important;
  box-shadow:
    0 12px 30px rgba(5,43,51,.14),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

/* Focus ring consistency (keyboard) */
.btn:focus-visible,
.fc-pill:focus-visible,
.fc-float__btn:focus-visible,
.fc-bottombar__btn:focus-visible{
  outline: 3px solid var(--fc-ring);
  outline-offset: 2px;
}

/* Mobile menu CTA buttons: also lighter */
@media (max-width: 980px){
  .site-header .menu .menu-mobile-cta > a.btn.primary{
    background: linear-gradient(180deg, rgba(188, 248, 250, 1), rgba(86, 196, 206, 1)) !important;
    border-color: rgba(47,143,158,.22) !important;
  }
}

/* ==========================
   Nav usability (no new UI)
   ========================== */

/* Keyboard users can open dropdowns without mouse hover */
@media (min-width: 981px){
  .menu > li:focus-within > .dropdown{ display:block; }
  .dropdown li:focus-within > .flyout{ display:block; }
}

/* Make nav links a bit less “shouty” without changing layout */
.menu > li > a{ line-height: 1.1; }