/* ============================================================
   Caro's Heilmassage — base styles, responsive layout,
   and interactive states (hover/focus).
   Most layout lives as inline styles in index.html; this file
   holds what must be real CSS: the reset, media queries, and
   :hover / :focus / .active rules.
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Mulish',system-ui,sans-serif;color:#46553a;background:#FAF9F3;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#C5F8A8;color:#33521C}
input,select,textarea,button{font-family:inherit}
a{color:inherit}
::placeholder{color:#9aa48a}
img,svg{max-width:100%}

/* ---------- Navigation links (hover + scroll-spy active state) ---------- */
.navlink{
  text-decoration:none;color:#5f6b51;font-size:14.5px;font-weight:500;
  padding:5px 1px;border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease;white-space:nowrap;
}
.navlink:hover{color:#33521C}
.navlink.active{color:#33521C;border-bottom-color:#7BB553}

/* ---------- Hamburger toggle (hidden on desktop, shown on mobile) ---------- */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:11px;flex:none;
  background:transparent;border:none;border-radius:11px;cursor:pointer;
  transition:background .2s ease;
}
.nav-toggle:hover{background:rgba(51,82,28,0.07)}
.nav-toggle-bar{
  display:block;width:100%;height:2px;border-radius:2px;background:#33521C;
  transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Interactive states (replacing the original style-hover/style-focus) ---------- */
.btn-primary:hover{background:#2a4417 !important}
.btn-outline:hover{border-color:#33521C !important;background:rgba(197,248,168,0.25) !important}
.btn-submit:hover{background:#2a4417 !important}
.svc-card:hover{transform:translateY(-4px) !important;box-shadow:0 22px 38px -26px rgba(51,82,28,0.5) !important}
.field:focus{border-color:#7BB553 !important;background:#fff !important}

/* ---------- Tablet ---------- */
@media (max-width:980px){
  .r-hero,.r-split,.r-splitp{grid-template-columns:1fr !important;}
  .r-hero{gap:40px !important;}
  .r-split{gap:44px !important;}
  .r-splitp{gap:30px !important;}
  .r-cards{grid-template-columns:repeat(2,1fr) !important;}
  .r-pad{padding-top:64px !important;padding-bottom:64px !important;}
  .r-sticky{position:static !important;top:auto !important;}
  .r-hero-pad{padding-top:60px !important;padding-bottom:68px !important;}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .r-cards{grid-template-columns:1fr !important;}
  .r-duo{grid-template-columns:1fr !important;}
  .r-pad,.r-hero-pad{padding-top:48px !important;padding-bottom:48px !important;padding-left:20px !important;padding-right:20px !important;}
  .r-nav{padding-left:18px !important;padding-right:18px !important;gap:12px !important;}

  /* Show the hamburger, collapse the inline links into a dropdown panel */
  .nav-toggle{display:flex;}
  .r-navlinks{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch !important;justify-content:flex-start !important;
    gap:2px !important;flex-wrap:nowrap !important;
    padding:10px 18px 20px;
    background:rgba(250,249,243,0.98);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(51,82,28,0.12);
    box-shadow:0 22px 32px -24px rgba(51,82,28,0.55);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .r-navlinks.open{opacity:1;visibility:visible;transform:none;}
  .r-navlinks .navlink{
    padding:13px 4px;font-size:16px;
    border-bottom:1px solid rgba(51,82,28,0.08);
  }
  .r-navlinks .navlink.active{border-bottom-color:#7BB553;}
  .r-cta{align-self:flex-start;margin-top:12px;padding:12px 22px !important;}
}