/*
 * Inline styles from Navbar.js, expressed as CSS.
 *
 * The app set these with the `style` prop and swapped the two CTA pairs with a JS
 * resize listener (`showButton()`, threshold 960px). Media queries do the same job
 * at the same breakpoint without the listener, so the rendered result matches while
 * the mechanism gets simpler.
 *
 * Everything here is additive — navbar.css itself is the app's file, unmodified.
 */

/* Navbar.js: the second .nav-item carried `justifyContent: !click && "flex-end"`.
   `click` is only ever true while the mobile drawer is open, i.e. below 960px, so
   above that breakpoint this is unconditionally flex-end. */
@media screen and (min-width: 961px) {
  .rc-nav-item-end {
    justify-content: flex-end;
  }
}

/* The desktop pair: `<div style={{ width: "200px" }}>`, rendered only when
   `button` is true (width > 960). */
.rc-nav-cta-desktop {
  width: 200px;
}

/* The mobile pair: `<div style={{ position:"absolute", right:"60px", top:"30px" }}>`,
   rendered only when `button` is false (width <= 960). */
.rc-nav-cta-mobile {
  position: absolute;
  right: 60px;
  top: 30px;
}

@media screen and (max-width: 960px) {
  .rc-nav-cta-desktop {
    display: none;
  }
}

@media screen and (min-width: 961px) {
  .rc-nav-cta-mobile {
    display: none;
  }
}

/* MenuOutlined / CloseOutlined were rendered with
   `style={{ color: "#fff", fontSize: "2rem" }}`. */
.menu-icon .rc-icon-menu,
.menu-icon .rc-icon-close {
  color: #fff;
  font-size: 2rem;
  display: inline-flex;
  align-items: center;
}

.menu-icon [hidden] {
  display: none;
}

/* The navbar is `position: fixed` at 88px tall, so ordinary page content would
   start underneath it. The app gets away with this on the home page because the
   hero is designed to sit behind a transparent navbar; every other page needs the
   offset. Front-page templates that want the hero treatment simply don't use
   .rc-main. */
.rc-main {
  padding-top: 88px;
}

/* Footer.js gave each social icon `style={{ paddingRight: "10px" }}`. */
.footer-row-1-links svg {
  padding-right: 10px;
  font-size: 2rem;
  flex-shrink: 0;
}

/* ── Language switcher ─────────────────────────────────────────────────────
   Matches src/components/LanguageSelector/LanguageSelector.js — a label + caret
   trigger opening a panel of flag + label rows. The app builds that with antd's
   <Popover>; this is a <details>, so the open/close is the browser's. */
.rc-lang {
  position: relative;
  margin-right: 14px;
  /* The navbar row is a flex container, whose default `stretch` made this
     <details> full height and left the trigger sitting at the top of it,
     a line above the other nav items. */
  align-self: center;
}

.rc-lang-trigger {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  cursor: pointer;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  list-style: none;
  white-space: nowrap;
}

/* The default disclosure triangle would sit next to our own caret. */
.rc-lang-trigger::-webkit-details-marker {
  display: none;
}

.rc-lang-trigger::marker {
  content: "";
}

.rc-lang-text {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-lang-arrow {
  flex: 0 0 auto;
  margin-left: 4px;
  font-size: 10px;
  transition: transform 0.2s ease;
}

.rc-lang[open] .rc-lang-arrow {
  transform: rotate(180deg);
}

.rc-lang-trigger:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 4px;
}

/* antd's popover: a panel below the trigger, above everything else. */
.rc-lang-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 8px 0;
  background: var(--color-gray);
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32);
  z-index: 60;
}

.rc-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  color: #fff;
  font-size: 1.5rem;
  white-space: nowrap;
}

.rc-lang-option:hover,
.rc-lang-option:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-orange);
}

/* The app bolds the active language rather than recolouring it. */
.rc-lang-option.is-active {
  font-weight: 700;
}

.rc-lang-flag {
  font-size: 1.6rem;
  line-height: 1;
}

@media screen and (max-width: 960px) {
  .rc-lang {
    margin-right: 8px;
  }

  .rc-lang-panel {
    left: auto;
    right: 0;
    transform: none;
  }
}