/* The site header, the same on every page: logo, the main links, the personal
   area and the trial button, plus the skip link before it. The inner pages
   load sign.css, whose --gold and --teal are darker text colours and whose
   .btn is the form button, so the header sets its own colours on .head and
   spells out its buttons in full. */

/* Anchor jumps stop below the sticky header, so this follows its height. */
html { scroll-padding-top: 7rem; }

.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; background: #102F36; color: #fff;
        padding: .6rem 1rem; border-radius: .6rem; z-index: 30; }
.skip:focus { top: 1rem; }

/* The header stays on top while she scrolls (Tomer, 30.10.2026). Its padding
   lines the content up with the 1240px page column. */
.head { --ink: #102F36; --teal: #0a6e75; --gold: #E8A815; --pale: #E3F5F6;
        position: sticky; top: 0; z-index: 20; margin: 0; display: flex; flex-wrap: wrap;
        align-items: center; justify-content: space-between; gap: .6rem 1rem;
        padding: .6rem max(2rem, calc((100% - 1240px) / 2 + 2rem));
        background: rgb(243 250 250 / .97); font-family: "Rubik", system-ui, sans-serif;
        transition: padding .3s ease; }
.logo-link img { display: block; height: 76px; width: auto; transition: height .3s ease; }
/* Once the page scrolls (head.js), the header takes less room. */
.head.small { padding-block: .3rem; }
.head.small .logo-link img { height: 50px; }
.nav { display: flex; flex-wrap: wrap; gap: .3rem; background: #fff; border-radius: 999px;
       padding: .35rem; box-shadow: 0 10px 30px rgb(16 47 54 / .08); }
.nav a { color: var(--ink); text-decoration: none; padding: .5rem .85rem; border-radius: 999px; font-weight: 500; }
.nav a:hover { background: var(--pale); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--pale); font-weight: 700; }

.head-actions { display: flex; align-items: center; gap: .6rem; }
.head .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
             width: auto; min-height: 3rem; margin: 0; padding: .9rem 1.8rem; border-radius: 14px;
             font: inherit; font-weight: 800; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.head .btn.gold { background: var(--gold); color: var(--ink); }
.head .btn.gold:hover { background: #f0b938; color: var(--ink); }
/* The personal area: for those already training, beside the trial button but quieter. */
.head .btn.line { background: #fff; color: var(--teal); border-color: var(--teal); }
.head .btn.line:hover { background: var(--teal); color: #fff; }

/* On a personal link (/s/, /b/) the header is the logo alone, centred. */
.head-slim { justify-content: center; }
.logo-link-img { display: block; height: 76px; width: auto; }

/* Too narrow for logo, links and buttons in one row: the links move under them. */
@media (max-width: 1200px) {
  .nav { order: 3; width: 100%; justify-content: center; }
  html { scroll-padding-top: 11rem; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 8.5rem; }
  .head { padding: .5rem 1rem; }
  /* One row of links that slides sideways, so the sticky header stays short. */
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; padding: .2rem; justify-content: flex-start; }
  .nav a { padding: .4rem .75rem; font-size: .95rem; white-space: nowrap; }
  .logo-link img { height: 56px; }
  .head.small .logo-link img { height: 42px; }
  .logo-link-img { height: 56px; }
  .head .btn { min-height: 2.6rem; padding: .55rem 1rem; }
  .head-actions { gap: .4rem; }
  /* On a phone the personal-area button shows its icon only; the label stays for screen readers. */
  .head .btn.line { padding-inline: .7rem; }
  .head .btn.line span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}