/* =============================================================================
   Rooted Family Insurance — site stylesheet
   -----------------------------------------------------------------------------
   The layout itself lives in inline style attributes carried over verbatim from
   the design file, so rendering is byte-for-byte what was designed. This sheet
   supplies only what an inline attribute cannot express: pseudo-classes,
   media queries, keyframes and component state.

   `!important` appears throughout the state rules on purpose — an inline style
   attribute outranks any selector, and these rules exist to override one.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Base — carried over from the design's global <style> block
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #F4F1E8;
  color: #173C2B;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

* { box-sizing: border-box; }

a { color: #173C2B; text-decoration: none; }
a:hover { color: #6D8F49; }

img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid #9ACD63;
  outline-offset: 3px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

[data-hscroll]::-webkit-scrollbar { display: none; }

/* Scroll a fragment target clear of the fixed navigation bar. */
[id] { scroll-margin-top: 104px; }

/* -----------------------------------------------------------------------------
   2. Keyframes — carried over from the design
   -------------------------------------------------------------------------- */
@keyframes rfFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}
@keyframes rfSway {
  from { transform: translateY(0) rotate(-0.35deg); }
  to   { transform: translateY(-20px) rotate(0.35deg); }
}
@keyframes rfBreathe {
  0%, 100% { opacity: 0.30; r: 3; }
  50%      { opacity: 0.95; r: 5; }
}
@keyframes rfDrift {
  0%   { opacity: 0;    transform: translate(0, 0); }
  12%  { opacity: 0.5; }
  88%  { opacity: 0.4; }
  100% { opacity: 0;    transform: translate(60px, -140px); }
}

/* -----------------------------------------------------------------------------
   3. Skip link
   -------------------------------------------------------------------------- */
.rf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 22px;
  border-radius: 0 0 14px 0;
  background: #0C261B;
  color: #F4F1E8;
  font-size: 15px;
  font-weight: 600;
}
.rf-skip:focus {
  left: 0;
  color: #F4F1E8;
}

/* Screen-reader-only, but still focusable and still submitted with the form. */
.rf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------------
   4. Responsive visibility
   The design switched on `window.innerWidth < 1080`; these do the same thing
   without waiting for JavaScript, so there is no layout flash on first paint.
   `display: contents` keeps the wrapper invisible to the parent flex/grid.
   -------------------------------------------------------------------------- */
.rf-only-wide   { display: contents; }
.rf-only-narrow { display: none; }

@media (max-width: 1079px) {
  .rf-only-wide   { display: none; }
  .rf-only-narrow { display: contents; }
}

/* -----------------------------------------------------------------------------
   5. Mobile menu
   -------------------------------------------------------------------------- */
.rf-menu {
  animation: rfMenuIn .32s cubic-bezier(.2, .7, .2, 1);
}
@keyframes rfMenuIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.rf-menu-open { overflow: hidden; }

/* -----------------------------------------------------------------------------
   6. Multi-step quote forms
   Without JavaScript every step renders at once and the form still submits;
   the `.js` class (set by an inline script in <head>) turns on step-by-step.
   -------------------------------------------------------------------------- */
.rf-step { display: block; }

html.js .rf-step             { display: none; }
html.js .rf-step.is-active   { display: block; animation: rfStepIn .5s cubic-bezier(.2, .7, .2, 1); }

@keyframes rfStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.rf-field-invalid {
  border-color: rgba(226, 142, 120, 0.85) !important;
}

.rf-field-note {
  margin: 10px 2px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #F0C9BC;
  font-weight: 400;
}

/* -----------------------------------------------------------------------------
   7. Pill choices
   Radio inputs wearing the exact inline styling of the design's buttons, so
   they are keyboard-native and submit without JavaScript.
   -------------------------------------------------------------------------- */
.rf-pill { position: relative; }
.rf-pill > span { pointer-events: none; }

.rf-pill:hover {
  border-color: rgba(244, 241, 232, 0.42) !important;
}

.rf-pill:has(input:checked),
.rf-pill.is-selected {
  background: rgba(154, 205, 99, 0.18) !important;
  border-color: rgba(154, 205, 99, 0.6) !important;
}

.rf-pill:has(input:focus-visible) {
  outline: 2px solid #9ACD63;
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   8. Print
   -------------------------------------------------------------------------- */
@media print {
  #rf-nav, #rf-progress, .rf-menu, .rf-only-narrow { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* -----------------------------------------------------------------------------
   9. Reduced motion — carried over from the design
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* -----------------------------------------------------------------------------
   10. Hover / focus states
   Generated from the design's `style-hover` and `style-focus` attributes.
   -------------------------------------------------------------------------- */
.hv-1:hover, .hv-1:focus-visible{padding-right:20px !important;box-shadow:0 12px 32px -14px rgba(154,205,99,0.9) !important;}
.hv-2:hover, .hv-2:focus-visible{padding-right:20px !important;box-shadow:0 20px 48px -18px rgba(154,205,99,0.85) !important;}
.hv-3:hover, .hv-3:focus-visible{background:rgba(244,241,232,0.09) !important;border-color:rgba(244,241,232,0.45) !important;}
.hv-4:hover, .hv-4:focus-visible{box-shadow:0 26px 56px -34px rgba(12,38,27,0.55) !important;}
.hv-5:hover, .hv-5:focus-visible{gap:18px !important;}
.hv-6:hover, .hv-6:focus-visible{padding-right:20px !important;box-shadow:0 20px 44px -20px rgba(109,143,73,0.9) !important;}
.hv-7:hover, .hv-7:focus-visible{padding-right:20px !important;box-shadow:0 18px 40px -18px rgba(154,205,99,0.85) !important;}
.hv-8:hover, .hv-8:focus-visible{background:rgba(244,241,232,0.1) !important;}
.hv-9:hover, .hv-9:focus-visible{padding-right:21px !important;box-shadow:0 18px 40px -18px rgba(154,205,99,0.85) !important;}
.fc-1:focus{border-color:rgba(154,205,99,0.7) !important;}