/* =========================================================================
   Morstar Media - site styles
   Colours, fonts and spacing come from theme.json. This file holds the
   things block settings cannot express: the hero scrim, the hairline grids,
   the numbered section labels and the hover behaviour.
   ========================================================================= */

:root {
  --mm-navy:       #071322;
  --mm-navy-panel: #0B1B2E;
  --mm-gold:       #C9A227;
  --mm-gold-light: #E8CE8A;
  --mm-cream:      #F4F0E6;
  --mm-slate:      #8FA1B6;
  --mm-line:       rgba(201, 162, 39, 0.16);
  --mm-line-strong:rgba(201, 162, 39, 0.38);
  --mm-wrap:       1240px;
}

body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }

/* --- shared label used by every section -------------------------------- */
.mm-label {
  font-family: var(--wp--preset--font-family--body), sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--mm-slate);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}
.mm-label::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: var(--mm-line-strong);
  flex: 0 0 auto;
}

/* --- reveal on scroll --------------------------------------------------- */
.mm-anim { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.mm-anim.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mm-anim { opacity: 1; transform: none; transition: none; } }

/* =========================================================================
   Header
   ========================================================================= */
/* The header template part renders inside <header class="wp-block-template-part">,
   and a sticky element can only stick within its own parent's box. That wrapper
   is exactly as tall as the header, so sticky had nothing to travel through and
   the bar scrolled away. The wrapper is what has to be sticky. */
.wp-site-blocks > header,
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* No gap between the header and the hero. WordPress puts a block gap between
   every top level block, which showed as a strip of navy above the video. */
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0 !important; }
.wp-site-blocks > main > .mm-hero:first-child,
.mm-hero.wp-block-cover:first-child { margin-top: 0 !important; }

.mm-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 19, 34, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--mm-line);
}
.mm-header .wp-block-site-logo,
.mm-landing .wp-block-site-logo { width: auto !important; max-width: none; }
.mm-header .wp-block-site-logo img { height: 60px !important; width: auto !important; max-width: none; }
.mm-landing .wp-block-site-logo img { height: 64px !important; width: auto !important; max-width: none; }
.mm-header .wp-block-group { min-height: 96px; }
.mm-header .wp-block-navigation a { padding: 8px 13px; border-radius: 2px; text-decoration: none; }
.mm-header .wp-block-navigation a:hover { color: var(--mm-cream); background: rgba(255,255,255,.05); }
.mm-header .wp-block-navigation .current-menu-item > a { color: var(--mm-cream); }
.mm-header .wp-block-navigation .current-menu-item > a::after {
  content: ""; display: block; height: 1.5px; background: var(--mm-gold); margin-top: 5px;
}

/* Classic menus rendered by [morstar_menu]. Polylang free cannot translate a
   Navigation block, so the menus are classic ones, one per language. */
.mm-menu ul { list-style: none; margin: 0; padding: 0; }
.mm-menu li { margin: 0; }
.mm-menu a { color: var(--mm-slate); }

/* The header is one row. Logo, menu, switcher and button never stack. */
.mm-header > .wp-block-group > .wp-block-group { flex-wrap: nowrap; }
.mm-header .wp-block-group { column-gap: 18px; }
.mm-menu-main { min-width: 0; }
.mm-menu-main .mm-menu-list { display: flex; flex-wrap: nowrap; align-items: center; }
.mm-header .mm-menu a {
  display: block; white-space: nowrap;
  font-size: 0.95rem; padding: 8px 11px;
}
.mm-menu-toggle { display: none; }
@media (max-width: 1180px) {
  .mm-menu-toggle {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 44px; padding: 9px 14px;
    background: none; border: 1px solid var(--mm-line); border-radius: 2px;
    color: var(--mm-cream); font: inherit; font-size: 12px;
    letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  }
  .mm-menu-bars,
  .mm-menu-bars::before,
  .mm-menu-bars::after {
    display: block; width: 16px; height: 1.5px; background: var(--mm-gold); content: "";
  }
  .mm-menu-bars { position: relative; }
  .mm-menu-bars::before { position: absolute; top: -5px; }
  .mm-menu-bars::after  { position: absolute; top: 5px; }
  .mm-menu-main .mm-menu-panel {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--mm-navy);
    border-bottom: 1px solid var(--mm-line);
    padding: 6px 20px 16px;
  }
  .mm-menu-main.is-open .mm-menu-panel { display: block; }
  .mm-menu-main .mm-menu-list { display: block; }
  .mm-menu-main .mm-menu-list a { display: block; padding: 12px 0; }
}

/* Polylang switcher */
.mm-lang ul { display: flex; list-style: none; margin: 0; padding: 0; border: 1px solid var(--mm-line); border-radius: 2px; overflow: hidden; }
.mm-lang li { margin: 0; }
.mm-lang a {
  display: block; padding: 6px 11px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mm-slate); text-decoration: none;
}
.mm-lang a:hover { color: var(--mm-cream); }
.mm-lang .current-lang a { background: var(--mm-gold); color: var(--mm-navy); }

/* =========================================================================
   Hero
   ========================================================================= */
.mm-hero.wp-block-cover {
  min-height: calc(100vh - 96px);
  border-bottom: 1px solid var(--mm-line);
  align-items: center;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
/* Hero stacking order, lowest to highest:
   0 still image, 1 video, 2 gradient scrim, 3 text.
   The video host div is injected right after the opening cover div, so it sits
   BEFORE the image in the DOM. Without an explicit z-index the image would
   paint over it and the video would never be seen. */
.mm-hero .wp-block-cover__image-background { object-position: center 42%; z-index: 0; }
.mm-hero-video { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.mm-hero-video-el {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.mm-hero .wp-block-cover__background { z-index: 2; }
.mm-hero .wp-block-cover__inner-container {
  z-index: 3;
  max-width: min(var(--mm-wrap), calc(100% - 40px));
  width: 100%; flex: 1 1 auto; margin: 0 auto;
}
/* The cover's constrained layout puts auto margins on every child, which
   centres the headline inside the column. The hero is left-aligned, and the
   scrim is darkest on the left, so the text must sit there.
   WordPress writes those margins as `auto !important`, so this has to match
   that weight to win. Verified against the constrained layout source in
   @wordpress/block-editor, which emits `margin-left: auto !important`. */
.mm-hero .wp-block-cover__inner-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.mm-hero h1 { max-width: 15ch; line-height: 0.99; }
.mm-hero .mm-lede { font-size: clamp(1.02rem, 1.55vw, 1.22rem); color: #CFD6E0; max-width: 54ch; }
.mm-hero .mm-label { color: var(--mm-slate); }
.mm-hero .mm-label::before { width: 5px; height: 5px; border-radius: 50%; background: var(--mm-gold); }

/* stat strip under the hero */
.mm-strip { border-bottom: 1px solid var(--mm-line); background: rgba(8,21,38,.62); }
/* margin:0 alone left-aligned the strip against the window edge. It has to
   line up with the hero text and every section below it. */
.mm-strip .wp-block-columns {
  gap: 1px; background: var(--mm-line);
  margin: 0 auto;
  max-width: min(var(--mm-wrap), calc(100% - 40px));
}
.mm-strip .wp-block-column { background: rgba(7,19,34,.94); padding: 22px 26px; }
.mm-strip .mm-k { font-family: var(--wp--preset--font-family--display), serif; font-size: 1.7rem; line-height: 1; display: block; margin: 0; }
.mm-strip .mm-v { color: var(--mm-slate); font-size: 12.5px; line-height: 1.4; margin: 7px 0 0; }

/* =========================================================================
   Sections
   ========================================================================= */
/* Section rhythm. 6.5rem top and bottom meant 13rem between every section,
   which read as endless scrolling on a phone. */
.mm-sec { padding-top: 4.25rem; padding-bottom: 4.25rem; border-bottom: 1px solid var(--mm-line); }
@media (max-width: 860px) {
  .mm-sec { padding-top: 2.75rem; padding-bottom: 2.75rem; }
}
.mm-more { margin-top: 2rem; }
.mm-sec.is-panel { background: var(--mm-navy-panel); }
.mm-sec > .wp-block-group__inner-container,
.mm-sec .mm-wrap { max-width: min(var(--mm-wrap), calc(100% - 40px)); margin-left: auto; margin-right: auto; }

/* two column section head: label + h2 on the left, prose on the right */
.mm-head.wp-block-columns { gap: 3.5rem; margin-bottom: 3.75rem; align-items: flex-start; }
.mm-head h2 { max-width: 19ch; }
.mm-head .mm-sub { color: var(--mm-slate); font-size: 1.03rem; }
.mm-head .mm-sub p:last-child { margin-bottom: 0; }

/* --- card grid ---------------------------------------------------------- */
.mm-grid.wp-block-columns {
  gap: 1px;
  background: var(--mm-line);
  border: 1px solid var(--mm-line);
  margin: 0;
}
.mm-grid .wp-block-column {
  background: var(--mm-navy);
  padding: 34px 30px 36px;
  position: relative;
  transition: background .2s;
}
.mm-grid .wp-block-column:hover { background: var(--mm-navy-panel); }
.mm-grid .wp-block-column::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px;
  background: var(--mm-gold); transition: width .28s ease;
}
.mm-grid .wp-block-column:hover::before { width: 56px; }
.mm-grid .mm-ix { color: var(--mm-slate); font-size: 11px; font-weight: 600; letter-spacing: .17em; margin: 0 0 16px; }
.mm-grid h3 { font-size: 1.28rem; margin: 0 0 12px; line-height: 1.2; }
.mm-grid p { color: var(--mm-slate); font-size: 1.01rem; line-height: 1.62; }
.mm-grid ul { list-style: none; margin: 14px 0 0; padding: 0; }
.mm-grid li { color: var(--mm-slate); font-size: 0.97rem; padding: 6px 0 6px 16px; position: relative; line-height: 1.55; }

/* The book page's Author panel. Twelve stacked label/value paragraphs made
   this column tower over "Who it is for" beside it. Paired on one line each,
   it is half the height and reads as a spec table. */
.mm-grid .wp-block-column:has(> .mm-k) {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 30px;
  row-gap: 13px;
  align-content: start;
}
.mm-grid .wp-block-column:has(> .mm-k) > h3,
.mm-grid .wp-block-column:has(> .mm-k) > .mm-ix { grid-column: 1 / -1; }
.mm-grid .mm-k {
  font-size: 10.5px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--mm-slate); margin: 0;
  align-self: center;
}
.mm-grid .mm-v { font-size: 1.02rem; color: var(--mm-cream); margin: 0; }
@media (max-width: 600px) {
  .mm-grid .wp-block-column:has(> .mm-k) { column-gap: 18px; }
}
.mm-grid li::before { content: ""; position: absolute; left: 0; top: 14px; width: 5px; height: 1px; background: var(--mm-gold); }

/* --- row list ----------------------------------------------------------- */
/* Read as a table. A full frame, a rule between every row, and a rule between
   the heading cell and the detail cell, so the eye has an edge to follow. */
.mm-rows {
  border: 1px solid var(--mm-line);
  background: rgba(8, 21, 38, 0.45);
}
.mm-rows .mm-row.wp-block-columns {
  gap: 0;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--mm-line);
  align-items: stretch;
  position: relative;
  transition: background .2s;
}
.mm-rows .mm-row.wp-block-columns:last-child { border-bottom: 0; }
.mm-rows .mm-row > .wp-block-column { padding: 30px 30px 32px; }
.mm-rows .mm-row > .wp-block-column + .wp-block-column {
  border-left: 1px solid var(--mm-line);
}
.mm-rows .mm-row::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--mm-gold); transform: scaleY(0); transform-origin: top;
  transition: transform .28s ease;
}
.mm-rows .mm-row:hover { background: var(--mm-navy-panel); }
.mm-rows .mm-row:hover::before { transform: scaleY(1); }
.mm-rows .mm-ix { color: var(--mm-gold); font-size: 11.5px; font-weight: 600; letter-spacing: .17em; margin: 0 0 12px; }
.mm-rows h3 { font-size: 1.42rem; margin: 0; line-height: 1.24; }
.mm-rows p { color: #B7C3D2; font-size: 1.04rem; line-height: 1.66; margin: 0; max-width: 60ch; }
.mm-rows ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 8px 26px;
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--mm-line);
}
.mm-rows li { color: var(--mm-slate); font-size: 0.97rem; line-height: 1.55; padding: 0 0 0 15px; position: relative; }
.mm-rows li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: var(--mm-gold); }
@media (max-width: 860px) {
  .mm-rows .mm-row > .wp-block-column { padding: 24px 20px; }
  .mm-rows .mm-row > .wp-block-column + .wp-block-column {
    border-left: 0;
    border-top: 1px solid var(--mm-line);
    padding-top: 20px;
  }
  .mm-rows ul { grid-template-columns: 1fr; gap: 6px; }
}

/* --- statement lines ---------------------------------------------------- */
.mm-stmt .mm-line.wp-block-columns {
  gap: 1.6rem;
  padding: 26px 0;
  margin: 0;
  border-top: 1px solid var(--mm-line);
  align-items: baseline;
}
.mm-stmt .mm-line:last-of-type { border-bottom: 1px solid var(--mm-line); }
.mm-stmt .mm-n { font-size: 11px; font-weight: 600; letter-spacing: .17em; color: var(--mm-gold); margin: 0; }
.mm-stmt .mm-t {
  font-family: var(--wp--preset--font-family--display), serif;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.14; margin: 0;
}
.mm-stmt .mm-d { color: var(--mm-slate); font-size: 0.97rem; margin: 0; }

/* --- pull quote --------------------------------------------------------- */
.mm-pull { padding-top: 6rem; padding-bottom: 6rem; border-bottom: 1px solid var(--mm-line); }
.mm-pull .mm-q {
  font-family: var(--wp--preset--font-family--display), serif;
  font-size: clamp(1.55rem, 3.2vw, 2.5rem); line-height: 1.2; max-width: 24ch; margin: 0;
}
.mm-pull .mm-attr { color: var(--mm-slate); font-size: 0.845rem; margin: 1.9rem 0 0; display: flex; align-items: center; gap: 12px; }
.mm-pull .mm-attr::before { content: ""; width: 34px; height: 1px; background: var(--mm-gold); flex: 0 0 auto; }

/* =========================================================================
   Book
   ========================================================================= */
.mm-cover img {
  border: 1px solid var(--mm-line);
  box-shadow: 0 44px 90px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(201,162,39,.10);
}
.mm-cover { max-width: 380px; }
.mm-meta.wp-block-columns { gap: 1px; background: var(--mm-line); border: 1px solid var(--mm-line); margin: 0 0 1.9rem; flex-wrap: wrap; }
.mm-meta .wp-block-column { background: var(--mm-navy); padding: 16px 18px; }
.mm-meta .mm-k { font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--mm-slate); margin: 0; }
.mm-meta .mm-v { font-size: 0.95rem; margin: 5px 0 0; }

.mm-toc { border-top: 1px solid var(--mm-line); }
.mm-toc .mm-ch { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--mm-line); align-items: baseline; margin: 0; }
.mm-toc .mm-ch span:first-child { color: var(--mm-gold); font-size: 11px; font-weight: 600; letter-spacing: .14em; }

/* discreet Amazon line */
.mm-amz { margin: 1.4rem 0 0; color: var(--mm-slate); font-size: 0.82rem; }
.mm-amz a { color: var(--mm-slate); text-decoration: none; border-bottom: 1px solid var(--mm-line-strong); padding-bottom: 2px; }
.mm-amz a:hover { color: var(--mm-gold-light); }
.mm-amz-sep { margin: 0 9px; opacity: .5; }

/* =========================================================================
   Experience portrait
   ========================================================================= */
.mm-portrait { max-width: 360px; margin-left: auto; }
.mm-portrait img { width: 100%; border: 1px solid var(--mm-line); display: block; }
.mm-portrait { position: relative; }
.mm-portrait figcaption {
  border: 1px solid var(--mm-line); border-top: 0; background: var(--mm-navy-panel);
  padding: 16px 18px; text-align: left; font-size: 0.78rem; color: var(--mm-slate);
}
.mm-portrait figcaption strong {
  display: block; font-family: var(--wp--preset--font-family--display), serif;
  font-size: 1.2rem; font-weight: 400; color: var(--mm-cream); margin-bottom: 4px;
}

/* =========================================================================
   Contact
   ========================================================================= */
.mm-cal { border: 1px solid var(--mm-line); background: var(--mm-navy-panel); overflow: hidden; }
.mm-cal-note {
  padding: 18px 22px; border-bottom: 1px solid var(--mm-line);
  color: var(--mm-slate); font-size: 0.8rem; display: flex; gap: 10px; align-items: center;
}
.mm-cal-note strong { color: var(--mm-cream); font-weight: 600; }
.mm-cal-widget { background: var(--mm-navy-panel); }

.mm-details.wp-block-columns { gap: 1px; background: var(--mm-line); border: 1px solid var(--mm-line); margin: 0; flex-wrap: wrap; }
.mm-details .wp-block-column { background: var(--mm-navy); padding: 26px 24px; }
.mm-details .mm-k { font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--mm-slate); margin: 0; }
.mm-details .mm-v { font-size: 1.03rem; margin: 8px 0 0; }
.mm-details .mm-v a { color: var(--mm-cream); text-decoration: none; border-bottom: 1px solid var(--mm-gold); display: inline-block; padding: 10px 0 8px; }

/* =========================================================================
   CTA band
   ========================================================================= */
.mm-cta { background: var(--mm-navy-panel); padding-top: 6rem; padding-bottom: 6rem; border-bottom: 1px solid var(--mm-line); }
.mm-cta h2 { max-width: 16ch; }
.mm-cta p { color: var(--mm-slate); max-width: 50ch; }

/* secondary, outlined button style */
.wp-block-button.is-style-mm-outline .wp-block-button__link {
  background: transparent;
  color: var(--mm-cream);
  border: 1px solid var(--mm-line-strong);
}
.wp-block-button.is-style-mm-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--mm-cream);
  color: var(--mm-cream);
}

/* =========================================================================
   Footer
   ========================================================================= */
.mm-footer { padding-top: 4rem; padding-bottom: 2.5rem; color: var(--mm-slate); font-size: 0.86rem; }
.mm-footer .mm-fgrid { border-bottom: 1px solid var(--mm-line); padding-bottom: 2.75rem; gap: 2.5rem; }
.mm-footer .wp-block-site-logo img { height: 72px !important; width: auto !important; max-width: none; }
.mm-footer .wp-block-site-logo { width: auto !important; max-width: none; margin-bottom: 20px; }
.mm-footer h2, .mm-footer h4 {
  font-family: var(--wp--preset--font-family--body), sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  color: var(--mm-cream); margin: 0 0 1rem;
}
.mm-footer .wp-block-navigation { display: block; }
.mm-footer .wp-block-navigation ul { display: block; }
.mm-footer .wp-block-navigation a { display: block; padding: 5px 0; color: var(--mm-slate); text-decoration: none; }
.mm-footer .wp-block-navigation a:hover { color: var(--mm-cream); }
/* Social row. 44px targets so it is usable on a phone. */
.mm-social { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.mm-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--mm-line); border-radius: 2px;
  color: var(--mm-slate); text-decoration: none;
  transition: color .18s, border-color .18s, background .18s;
}
.mm-social-link:hover,
.mm-social-link:focus-visible {
  color: var(--mm-navy); background: var(--mm-gold); border-color: var(--mm-gold);
}
.mm-social-link svg { display: block; }

.mm-footer .mm-fbot { padding-top: 1.6rem; font-size: 0.8rem; }
.mm-legal { margin: 0; }
.mm-legal a { color: var(--mm-slate); text-decoration: none; }
.mm-legal a:hover { color: var(--mm-cream); }
.mm-legal-sep { margin: 0 10px; opacity: .5; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1000px) {
  .mm-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--mm-navy); }
  .mm-header .wp-block-group { min-height: 76px; }
  .mm-header .wp-block-site-logo img { height: 46px !important; }
  .mm-rows ul { columns: 1; }
}
@media (max-width: 781px) {
  /* core stacks columns here; restore the hairline look as stacked rows */
  .mm-grid.wp-block-columns,
  .mm-meta.wp-block-columns,
  .mm-details.wp-block-columns { gap: 1px; }
  .mm-hero.wp-block-cover { min-height: 78vh; }
  .mm-sec { padding-top: 4rem; padding-bottom: 4rem; }
  .mm-portrait { margin-left: 0; max-width: 300px; }
  .mm-toc .mm-ch { grid-template-columns: 42px minmax(0,1fr); gap: 12px; }
}


/* =========================================================================
   Starter Kit landing page
   No navigation by design: it is a conversion page, not a site page.
   ========================================================================= */
.mm-landing .mm-header,
.mm-landing .mm-footer .mm-fgrid { display: none; }
.mm-skcover { max-width: 190px; }
.mm-skcover img { border: 1px solid var(--mm-line); box-shadow: 0 30px 60px -26px rgba(0,0,0,.9); }
.mm-mlbox { background: var(--mm-navy-panel); border: 1px solid var(--mm-line); padding: 30px 28px 26px; }
.mm-mlbox .mm-mlt { font-family: var(--wp--preset--font-family--display), serif; font-size: 1.4rem; margin: 0; }
.mm-mlbox .mm-mls { color: var(--mm-slate); font-size: 0.82rem; margin: 6px 0 20px; }
.mm-mltrust { color: var(--mm-slate); font-size: 0.78rem; margin: 14px 0 0; text-align: center; }
.mm-consent { color: var(--mm-slate); font-size: 0.78rem; line-height: 1.6; max-width: 70ch; }


/* =========================================================================
   Back to top
   Injected site-wide from functions.php, so it appears on every template
   including the Starter Kit landing page. Hidden until you are past the hero.
   ========================================================================= */
.mm-top {
  position: fixed; right: 28px; bottom: 28px; z-index: 70;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  background: rgba(11, 27, 46, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--mm-line-strong); border-radius: 2px;
  color: var(--mm-gold-light);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s, background .18s, border-color .18s, color .18s;
}
.mm-top.is-on { opacity: 1; visibility: visible; transform: none; }
.mm-top:hover { background: var(--mm-gold); border-color: var(--mm-gold); color: var(--mm-navy); }
.mm-top:focus-visible { outline: 2px solid var(--mm-gold-light); outline-offset: 3px; }
.mm-top svg { width: 17px; height: 17px; display: block; }
@media (max-width: 700px) { .mm-top { right: 16px; bottom: 16px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .mm-top { transition: opacity .01ms, visibility .01ms; } }


/* =========================================================================
   Touch targets and skip link
   ========================================================================= */
@media (hover: none), (max-width: 1000px) {
  .mm-lang a { padding: 12px 16px; }
  .mm-amz a, .mm-legal a { display: inline-block; padding: 11px 0; }
  .mm-footer .wp-block-navigation a { padding: 11px 0; }
}
.mm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--mm-gold); color: var(--mm-navy);
  padding: 12px 18px; font-weight: 600; font-size: 14px; text-decoration: none;
}
.mm-skip:focus { left: 0; }