#header-frame, #footer-frame { background: var(--header); }
#header-wrap, #footer-frame { position: relative; }
#top-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
  padding-block: 10px 20px;
}
#branding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  min-width: 0;
}
/* Without the troop menu the wave follows right under the logo; keep a little air above it */
#container:not([data-view="home"]) #top-header { padding-bottom: 32px; }
#logo { grid-row: 1 / 3; }
#logo img { display: block; width: clamp(56px, 9vw, 82px); }
#site-title {
  align-self: end;
  font-family: var(--font-heavy);
  font-size: 26px;
  line-height: 26px;
  text-transform: uppercase;
  color: var(--orange);
}
#site-title small { font-family: var(--font-body); font-size: 14px; font-weight: normal; text-transform: none; color: #fff; }
#tagline { align-self: start; max-width: 230px; font-size: 13px; line-height: 16px; color: #fff; text-wrap: balance; }
/* == Top navigation (icon sprite) */
#top-nav { position: relative; display: flex; align-items: flex-start; font-size: 14px; font-weight: bold; }
#top-nav .menu { display: flex; list-style: none; margin: 0; padding: 0; }
#top-nav li a, #top-nav .login-btn {
  display: block;
  width: 70px;
  margin-left: clamp(2px, 1.4vw, 15px);
  padding-top: 45px;
  line-height: 15px;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  background: no-repeat center top / 41px 41px;
}
#top-nav li a:hover, #top-nav .login-btn:hover, #top-nav .active a { color: var(--orange); }
/* Icons are vector drawings so they stay sharp on dense displays */
#top-nav #item-101 a { background-image: url(/img/site/nav/uvod.svg); }
#top-nav #item-236 a { background-image: url(/img/site/nav/plan-akci.svg); }
#top-nav #item-264 a { background-image: url(/img/site/nav/klubovna.svg?v=2); }
#top-nav .login-btn { background-image: url(/img/site/nav/login.svg); }
#top-nav #item-238 a { background-image: url(/img/site/nav/kronika.svg); }
#top-nav #item-146 a { background-image: url(/img/site/nav/kontakt.svg); }
#top-nav #item-244 a { background-image: url(/img/site/nav/adresar.svg?v=2); }
/* The official logo, from the association's own vector artwork */
#top-nav #item-145 a { background-image: url(/img/site/nav/o-nas.svg); }
/* Menu button, only shown on narrow screens */
#nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid var(--orange);
  border-radius: 50%;
  /* No fill under the ring: a translucent background showing through the border made its edge look soft */
  background: transparent;
  cursor: pointer;
}
#nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 1px; background: #fff; box-shadow: 0 -6px #fff, 0 6px #fff; }
#nav-toggle[aria-expanded="true"] { background: var(--orange); }
/* == Login form */
.login-form-box {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  width: 280px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(10, 30, 70, .28);
  text-align: left;
  font-weight: normal;
  color: var(--ink);
}
.login-form-box a { color: var(--blue); text-decoration: underline; }
.login-links { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 13px; }
.login-links span { display: flex; flex-wrap: wrap; gap: 4px 14px; }
#form-login-remember { display: flex; align-items: center; gap: 6px; }
#form-login-remember label { display: inline; margin: 0; font-weight: normal; }
.login-form-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.login-form-footer p { margin: 0; }
.close-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #eef2f6;
  color: var(--ink) !important;
  font-weight: bold;
  text-decoration: none !important;
}
/* == Banner slider */
#header-content { width: min(870px, 100%); margin-inline: auto; }
#nivoslider { position: relative; aspect-ratio: 3 / 1; overflow: hidden; }
/* Rounded only while the banner does not reach the screen edges; no background, which would show as a light rim along the rounded edge */
@media (min-width: 871px) { #nivoslider { border-radius: 12px; } }
#nivoslider a { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 500ms, visibility 500ms; }
#nivoslider a.is-active { opacity: 1; visibility: visible; }
#nivoslider img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* == Oddily menu */
#menu-oddily {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-heavy);
  font-size: 20px;
  line-height: 26px;
}
#menu-oddily li { background: url(/img/site/grafika-ebf0274714.png) no-repeat bottom left; }
#menu-oddily li:last-child {
  background: url(/img/site/grafika-ebf0274714.png) no-repeat bottom left,
              url(/img/site/grafika-ebf0274714.png) no-repeat bottom right;
}
#menu-oddily li a {
  display: block;
  position: relative;
  padding: 25px 0 28px var(--pad, 40px);
  text-align: center;
  text-decoration: none;
  color: var(--orange);
  background: no-repeat var(--ox, 30px) calc(20px + var(--dy, 0px)) / 55px 55px;
}
#menu-oddily li a:hover { color: #fff; }
#menu-oddily #item-152 a { background-image: url(/img/site/logo/argonauti.svg?v=2); }
#menu-oddily #item-151 a { background-image: url(/img/site/logo/apollon.svg?v=2); }
#menu-oddily #item-153 a { background-image: url(/img/site/logo/cheiron.svg?v=2); }
#menu-oddily #item-154 a { background-image: url(/img/site/logo/achilleus.svg?v=2); }
/* The age line keeps the old site's full line height, so descenders of the name (the g of Argonauti) do not touch it */
#menu-oddily a::after { display: block; margin-top: 1px; font-size: 12px; line-height: 20px; color: #fff; }
#menu-oddily #item-151 a::after { content: "Od 7 do 10 let"; }
#menu-oddily #item-152 a::after { content: "Od 11 do 15 let"; }
#menu-oddily #item-153 a::after { content: "Od 15 let"; }
#menu-oddily #item-154 a::after { content: "Speciální oddíl"; }
#header-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -98px;
  width: 100%;
  height: 120px;
  pointer-events: none;
  background: url(/img/site/grafika-57cef8ce55.svg?v=3) no-repeat bottom center;
}
#footer-frame { padding-bottom: 60px; }
/* The wave is the footer's own background cut to shape, with the orange band on top; no flat filler colours */
#footer-frame::before, #footer-frame::after {
  content: "";
  position: absolute;
  left: 0;
  top: -29px;
  width: 100%;
  height: 47px;
  pointer-events: none;
}
#footer-frame::before {
  background: var(--header);
  -webkit-mask: url(/img/site/footer-wave-mask.svg?v=2) no-repeat bottom center;
  mask: url(/img/site/footer-wave-mask.svg?v=2) no-repeat bottom center;
}
#footer-frame::after { background: url(/img/site/footer-wave.svg?v=2) no-repeat bottom center; }
#footer-below { padding-top: 46px; }
#footer-below .menu { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 0; }
#footer-below .menu a { color: var(--orange); }
#footer-below .menu li::after { content: "|"; color: #fff; padding: 0 5px; }
#footer-below .menu li:last-child::after { content: ""; }
.footer-info-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 30px;
  padding-top: 30px;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
}
.footer-info-block a, .footer-info-block a:visited { color: var(--orange); }
.footer-info-block p { margin: 0 0 10px; }
.footer-info-block .site-author { margin-left: auto; padding-top: 30px; text-align: right; }

/* Tablet: tighter oddily menu */
@media (max-width: 977px) {
  #menu-oddily li a { --ox: 12px; --pad: 62px; }
}

/* Shorter wave so the curve still reads on a narrow screen */
@media (max-width: 899px) {
  #header-wrap::after { background-size: 900px 119px; }
  #footer-frame::after { background-size: 900px 47px; }
  #footer-frame::before { -webkit-mask-size: 900px 47px; mask-size: 900px 47px; }
  .footer-info-block .site-author { margin-left: 0; padding-top: 0; text-align: left; flex-basis: 100%; }
}

/* Icon navigation collapses behind the menu button */
@media (max-width: 859px) {
  #top-header { padding-bottom: 14px; }
  #container:not([data-view="home"]) #top-header { padding-bottom: 24px; }
  /* Without a zero basis the branding keeps its full width on a 360px phone and pushes the button onto its own row */
  #branding { flex: 1 1 0; }
  #nav-toggle { display: inline-flex; flex: none; }
  #top-nav { display: none; flex-basis: 100%; margin-top: 12px; padding: 14px 6px; background: rgba(0, 0, 0, .22); border-radius: 6px; }
  #top-nav.is-open { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 4px; }
  #top-nav .menu { display: contents; }
  #top-nav li a, #top-nav .login-btn { width: auto; margin: 0; }
  /* The account button is a grid cell like the links; its button fills the cell so the portrait sits in the column's middle */
  .account-menu { display: block; }
  #top-nav .account-menu button.login-btn { width: 100%; }
  .login-form-wrap { display: contents; }
  .login-form-box { position: static; grid-column: 1 / -1; width: auto; padding: 14px 12px 12px; box-shadow: none; }
  #top-nav .login-btn[aria-expanded="true"] { color: var(--orange); }
}

@media (max-width: 759px) {
  #menu-oddily { grid-template-columns: repeat(2, 1fr); }
  #menu-oddily li a { --ox: 10px; --pad: 66px; --dy: -10px; padding-top: 15px; padding-bottom: 16px; }
  /* In the 2x2 grid the image dividers overlap, so plain lines are drawn instead: one down the middle, one between the rows */
  #menu-oddily { padding-bottom: 16px; }
  #menu-oddily li, #menu-oddily li:last-child { background: none; }
  #menu-oddily li:nth-child(even) { box-shadow: inset 1px 0 rgba(255, 255, 255, .16); }
  #menu-oddily li:nth-child(n+3) { box-shadow: inset 0 1px rgba(255, 255, 255, .16); }
  #menu-oddily li:nth-child(n+3):nth-child(even) { box-shadow: inset 1px 1px rgba(255, 255, 255, .16); }
}

/* Phone */
@media (max-width: 600px) {
  #header-content { width: auto; margin-inline: calc(-1 * var(--gutter)); }
  #footer-below .menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  #footer-below .menu li { border-bottom: 1px solid rgba(255, 255, 255, .16); }
  #footer-below .menu li::after { content: none; }
  #footer-below .menu a { display: block; padding: 10px 0; text-decoration: none; }
}

@media (max-width: 400px) {
  #menu-oddily { font-size: 18px; }
  #tagline { font-size: 13px; line-height: 16px; }
}

#nav-frame { flex: 0 0 222px; order: -1; }
/* == Footer oddily menu (subpages) */
#footer-above:empty { display: none; }
#footer-above:not(:empty) + #footer-below { padding-top: 30px; }
#footer-frame #menu-oddily li { background: url(/img/site/grafika-2b6b2de18f.png) no-repeat top left; }
#footer-frame #menu-oddily li:last-child {
  background: url(/img/site/grafika-2b6b2de18f.png) no-repeat top left,
              url(/img/site/grafika-2b6b2de18f.png) no-repeat top right;
}
#footer-frame #menu-oddily li a { margin-top: 5px; }
/* As on the old site the troop menu is tucked right under the wave and its separators run up to the orange band.
   The menu box reaches up behind the wave and is cut to the wave's shape (the same mask as the footer's own wave),
   so the separators start high and end exactly at the curve, under the orange band. */
#footer-above {
  position: relative;
  top: -30px;
  margin-bottom: -30px;
  padding-top: 12px;
  -webkit-mask: url(/img/site/footer-wave-mask.svg?v=2) no-repeat center 1px / var(--wave-size, 900px 47px), linear-gradient(#000 0 0) no-repeat 0 48px / 100% 100%;
  mask: url(/img/site/footer-wave-mask.svg?v=2) no-repeat center 1px / var(--wave-size, 900px 47px), linear-gradient(#000 0 0) no-repeat 0 48px / 100% 100%;
}
@media (min-width: 760px) {
  #footer-frame #menu-oddily li { padding-top: 27px; }
  #footer-frame #menu-oddily li a { margin-top: -16px; }
}
@media (min-width: 900px) { #footer-above { --wave-size: 1920px 47px; } }
@media (min-width: 1919px) { #footer-above { --wave-size: 100vw 47px; } }

/* Screens wider than the 1920px wave images: stretch the waves to the full width */
@media (min-width: 1919px) {
  #header-wrap::after { background-size: 100% 119px; }
  #footer-frame::after { background-size: 100% 47px; }
  #footer-frame::before { -webkit-mask-size: 100% 47px; mask-size: 100% 47px; }
}

@media (max-width: 759px) {
  #nav-frame, #nav:has(> .akce-menu), .akce-menu { display: contents; }
  /* Same plain lines as under the header: image dividers overlap in the 2x2 grid */
  #footer-frame #menu-oddily li, #footer-frame #menu-oddily li:last-child, #footer-frame #menu-oddily li:nth-child(even) { background: none; }
  #footer-frame #menu-oddily { padding: 0; }
  /* The first row reaches up behind the wave, so the line between the columns runs up to the orange band */
  #footer-frame #menu-oddily li:nth-child(-n+2) { padding-top: 40px; }
}

/* == Side menu of a section (#nav) */
#nav .menu { list-style: none; margin: 0; padding: 0; }
#nav .menu li { border-bottom: 1px solid var(--line); }
#nav .menu li a { display: block; padding: 2px 5px; color: #000; text-decoration: none; }
#nav .menu li a:hover { background: rgba(255, 255, 255, .6); }
#nav .menu li.active a { background: var(--control-on); color: var(--control-on-ink); }
.subnav-toggle { display: none; }

/* Section menu collapses to one row showing the current page */
@media (max-width: 759px) {
  #nav-above { order: -3; flex: 1 0 100%; }
  .subnav-toggle {
    display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      border: 0;
      border-radius: 6px;
      font: bold 16px var(--font-body);
      text-align: left;
      color: var(--control-on-ink);
      background: var(--control-on);
      cursor: pointer;
  }
  .subnav-toggle::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: translateY(-2px) rotate(45deg); }
  .subnav-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  #nav .subnav-toggle + .menu { display: none; margin-top: 4px; background: var(--paper); border-radius: 6px; overflow: hidden; }
  #nav.is-open .subnav-toggle + .menu { display: block; }
  #nav .menu li a { padding: 10px 12px; }
  #nav .menu li:last-child { border-bottom: 0; }
}

#top-nav #item-244 { display: none; }
#container[data-signed] #top-nav #item-244 { display: list-item; }
#container[data-signed] #top-nav li a, #container[data-signed] #top-nav .login-btn { margin-left: clamp(2px, .8vw, 8px); }
/* Signed-in state of the header and the login error */
.account-menu { display: flex; align-items: center; gap: 8px; margin: 0; }
/* Buttons keep default padding; without this reset the next icon of the sprite shows below the label */
.account-menu button.login-btn.has-avatar { position: relative; background-image: none; }
.nav-avatar { position: absolute; left: 50%; top: 0; width: 41px; height: 41px; margin-left: -20.5px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; object-fit: cover; background: #000; }
.account-menu button.login-btn { box-sizing: content-box; height: 15px; padding: 45px 0 0; border: 0; cursor: pointer; font: inherit; line-height: 15px; }
.login-error { margin: 0 0 8px; color: var(--red); font-weight: bold; }

/* Menu of the signed-in member, opened from the header like the login box */
.account-box .login-links strong { font-size: 16px; }
.account-links { margin: 0 0 12px; }
.account-links a { display: block; padding: 8px 2px; font-size: 15px; border-top: 1px solid var(--line); }
.account-links a:first-child { border-top: 0; }