/* =========================================================
   SOFT THEME: rounded shapes and gradients for the main Medi Solutions pages.

   Pages opt in with class="theme-soft" on <body> and by loading this file AFTER /assets/css/styles.css.
   To go back to the old look on a page, remove either of those two things.
   ========================================================= */

body.theme-soft {
  --soft-grad-red: linear-gradient(135deg, #DC173B 0%, #C8102E 48%, #930C24 100%);
  --soft-grad-dark: linear-gradient(135deg, #16181b 0%, #2a1018 55%, #5b1022 100%);
  --soft-ink: #4a4d52;
  --soft-line: rgba(16, 17, 18, 0.08);
  --soft-shadow: 0 22px 50px -30px rgba(16, 17, 18, 0.45), 0 0 0 1px rgba(16, 17, 18, 0.04);
  --header-h: 92px;           /* floating bar (72px) + the gap above it */
  overflow-x: hidden;
}
@media (max-width: 1180px) { body.theme-soft { --header-h: 78px; } }

/* -------------------- Buttons: pills, gradient primary -------------------- */
body.theme-soft .btn { border-radius: 999px; padding: 14px 28px; min-height: 50px; justify-content: center; }
body.theme-soft .btn-primary {
  background: var(--soft-grad-red); border-color: transparent;
  box-shadow: 0 10px 24px -10px rgba(200, 16, 46, 0.7);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
body.theme-soft .btn-primary:hover { background: var(--soft-grad-red); filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(200, 16, 46, 0.75); }
body.theme-soft .btn-secondary { background: #fff; border-color: rgba(16, 17, 18, 0.18); }
body.theme-soft .btn-secondary:hover { background: var(--color-black); border-color: var(--color-black); }
body.theme-soft .btn-ghost-white { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.theme-soft .btn-ghost-white:hover { background: #fff; color: var(--color-black); }

/* -------------------- Small labels -------------------- */
body.theme-soft .eyebrow { font-family: var(--font-heading); font-size: 0.8125rem; letter-spacing: 0.1em; }
body.theme-soft .eyebrow::before { background: var(--soft-grad-red); }

/* -------------------- Banner: a floating rounded bar -------------------- */
body.theme-soft .site-header {
  background: transparent; border-bottom: 0;
  pointer-events: none;                 /* the strip around the bar is see-through and never blocks clicks */
  transition: transform 300ms var(--ease);
}
body.theme-soft .site-header.is-hidden { transform: translateY(-120%); }
body.theme-soft .site-header .container {
  pointer-events: auto;
  height: 72px; width: calc(100% - 24px); max-width: 1240px; margin: 10px auto 0;
  padding-inline: clamp(18px, 2vw, 32px);
  padding-left: calc(clamp(18px, 2vw, 32px) + 5mm);   /* logo sits 5mm further from the rounded left edge */
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 247, 250, 0.94) 55%, rgba(253, 236, 239, 0.94) 100%);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 999px;
  box-shadow: 0 16px 36px -18px rgba(16, 17, 18, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  transition: box-shadow 300ms var(--ease);
}
body.theme-soft .site-header.is-scrolled .container { box-shadow: 0 18px 40px -16px rgba(16, 17, 18, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.8) inset; }
body.theme-soft .brand-mark img { height: 38px; }

/* Full-size banner: the logo sits centred in the flat stretch between the end of the left curve and the first menu tab.
   The bar is 72px tall, so each curved end is 36px deep; the flat part starts 36px in.
   Three columns (logo area | menu | spare area) keep the menu truly centred and give the logo the left column to centre in. */
@media (min-width: 1181px) {
  body.theme-soft .site-header .container {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 0;
    padding-inline: 36px;
  }
  body.theme-soft .brand-mark { justify-self: center; }
  body.theme-soft .main-nav { flex: none; gap: 4px; }   /* each tab is a pill with its own padding, so the old wide gap is not needed */
  body.theme-soft .header-actions { justify-self: end; }
}
/* Narrower desktop windows: slimmer tabs so the logo still has room either side of it */
@media (min-width: 1181px) and (max-width: 1320px) {
  body.theme-soft .main-nav { gap: 2px; }
  body.theme-soft .main-nav a, body.theme-soft .nav-trigger { padding-inline: 10px; }
}

/* The small "Advancing orthopaedic innovation" line that appears beside the logo on very wide screens is left out of
   the rounded banner so the logo itself can sit centred. (To bring it back, delete this one rule.) */
body.theme-soft .brand-tagline { display: none; }

/* Menu items become soft pills */
body.theme-soft .main-nav a,
body.theme-soft .nav-trigger {
  padding: 10px 14px; border-radius: 999px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.theme-soft .main-nav a::before,
body.theme-soft .main-nav a::after,
body.theme-soft .nav-trigger::after { display: none; }
body.theme-soft .main-nav a:hover,
body.theme-soft .nav-item:hover .nav-trigger,
body.theme-soft .nav-item.is-open .nav-trigger,
body.theme-soft .nav-item:focus-within .nav-trigger { background: rgba(200, 16, 46, 0.09); color: var(--color-red); }
body.theme-soft .main-nav a[aria-current="page"] { background: var(--soft-grad-red); color: #fff; }

/* Dropdown panels: rounded, softly lit */
body.theme-soft .dropdown-panel {
  top: calc(100% + 20px);
  border: 0; border-radius: 26px;
  background: linear-gradient(160deg, #ffffff 0%, #f6f7fa 100%);
  box-shadow: 0 30px 60px -24px rgba(16, 17, 18, 0.5), 0 0 0 1px rgba(16, 17, 18, 0.04);
  padding: 20px 22px 22px;
}
body.theme-soft .dropdown-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -26px; height: 26px; }   /* keeps the menu open while the pointer crosses the gap */
body.theme-soft .dropdown-brand { border-bottom-color: var(--soft-line); }
body.theme-soft .dropdown-list a { border-radius: 14px; }
body.theme-soft .dropdown-list a:hover,
body.theme-soft .dropdown-list a:focus-visible { background: rgba(200, 16, 46, 0.07); }
body.theme-soft .nav-toggle { border: 1px solid rgba(16, 17, 18, 0.15); border-radius: 16px; background: #fff; }

@media (max-width: 1180px) {
  body.theme-soft .site-header .container { height: 64px; }
  body.theme-soft .main-nav {
    inset: var(--header-h) 12px auto 12px;
    max-height: calc(100vh - var(--header-h) - 14px);
    border-radius: 28px; border: 0;
    box-shadow: 0 30px 60px -20px rgba(16, 17, 18, 0.55);
    padding: 10px 16px 18px;
    overscroll-behavior: contain;   /* scrolling the menu never scrolls the page behind it */
  }
  body.theme-soft .main-nav a, body.theme-soft .nav-trigger { border-radius: 14px; padding: 14px 12px; }
  body.theme-soft .dropdown-panel { top: auto; background: transparent; box-shadow: none; border-radius: 0; }
  body.theme-soft .dropdown-panel::before { display: none; }
}

/* -------------------- Hero (home): full-bleed photo that sits behind the floating bar, with a curved bottom -------------------- */
body.theme-soft .hero-image {
  margin-top: calc(-1 * var(--header-h));
  border-radius: 0 0 clamp(32px, 5vw, 64px) clamp(32px, 5vw, 64px);
  background-image:
    radial-gradient(900px 520px at 88% 8%, rgba(220, 23, 59, 0.35), transparent 65%),
    linear-gradient(180deg, rgba(16, 17, 18, 0.5) 0%, rgba(16, 17, 18, 0.82) 100%),
    url('/assets/img/hero.png');
}
body.theme-soft .hero-image .container { padding-top: calc(var(--header-h) + 24px); }
body.theme-soft .specialty-strip { border-top: 0; gap: 10px; margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem); padding-top: 0; }
body.theme-soft .specialty-strip span {
  padding: 9px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.theme-soft .specialty-strip span::before { width: 7px; height: 7px; border-radius: 50%; background: var(--soft-grad-red); }

/* -------------------- Page intro (inner pages): soft glow, curved bottom -------------------- */
body.theme-soft .soft-intro {
  margin-top: calc(-1 * var(--header-h) + 10px);
  padding-top: calc(var(--header-h) + clamp(1rem, 2vw, 2rem));
  background:
    radial-gradient(900px 380px at 15% -80px, rgba(200, 16, 46, 0.12), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f4f5f8 100%);
  border-radius: 0 0 clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
}

/* -------------------- Section backgrounds: soft gradient panels with curved corners -------------------- */
body.theme-soft .bg-grey,
body.theme-soft .bg-soft {
  margin-inline: clamp(8px, 1.2vw, 14px);
  border-radius: clamp(32px, 5vw, 56px);
  background: linear-gradient(135deg, #fff1f3 0%, #ffffff 38%, #eef1f8 100%);
}
body.theme-soft .bg-grey { background: linear-gradient(160deg, #f6f7fa 0%, #ffffff 40%, #fdeef1 100%); }
body.theme-soft .bg-black {
  margin-inline: clamp(8px, 1.2vw, 14px); margin-bottom: clamp(8px, 1.2vw, 14px);
  border-radius: clamp(32px, 5vw, 56px);
  background:
    radial-gradient(700px 420px at 100% 0%, rgba(220, 23, 59, 0.5), transparent 65%),
    var(--soft-grad-dark);
}

/* -------------------- Cards and team photos -------------------- */
body.theme-soft .card {
  background: linear-gradient(145deg, #ffffff 0%, #f5f6fa 100%);
  border: 0; border-radius: 28px;
  box-shadow: var(--soft-shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.theme-soft .card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -30px rgba(16, 17, 18, 0.5), 0 0 0 1px rgba(200, 16, 46, 0.15); }
body.theme-soft .bg-grey .card, body.theme-soft .bg-soft .card { background: #fff; }
body.theme-soft .avatar { border: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 14px 30px -18px rgba(16, 17, 18, 0.6); background: linear-gradient(145deg, #fff1f3, #eef1f8); }
body.theme-soft .team-contact { border-top-color: var(--soft-line); }
body.theme-soft .info-row { border-color: var(--soft-line); }

/* -------------------- Forms -------------------- */
body.theme-soft .form-field input,
body.theme-soft .form-field textarea,
body.theme-soft .form-field select {
  min-height: 50px; padding: 12px 16px;
  border: 1px solid #e0e3ea; border-radius: 16px; background: #f7f8fb;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
body.theme-soft .form-field textarea { min-height: 120px; }
body.theme-soft .form-field input:focus,
body.theme-soft .form-field textarea:focus,
body.theme-soft .form-field select:focus { outline: none; background: #fff; border-color: var(--color-red); box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.14); }
body.theme-soft .radio-pill label { border: 0; border-radius: 999px; background: #f1f2f6; padding: 11px 20px; min-height: 44px; display: flex; align-items: center; cursor: pointer; transition: background var(--dur) var(--ease); }
body.theme-soft .radio-pill label:hover { background: #e8eaf1; }
body.theme-soft .radio-pill input:checked + label { background: var(--soft-grad-red); border-color: transparent; }
body.theme-soft .form-status { border: 0; border-radius: 18px; background: linear-gradient(135deg, #fff1f3, #f1f3f8); }

/* -------------------- Footer: dark gradient with a curved top -------------------- */
body.theme-soft .site-footer {
  border-top: 0; margin-top: 0;
  border-radius: clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px) 0 0;
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(220, 23, 59, 0.3), transparent 65%),
    var(--soft-grad-dark);
}
body.theme-soft .site-footer .social-link { border-radius: 999px !important; }   /* this link has a square corner set inline on the page */
body.theme-soft .footer-bottom { border-top-color: rgba(255, 255, 255, 0.12); }

/* -------------------- Focus rings follow the rounded shapes -------------------- */
body.theme-soft :focus-visible { outline-offset: 3px; }