/* Every public page with the theme's header and footer (Site::header_assets). Not /crm/ and not the feedback
   page: those print their own <head>. The theme's Elementor buttons and menus are made one family here, from
   outside, since the theme and its pages are someone else's.

   Buttons: one pill, and one hover for all of them, as on the tour pages' «Мені цікаво»: a 0.2s fill, no movement.
   - outline on a photo or navy (linen outline and text) fills linen, the text turns navy;
   - outline on linen (navy outline and text) fills navy, the text turns linen;
   - filled (navy or linen) on white, linen or a photo turns terracotta with linen text;
   - filled on a terracotta block fills linen with navy text instead (terracotta would vanish into the block).
   site-ui.js reads each button's resting colours and the block behind it, and adds the matching .mr-hv--* class, so
   a button the theme adds later gets the right hover too. Colours at rest stay the theme's own.
   Some theme buttons carry a 20% black layer (background-image) for contrast on photos; it goes on hover, or it
   greys the fill. */

body .elementor .e-button-base,
body .elementor .e-form-submit-button-base,
body .elementor .elementor-widget-form .elementor-button,
body .mriinyky-buy-button { border-radius: 100px; }

body .elementor .mr-hv { box-shadow: none; text-shadow: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
body .elementor .mr-hv:focus:not(:focus-visible) { outline: none; }
body .elementor .mr-hv:focus-visible { outline: 2px solid #c86228; outline-offset: 2px; }

@media (hover: hover) {
	body .elementor .mr-hv:hover { background-image: none; }
	body .elementor .mr-hv--on-dark:hover { border-color: #f9ece1; background-color: #f9ece1; color: #134369; }
	body .elementor .mr-hv--on-light:hover { border-color: #134369; background-color: #134369; color: #f9ece1; }
	body .elementor .mr-hv--fill:hover { border-color: #c86228; background-color: #c86228; color: #f9ece1; }
	body .elementor .mr-hv--on-accent:hover { border-color: #f9ece1; background-color: #f9ece1; color: #134369; }
}
body .elementor .mr-hv:focus-visible { background-image: none; }
body .elementor .mr-hv--on-dark:focus-visible { border-color: #f9ece1; background-color: #f9ece1; color: #134369; }
body .elementor .mr-hv--on-light:focus-visible { border-color: #134369; background-color: #134369; color: #f9ece1; }
body .elementor .mr-hv--fill:focus-visible { border-color: #c86228; background-color: #c86228; color: #f9ece1; }
body .elementor .mr-hv--on-accent:focus-visible { border-color: #f9ece1; background-color: #f9ece1; color: #134369; outline-color: #f9ece1; }

/* Header and footer menus: one underline. It is 1px in the text colour, 4px longer than the word on each side, and
   grows from the middle on hover and keyboard focus only, as a sign the word can be pressed (no line for the current
   page). Elementor's own pointer lines
   (::before / ::after, which ran the full width of the item or the footer column) are switched off. */
:is([data-elementor-type="header"], [data-elementor-type="footer"]) .elementor-nav-menu--main .elementor-item::before,
:is([data-elementor-type="header"], [data-elementor-type="footer"]) .elementor-nav-menu--main .elementor-item::after { content: none !important; }

:is([data-elementor-type="header"], [data-elementor-type="footer"]) .elementor-nav-menu--main .elementor-item {
	background-image: linear-gradient(currentColor, currentColor) !important;
	background-repeat: no-repeat !important;
	background-origin: content-box !important;
	background-position: 50% calc(100% + 2px) !important;
	background-size: 0 1px !important;
	transition: background-size .35s cubic-bezier(.22, 1, .36, 1), color .2s ease !important;
}
:is([data-elementor-type="header"], [data-elementor-type="footer"]) .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible) { background-size: calc(100% + 8px) 1px !important; }
:is([data-elementor-type="header"], [data-elementor-type="footer"]) .elementor-nav-menu--main .elementor-item:focus:not(:focus-visible) { outline: none; }

/* Footer items have no side padding and fill their column, so the line followed the column, not the word:
   each item now hugs its word, with 4px of room on each side for the line's overhang. */
[data-elementor-type="footer"] .elementor-nav-menu--main .elementor-item { width: fit-content; margin-inline: -4px !important; padding-inline: 4px !important; }

@media (prefers-reduced-motion: reduce) {
	body .elementor .mr-hv,
	:is([data-elementor-type="header"], [data-elementor-type="footer"]) .elementor-nav-menu--main .elementor-item { transition: none !important; }
}

/* «Про нас»: the designer credit at the end of the footer's © line (Site::credit). The link keeps the line's colour
   and size with a thin underline, and thickens on hover and keyboard focus. The credit wraps as one piece; on phones it takes its own line, without the
   dot. Elementor gives the © heading a fixed one-line height, so it grows to fit. */
[data-elementor-type="footer"] .mr-credit { white-space: nowrap; }
[data-elementor-type="footer"] :has(> .mr-credit) { height: auto !important; }
@media (max-width: 767px) {
	[data-elementor-type="footer"] .mr-credit { display: block; margin-top: 4px; }
	[data-elementor-type="footer"] .mr-credit__dot { display: none; }
}
[data-elementor-type="footer"] .mr-credit a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness .2s ease; }
[data-elementor-type="footer"] .mr-credit a:is(:hover, :focus-visible) { text-decoration-thickness: 2px; }
[data-elementor-type="footer"] .mr-credit a:focus-visible { outline: 2px solid #f9ece1; outline-offset: 2px; border-radius: 2px; }

/* Laptop and tablet widths (768–1511px). The Elementor pages are drawn for a 1512px window, with absolute positions
   and fixed pixel widths, plus a phone layout below 768px; anything in between ran off the screen's edges (both
   languages: /en/ is the same markup). From outside, as above:
   - every Elementor box and its children stay inside their parent (max-width), and flex/grid children may shrink;
   - the big headings scale with the window;
   - the absolutely placed blocks on the home page and the Elementor tour page (/opishnia-na-mykolaia-5-7-hrudnia/)
     go into normal flow or a grid, picked by Elementor's data-id. If a block is rebuilt in Elementor its data-id
     changes and its line here stops matching: the containment rule still keeps its text on screen. */
@media (min-width: 768px) and (max-width: 1511px) {
	body .elementor:not([data-elementor-type="header"], [data-elementor-type="footer"]) :is(.e-con, .e-con > *) { max-width: 100%; min-width: 0; }
	body .elementor { --DUP_Name: clamp(64px, 6.6vw, 100px); --DUP_Heading-text: clamp(38px, 3.4vw, 50px); }

	/* Home, hero: the text column kept a 300px right margin and, at ≤1025px, a 100% width beside it. */
	body .elementor [data-id="94fe1d8"] { width: auto; margin-inline: 48px clamp(48px, 20vw, 300px); flex-direction: column; align-items: flex-start; }
	body .elementor [data-id="70f1a6c"] { width: min(600px, 100%); font-size: var(--Body-text); margin-block-end: 23px; }

	/* Home, «хто такі мрійники»: a 1512px grid; it now fits the window with the page's 48px side margins. */
	body .elementor [data-id="644d4609"] { padding-inline: 48px; }

	/* Home, «це твоя подорож»: five absolutely placed tiles become a grid (three columns, two below 1000px). */
	body .elementor [data-id="582f5b68"] { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "h1 h1 p" "h2 h2 btn" "a b c" "d e c"; gap: 24px 18px; align-items: start; padding: 88px 48px 120px; }
	body .elementor [data-id="582f5b68"] > * { position: static; width: auto; margin: 0; }
	body .elementor [data-id="25780ce8"] { grid-area: h1; }
	body .elementor [data-id="7913b26"] { grid-area: h2; margin-inline-start: 120px; margin-top: -24px; }
	body .elementor [data-id="737b14b"] { grid-area: p; }
	body .elementor [data-id="7f97c5fa"] { grid-area: btn; justify-self: start; }
	body .elementor [data-id="7673cd16"] { grid-area: a; width: 100%; margin-top: 32px; }
	body .elementor [data-id="1b0b522c"] { grid-area: b; margin-top: 32px; }
	body .elementor [data-id="34146975"] { grid-area: c; align-self: stretch; height: auto; margin-top: 32px; }
	body .elementor [data-id="3080bbb8"] { grid-area: d; }
	body .elementor [data-id="365a7669"] { grid-area: e; width: 100%; }
	body .elementor :is([data-id="3080bbb8"], [data-id="1b0b522c"], [data-id="34146975"]) { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; min-height: 274px; height: auto; padding: 36px 23px 28px; }
	body .elementor :is([data-id="35dbd68d"], [data-id="1ee7dab"], [data-id="2cfac991"], [data-id="c2df20d"], [data-id="74d5e03d"], [data-id="22bf2e3b"]) { position: static; width: auto; }

	/* Home, «що ти проживеш»: the photo frame sits inside its half (its caption under the photo, not over it);
	   the three steps keep their indent but end at the edge. */
	body .elementor [data-id="632b6b25"] { inset-inline-start: 48px; width: min(457px, calc(100% - 96px)); height: auto; padding: 8px 8px 20px; display: flex; flex-direction: column; gap: 18px; }
	body .elementor [data-id="4b534add"] { position: static; width: 100%; height: auto; aspect-ratio: 441 / 513; }
	body .elementor [data-id="307d869"] { position: static; width: auto; padding-inline: 14px; }
	body .elementor :is([data-id="2f722e0b"], [data-id="1e2dda67"], [data-id="58257a56"]) { width: auto; align-self: stretch; margin-inline: clamp(24px, 5.5vw, 84px) 48px; }
	body .elementor [data-id="77e7f961"] { margin-inline-start: clamp(24px, 5.5vw, 84px); }

	/* Home, «яку мрію здійсниш першою»: heading, text and button in flow, the tour cards in a grid. */
	body .elementor [data-id="52d8a96f"] { height: auto; display: flex; flex-direction: column; align-items: flex-start; padding-block: 88px 120px; }
	body .elementor :is([data-id="19098058"], [data-id="363d5c7f"], [data-id="27b09884"], [data-id="7dfec259"]) { position: static; align-self: flex-start; }
	body .elementor [data-id="363d5c7f"] { margin-inline-start: 113px; }
	body .elementor [data-id="27b09884"] { margin-top: 32px; }
	body .elementor [data-id="7dfec259"] { margin-top: 24px; }
	body .elementor [data-id="3b2b2ba2"] { position: static; order: 1; width: 100%; height: auto; margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
	body .elementor [data-id="3b2b2ba2"] > .e-con { width: auto; }

	/* The reviews headings («що … ти забереш із собою», «досвід … який лишається з тобою»): the words were placed
	   from the left edge of a 1512px window; now from the middle, the same distances. */
	body .elementor [data-id="25a5d028"] { inset-inline-start: calc(50% - 229px); }
	body .elementor [data-id="7d02d635"] { inset-inline-end: calc(50% - 112px); }
	body .elementor [data-id="5b3bb049"] { inset-inline-start: calc(50% + 154px); }
	body .elementor [data-id="7bc9250b"] { inset-inline-start: calc(50% - 257px); }
	body .elementor [data-id="30f59f96"] { inset-inline-start: calc(50% - 319px); }
	body .elementor [data-id="10d85a4e"] { inset-inline-end: calc(50% - 126px); }
	body .elementor [data-id="58630b55"] { inset-inline-start: calc(50% + 168px); }
	body .elementor [data-id="56b0260c"] { inset-inline-start: calc(50% - 304px); }

	/* The closing banner (home and tour page): its three parts wrap instead of overlapping. */
	body .elementor :is([data-id="5715820b"], [data-id="73204752"]) { width: auto; height: auto; min-height: 310px; flex-wrap: wrap; gap: 24px 40px; padding: 48px 58px; }
	body .elementor :is([data-id="776ce93f"], [data-id="6b1016db"]) { height: auto; margin-inline-start: 0; }

	/* Tour page: the «Лист очікування» under the programme sat at x = 802px. */
	body .elementor [data-id="4fc4b5e"] { position: static; align-self: flex-end; }
}
@media (min-width: 768px) and (max-width: 1299px) {
	/* Tour page, «що варто знати»: the wave between the heading's lines ran over the questions. */
	body .elementor [data-id="0670ff5"] { display: none; }
}
@media (min-width: 768px) and (max-width: 999px) {
	body .elementor [data-id="582f5b68"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "h1 h1" "h2 h2" "p p" "btn btn" "a b" "d e" "c c"; }
	body .elementor [data-id="681642e6"] { flex-direction: column; }
	body .elementor :is([data-id="78dc1a9"], [data-id="54b6b1c4"]) { width: 100%; }
	body .elementor [data-id="5ae7de67"] { height: 860px; }
	body .elementor [data-id="78811ca8"] { padding-block-end: 96px; }
	body .elementor [data-id="2f722e0b"] { margin-block-start: 96px; }
}
@media (min-width: 768px) and (max-width: 1025px) {
	/* Tour page, «моменти з наших подорожей» (the block Elementor shows at ≤1025px): the phone slider, two photos
	   at a time, dots underneath. */
	body .elementor [data-id="c3c5ddf"] { column-gap: 48px; }
	body .elementor [data-id="a47a69d"] { width: 100%; flex-direction: column; }
	body .elementor [data-id="3e7f898"] { width: 100%; flex-flow: row; gap: 0 18px; }
	body .elementor .moments-gallery .moments-item { flex: 0 0 calc(50% - 9px) !important; width: calc(50% - 9px) !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	/* The reviews carousel (.mrc-reviews, the site's own snippet) switches to its phone card at ≤1024px, with a
	   photo as tall as the window is wide: on tablets the photo stays beside the text. */
	body .mrc-reviews .mrc-card { flex-direction: row; }
	body .mrc-reviews .mrc-photo { flex: 0 0 38%; width: 38%; aspect-ratio: auto; min-height: 357px; }
	body .mrc-reviews .mrc-content { flex: 1 1 auto; width: auto; min-width: 0; }
}
@media (min-width: 768px) {
	/* Home tour cards: the price box was capped at 150px and ran under «Детальніше» even at 1512px, and the
	   descriptions had a fixed 60px height. */
	body .elementor :is([data-id="7cd5b78c"], [data-id="55ab1221"]) { width: auto; max-width: none; }
	body .elementor :is([data-id="4304fc1b"], [data-id="653dcb3"]) { flex-wrap: wrap; gap: 12px 16px; }
	body .elementor :is([data-id="21c277f2"], [data-id="7552f516"], [data-id="37003370"]) { height: auto; }
}