/**
 * MyronCMS — Public Critical Render Path
 * Minimal first-paint layout for public navigation, primary hero, and CTAs.
 */

body.myron-site-page {
  background-color: var(--myron-color-bg);
  color: var(--myron-color-text);
  font-family: var(--myron-font-role-body-family, var(--myron-typography-font-sans));
}

body.myron-site-page--authenticated {
  --myron-site-shell-offset: var(--mc-shell-bar-height, var(--myron-space-s9));
}

.myron-site {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.myron-site__masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-layout-gutter-md);
  padding: var(--myron-layout-gutter-md) var(--myron-layout-gutter-lg);
  background: var(--myron-color-surface);
  position: relative;
  z-index: var(--myron-z-index-sticky, 20);
}

.myron-site__masthead--surface-bordered {
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.myron-site__masthead--surface-elevated {
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  box-shadow: var(--myron-shadow-sm);
}

.myron-site__masthead--position-sticky {
  position: sticky;
  top: var(--myron-site-shell-offset, 0);
}

.myron-site__brand,
.myron-site__brand:visited,
.myron-site__brand:hover,
.myron-site__brand:active {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-sm);
  color: var(--myron-color-text);
  font-size: var(--myron-typography-size-xl);
  font-weight: var(--myron-typography-weight-bold);
  text-decoration: none;
}

.myron-site__brand-logo-frame {
  width: auto;
  height: var(--myron-size-control-lg);
  max-width: min(calc(var(--myron-size-control-lg) * 3), 100%);
  aspect-ratio: var(--myron-site-logo-aspect-ratio, 3 / 1);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.myron-site__brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.myron-site__nav,
.myron-site__nav-list--level-0,
.myron-site__utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--myron-space-md);
}

.myron-site__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.myron-site__nav-item {
  position: relative;
}

.myron-site__nav-item-row {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
}

.myron-site__nav-panel {
  display: contents;
}

.myron-site__nav-panel-header,
.myron-site__nav-toggle,
.myron-site__nav-close {
  display: none;
}

.myron-site__nav a,
.myron-site__nav a:visited,
.myron-site__nav a:active {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
  text-decoration: none;
}

.myron-site__nav a:hover,
.myron-site__nav a[aria-current="page"],
.myron-site__nav-item--active > .myron-site__nav-item-row > .myron-site__nav-link {
  color: var(--myron-color-text);
}

.myron-site__submenu-toggle {
  width: var(--myron-size-control-sm);
  min-width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--myron-radius-sm);
  color: var(--myron-color-text-muted);
}

.myron-site__nav-list[data-myron-public-submenu] {
  position: absolute;
  top: calc(100% + var(--myron-space-xs));
  left: 0;
  z-index: var(--myron-z-dropdown, 10);
  min-width: calc(var(--myron-size-control-lg) * 4);
  display: none;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
  box-shadow: var(--myron-shadow-sm);
}

.myron-site__nav-list[data-myron-public-submenu][data-state="open"],
.myron-site__nav-item--has-children:hover > .myron-site__nav-list[data-myron-public-submenu],
.myron-site__nav-item--has-children:focus-within > .myron-site__nav-list[data-myron-public-submenu] {
  display: grid;
}

.myron-site__canvas {
  padding: var(--myron-space-none) var(--myron-space-none) var(--myron-space-s9);
}

.myron-public-page {
  display: grid;
  gap: 0;
}

/* APO-462 · Match the deferred public heading cascade at first paint. */
.myron-public-page h1.myron-heading,
.myron-public-page .myron-heading[data-level="1"] {
  font-size: var(--myron-typography-fluid-display);
  line-height: var(--myron-typography-line-display);
}

.myron-public-page h2.myron-heading,
.myron-public-page .myron-heading[data-level="2"] {
  font-size: var(--myron-typography-fluid-section);
}

.myron-public-page h3.myron-heading,
.myron-public-page .myron-heading[data-level="3"] {
  font-size: var(--myron-typography-fluid-subhead);
}

.myron-heading {
  margin: 0;
}

.myron-button {
  min-width: var(--myron-size-hit-target-min);
  height: var(--myron-size-control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--myron-space-xs);
  padding: 0 var(--myron-space-md);
  border: var(--myron-border-hairline) solid transparent;
  border-radius: var(--myron-radius-sm);
  font-family: var(--myron-font-role-ui-family, var(--myron-typography-font-sans));
  font-size: var(--myron-typography-size-md);
  font-weight: var(--myron-font-role-ui-weight, var(--myron-typography-weight-medium));
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.myron-button--intent-neutral.myron-button--appearance-solid,
.myron-button--intent-primary.myron-button--appearance-solid {
  background-color: var(--myron-color-accent);
  color: var(--myron-color-accent-text);
  border-color: var(--myron-color-accent);
}

.myron-button--intent-neutral.myron-button--appearance-outline {
  background-color: transparent;
  color: var(--myron-color-text);
  border-color: var(--myron-color-border-strong);
}

.myron-hero-simple {
  display: block;
  width: 100%;
  padding: var(--myron-space-2xl) var(--myron-layout-gutter-md);
}

.myron-hero-simple__inner {
  max-width: var(--myron-layout-container-md);
  margin: auto;
}

.myron-hero-simple--layout-centered .myron-hero-simple__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.myron-hero-simple--layout-split .myron-hero-simple__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 2), 100%), 1fr));
  gap: var(--myron-space-xl);
  align-items: center;
}

.myron-hero-simple__content {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
}

.myron-hero-simple__headline {
  font-family: var(--myron-font-role-headlines-family, var(--myron-typography-font-sans));
  font-size: var(--myron-typography-fluid-display);
  font-style: var(--myron-font-role-headlines-style, normal);
  font-weight: var(--myron-font-role-headlines-weight, var(--myron-typography-weight-bold));
  margin-bottom: var(--myron-space-sm);
  overflow-wrap: anywhere;
}

.myron-hero-simple__subhead {
  margin-bottom: var(--myron-space-md);
}

.myron-hero-simple__media {
  width: 100%;
}

.myron-hero-with-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  flex-wrap: wrap;
  margin-top: var(--myron-space-md);
}

.myron-hero-with-cta__eyebrow {
  color: var(--myron-color-text-muted);
  font-family: var(--myron-font-role-eyebrow-family, var(--myron-font-role-micro-family, var(--myron-typography-font-mono)));
  font-size: var(--myron-font-role-eyebrow-size, var(--myron-font-role-micro-size, var(--myron-typography-size-xs)));
  font-style: var(--myron-font-role-eyebrow-style, var(--myron-font-role-micro-style, normal));
  font-weight: var(--myron-font-role-eyebrow-weight, var(--myron-font-role-micro-weight, var(--myron-typography-weight-medium)));
  letter-spacing: var(--myron-typography-tracking-wide);
  text-transform: uppercase;
}

.myron-public-hero-media {
  width: 100%;
  min-height: calc(var(--myron-space-s12) + var(--myron-space-s12) + var(--myron-space-s10));
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface-alt);
  object-fit: cover;
}

.myron-public-hero-media span {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.myron-hero-with-cta--cinematic {
  --myron-hero-overlay-mix: 68%;
  align-items: center;
  background: var(--myron-color-bg);
  color: var(--myron-color-text);
  display: flex;
  isolation: isolate;
  min-height: var(--myron-layout-viewport-height);
  overflow: hidden;
  position: relative;
}

.myron-hero-with-cta--cinematic::before {
  background: color-mix(in srgb, var(--myron-color-bg) var(--myron-hero-overlay-mix), transparent);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.myron-hero-with-cta--cinematic .myron-hero-simple__inner {
  margin: auto;
  max-width: var(--myron-layout-container-md);
  position: static;
  width: 100%;
}

.myron-hero-with-cta--cinematic .myron-hero-simple__content {
  max-width: var(--myron-layout-container-sm);
  position: relative;
  width: 100%;
  z-index: 2;
}

.myron-hero-with-cta--content-align-center .myron-hero-simple__content {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.myron-hero-with-cta--content-align-center .myron-hero-with-cta__actions {
  justify-content: center;
}

.myron-hero-with-cta--content-position-top .myron-hero-simple__inner {
  margin-block: 0 auto;
}

.myron-hero-with-cta--content-position-center .myron-hero-simple__inner {
  margin-block: auto;
}

.myron-hero-with-cta--content-position-bottom .myron-hero-simple__inner {
  margin-block: auto 0;
}

.myron-hero-with-cta--content-width-md .myron-hero-simple__content {
  max-width: var(--myron-layout-container-md);
}

.myron-hero-with-cta--content-width-lg .myron-hero-simple__content {
  max-width: var(--myron-layout-container-lg);
}

.myron-hero-with-cta--copy-width-narrow .myron-hero-simple__subhead {
  max-width: calc(var(--myron-layout-container-sm) - (var(--myron-space-s10) * 2));
  width: 100%;
}

.myron-hero-with-cta--subhead-size-md .myron-hero-simple__subhead {
  font-size: var(--myron-typography-size-md);
}

.myron-hero-with-cta--subhead-size-lg .myron-hero-simple__subhead {
  font-size: var(--myron-typography-size-xl);
}

.myron-hero-with-cta--overlay-off {
  --myron-hero-overlay-mix: 0%;
}

.myron-hero-with-cta--overlay-faint {
  --myron-hero-overlay-mix: 20%;
}

.myron-hero-with-cta--overlay-subtle {
  --myron-hero-overlay-mix: 32%;
}

.myron-hero-with-cta--overlay-medium {
  --myron-hero-overlay-mix: 68%;
}

.myron-hero-with-cta--overlay-strong {
  --myron-hero-overlay-mix: 82%;
}

.myron-hero-with-cta--cinematic .myron-public-hero-media {
  border: 0;
  border-radius: 0;
  display: block;
  height: 100%;
  inset: 0;
  max-width: none;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.myron-hero-with-cta--cinematic .myron-hero-with-cta__eyebrow {
  color: var(--myron-color-text);
}

.myron-hero-with-cta--eyebrow-tone-accent .myron-hero-with-cta__eyebrow {
  color: var(--myron-color-accent);
}

.myron-hero-with-cta--eyebrow-tone-muted .myron-hero-with-cta__eyebrow {
  color: var(--myron-color-text-muted);
}

.myron-hero-with-cta--eyebrow-weight-regular .myron-hero-with-cta__eyebrow {
  font-weight: var(--myron-typography-weight-regular);
}

.myron-hero-with-cta--eyebrow-weight-bold .myron-hero-with-cta__eyebrow {
  font-weight: var(--myron-typography-weight-bold);
}

@media (max-width: 720px) {
  .myron-site__masthead {
    padding: var(--myron-space-sm) var(--myron-layout-gutter-md);
  }

  .myron-site__nav-list--level-0 {
    gap: var(--myron-space-sm);
  }

  .myron-hero-simple {
    padding: var(--myron-space-xl) var(--myron-layout-gutter-sm);
  }
}
