/* ==========================================================================
   ILORE — Shared components
   Buttons, badges, site header / navigation and site footer.
   Every rule here is used by both index.html and assessment.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-on-dark);
}

.button--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-dark);
}

.button--primary:active {
  background: var(--color-accent-active);
}

.button--secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.button--secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

/* Primary action sitting on a dark surface (closing CTA band). */
.button--on-dark {
  background: var(--color-on-dark);
  color: var(--color-surface-dark);
}

.button--on-dark:hover {
  background: var(--color-surface-tint);
  color: var(--color-surface-dark);
}

/* Compact size used inside the header. */
.button--compact {
  min-height: 42px;
  padding: 10px 18px;
  font-size: 14px;
  white-space: nowrap;
}

.button[disabled] {
  opacity: 0.6;
  cursor: wait;
}

.button__arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.button:hover .button__arrow {
  transform: translateX(3px);
}

/* Inline "read more" style action. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.link-more:hover {
  color: var(--color-accent);
}

.link-more__arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.link-more:hover .link-more__arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid #e2c7ba;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

/* --------------------------------------------------------------------------
   Icons
   Inline SVG line icons share one stroke definition.
   -------------------------------------------------------------------------- */
.icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.88);
}

/* Progressive enhancement: only lighten the header where blur is supported,
   otherwise keep it near-opaque so text behind it never bleeds through. */
@supports (backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px)) {
  .site-header {
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: var(--header-height);
}

/* img/logo.svg is a 1500-unit square canvas with the lockup sitting in the
   middle of it, at x 310–1207 and y 629–872. Placing the file as-is would
   render the logo at a sixth of the box height and leave a wide band of
   whitespace to fight in both the header and the footer. So the link is sized
   to the lockup alone, and the image is scaled up inside it until that region
   fills the box — the empty canvas is simply clipped. Every number below is
   that measured region; only --wordmark-height should ever need changing. */
.wordmark {
  --wordmark-height: 30px;
  display: block;
  flex: none;
  width: calc(var(--wordmark-height) * 897 / 243);
  height: var(--wordmark-height);
  overflow: hidden;
}

.wordmark__img {
  display: block;
  width: calc(var(--wordmark-height) * 1500 / 243);
  height: calc(var(--wordmark-height) * 1500 / 243);
  /* Overrides the global img rule, which would otherwise cap the scaled-up
     square at the width of the clipping box. */
  max-width: none;
  margin: calc(var(--wordmark-height) * -629 / 243) 0 0
    calc(var(--wordmark-height) * -310 / 243);
  transition: opacity var(--transition-fast);
}

/* The text logo tinted to the accent on hover; an image can only dim. */
.wordmark:hover .wordmark__img {
  opacity: 0.7;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-nav);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.site-nav__link:hover,
.site-nav__link.is-current {
  color: var(--color-accent);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The icon is three absolutely positioned bars inside a 21x16 box, so the
   closed and open states are the same three elements in different places and
   the change between them can be animated rather than swapped. */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .menu-toggle:hover {
    background: var(--color-surface-tint);
  }
}

.menu-toggle__icon {
  position: relative;
  display: block;
  width: 21px;
  height: 16px;
}

.menu-toggle__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.menu-toggle__icon span:nth-child(1) {
  top: 0;
}

/* Centred in the 16px box: (16 - 2) / 2. */
.menu-toggle__icon span:nth-child(2) {
  top: 7px;
}

.menu-toggle__icon span:nth-child(3) {
  top: 14px;
}

/* Open: the outer bars travel to the centre line and cross; the middle one
   fades under them. Driven by aria-expanded so the visual state cannot drift
   from what assistive technology is told. */
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobile menu
   Hidden with the `hidden` attribute so it is removed from the accessibility
   tree while closed.
   -------------------------------------------------------------------------- */
.mobile-menu {
  display: block;
  padding: 14px 0 24px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

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

.mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: 46px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
}

.mobile-menu__link:hover {
  color: var(--color-accent);
}

.mobile-menu .button {
  width: 100%;
  margin-top: 18px;
}

@media (max-width: 1180px) {
  .site-nav {
    gap: 20px;
  }
}

/* Below this width the inline navigation is replaced by the menu button.
   The swap only happens when JavaScript is available, so a no-JS visitor
   keeps a usable (wrapped) navigation instead of no navigation at all. */
@media (max-width: 980px) {
  .js .site-nav,
  .js .site-header__actions {
    display: none;
  }

  .js .menu-toggle {
    display: flex;
  }

  html:not(.js) .site-header__inner {
    height: auto;
    flex-wrap: wrap;
    padding-block: 14px;
    gap: 14px;
  }

  html:not(.js) .site-nav {
    flex-wrap: wrap;
    gap: 18px;
  }
}

@media (min-width: 981px) {
  .mobile-menu {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-surface-sunken);
  border-top: 1px solid var(--color-border);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding: 56px 0 44px;
}

.site-footer__tagline {
  max-width: 26ch;
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.65;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
}

.footer-column__title {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.footer-column a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.footer-column a:hover {
  color: var(--color-accent);
}

.site-footer__base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--color-border-strong);
  font-size: 12.5px;
  color: var(--color-text-muted);
}

@media (max-width: 720px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}