/* ==========================================================================
   mf-hero — isolated hero-section styles for margaritafelis.art, page ID 721
   All selectors are scoped under the .mf-hero prefix (plus targeted
   overrides for the wrapping Elementor container c72ec26 and the site
   navbar, see notes below) and must never leak into the rest of the site.
   Loaded only via a <link> inside the Custom HTML widget (eb3d715) placed
   inside Elementor container c72ec26.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Elementor container c72ec26 — outer gutter removal.
   Direct DB edits to _elementor_data do not trigger Elementor's normal
   CSS-file regeneration, so the container's own JSON settings
   (padding/margin/content_width already set to 0/0/full) are not compiled
   into any stylesheet and the element still falls back to Elementor's core
   default (.e-con padding). This rule forces the same result reliably and
   only ever targets this one specific container.
   -------------------------------------------------------------------------- */
.elementor-element.elementor-element-c72ec26 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

.mf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1600 / 739;
  min-height: 420px;
  max-height: 900px;
  background-color: #282828;
  background-image: url("https://margaritafelis.art/wp-content/uploads/2026/08/hero-image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  border-radius: 0 0 48px 48px;
  font-family: inherit;
  color: #ffffff;
}

.mf-hero *,
.mf-hero *::before,
.mf-hero *::after {
  box-sizing: border-box;
  font-family: inherit;
}

/* shadow-top / shadow-bottom — gradient pseudo-elements, no extra DOM nodes */
.mf-hero::before,
.mf-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.mf-hero::before {
  top: 0;
  height: clamp(90px, 24.6vw, 182px);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.55) 18%,
    rgba(0, 0, 0, 0) 100%
  );
}

.mf-hero::after {
  bottom: 0;
  height: clamp(150px, 33.4vw, 247px);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Full-bleed inner container — no max-width/margin/padding so that the
   percentage-based positions below resolve against the whole hero box. */
.mf-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
}

.mf-hero__title {
  margin: 0;
  position: absolute;
  z-index: 2;
  font-weight: 900;
  font-family: inherit;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.mf-hero__subtitle {
  margin: 0;
  position: absolute;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  font-family: inherit;
  font-weight: 500;
  color: #ffffff;
}

.mf-hero__subtitle-arrow {
  flex: none;
  display: block;
}

/* round scroll CTA — exact Figma asset (node 1701:1151), text + arrow are
   baked into the SVG itself, so no extra markup/CSS shapes are needed. */
.mf-hero__cta {
  position: absolute;
  z-index: 2;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-radius: 50%;
  outline-offset: 4px;
}

.mf-hero__cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 6px;
}

.mf-hero__cta-visual {
  display: block;
  width: 100%;
  height: 100%;
}

.mf-hero-anchor {
  scroll-margin-top: 90px; /* accounts for existing sticky header height */
}

/* ==========================================================================
   Desktop + tablet: >=768px — exact Figma proportions (hero is 1600x739,
   node 1701:1073). Structure and element order never change in this range;
   only percentages + clamp() scale the composition down smoothly. No
   separate tablet layout, no asset swapping.
   ========================================================================== */
@media (min-width: 768px) {
  /* Left inset matches the site's ACTUAL rendered Elementor boxed
     containers (e.g. the "Мої роботи" section, container e469881): the
     JSON boxed_width setting (1320px) never made it into compiled CSS
     (same direct-DB-edit / no-regeneration issue noted above for
     c72ec26), so the real, currently-rendered content width falls back to
     Elementor's kit-wide default --container-max-width: 1140px. Measured
     on the live page: "Мої роботи" x=104px at a 1348px-wide viewport,
     which is exactly (1348-1140)/2 — confirms 1140px, not 1320px. Below
     ~1188px the calc() would go negative, so it falls back to a flat 24px
     gutter. */
  .mf-hero__title {
    left: max(24px, calc((100% - 1140px) / 2));
    top: 12.0636%;
    width: 36.83%;
    font-size: clamp(72px, 12.5vw, 96px);
    line-height: 1.253;
  }

  .mf-hero__subtitle {
    left: max(24px, calc((100% - 1140px) / 2));
    top: 77.2666%;
    font-size: clamp(14px, 1.1vw, 18px);
    line-height: 1.4;
    white-space: nowrap;
  }

  .mf-hero__subtitle-arrow {
    width: clamp(12px, 1vw, 16px);
    height: auto;
  }

  .mf-hero__cta {
    left: 73.5625%;
    top: 62.3816%;
    width: 13.5625%;
    height: 20.9743%;
  }
}

/* ==========================================================================
   Mobile: <=767px — full composition switch to Figma node 1733:322
   (330x518). Same HTML, same assets (hero-image.jpg, subtitle-arrow.svg,
   round-cta.svg) — only layout/CSS changes.
   ========================================================================== */
@media (max-width: 767px) {
  .mf-hero {
    width: 100%;
    height: clamp(518px, 156.97vw, 680px);
    min-height: 518px;
    max-height: 680px;
    aspect-ratio: auto;
    border-radius: 0 0 24px 24px;
    background-image: linear-gradient(
        rgba(40, 40, 40, 0.14),
        rgba(40, 40, 40, 0.14)
      ),
      url("https://margaritafelis.art/wp-content/uploads/2026/08/hero-image.jpg");
    background-size: 100% 100%, auto 107.72%;
    background-position: center, center bottom;
    background-repeat: no-repeat;
    background-color: #282828;
  }

  .mf-hero::before {
    height: 27.22%;
    background: linear-gradient(
      180deg,
      #000 0%,
      #000 17.857%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .mf-hero::after {
    height: 48.07%;
    background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  }

  .mf-hero__title {
    left: 5.9%;
    top: 26.06%;
    width: 85.01%;
    font-size: clamp(38px, 12.5vw, 42px);
    line-height: 1.02;
  }

  .mf-hero__subtitle {
    left: 6.67%;
    top: 57.92%;
    display: grid;
    grid-template-columns: max-content 13px;
    grid-template-areas:
      "first arrow"
      "second second";
    column-gap: 12.43px;
    row-gap: 12.63px;
    white-space: normal;
    font-size: clamp(15px, 4.92vw, 16.24px);
    line-height: normal;
  }

  .mf-hero__subtitle > span:first-child {
    grid-area: first;
  }

  .mf-hero__subtitle-arrow {
    grid-area: arrow;
    width: 13px;
    height: 14px;
  }

  .mf-hero__subtitle > span:last-child {
    grid-area: second;
  }

  .mf-hero__cta {
    left: 6.67%;
    bottom: 6.03%;
    top: auto;
    width: 42.75%;
    height: auto;
    aspect-ratio: 217 / 155;
  }
}

/* ==========================================================================
   Navbar — page ID 721 only.

   CORRECTED ARCHITECTURE (per Figma node 1701:341): hero-section starts at
   y:0 in the design — no space is reserved for a header above it. The
   navbar is meant to float TRANSPARENTLY over the hero image, not push it
   down. #ms-header keeps its own theme-defined box (position:relative,
   height:100px via --main-header-height) so nothing about the theme's own
   header markup/CSS is touched; instead:
     - .main-header__inner (the real fixed bar) is explicitly pinned to
       the true viewport top, decoupled from #ms-header's box.
     - .mf-hero is pulled up by #ms-header's reserved flow height so the
       hero's own top edge sits at the page's true y:0, visible behind the
       transparent bar. This is an intentional, page-scoped negative
       margin (not a workaround for a bug) — the standard technique for a
       "content behind a floating fixed header" layout.
   ========================================================================== */
body.page-id-721 .main-header__inner {
  top: 0 !important;
}

body.page-id-721 .mf-hero {
  margin-top: -100px;
}

/* The theme's own scroll handler toggles .main-header__inner.move at
   scroll>50px (padding: .5rem 1.5rem + transform: translateY(10px),
   which grows the bar's rendered height ~60px -> ~76px) and
   .main-header__layout.action at scroll>300px (a JS-only state marker —
   no matching CSS rule exists in the theme for it, kept here defensively
   in case a future theme update adds one). Neither class is removed and
   the theme's own JS keeps toggling them normally elsewhere on the site —
   only their visual effect on THIS page's navbar geometry is cancelled,
   so .main-header__inner never changes size/position while the
   hero/after-hero color states are switching underneath it. */
body.page-id-721 .main-header__inner,
body.page-id-721 .main-header__inner.move {
  padding: 0 !important;
  transform: none !important;
}

body.page-id-721 .main-header__layout,
body.page-id-721 .main-header__layout.action {
  transform: none !important;
}

/* The theme gives .header__search-icon its own pill-button background
   (background-color: var(--color-contrast-lower); border-radius: 40px).
   Without removing it, forcing the icon's stroke to match the navbar
   text color can make the glyph disappear into its own button — e.g. a
   white icon stroke on a light pill in hero-state renders as a blank
   white rounded square. Removed unconditionally on this page since none
   of the three navbar states here use a button chrome around the icon. */
body.page-id-721 .header__search-icon {
  background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   HERO-STATE (.mf-nav-hero-active) — always white text/icons/logo on a
   transparent background, regardless of the site's own light/dark theme.
   This is intentional: the navbar floats over the dark hero photo, so it
   needs to stay legible no matter what data-theme the visitor has chosen.
   Hard CSS failsafe (works even before GSAP loads); new.js removes this
   class before animating away so GSAP's inline styles are never fought by
   these !important rules, and re-adds it only after the return tween
   completes.

   html+body (2 elements) intentionally used for the logo selectors instead
   of just body: the theme's own competing rule is
   "body[data-theme=dark] .main-header__layout .main-header__inner .logo-*"
   — specificity (0,4,1). A plain "body.page-id-721..." version of this
   selector ties at (0,4,1) too (falls back to source order); adding
   "html" bumps it to (0,4,2), an unambiguous win by specificity alone.
   -------------------------------------------------------------------------- */
body.page-id-721.mf-nav-hero-active #ms-header,
body.page-id-721.mf-nav-hero-active .main-header__inner {
  background-color: transparent !important;
}

body.page-id-721.mf-nav-hero-active #main-header-nav a,
body.page-id-721.mf-nav-hero-active .sun-and-moon,
body.page-id-721.mf-nav-hero-active .main-header__nav-trigger-icon {
  color: #ffffff !important;
}

body.page-id-721.mf-nav-hero-active .header__search-icon svg path {
  stroke: #ffffff !important;
}

html body.page-id-721.mf-nav-hero-active .main-header__layout .main-header__inner .logo-dark {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

html body.page-id-721.mf-nav-hero-active .main-header__layout .main-header__inner .logo-light {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

/* --------------------------------------------------------------------------
   AFTER-HERO-STATE (.mf-nav-after-hero) — unlike hero-state, this FOLLOWS
   the site's own theme: dark theme keeps the previous dark-navbar look,
   light theme gets a light navbar with black content. new.js reads
   body[data-theme] to pick the matching palette and keeps it live if the
   visitor toggles the theme switcher after already scrolling past hero.
   -------------------------------------------------------------------------- */
body.page-id-721.mf-nav-after-hero[data-theme="dark"] #ms-header,
body.page-id-721.mf-nav-after-hero[data-theme="dark"] .main-header__inner {
  background-color: #282828 !important;
}

body.page-id-721.mf-nav-after-hero[data-theme="dark"] #main-header-nav a,
body.page-id-721.mf-nav-after-hero[data-theme="dark"] .sun-and-moon,
body.page-id-721.mf-nav-after-hero[data-theme="dark"] .main-header__nav-trigger-icon {
  color: #ffffff !important;
}

body.page-id-721.mf-nav-after-hero[data-theme="dark"] .header__search-icon svg path {
  stroke: #ffffff !important;
}

html body.page-id-721.mf-nav-after-hero[data-theme="dark"] .main-header__layout .main-header__inner .logo-dark {
  opacity: 0 !important;
  visibility: hidden !important;
}

html body.page-id-721.mf-nav-after-hero[data-theme="dark"] .main-header__layout .main-header__inner .logo-light {
  opacity: 1 !important;
  visibility: visible !important;
}

body.page-id-721.mf-nav-after-hero[data-theme="light"] #ms-header,
body.page-id-721.mf-nav-after-hero[data-theme="light"] .main-header__inner {
  background-color: #ffffff !important;
}

body.page-id-721.mf-nav-after-hero[data-theme="light"] #main-header-nav a,
body.page-id-721.mf-nav-after-hero[data-theme="light"] .sun-and-moon,
body.page-id-721.mf-nav-after-hero[data-theme="light"] .main-header__nav-trigger-icon {
  color: #000000 !important;
}

body.page-id-721.mf-nav-after-hero[data-theme="light"] .header__search-icon svg path {
  stroke: #000000 !important;
}

html body.page-id-721.mf-nav-after-hero[data-theme="light"] .main-header__layout .main-header__inner .logo-dark {
  opacity: 1 !important;
  visibility: visible !important;
}

html body.page-id-721.mf-nav-after-hero[data-theme="light"] .main-header__layout .main-header__inner .logo-light {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  body.page-id-721 .main-header__inner {
    transition: none !important;
  }
}

/* ==========================================================================
   Portfolio grid ("Мої роботи", container 7707008) — explicit request.
   Not an .mf-hero/navbar rule; this selector is the theme's own portfolio
   card markup. Only takes effect on page 721 since new.css is only loaded
   there.
   ========================================================================== */
.portfolio_wrap .portfolio-feed .mokko .item--inner > a {
  display: block;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Portfolio card title (Figma node 1701:1638) — the theme renders it as a
   pill with a solid background (.ms-p-content__inner h3:
   background-color: var(--color-bg); border-radius: 40px). Per the design,
   the pill is removed entirely: plain white text with a soft shadow. The
   theme also has a body[data-theme=dark]-specific override for the same
   element (inverts to a white pill) — neutralized too so the look is
   identical regardless of the site's theme.
   -------------------------------------------------------------------------- */
.portfolio_wrap .portfolio-feed .mokko .ms-p-content .ms-p-content__inner h3,
body[data-theme="dark"] .portfolio_wrap .portfolio-feed .mokko .ms-p-content .ms-p-content__inner h3 {
  background-color: transparent !important;
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  padding: 0 !important;
  border-radius: 0 !important;
}

/* The theme applies an SVG "goo" filter (blur + alpha-contrast) to
   .ms-p-content__inner so that wrapped pill-background fragments merge
   into one blobby shape (box-decoration-break: clone). That filter was
   only ever meant to act on the solid pill background — with the pill
   removed above, it was left blurring/warping the bare text glyphs
   directly, which is what produced the melted-looking title. Turned off
   here since there is no longer any shape for it to act on. */
.portfolio_wrap .portfolio-feed .mokko .ms-p-content .ms-p-content__inner {
  filter: none !important;
}

/* Lift the whole title block up on hover so it settles above the social
   icons row instead of overlapping it. */
.portfolio_wrap .portfolio-feed .item--inner .ms-p-content {
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.portfolio_wrap .portfolio-feed .item--inner:hover .ms-p-content {
  transform: translateY(-58px);
}

@media (max-width: 767px) {
  /* On mobile the social icons row is permanently visible (see
     .mf-social-icons below), so the title stays lifted at rest instead of
     only on hover (touch devices have no hover) — matches the same
     "settled above the icons" composition. */
  .portfolio_wrap .portfolio-feed .item--inner .ms-p-content {
    transform: translateY(-52px);
  }
}

/* --------------------------------------------------------------------------
   Social icons row injected into every .item--inner by new.js (the theme
   renders portfolio cards from a PHP loop with no per-card custom-HTML
   field, so the icons are added client-side rather than via Elementor).
   Figma node 1734:401/1734:405. Links come from the site's own footer
   (Instagram, Telegram, TikTok, Facebook).
   -------------------------------------------------------------------------- */
.mf-social-icons {
  /* Left-aligned to the exact same inset as the title text (.ms-p-content
     uses padding: var(--space-md)), instead of centered, so both rows
     share one clean left edge. */
  position: absolute;
  left: var(--space-md);
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.mf-social-icons a {
  display: block;
  width: 36px;
  height: 35px;
  pointer-events: auto;
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Per-bubble hover feedback, independent of the group reveal animation. */
.mf-social-icons a:hover,
.mf-social-icons a:focus-visible {
  transform: scale(1.14);
}

.mf-social-icons img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-width: 1200px) {
  /* Hover-reveal only applies at true desktop widths (matches this
     project's own tablet/desktop split used elsewhere: tablet is
     768-1199px, desktop is >=1200px). Both mobile AND tablet keep the
     icons permanently visible instead — a hover interaction doesn't make
     sense on touch, and tablet is touch-first too even though it isn't
     covered by the (max-width:767px) mobile breakpoint. Resting pose
     before JS/GSAP takes over: y:50, scale:0.8, hidden — matches the
     values new.js hands to GSAP, so there is no visible jump once the
     script initializes. */
  .mf-social-icons {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    transform-origin: left bottom;
  }
}

/* Portfolio grid gutters on mobile — explicit request, container facb078
   (ms_projects widget, "Мої роботи"). */
@media (max-width: 767px) {
  .elementor-721 .elementor-element.elementor-element-facb078 .row {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 1rem;
  }
}