/* Rawana — site header + footer. Ported from assets/css/layout.css. */

/* ====================================================================== */
/* HEADER                                                                  */
/* ====================================================================== */

/* The template-part wrapper must not reserve space: the bar overlays the hero. */
.wp-block-template-part:has(> .rwn-header) {
  position: relative;
  z-index: var(--wp--custom--z-header);
}

.rwn-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--wp--custom--z-header);
  display: flex;
  align-items: center;
  min-height: var(--wp--custom--header-height);
  margin: 0;
  padding: 0;
  border-bottom: var(--wp--custom--border-width) solid transparent;
  transition: border-color var(--wp--custom--duration-mid) var(--wp--custom--ease-out);
}

/* Background + blur live on a pseudo-element. Putting backdrop-filter on the
   header itself would make it the containing block for the fixed nav overlay,
   trapping the mobile menu inside the 72px bar. */
.rwn-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: var(--wp--custom--surface-glass-strong);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  transition: opacity var(--wp--custom--duration-mid) var(--wp--custom--ease-out);
}

.rwn-header.is-stuck::before { opacity: 1; }
.rwn-header.is-stuck { border-bottom-color: var(--wp--custom--border-hairline); }

.rwn-header .rwn-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--50);
  width: 100%;
  max-width: var(--wp--custom--width-wide);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}

/* ---- Brand ----------------------------------------------------------- */
.rwn-header__brand { flex: 0 0 auto; }

.rwn-header__brand .wp-block-site-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 40px;
  object-fit: contain;
}

.rwn-header__brand .wp-block-site-logo a { display: block; }

/* ---- Right-hand cluster ---------------------------------------------- */
.rwn-header .rwn-header__actions {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--50);
  flex: 0 1 auto;
  min-width: 0;
}

/* ---- Desktop nav ------------------------------------------------------ */
.rwn-header .wp-block-navigation {
  font-family: inherit;
  --navigation-layout-justification-setting: flex-end;
}

.rwn-header .wp-block-navigation .wp-block-navigation__container {
  gap: var(--wp--preset--spacing--60);
  align-items: center;
}

.rwn-header .wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
  padding: var(--wp--preset--spacing--20) 0;
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: var(--wp--custom--tracking-wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  transition: color var(--wp--custom--duration-mid) var(--wp--custom--ease-out);
}

.rwn-header .wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--wp--custom--border-width);
  background: var(--wp--preset--color--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--wp--custom--duration-mid) var(--wp--custom--ease-out);
}

.rwn-header .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--contrast);
}

.rwn-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.rwn-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

/* ---- Hamburger -------------------------------------------------------- */
.rwn-header .wp-block-navigation__responsive-container-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  color: var(--wp--preset--color--contrast);
  background: transparent;
  border: 0;
}

.rwn-header .wp-block-navigation__responsive-container-open svg,
.rwn-header .wp-block-navigation__responsive-container-close svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* ---- Breakpoints (the design collapses the nav at 960px) -------------- */
@media (max-width: 959.98px) {
  .rwn-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  .rwn-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
}

@media (min-width: 960px) {
  .rwn-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none;
  }
}

/* The bar CTA appears from 720px up, exactly as in the source design. */
.rwn-header .rwn-header__cta { display: none; }

@media (min-width: 720px) {
  .rwn-header .rwn-header__cta {
    display: flex;
    margin: 0;
  }
}

.rwn-header .rwn-header__cta .wp-block-button__link {
  padding: 0.85em 1.5em;
  font-size: var(--wp--preset--font-size--sm);
}

/* ====================================================================== */
/* MOBILE OVERLAY                                                          */
/* ====================================================================== */

.rwn-header .wp-block-navigation__responsive-container.is-menu-open {
  padding: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--60))
           var(--wp--custom--gutter) var(--wp--preset--spacing--70);
  background-color: var(--wp--preset--color--base);
  background-image: var(--wp--custom--gradient-aurora);
  overflow-y: auto;
}

.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  width: 100%;
  max-width: var(--wp--custom--width-page);
  margin-inline: auto;
  align-items: stretch;
  justify-content: flex-start;
}

.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  counter-reset: rwn-nav;
  gap: 0;
  width: 100%;
  align-items: stretch;
}

.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item {
  width: 100%;
  border-bottom: var(--wp--custom--border-width) solid var(--wp--custom--border-hairline);
}

.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  display: flex;
  align-items: baseline;
  gap: var(--wp--preset--spacing--50);
  width: 100%;
  padding: var(--wp--preset--spacing--50) 0;
  font-size: var(--wp--preset--font-size--xxl);
  font-weight: var(--wp--custom--weight-medium);
  letter-spacing: var(--wp--custom--tracking-tight);
  line-height: var(--wp--custom--leading-snug);
  text-transform: none;
  color: var(--wp--preset--color--contrast);
}

.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content::after { content: none; }

.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item
  > .wp-block-navigation-item__content::before {
  counter-increment: rwn-nav;
  content: counter(rwn-nav, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight-regular);
  letter-spacing: var(--wp--custom--tracking-wide);
  color: var(--wp--preset--color--accent);
}

/* The CTA rides in the menu as an ordinary menu item, so the owner edits it
   like any other link. It is hidden wherever the bar CTA is shown.
   These selectors deliberately repeat `.wp-block-navigation__container` so they
   out-weigh the generic menu-item rules above (equal specificity would lose). */
.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .rwn-nav__cta
  > .wp-block-navigation-item__content {
  justify-content: center;
  margin-top: var(--wp--preset--spacing--60);
  padding: 1.05em 2em;
  /* The source .btn carries a transparent 1px border and inherits the body's
     relaxed leading -- both feed the 59px pill height. */
  border: var(--wp--custom--border-width) solid transparent;
  border-radius: var(--wp--custom--radius-pill);
  line-height: var(--wp--custom--leading-relaxed);
  background-image: var(--wp--custom--gradient-accent);
  box-shadow: 0 10px 34px -14px var(--wp--custom--accent-glow);
  color: var(--wp--preset--color--accent-ink);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight-semibold);
  letter-spacing: var(--wp--custom--tracking-wide);
  text-transform: uppercase;
}

.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .rwn-nav__cta { border-bottom: 0; }

.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .rwn-nav__cta
  > .wp-block-navigation-item__content::before {
  content: none;
  counter-increment: none;
}

/* The overlay only exists below 960px (see the breakpoint block above), so the
   in-menu items live for that whole band -- hiding them at 720 would leave the
   drawer with no CTA between 720 and 959, which the source design has. */
@media (min-width: 960px) {
  .rwn-header .rwn-nav__cta,
  .rwn-header .rwn-nav__contact { display: none; }
}

/* The drawer's contact foot (phone, email, address). Like the CTA these are
   ordinary menu items, so the owner edits them in the Site Editor -- and like
   the CTA they carry no counter and no hairline rule. */
.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .rwn-nav__contact { border-bottom: 0; }

.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .rwn-nav__contact
  > .wp-block-navigation-item__content {
  display: block;
  gap: 0;
  margin-top: var(--wp--preset--spacing--20);
  padding: 0;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-regular);
  line-height: var(--wp--custom--leading-relaxed);
  letter-spacing: normal;
  text-transform: none;
  color: var(--wp--preset--color--muted);
}

/* First of the group carries the gap away from the numbered list. */
.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .rwn-nav__contact--first
  > .wp-block-navigation-item__content {
  margin-top: var(--wp--preset--spacing--60);
}

.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .rwn-nav__contact--dim
  > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--dim);
}

.rwn-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .rwn-nav__contact
  > .wp-block-navigation-item__content::before {
  content: none;
  counter-increment: none;
}

/* Close button: keep it in the header bar's optical slot, 44px tap target. */
.rwn-header .wp-block-navigation__responsive-container-close {
  top: calc((var(--wp--custom--header-height) - 44px) / 2);
  right: var(--wp--custom--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--wp--preset--color--contrast);
  background: transparent;
  border: 0;
}

.rwn-header:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
  visibility: hidden;
}

/* ====================================================================== */
/* FOOTER                                                                  */
/* ====================================================================== */

.rwn-footer {
  position: relative;
  margin: 0;
  border-top: var(--wp--custom--border-width) solid var(--wp--custom--border-top-light);
  background-color: var(--wp--preset--color--surface-one);
  background-image: var(--wp--custom--gradient-surface-top);
  padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
}

.rwn-footer .rwn-footer__inner {
  width: 100%;
  max-width: var(--wp--custom--width-wide);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}

/* ---- Top row ---------------------------------------------------------- */

.rwn-footer .rwn-footer__top {
  display: grid;
  gap: var(--wp--preset--spacing--70);
  margin: 0;
  padding-bottom: var(--wp--preset--spacing--70);
  border-bottom: var(--wp--custom--border-width) solid var(--wp--custom--border-hairline);
}

@media (min-width: 600px) {
  .rwn-footer .rwn-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .rwn-footer .rwn-footer__top {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--70);
  }
}

.rwn-footer .rwn-footer__brand {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  align-content: start;
  max-width: 42ch;
  margin: 0;
}

.rwn-footer__brand .wp-block-site-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 56px;
  object-fit: contain;
}

.rwn-footer__brand .wp-block-site-logo a { display: block; }

.rwn-footer .rwn-footer__blurb {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--muted);
}

/* ---- Link columns ----------------------------------------------------- */

.rwn-footer .rwn-footer-col {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  align-content: start;
  margin: 0;
}

.rwn-footer .rwn-footer-col__title {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xxs);
  font-weight: var(--wp--custom--weight-regular);
  letter-spacing: var(--wp--custom--tracking-widest);
  text-transform: uppercase;
  color: var(--wp--preset--color--dim);
}

.rwn-footer .rwn-footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rwn-footer .rwn-footer-col li {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--muted);
}

.rwn-footer .rwn-footer-col a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.rwn-footer .rwn-footer-col a:hover,
.rwn-footer .rwn-footer-col a:focus-visible {
  color: var(--wp--preset--color--accent);
}

/* ---- Bottom bar ------------------------------------------------------- */

.rwn-footer .rwn-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  margin: 0;
  padding-top: var(--wp--preset--spacing--50);
}

.rwn-footer .rwn-footer__bottom p {
  margin: 0;
  font-size: var(--wp--preset--font-size--xs);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--dim);
}

.rwn-footer .rwn-footer__note {
  max-width: 54ch;
}

/* ---- Social row -------------------------------------------------------- */

.rwn-footer .rwn-footer__social {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  margin: var(--wp--preset--spacing--20) 0 0;
}

.rwn-footer .rwn-footer__social-label {
  margin: 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xxs);
  letter-spacing: var(--wp--custom--tracking-widest);
  text-transform: uppercase;
  color: var(--wp--preset--color--dim);
}

.rwn-footer .rwn-footer__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
  margin: 0;
}

.rwn-footer .rwn-footer__social-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 38px;
  padding-inline: var(--wp--preset--spacing--30);
  border: var(--wp--custom--border-width) solid var(--wp--custom--border-hairline);
  border-radius: var(--wp--custom--radius-pill);
  background-color: var(--wp--preset--color--surface-inset);
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xxs);
  letter-spacing: var(--wp--custom--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
    border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
    transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.rwn-footer .rwn-footer__social-links a svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--wp--preset--color--accent);
}

.rwn-footer .rwn-footer__social-links a:hover,
.rwn-footer .rwn-footer__social-links a:focus-visible {
  color: var(--wp--preset--color--accent-bright);
  border-color: var(--wp--custom--border-accent);
  transform: translateY(-1px);
}

.rwn-footer .rwn-footer__social-links a:hover svg,
.rwn-footer .rwn-footer__social-links a:focus-visible svg {
  color: var(--wp--preset--color--accent-bright);
}

@media (prefers-reduced-motion: reduce) {
  .rwn-footer .rwn-footer__social-links a { transition: none; }
  .rwn-footer .rwn-footer__social-links a:hover,
  .rwn-footer .rwn-footer__social-links a:focus-visible { transform: none; }
}

/* ---- Legal / company data --------------------------------------------- */

.rwn-footer .rwn-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rwn-footer .rwn-footer__legal li {
  margin: 0;
  font-size: var(--wp--preset--font-size--xxs);
  line-height: var(--wp--custom--leading-relaxed);
}

.rwn-footer .rwn-footer__legal a {
  color: var(--wp--preset--color--dim);
  text-decoration: none;
  transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.rwn-footer .rwn-footer__legal a:hover,
.rwn-footer .rwn-footer__legal a:focus-visible {
  color: var(--wp--preset--color--accent);
}

.rwn-footer .rwn-footer__company {
  max-width: 78ch;
  font-size: var(--wp--preset--font-size--xxs);
}

.rwn-footer .rwn-footer__fineprint {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  width: 100%;
  margin: 0;
  padding-top: var(--wp--preset--spacing--40);
  border-top: var(--wp--custom--border-width) solid var(--wp--custom--border-hairline);
}