/*
Theme Name: RumAtlas
Theme URI: https://rumatlas.guide/
Author: Steve & Jami
Description: Native WordPress block theme for the private RumAtlas staging site.
Version: 0.2.21
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: rumatlas
*/

:root {
  --ra-ocean: #0e3b46;
  --ra-deep: #092e34;
  --ra-teal: #27616a;
  --ra-sand: #f1e6d4;
  --ra-parchment: #faf4e8;
  --ra-copper: #b45e2e;
  --ra-brass: #c68a45;
  --ra-ink: #133e43;
}

html { scroll-behavior: smooth; }
body { background: var(--ra-parchment); }
a { text-underline-offset: .25em; }

#top {
  --ra-page-gutter: 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
#top > .wp-block-group {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-right: var(--ra-page-gutter) !important;
  padding-left: var(--ra-page-gutter) !important;
}
#top .alignwide {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin-right: auto !important;
  margin-left: auto !important;
}
#top .wp-block-columns,
#top .wp-block-column {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
#top .ra-hero-art,
#top .ra-field-note,
#top .ra-feature { max-width: 100%; }
#top img:not(.ra-feature-scene) { max-width: 100%; }
.wp-element-button:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--ra-copper);
  outline-offset: 4px;
}
.ra-preview-bar {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .68rem;
}

.ra-header {
  border-bottom: 1px solid rgba(14, 59, 70, .14);
  box-shadow: 0 2px 14px rgba(9, 46, 52, .06);
}

.ra-header-inner { min-height: 84px; }
.ra-brand {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: min(268px, 32vw);
  aspect-ratio: 398 / 133;
  overflow: visible;
}
.ra-brand img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}
.ra-primary-nav .wp-block-navigation-item__content {
  letter-spacing: .055em;
  text-decoration: none;
}

.ra-hero {
  position: relative;
  min-height: 570px;
  background:
    repeating-radial-gradient(circle at 17% 48%, transparent 0 62px, rgba(241,230,212,.065) 63px 65px, transparent 66px 116px),
    var(--ra-ocean);
}

.ra-hero > .wp-block-columns {
  min-height: 482px;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin-block: 0;
}
.ra-hero .wp-block-column { min-width: 0; }

.ra-hero-copy {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 650px;
}
.ra-hero-copy > .ra-display { margin-block: 1.55rem 1.2rem; }
.ra-hero-copy > p:not(.ra-kicker):not(.ra-note) { max-width: 40rem; }
.ra-hero-copy > .wp-block-buttons { margin-top: 1.7rem; }
.ra-hero-copy > .ra-note { margin-top: 1.8rem; }
.ra-hero .wp-block-button__link { box-sizing: border-box; }
.ra-hero .wp-block-button.is-style-outline > .wp-block-button__link,
.ra-hero .wp-block-button.is-style-outline > .wp-block-button__link:visited {
  border: 2px solid var(--ra-parchment);
  background: transparent;
  color: var(--ra-parchment);
}
.ra-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.ra-hero .wp-block-button.is-style-outline > .wp-block-button__link:active {
  border-color: var(--ra-parchment);
  background: var(--ra-parchment);
  color: var(--ra-deep);
}
.ra-hero .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  border-color: var(--ra-parchment);
  background: transparent;
  color: var(--ra-parchment);
  outline-color: var(--ra-brass);
}
.ra-kicker {
  color: #8b3f24;
  font: 700 .72rem/1.4 Arial, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.ra-hero .ra-kicker,
.ra-dark .ra-kicker { color: #d9ad75; }

.ra-display,
.ra-section-title {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
  line-height: .98;
}

.ra-display { font-size: clamp(3rem, 5.2vw, 4.95rem); }
.ra-section-title { font-size: clamp(2.35rem, 4.5vw, 4.75rem); }
.ra-script { color: var(--ra-copper); font-style: italic; font-weight: 400; }

.ra-hero-art,
.ra-field-note {
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 38px rgba(3,30,39,.66);
}

.ra-hero-art {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-top: clamp(18px, 1.5vw, 24px);
  border: 1px solid #bf9569;
  outline: 1px solid rgba(241, 230, 212, .65);
  outline-offset: 5px;
  background: #ead2a8;
}
.ra-hero-compass-n {
  position: absolute;
  z-index: 1;
  top: clamp(2px, .25vw, 4px);
  left: 50%;
  display: block;
  width: clamp(12px, 3.01%, 16px);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}
.ra-hero-scene {
  display: block;
  width: calc(100% - 24px);
  height: auto;
  margin: 0 auto 3px;
}
.ra-field-note {
  border: 7px solid #bf9569;
  outline: 1px solid rgba(241, 230, 212, .65);
  outline-offset: 5px;
}
.ra-field-note::before {
  position: absolute;
  z-index: 2;
  inset: 12px;
  border: 1px solid #ba895c;
  content: "";
  pointer-events: none;
}

.ra-ribbon {
  background: #ead2a8;
  border-block: 1px solid rgba(180,94,46,.18);
  color: var(--ra-ocean);
  font: 700 .64rem/1.5 Arial, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.ra-card {
  height: 100%;
  padding: 30px;
  border: 1px solid #dcc69f;
  background: rgba(250,244,232,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ra-card:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(9,46,52,.08); }
.ra-card-number { color: #8b3f24; font: 700 .7rem Arial, sans-serif; letter-spacing: .15em; }

.ra-dark { background: var(--ra-ocean); color: #f4ebde; }
.ra-dark > .wp-block-columns {
  align-items: center;
  gap: clamp(30px, 5vw, 72px);
  margin-block: 0;
}
.ra-dark .wp-block-column { min-width: 0; }
.ra-dark .ra-section-title { color: var(--ra-parchment); }
.ra-dark a { color: var(--ra-parchment); }
.ra-dark .ra-note { color: #d3dfdc; }
.ra-rule-grid { flex-wrap: nowrap !important; }
.ra-rule-grid > * { border-top: 1px solid rgba(241,230,212,.3); padding-top: 1.25rem; }

.ra-field-note {
  display: flex;
  min-height: 420px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  background: linear-gradient(150deg, #efdcbb, #dbc198);
  color: var(--ra-deep);
  text-align: center;
}
.ra-field-note img {
  display: block;
  width: min(100%, 340px);
  height: auto;
  margin: 18px auto 12px;
  mix-blend-mode: multiply;
}
.ra-field-label {
  color: #765735;
  font: 600 .86rem/1.3 Georgia, "Times New Roman", serif;
  letter-spacing: .16em;
}
.ra-field-note strong {
  display: block;
  font: 600 1.45rem/1.12 Georgia, "Times New Roman", serif;
  letter-spacing: .06em;
}
.ra-field-route {
  display: block;
  width: 63%;
  margin: 20px auto 0;
  transform: rotate(-6deg);
  border-top: 2px dashed #bc7252;
}

.ra-feature {
  align-items: center !important;
  gap: clamp(32px, 4.5vw, 64px);
  padding: clamp(28px, 3vw, 36px) clamp(32px, 4.5vw, 64px);
  border: 1px solid #d8bd8d;
  background: #ead2a8;
}
.ra-feature > .wp-block-column:first-child { display: flex; }
.ra-feature-art {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: #ead2a8;
}
.ra-feature-medallion {
  box-sizing: border-box;
  position: relative;
  display: flex;
  width: min(100%, 320px);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  border: 4px solid #c68a45;
  border-radius: 50%;
  background: #f5e4c5;
  box-shadow: 0 5px 14px rgba(9, 46, 52, .22);
  overflow: hidden;
}
.ra-feature-medallion::before {
  position: absolute;
  z-index: 2;
  inset: 5px;
  border: 2px solid #0e3b46;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.ra-feature-medallion-art {
  position: absolute;
  z-index: 1;
  inset: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}
.ra-feature-scene {
  display: block;
  width: auto;
  max-width: none;
  height: calc(100% - 6px);
  max-height: none;
  object-fit: contain;
  transform: translateX(-1.4%);
}
.ra-feature-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 24px;
  padding: 0;
}
.ra-feature-copy > * { margin-block: 0; }

.ra-about { background: #ead2a8; }
.ra-footer { border-top: 1px solid rgba(14,59,70,.14); }
.ra-footer .wp-block-heading { white-space: nowrap; }
.ra-note { color: #5b6d6a; font-size: .75rem; }
.ra-hero .ra-note { color: #d3dfdc !important; }

@media (min-width: 782px) and (max-width: 1080px) {
  .ra-hero {
    min-height: auto;
    padding-block: 52px 48px !important;
  }
  .ra-hero > .wp-block-columns {
    min-height: 0;
    flex-direction: column;
    gap: 36px;
  }
  .ra-hero > .wp-block-columns > .wp-block-column {
    width: 100%;
    flex-basis: auto !important;
  }
  .ra-hero-copy { max-width: 760px; }
  .ra-hero-copy > .ra-display { font-size: clamp(3rem, 7vw, 4.25rem); }
  .ra-hero-art {
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
  }
}

@media (max-width: 900px) {
  .ra-footer > .wp-block-columns {
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    gap: 24px;
  }
  .ra-footer > .wp-block-columns > .wp-block-column {
    width: 100%;
    max-width: 100%;
    flex: 0 1 auto !important;
    flex-basis: auto !important;
    align-self: stretch;
  }
  .ra-footer .has-text-align-right,
  .ra-footer .has-text-align-center { text-align: left; }
}

@media (max-width: 781px) {
  .ra-preview-bar {
    padding: 4px 12px !important;
    font-size: .61rem;
    line-height: 1.35;
    letter-spacing: .045em;
  }
  .ra-preview-bar p { margin-block: 0; }
  .ra-header { padding-inline: 18px !important; }
  .ra-header-inner { min-height: 64px; }
  .ra-brand { width: min(200px, 66vw); }
  .ra-header .wp-block-navigation { font-size: .82rem; }
  .ra-hero { min-height: auto; }
  .ra-hero { padding-block: 58px 48px !important; }
  .ra-hero > .wp-block-columns,
  #start-here > .wp-block-group > .wp-block-columns,
  .ra-dark > .wp-block-columns,
  .ra-feature,
  .ra-about > .wp-block-columns {
    flex-flow: column nowrap !important;
  }
  .ra-hero > .wp-block-columns > .wp-block-column,
  #start-here > .wp-block-group > .wp-block-columns > .wp-block-column,
  .ra-dark > .wp-block-columns > .wp-block-column,
  .ra-feature > .wp-block-column,
  .ra-about > .wp-block-columns > .wp-block-column {
    width: 100%;
    max-width: 100%;
    flex: 0 1 auto !important;
    flex-basis: auto !important;
  }
  .ra-hero > .wp-block-columns {
    min-height: 0;
    gap: 34px;
  }
  .ra-hero-copy > .ra-display { margin-block: 1.25rem 1rem; }
  .ra-hero-copy > .wp-block-buttons { gap: .65rem; }
  .ra-hero-copy .wp-block-button__link {
    padding: .75rem .85rem;
    font-size: .72rem;
  }
  .ra-hero-art {
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
    margin: .75rem auto 0;
  }
  .ra-field-note { min-height: 360px; margin-top: 2rem; }
  .ra-feature {
    align-items: stretch !important;
    gap: 30px;
    padding: 32px 24px 36px;
  }
  .ra-feature > .wp-block-column {
    width: 100%;
    flex-basis: 100% !important;
  }
  .ra-feature-art { min-height: 0; }
  .ra-feature-medallion { width: min(250px, 100%); }
  .ra-feature-copy { padding: 0 !important; }
  .ra-display { font-size: clamp(3rem, 15vw, 4.4rem); }
  .ra-section-title { font-size: clamp(2.4rem, 12vw, 3.5rem); }
  .ra-section { padding-block: 70px !important; }
  .ra-card { padding: 24px !important; }
  .ra-ribbon .wp-block-columns {
    display: flex;
    flex-flow: row wrap !important;
    gap: .4rem 1rem;
  }
  .ra-ribbon .wp-block-column { flex-basis: 30% !important; }
  .ra-about .wp-block-column + .wp-block-column {
    padding-top: 1.25rem;
    padding-left: 0 !important;
    border-top: 1px solid var(--ra-brass);
    border-left: 0 !important;
  }
}

@media (max-width: 420px) {
  #top { --ra-page-gutter: 20px; }
  .ra-preview-bar {
    padding-inline: 10px !important;
    font-size: .56rem;
    letter-spacing: .035em;
  }
  .ra-brand { width: min(182px, 66vw); }
  .ra-hero { padding: 44px 20px 38px !important; }
  .ra-hero > .wp-block-columns { gap: 28px; }
  .ra-hero-art {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    margin: .35rem auto 0;
  }
  .ra-hero-copy > .wp-block-buttons { margin-top: 1.35rem; align-items: stretch; }
  .ra-hero-copy > .ra-note { margin-top: 1.2rem; }
  .ra-hero-copy .wp-block-button,
  .ra-hero-copy .wp-block-button__link { width: 100%; }
  .ra-hero-copy .wp-block-button__link { text-align: center; }
  .ra-section { padding: 52px 20px !important; }
  #start-here > .wp-block-group > .wp-block-columns {
    gap: 14px;
    margin-top: 30px !important;
  }
}

@media (max-width: 600px) {
  .ra-rule-grid { flex-flow: column nowrap !important; }
  .ra-rule-grid > .wp-block-column {
    width: 100%;
    max-width: 100%;
    flex-basis: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ra-card { transition: none; }
}