/* MRO Shared Styles: resets and helpers used by every section. Values come from theme.json tokens. */

/* ---- Resets WordPress does not ship ---- */
[class*="mro-"],
[class*="mro-"]::before,
[class*="mro-"]::after,
[class*="mro-"] * { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--wp--custom--layout--header-h) + var(--wp--preset--spacing--40) + var(--wp-admin--admin-bar--height, 0px));
}

:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
}

/* Sections sit flush; blockGap must not open white strips between them */
.wp-site-blocks > * { margin-block-start: 0; }
.entry-content > [class*="mro-"] { margin-block-start: 0; }

/* ---- Eyebrow ---- */
.mro-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  margin: 0 0 var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  line-height: var(--wp--custom--leading--normal);
  letter-spacing: var(--wp--custom--tracking--caps);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-deep);
}
.mro-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: var(--wp--preset--spacing--70);
  height: 2px;
  background: currentColor;
}
.mro-eyebrow--light { color: var(--wp--preset--color--mint); }

/* ---- Buttons (markup buttons inside custom blocks; core buttons use theme.json) ---- */
.mro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  min-height: var(--wp--custom--icon--box);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--standard),
              color var(--wp--custom--duration--fast) var(--wp--custom--ease--standard),
              border-color var(--wp--custom--duration--fast) var(--wp--custom--ease--standard),
              box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease--standard);
}
.mro-btn:hover { text-decoration: none; }
.mro-btn svg { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); flex-shrink: 0; }

.mro-btn--outline {
  border-color: var(--wp--preset--color--accent-strong);
  background: transparent;
  color: var(--wp--preset--color--accent-deep);
  box-shadow: none;
}
.mro-btn--outline:hover {
  border-color: var(--wp--preset--color--accent-strong);
  background: var(--wp--preset--color--mint-pale);
  color: var(--wp--preset--color--accent-deep);
  box-shadow: none;
}
.mro-btn--lg {
  min-height: calc(var(--wp--custom--icon--box) + var(--wp--preset--spacing--30));
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
  font-size: var(--wp--preset--font-size--md);
}

.wp-block-button__link { transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--standard), box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease--standard); }

/* ---- Mask icons: add class mro-ico-<name> to a block; the icon draws in currentColor ---- */
.mro-ico-pin { --mro-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6-7-11.5a7 7 0 0 1 14 0C19 15 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.mro-ico-phone { --mro-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.4v2.8a1.9 1.9 0 0 1-2 1.9 18.6 18.6 0 0 1-8.1-2.9 18.3 18.3 0 0 1-5.6-5.6A18.6 18.6 0 0 1 2.4 4.4a1.9 1.9 0 0 1 1.9-2h2.8a1.9 1.9 0 0 1 1.9 1.6c.1.9.4 1.8.7 2.6a1.9 1.9 0 0 1-.4 2L8.1 9.8a15 15 0 0 0 5.6 5.6l1.2-1.2a1.9 1.9 0 0 1 2-.4c.8.3 1.7.6 2.6.7a1.9 1.9 0 0 1 1.6 1.9z'/%3E%3C/svg%3E"); }
.mro-ico-whatsapp { --mro-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 20.4l1.2-4.3A8.6 8.6 0 1 1 8 19.3z'/%3E%3Cpath d='M9 8.5c0 3.6 2.9 6.5 6.5 6.5l1.2-1.5-2.2-1.2-1 .9a5 5 0 0 1-2.6-2.6l.9-1-1.3-2.2z'/%3E%3C/svg%3E"); }
.mro-ico-star,
.mro-stars { --mro-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3.4l2.6 5.4 5.9.8-4.3 4.1 1 5.9L12 16.8l-5.2 2.8 1-5.9-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E"); }

[class*="mro-ico-"]:not(.wp-block-button):not(.wp-block-buttons) { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); }
[class*="mro-ico-"]:not(.wp-block-button):not(.wp-block-buttons)::before,
.wp-block-button[class*="mro-ico-"] > .wp-block-button__link::before {
  content: "";
  flex-shrink: 0;
  width: var(--wp--custom--icon--sm);
  height: var(--wp--custom--icon--sm);
  background-color: currentColor;
  -webkit-mask: var(--mro-ico) center / contain no-repeat;
  mask: var(--mro-ico) center / contain no-repeat;
}
.wp-block-button[class*="mro-ico-"] > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
}

/* Five stars in a row, before the text */
.mro-stars { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); }
.mro-stars::before {
  content: "";
  flex-shrink: 0;
  width: 5em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--mro-ico) 0 0 / 1em 1em repeat-x;
  mask: var(--mro-ico) 0 0 / 1em 1em repeat-x;
}

/* ---- Section frame (every section block) ---- */
.mro-section {
  padding-block: var(--wp--custom--layout--section-pad);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}
.mro-section--alt { background: var(--wp--preset--color--base-alt); }
.mro-section .mro-container {
  width: 100%;
  max-width: calc(var(--wp--style--global--content-size) + var(--wp--custom--layout--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--gutter);
}

/* Static-site base rules, scoped to sections and kept at zero specificity so components win */
:where(.mro-section, .mro-footer) :where(h1, h2, h3, h4) { margin: 0; line-height: var(--wp--custom--leading--tight); }
:where(.mro-section, .mro-footer) :where(p) { margin: 0 0 var(--wp--preset--spacing--40); }
:where(.mro-section, .mro-footer) :where(p:last-child) { margin-bottom: 0; }
:where(.mro-section, .mro-footer) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.mro-section, .mro-footer) :where(blockquote, figure, dl, dd) { margin: 0; }
:where(.mro-section, .mro-footer) :where(img, svg) { display: block; max-width: 100%; }
:where(.mro-section, .mro-footer) :where(img) { height: auto; }
:where(.mro-section, .mro-footer) :where(button) { font: inherit; }

.mro-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

.mro-section-head { margin-bottom: var(--wp--preset--spacing--90); }
.mro-section-head--split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: var(--wp--custom--layout--grid-gap);
}
.mro-section .mro-section-head--split .mro-section-title { margin-bottom: 0; }
.mro-section-head--center {
  max-width: var(--wp--custom--layout--measure);
  margin-inline: auto;
  text-align: center;
}
.mro-section-head--center .mro-eyebrow { justify-content: center; }

.mro-section .mro-section-title {
  margin: 0 0 var(--wp--preset--spacing--50);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xxxl);
  font-weight: 400;
  line-height: var(--wp--custom--leading--display);
  letter-spacing: var(--wp--custom--tracking--display);
  text-transform: uppercase;
  color: inherit;
}
.mro-section .mro-section-lead {
  max-width: var(--wp--custom--layout--measure);
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--muted);
}

/* Square icon tile */
.mro-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--wp--custom--icon--box);
  height: var(--wp--custom--icon--box);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--mint-soft);
  color: var(--wp--preset--color--accent-deep);
  font-size: var(--wp--custom--icon--md);
}
.mro-icon-box--sm {
  width: calc(var(--wp--custom--icon--box) * 0.8);
  height: calc(var(--wp--custom--icon--box) * 0.8);
  font-size: var(--wp--custom--icon--sm);
}

/* Row of five stars drawn with inline SVG */
.mro-star-row {
  display: inline-flex;
  gap: calc(var(--wp--preset--spacing--10) / 2);
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--custom--icon--sm);
  vertical-align: middle;
}

/* Arrow link */
.mro-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  font-weight: 600;
  color: var(--wp--preset--color--accent-deep);
  text-decoration: none;
}
.mro-text-link .mro-icon { transition: transform var(--wp--custom--duration--fast) var(--wp--custom--ease--standard); }
.mro-text-link:hover { color: var(--wp--preset--color--accent-deep); text-decoration: underline; text-underline-offset: var(--wp--preset--spacing--10); }
.mro-text-link:hover .mro-icon { transform: translateX(var(--wp--preset--spacing--10)); }

/* Dashed badge for facts the owner still has to confirm */
.mro-tbc {
  display: inline-block;
  padding: 0 var(--wp--preset--spacing--20);
  border: 1px dashed var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--mint-soft);
  color: var(--wp--preset--color--accent-deep);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  line-height: var(--wp--custom--leading--normal);
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
}

/* Round green tick list */
.mro-tick-list { display: grid; gap: var(--wp--preset--spacing--30); }
.mro-tick-list li { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--30); }
.mro-tick-list .mro-icon {
  width: calc(1em + var(--wp--preset--spacing--10));
  height: calc(1em + var(--wp--preset--spacing--10));
  margin-top: calc(var(--wp--preset--spacing--10) / 2);
  padding: calc(var(--wp--preset--spacing--10) / 2);
  border-radius: var(--wp--custom--radius--full);
  background: var(--wp--preset--color--accent-strong);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--base);
}
.mro-tick-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); }

/* List with a small icon tile per line */
.mro-include-list { display: grid; gap: var(--wp--preset--spacing--30); }
.mro-include-list li { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); line-height: var(--wp--custom--leading--tight); }

/* Extra button looks */
.mro-btn .mro-icon { font-size: var(--wp--custom--icon--sm); }
.mro-btn--light {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--accent-deep);
  box-shadow: var(--wp--preset--shadow--md);
}
.mro-btn--light:hover {
  background: var(--wp--preset--color--mint-soft);
  color: var(--wp--preset--color--accent-deep);
}

@media (max-width: 1023.98px) {
  .mro-section-head--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .mro-tick-list--grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [class*="mro-"],
  [class*="mro-"]::before,
  [class*="mro-"]::after,
  [class*="mro-"] *,
  .wp-block-button__link {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}