/* =====================================================================
   COI header, drawer and footer (PTECH-10509). Scoped under .coi-v2 (the
   body class the design switch adds), a no-op while the switch is off.
   All sizes are rem except 1px rules (via core's *-w tokens) and the two
   breakpoints below, which match Astra's own breakpoint / the prototype's
   icon-only breakpoint rather than being design sizes.
   ===================================================================== */

/* ---------------- Header ---------------- */
.coi-v2 .coi-site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--coi-bg);
  border-bottom: var(--coi-header-rule-w) solid var(--coi-header-rule);
}

/* Keep the sticky header below the admin bar for logged-in users.
   --wp-admin--admin-bar--height is a WordPress core custom property, not
   one of ours, so it does not take the --coi- prefix. Only from 601px up:
   below that WordPress's admin bar is not fixed (it scrolls away), so the
   header must stick at top: 0 on small screens. */
/* stylelint-disable-next-line unit-disallowed-list -- matches WordPress core's own admin bar breakpoint (601px), not a design size */
@media (min-width: 601px) {
  .coi-v2.admin-bar .coi-site-header {
    /* stylelint-disable-next-line custom-property-pattern -- WordPress core's own custom property, not ours */
    top: var(--wp-admin--admin-bar--height, 0);
  }
}

.coi-v2 .coi-site-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--coi-max);
  margin: 0 auto;
  padding: 0.55rem 1rem;
  gap: 1rem;
}

.coi-v2 .coi-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  justify-self: start;
  background: none;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--coi-primary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.coi-v2 .coi-menu-btn svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* Below 543px the "Menu" label is visually hidden (not display:none), so the
   button keeps an accessible name for screen reader users. */
/* stylelint-disable-next-line unit-disallowed-list -- 543px is the icon-only Menu breakpoint from the approved prototype, not a layout size */
@media (max-width: 543px) {
  .coi-v2 .coi-menu-btn span {
    position: absolute;
    /* stylelint-disable-next-line unit-disallowed-list -- 1px visually-hidden technique, not a design size */
    width: 1px;
    /* stylelint-disable-next-line unit-disallowed-list -- 1px visually-hidden technique, not a design size */
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.coi-v2 .coi-site-logo {
  display: block;
  line-height: 0;
  justify-self: center;
}

.coi-v2 .coi-site-logo img {
  height: 2.9rem;
  width: auto;
}

.coi-v2 .coi-site-logo--text {
  justify-self: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--coi-primary);
  text-decoration: none;
}

.coi-v2 .coi-social {
  justify-self: end;
  display: none;
  gap: 0.2rem;
}

.coi-v2 .coi-social a,
.coi-v2 .coi-site-footer__social a {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--coi-social, var(--coi-accent));
  text-decoration: none;
}

.coi-v2 .coi-social svg,
.coi-v2 .coi-site-footer__social svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentcolor;
}

.coi-v2 .coi-social a:hover,
.coi-v2 .coi-site-footer__social a:hover {
  color: var(--coi-primary);
  background: var(--coi-surface);
}

/* stylelint-disable-next-line unit-disallowed-list -- matches Astra's own three-column breakpoint (922px), not a design size */
@media (min-width: 922px) {
  .coi-v2 .coi-social { display: flex; }

  .coi-v2 .coi-site-logo img { height: 3.3rem; }
}

/* ---------------- Drawer ---------------- */
.coi-v2 .coi-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 45%);
  z-index: 70;
}

.coi-v2 .coi-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(22rem, 88vw);
  background: var(--coi-bg);
  z-index: 80;
  padding: 1.2rem 1.4rem 2rem;
  overflow-y: auto;
  box-shadow: 0 0 2rem rgb(0 0 0 / 25%);
}

.coi-v2 .coi-drawer[hidden],
.coi-v2 .coi-drawer-overlay[hidden] {
  display: none;
}

.coi-v2 .coi-drawer__close {
  background: none;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  float: right;
  color: var(--coi-primary);
}

.coi-v2 .coi-drawer h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coi-muted);
  margin: 1.6rem 0 0.4rem;
  clear: both;
}

.coi-v2 .coi-drawer__menu,
.coi-v2 .coi-drawer__menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.coi-v2 .coi-drawer__menu ul {
  padding-left: 1rem;
}

.coi-v2 .coi-drawer__menu a {
  display: block;
  padding: 0.55rem 0;
  font-weight: 600;
  text-decoration: none;
  color: var(--coi-primary);
  border-bottom: var(--coi-box-rule-w) solid var(--coi-border);
}

.coi-v2 .coi-drawer__menu a:hover {
  color: var(--coi-accent);
}

.coi-v2.coi-drawer-open {
  overflow: hidden;
}

/* ---------------- Footer ---------------- */
.coi-v2 .coi-site-footer {
  background: var(--coi-surface);
  border-top: var(--coi-footer-rule-w) solid var(--coi-footer-rule);
  margin-top: 1rem;
}

.coi-v2 .coi-site-footer__inner {
  max-width: var(--coi-max);
  margin: 0 auto;
  padding: 1.8rem 1rem 2.4rem;
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  text-align: center;
}

.coi-v2 .coi-site-footer__logo img {
  height: 2.8rem;
  width: auto;
}

.coi-v2 .coi-site-footer__logo--text {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--coi-primary);
  text-decoration: none;
}

.coi-v2 .coi-site-footer__social {
  display: flex;
  gap: 0.5rem;
}

.coi-v2 .coi-site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.coi-v2 .coi-site-footer__links a {
  font-size: 0.82rem;
  color: var(--coi-primary);
  text-decoration: none;
}

.coi-v2 .coi-site-footer__links a:hover {
  text-decoration: underline;
}

.coi-v2 .coi-site-footer__copy {
  font-size: 0.78rem;
  color: var(--coi-muted);
  margin: 0;
}