/**
 * MIU site chrome — Blocksy header/footer + content pages.
 * Tokens aligned with DESIGN.md / frontend.css (teal · gold · cream).
 */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,650&family=Instrument+Sans:wght@400;500;600;700&display=swap");

:root {
  --miu-primary: #0e6b62;
  --miu-primary-dark: #084940;
  --miu-primary-deep: #063c36;
  --miu-primary-soft: #e8f3f1;
  --miu-gold: #c9a45b;
  --miu-gold-soft: #ead8b5;
  --miu-cream: #f7f4ed;
  --miu-soft: #f3f7f5;
  --miu-ink: #243330;
  --miu-muted: #6d7c79;
  --miu-line: #dfe8e5;
  --miu-white: #ffffff;
  --miu-radius: 14px;
  --miu-radius-sm: 10px;
  --miu-shadow: 0 10px 28px rgba(6, 60, 54, 0.07);
  --miu-font-ui: "Instrument Sans", "Segoe UI", "Noto Sans", sans-serif;
  --miu-font-display: "Fraunces", Georgia, serif;
  --miu-max: 1120px;
  --miu-gutter: clamp(16px, 4vw, 28px);
  --miu-section-y: clamp(2.25rem, 4.5vw, 3.75rem);
}

/* —— Atmosphere —— */
body {
  font-family: var(--miu-font-ui);
  color: var(--miu-ink);
  background:
    radial-gradient(1200px 480px at 12% -10%, rgba(14, 107, 98, 0.07), transparent 55%),
    radial-gradient(900px 420px at 92% 8%, rgba(201, 164, 91, 0.1), transparent 50%),
    linear-gradient(180deg, var(--miu-cream) 0%, var(--miu-soft) 42%, #eef3f1 100%);
  background-attachment: fixed;
}

body .ct-drawer-canvas,
body .ct-panel-inner {
  background: var(--miu-cream);
}

/* —— Header: solid deep band (keep previous solid-header look) —— */
header#header,
header#header.ct-header,
.ct-header,
#header,
#header [data-row*="middle"],
#header [data-row*="top"],
header#header .ct-header,
header#header [data-device],
.ct-sticky-container header#header,
.ct-sticky-container .ct-header,
header#header[data-sticky],
#header[data-sticky] {
  --theme-link-initial-color: #ffffff !important;
  --theme-text-color: #ffffff !important;
  --theme-palette-color-1: var(--miu-primary) !important;
  --theme-palette-color-2: var(--miu-primary-deep) !important;
  background: var(--miu-primary-deep) !important;
  background-color: var(--miu-primary-deep) !important;
  border-bottom: 1px solid rgba(201, 164, 91, 0.35);
  box-shadow: none;
  backdrop-filter: none;
}

header#header .site-logo-container span,
header#header .site-title,
header#header .site-title a,
.ct-header .site-title,
.ct-header .site-title a,
.ct-header [data-id="logo"] a,
header#header [data-id="logo"] a,
header#header [data-id="logo"] span {
  font-family: var(--miu-font-display) !important;
  font-weight: 650 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em;
}

.header-menu-1 > ul > li > a,
.header-menu > ul > li > a,
header#header .menu > li > a,
.ct-header .menu > li > a,
header#header .header-menu-1 > ul > li > a,
header#header [data-id="menu"] a {
  font-family: var(--miu-font-ui) !important;
  font-size: 0.92rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.94) !important;
  padding-block: 0.55em !important;
  position: relative;
  transition: color 0.18s ease;
}

.header-menu-1 > ul > li > a::after,
.header-menu > ul > li > a::after,
header#header .menu > li > a::after,
.ct-header .menu > li > a::after {
  content: "";
  position: absolute;
  left: 0.65em;
  right: 0.65em;
  bottom: 0.2em;
  height: 2px;
  border-radius: 2px;
  background: var(--miu-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.header-menu-1 > ul > li > a:hover,
.header-menu > ul > li > a:hover,
header#header .menu > li > a:hover,
.ct-header .menu > li > a:hover,
.header-menu-1 > ul > li.current-menu-item > a,
.header-menu > ul > li.current-menu-item > a,
header#header .menu > li.current-menu-item > a,
.ct-header .menu > li.current-menu-item > a,
.header-menu-1 > ul > li.current-menu-ancestor > a,
.header-menu > ul > li.current-menu-ancestor > a {
  color: var(--miu-gold-soft) !important;
}

.header-menu-1 > ul > li > a:hover::after,
.header-menu > ul > li > a:hover::after,
header#header .menu > li > a:hover::after,
.ct-header .menu > li > a:hover::after,
.header-menu-1 > ul > li.current-menu-item > a::after,
.header-menu > ul > li.current-menu-item > a::after,
header#header .menu > li.current-menu-item > a::after,
.ct-header .menu > li.current-menu-item > a::after,
.header-menu-1 > ul > li.current-menu-ancestor > a::after,
.header-menu > ul > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* Dropdowns */
.header-menu .sub-menu,
.ct-header .sub-menu {
  border: 1px solid var(--miu-line) !important;
  border-radius: var(--miu-radius-sm) !important;
  background: var(--miu-white) !important;
  box-shadow: var(--miu-shadow) !important;
  padding: 8px !important;
}

.header-menu .sub-menu a,
.ct-header .sub-menu a {
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  color: var(--miu-ink) !important;
  border-radius: 8px;
}

.header-menu .sub-menu a:hover,
.ct-header .sub-menu a:hover {
  background: var(--miu-primary-soft) !important;
  color: var(--miu-primary-deep) !important;
}

/* Mobile drawer */
.ct-panel .menu > li > a,
.ct-header-trigger + * .menu a,
.offcanvas .menu a {
  font-family: var(--miu-font-ui) !important;
  font-weight: 650 !important;
  color: var(--miu-primary-deep) !important;
}

.ct-header-trigger,
.ct-toggle-close {
  color: #ffffff !important;
}

/* —— Buttons (Blocksy + WP blocks) —— */
.ct-button,
.ct-button-ghost,
.wp-block-button__link,
.button,
button.ct-button {
  font-family: var(--miu-font-ui) !important;
  font-weight: 700 !important;
  border-radius: var(--miu-radius-sm) !important;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.ct-button:not(.ct-button-ghost),
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.button:not(.ct-button-ghost) {
  background: var(--miu-primary) !important;
  border-color: var(--miu-primary) !important;
  color: #fff !important;
}

.ct-button:not(.ct-button-ghost):hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--miu-primary-deep) !important;
  border-color: var(--miu-primary-deep) !important;
}

.ct-button-ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--miu-primary-deep) !important;
  border: 1px solid rgba(14, 107, 98, 0.45) !important;
}

.ct-button-ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--miu-cream) !important;
  border-color: var(--miu-gold) !important;
}

/* —— Layout system: shell, top gap, bleed —— */

/* Allow full-bleed bands (Blocksy #main-container clips 100vw breakouts) */
body:has(.miu-bleed) #main-container,
body:has(.miu-hero) #main-container {
  overflow-x: visible;
}

body:has(.miu-bleed),
body:has(.miu-hero) {
  overflow-x: clip;
}

/* Designed pages: no Blocksy title band under the solid header */
.page:has(.miu-schema) .hero-section,
.page:has(.miu-gb) .hero-section,
.page:has(.miu-cwrap) .hero-section,
.page:has(.miu-course-island) .hero-section,
.home .hero-section,
.single-miu_course .hero-section,
.single-miu_instructor .hero-section,
/* Plain pages: avoid Blocksy title + content h1 double-stack */
.page .hero-section:has(~ .entry-content h1) {
  display: none !important;
}

/* Plain pages need breathing room once the title band is gone */
.page:not(:has(.miu-schema)):not(:has(.miu-gb)):not(:has(.miu-cwrap)) .ct-container-full,
.page:not(:has(.miu-schema)):not(:has(.miu-gb)):not(:has(.miu-cwrap)) .ct-container {
  padding-top: 1.75rem;
}

/* Kill top vertical spacing when a designed hero owns the first viewport */
.page:has(.miu-hero) .ct-container-full[data-vertical-spacing*="top"],
.page:has(.miu-hero) .ct-container[data-vertical-spacing*="top"],
.home .ct-container-full[data-vertical-spacing*="top"] {
  padding-top: 0 !important;
}

.page:has(.miu-hero) .ct-container-full,
.home .ct-container-full {
  padding-inline: 0;
}

/* Entry shell — typography only; width owned below */
.entry-content,
.ct-container .entry-content,
.wp-block-post-content,
.page .entry-content,
.single .entry-content {
  font-family: var(--miu-font-ui);
  color: var(--miu-ink);
  line-height: 1.7;
}

/* Designed MIU markup: full width of the theme container, no card chrome */
.entry-content:has(.miu-schema),
.entry-content:has(.miu-gb),
.entry-content:has(.miu-cwrap),
.entry-content:has(.miu-course-island),
.entry-content:has(.miu-bleed),
.entry-content:has(.miu-hero) {
  max-width: none !important;
  width: 100%;
  margin-inline: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Full-bleed: prefer container-width when parents are already edge-to-edge;
   fall back to viewport breakout when nested in a padded shell */
.miu-bleed {
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.ct-container:not(.ct-container-full) .miu-bleed,
.entry-content.is-layout-constrained .miu-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.miu-bleed__inner,
.miu-hero .miu-bleed__inner,
.miu-schema > .miu-band > .miu-bleed__inner,
.miu-section-inner {
  width: min(var(--miu-max), calc(100% - (2 * var(--miu-gutter)))) !important;
  max-width: var(--miu-max);
  margin-inline: auto !important;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Contained body bands (non-bleed sections) */
.miu-schema > .miu-band:not(.miu-bleed):not(.miu-hero),
.miu-schema > section:not(.miu-bleed):not(.miu-hero),
.miu-schema > .miu-masthead,
.miu-gb > .miu-band:not(.miu-bleed):not(.miu-hero) {
  width: min(var(--miu-max), calc(100% - (2 * var(--miu-gutter))));
  margin-inline: auto;
  padding-block: var(--miu-section-y);
}

/* Masthead / intro under solid header — not jammed, not huge */
.miu-schema > .miu-masthead:first-child,
.miu-schema > .miu-band:first-child:not(.miu-bleed):not(.miu-hero) {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.miu-schema > .miu-band + .miu-band,
.miu-schema > section + section:not(.miu-hero) {
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* Gallery / media grids share the same shell width */
.miu-schema .miu-gallery,
.miu-schema .gallery,
.miu-schema .wp-block-gallery,
.miu-schema .blocks-gallery-grid {
  width: 100%;
  max-width: var(--miu-max);
  margin-inline: auto;
}

.entry-content > .miu-schema:first-child .miu-hero,
.entry-content > .miu-gb:first-child .miu-hero {
  margin-top: 0;
}

/* Plain pages / posts: readable contained shell */
.page:not(.elementor-page) .site-main > .ct-container,
.page:not(.elementor-page) #main > .ct-container,
.single-post .site-main > .ct-container {
  padding-block: 1.5rem 2.75rem;
  padding-inline: var(--miu-gutter);
  max-width: var(--miu-max);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

.page:not(.elementor-page) .entry-content:not(:has(.miu-schema)):not(:has(.miu-gb)):not(:has(.miu-cwrap)):not(:has(.miu-course-island)):not(:has(.miu-bleed)):not(:has(.miu-hero)),
.single-post .entry-content:not(:has(.miu-schema)):not(:has(.miu-cwrap)) {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--miu-line);
  border-radius: var(--miu-radius);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  box-shadow: var(--miu-shadow);
  max-width: 720px;
  margin-inline: auto;
}

/* Footer clearance from last section */
.site-main {
  padding-bottom: 0.5rem;
}

.page-title,
.entry-header .page-title,
.hero-section .page-title,
.ct-page-title-container .page-title,
.entry-content h1,
.entry-content h2,
.entry-content h3 {
  font-family: var(--miu-font-display) !important;
  font-weight: 650 !important;
  color: var(--miu-primary-deep) !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Photo-plane copy must stay light (site chrome must not force deep ink) */
.entry-content .miu-hero .miu-display,
.entry-content .miu-hero h1,
.entry-content .miu-hero h2,
.entry-content .miu-hero h3,
.entry-content .miu-presence__copy .miu-display,
.entry-content .miu-presence__copy h1,
.entry-content .miu-presence__copy h2,
.entry-content .miu-presence__copy h3,
.entry-content .miu-band--ink .miu-display,
.entry-content .miu-band--ink h1,
.entry-content .miu-band--ink h2,
.entry-content .miu-band--ink h3,
.entry-content .miu-path-feature strong,
.entry-content .miu-path-feature h2,
.entry-content .miu-path-feature h3 {
  color: #fff !important;
}

.entry-content .miu-hero .miu-lead,
.entry-content .miu-presence__copy .miu-lead,
.entry-content .miu-band--ink .miu-lead {
  color: rgba(255, 255, 255, 0.88) !important;
}

.entry-content .miu-hero .miu-brand,
.entry-content .miu-presence__copy .miu-kicker,
.entry-content .miu-band--ink .miu-kicker {
  color: var(--miu-gold-soft) !important;
}

.entry-content h1 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); }
.entry-content h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin-top: 1.6em; }
.entry-content h3 { font-size: 1.1rem; }

.entry-content p,
.entry-content li {
  color: var(--miu-ink);
}

.entry-content:not(:has(.miu-schema)):not(:has(.miu-gb)) p {
  max-width: 62ch;
}

.entry-content a:not(.ct-button):not(.wp-block-button__link):not(.miu-btn) {
  color: var(--miu-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.entry-content a:not(.ct-button):not(.wp-block-button__link):hover {
  color: var(--miu-primary-dark);
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.2em;
}

.entry-content li + li {
  margin-top: 0.35em;
}

.entry-content img,
.entry-content .wp-block-image img,
.ct-image-container img {
  border-radius: var(--miu-radius);
}

.entry-content .wp-block-image {
  margin: 1.4em 0;
}

.entry-content figure {
  margin: 1.35em 0;
}

.entry-content figcaption {
  color: var(--miu-muted);
  font-size: 0.85rem;
  margin-top: 0.45em;
}

/* —— Footer —— */
footer.ct-footer,
#footer,
.ct-footer {
  background:
    linear-gradient(180deg, var(--miu-primary-deep) 0%, #042e2a 100%) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  border-top: 3px solid var(--miu-gold);
}

.ct-footer a,
footer.ct-footer a,
#footer a {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none;
}

.ct-footer a:hover,
footer.ct-footer a:hover {
  color: var(--miu-gold-soft) !important;
}

.ct-footer .widget-title,
.ct-footer h1,
.ct-footer h2,
.ct-footer h3,
.ct-footer h4,
footer.ct-footer .widget-title {
  font-family: var(--miu-font-display) !important;
  font-weight: 650 !important;
  color: #fff !important;
  letter-spacing: -0.01em;
}

.ct-footer .widget,
footer.ct-footer .widget {
  font-size: 0.92rem;
}

.ct-footer .menu a,
footer.ct-footer .menu a {
  font-weight: 600;
  opacity: 0.88;
}

.ct-footer .menu a:hover {
  opacity: 1;
}

/* Quieter footer menu column density */
.ct-footer .widget_nav_menu ul {
  display: grid;
  gap: 0.35rem;
}

.ct-footer-copyright,
.ct-footer [data-id="copyright"] {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.82rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* —— Elementor light brand glue —— */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--miu-font-display) !important;
  color: var(--miu-primary-deep);
}

.elementor-button {
  border-radius: var(--miu-radius-sm) !important;
  font-family: var(--miu-font-ui) !important;
  font-weight: 700 !important;
}

.elementor-button.elementor-size-md,
.elementor-button.elementor-size-sm {
  letter-spacing: 0.01em;
}

/* —— Motion (subtle) —— */
@media (prefers-reduced-motion: no-preference) {
  .header-menu-1 > ul > li > a::after,
  .header-menu > ul > li > a::after,
  header#header .menu > li > a::after,
  .ct-header .menu > li > a::after {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ct-button:not(.ct-button-ghost):hover,
  .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* —— Mobile —— */
@media (max-width: 860px) {
  header#header,
  .ct-header {
    backdrop-filter: blur(8px);
  }

  .page:not(.elementor-page) .entry-content:not(:has(.miu-schema)):not(:has(.miu-gb)):not(:has(.miu-cwrap)):not(:has(.miu-bleed)),
  .single-post .entry-content:not(:has(.miu-schema)) {
    padding: 1rem;
    border-radius: var(--miu-radius-sm);
  }

  .miu-bleed__inner,
  .miu-section-inner {
    width: calc(100% - (2 * var(--miu-gutter)));
  }
}