/* FenceChat shared polish layer: top bar and button finish.
   Loaded after each page's own styles and overrides only the top bar and
   the buttons. Remove this file and its build step to go back to the old look. */

/* ---------- Top bar: frosted, no line underneath, feathered bottom edge ---------- */
body > nav:not([class]):not([id]) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* The frosted layer runs 26px below the bar and fades out, so the blur and
   the white tint soften into the page instead of stopping on an edge. */
body > nav:not([class]):not([id])::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% + 26px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.72) 62%, rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,.55) 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,.55) 80%, transparent 100%);
}

/* ---------- Solid green buttons: same shapes, lit top edge, soft glow ---------- */
:is(.nav-cta, .btn-primary, .sidebar-btn, .hero-btn, .inline-cta-btn, .plan-btn-solid,
    .plan-card.pop .plan-btn, html:not([data-fc-home]) .prospect-form button) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.07)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18),
              0 1px 2px rgba(10,40,28,.22), 0 6px 16px -6px rgba(42,116,84,.5) !important;
  transition: background-color .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1),
              transform .12s cubic-bezier(.2,.8,.2,1) !important;
}
:is(.nav-cta, .btn-primary, .sidebar-btn, .hero-btn, .inline-cta-btn, .plan-btn-solid,
    .plan-card.pop .plan-btn, html:not([data-fc-home]) .prospect-form button):hover {
  background-color: #2F7F5D !important;   /* a touch brighter, instead of black */
  border-color: #2F7F5D !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.18),
              0 1px 2px rgba(10,40,28,.22), 0 10px 26px -8px rgba(60,165,120,.7) !important;
}

/* ---------- White buttons: same shapes, top highlight, soft shadow ---------- */
:is(.cta-btn, .btn-ghost, .btn-secondary, .plan-btn-outline, .plan-card:not(.pop) .plan-btn,
    html[data-fc-home] .prospect-form button) {
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.06), 0 6px 18px -10px rgba(0,0,0,.22) !important;
  transition: background-color .18s cubic-bezier(.2,.8,.2,1), border-color .18s cubic-bezier(.2,.8,.2,1),
              box-shadow .2s cubic-bezier(.2,.8,.2,1), transform .12s cubic-bezier(.2,.8,.2,1) !important;
}
:is(.cta-btn, .btn-ghost, .btn-secondary, .plan-btn-outline, .plan-card:not(.pop) .plan-btn,
    html[data-fc-home] .prospect-form button):hover {
  transform: none !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.06), 0 10px 24px -10px rgba(42,116,84,.4) !important;
}

/* ---------- Every button: small press-in, soft green focus ring ---------- */
:is(.nav-cta, .btn-primary, .sidebar-btn, .hero-btn, .inline-cta-btn, .plan-btn-solid, .plan-btn,
    .prospect-form button, .cta-btn, .btn-ghost, .btn-secondary, .plan-btn-outline):active {
  transform: scale(.97) !important;
}
:is(.nav-cta, .btn-primary, .sidebar-btn, .hero-btn, .inline-cta-btn, .plan-btn-solid, .plan-btn,
    .prospect-form button, .cta-btn, .btn-ghost, .btn-secondary, .plan-btn-outline):focus-visible {
  outline: 2px solid rgba(60,165,120,.55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :is(.nav-cta, .btn-primary, .sidebar-btn, .hero-btn, .inline-cta-btn, .plan-btn-solid, .plan-btn,
      .prospect-form button, .cta-btn, .btn-ghost, .btn-secondary, .plan-btn-outline) { transition: none !important; }
}

/* Where to get help (guides): services by country, reader's country first. */
.help-services { margin: 48px 0 8px; padding-top: 32px; border-top: 1px solid var(--border, #E5E5E5); }
.help-services h2 { margin-bottom: 8px; }
.help-intro { font-size: 15px; color: var(--muted, #555); margin-bottom: 20px; }
.help-country { background: #EBF6F2; border: 1.5px solid #CEE8DD; border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; }
.help-country h3 { font-size: 18px; margin: 0 0 12px; }
.help-group h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sage-dark, #2A7454); margin: 14px 0 6px; }
.help-group ul { list-style: none; padding: 0; margin: 0; }
.help-group li { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.help-group li a { font-weight: 700; color: var(--sage-dark, #2A7454); }
.help-group li span { display: block; color: #2D2D3F; }
.help-other { margin-top: 4px; }
.help-other summary { cursor: pointer; font-weight: 700; color: var(--sage-dark, #2A7454); padding: 10px 0; }
.help-other .help-country { background: #FFFFFF; }
.help-note { margin-top: 24px; }