/*
 * SOLENNE — section styles for the Elementor layouts. Colours and spacing that
 * people are likely to change live in Elementor's own settings; this file
 * covers typography and components. Hover effects use the translate / rotate /
 * scale properties so they never fight the entrance animations, which use transform.
 */

/* Type and colour come from the theme, not Elementor's kit. */
.elementor-widget-heading .elementor-heading-title { font-family: var(--so-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; color: inherit; text-wrap: balance; overflow-wrap: break-word; }
.elementor-widget-text-editor { color: inherit; font-family: var(--so-text); }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
h1.elementor-heading-title { font-size: clamp(44px, 6vw, 88px); line-height: 1.02; }
h2.elementor-heading-title { font-size: clamp(34px, 4.2vw, 58px); }
h3.elementor-heading-title { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.so-section { color: var(--so-ink); }
.so-light { color: var(--so-cream-ink); }
.so-lead p { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.75; color: var(--so-muted); max-width: 560px; }
.so-light .so-lead p { color: var(--so-cream-muted); }
.so-eyebrow-wrap p { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--so-accent); }
.so-light .so-eyebrow-wrap p { color: #7a6433; }
/* Elementor pads a boxed section top and bottom on its inner box and at the sides on the outer one; the theme padding would double it. */
.e-con.so-section { padding: 0 var(--padding-right, 20px) 0 var(--padding-left, 20px); }
.so-hl { color: var(--so-accent); font-style: italic; }
.so-light .so-hl { color: #7a6433; }
.so-center { text-align: center; align-items: center; }

/* Buttons: gold pills, outline pills */
.so-btn .elementor-button {
	font-family: var(--so-text); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2;
	padding: 17px 30px; border-radius: 999px; border: 1px solid var(--so-accent);
	background: var(--so-accent); color: var(--so-on-accent);
	transition: translate 0.3s var(--so-ease), background-color 0.25s, border-color 0.25s, color 0.25s;
}
.so-btn .elementor-button:hover, .so-btn .elementor-button:focus-visible { color: var(--so-on-accent); background: var(--so-accent-2); border-color: var(--so-accent-2); translate: 0 -2px; }
.so-btn-outline .elementor-button { background: transparent; color: var(--so-ink); border-color: var(--so-line-soft); }
.so-btn-outline .elementor-button:hover, .so-btn-outline .elementor-button:focus-visible { background: var(--so-ink); border-color: var(--so-ink); color: var(--so-deep); }
.so-light .so-btn-outline .elementor-button, .so-reserve__card .so-btn-outline .elementor-button, .so-dessert__card .so-btn-outline .elementor-button { color: var(--so-cream-ink); border-color: rgba(22, 48, 31, 0.3); }
.so-light .so-btn-outline .elementor-button:hover, .so-reserve__card .so-btn-outline .elementor-button:hover { background: var(--so-cream-ink); color: var(--so-cream); }
.so-reserve__card .so-btn:not(.so-btn-outline) .elementor-button, .so-dessert__card .so-btn:not(.so-btn-outline) .elementor-button { background: var(--so-deep); border-color: var(--so-deep); color: var(--so-cream); }
.so-reserve__card .so-btn:not(.so-btn-outline) .elementor-button:hover, .so-dessert__card .so-btn:not(.so-btn-outline) .elementor-button:hover { background: var(--so-surface); border-color: var(--so-surface); }

/* Split head: title left, note right */
.so-head__end { align-items: flex-start; }
.so-head__end .so-lead p { font-size: 14px; max-width: 30em; }
@media (min-width: 768px) { .so-head__end { align-items: flex-end; } .so-head__end .so-lead p { margin-left: auto; } }

/* Small list with gold diamonds */
.so-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.so-list li { position: relative; padding-left: 22px; color: var(--so-muted); font-size: 15px; }
.so-light .so-list li { color: var(--so-cream-muted); }
.so-list li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; background: var(--so-accent); transform: rotate(45deg); }

/* ---------- Hero ---------- */
.e-con.so-hero { position: relative; overflow: hidden; }
.so-hero__bg { position: absolute !important; inset: 0; z-index: 0; pointer-events: none; width: auto !important; }
.so-hero__word { position: absolute; left: 50%; top: 18%; translate: -50% 0; font-family: var(--so-display); font-size: clamp(90px, 17vw, 260px); line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(242, 237, 227, 0.08); white-space: nowrap; }
.so-hero > .e-con-inner > .elementor-element:not(.so-hero__bg) { position: relative; z-index: 1; }
.so-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border: 1px solid var(--so-line-soft); border-radius: 999px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--so-accent); }
.so-count { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 6px 22px 6px 6px; border-radius: 999px; background: var(--so-cream); color: var(--so-cream-ink); }
.elementor .so-count img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.so-count span { display: grid; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--so-cream-muted); line-height: 1.4; }
.so-count strong { font-family: var(--so-display); font-size: 22px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--so-cream-ink); }
.so-hero h1.elementor-heading-title { font-size: clamp(42px, 5.6vw, 84px); }
.so-perks { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 26px 0 0; list-style: none; border-top: 1px solid var(--so-line); }
.so-perks li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1px solid var(--so-line-soft); border-radius: 999px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--so-muted); }
.so-perks li::before { content: "✦"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--so-surface); color: var(--so-accent); font-size: 11px; }
/* The three hero arches sit at staggered heights. */
.so-hero__arches .so-arches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Phones: the three hero arches are narrow, so they show the plate and the name only. */
@media (max-width: 767px) {
	.so-hero__arches .so-arches { gap: 10px; }
	.so-hero__arches .so-arch__line, .so-hero__arches .so-arch__count { display: none; }
	.so-hero__arches .so-arch__link { padding: 0 6px 34px; }
	.so-hero__arches .so-arch__name { font-size: 20px; }
}
.so-arch__count { white-space: nowrap; }
@media (min-width: 768px) {
	.so-hero__arches .so-arch:nth-child(2) { margin-top: 64px; }
	.so-hero__arches .so-arch:nth-child(3) { margin-top: 0; }
}

/* ---------- Arched menu-section cards ---------- */
.so-arches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
/* The card grows to fill its cell; the cell keeps room below for the arrow. */
.so-arch { min-width: 0; display: flex; flex-direction: column; }
.so-arch__link { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; flex: 1; padding: 0 14px 54px; margin-top: 46px; border: 1px solid var(--so-line-soft); border-radius: 999px 999px 90px 90px; text-decoration: none; color: var(--so-ink); transition: background-color 0.35s, border-color 0.35s; }
.so-arch__link:hover { background: var(--so-surface); border-color: var(--so-accent); color: var(--so-ink); }
.so-arch__plate { display: block; width: 78%; max-width: 132px; aspect-ratio: 1; margin: -46px auto 6px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px var(--so-bg), 0 14px 30px -12px rgba(0, 0, 0, 0.6); background: var(--so-surface); }
.so-arch__plate img { width: 100%; height: 100%; object-fit: cover; transition: rotate 1.2s var(--so-ease), scale 1.2s var(--so-ease); }
.so-arch__link:hover .so-arch__plate img { rotate: 24deg; scale: 1.06; }
.so-arch__line { font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--so-muted); line-height: 1.5; }
.so-arch__name { font-family: var(--so-display); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; }
.so-arch__count { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--so-line-soft); border-radius: 999px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--so-muted); }
.so-arch__go { position: absolute; left: 50%; bottom: -19px; translate: -50% 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--so-accent); color: var(--so-on-accent); font-size: 15px; transition: rotate 0.4s var(--so-ease), background-color 0.25s; }
.so-arch__link:hover .so-arch__go { rotate: 45deg; background: var(--so-accent-2); }
.so-arches li { padding-bottom: 22px; }
/* Sideways row of arches (all sections) */
.so-arches--scroll { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(170px, calc((100% - 5 * 18px) / 6)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.so-arches--scroll::-webkit-scrollbar { display: none; }
.so-arches--scroll li { scroll-snap-align: start; }
@media (max-width: 767px) { .so-arches--scroll { grid-auto-columns: 46%; } }

/* ---------- Word band ---------- */
.e-con.so-band { overflow: hidden; border-top: 1px solid var(--so-line-soft); border-bottom: 1px solid var(--so-line-soft); }
.so-band__track { display: flex; width: max-content; }
.so-band__track ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; animation: so-drift 40s linear infinite; }
.so-band__track li { display: flex; align-items: center; gap: 34px; padding-right: 34px; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--so-muted); white-space: nowrap; }
.so-band__track li::after { content: "◆"; font-size: 8px; color: var(--so-line-soft); }
.so-band__track li.is-name { font-family: var(--so-display); font-size: 20px; letter-spacing: 0.26em; color: var(--so-accent); }
@keyframes so-drift { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .so-band__track ul[aria-hidden] { display: none; } }

/* ---------- Why: cards that turn over ---------- */
.e-con.so-flip { position: relative; overflow: hidden; min-height: 200px; padding: 28px; gap: 18px; border: 1px solid var(--so-cream-line); border-radius: var(--so-radius); background: #e4e7e2; justify-content: space-between; transition: background-color 0.4s; }
.so-flip__num .elementor-heading-title { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--so-deep); color: var(--so-accent-2); font-size: 18px; }
.so-flip h3.elementor-heading-title { font-size: clamp(24px, 2.2vw, 30px); color: var(--so-cream-ink); }
.so-flip__back { position: absolute !important; inset: 0; display: flex; align-items: center; padding: 28px; background: var(--so-deep); color: var(--so-cream); translate: 0 101%; transition: translate 0.6s var(--so-ease); width: auto !important; }
.so-flip__back p { font-size: 16px; line-height: 1.65; color: var(--so-cream); }
.so-flip:hover .so-flip__back, .so-flip:focus-within .so-flip__back { translate: 0 0; }
/* Touch screens cannot hover: show the text under the title instead. */
@media (hover: none) {
	.so-flip__back { position: static !important; inset: auto; padding: 0; background: none; translate: none; }
	.so-flip__back p { color: var(--so-cream-muted); font-size: 15px; }
}

/* ---------- Drinks: round cards in one row ---------- */
@media (min-width: 1025px) { .so-drinks .aku-menu--cards .aku-menu__items { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } }
.so-drinks .aku-dish__name { font-size: 20px; }
.so-drinks .aku-dish__desc { font-size: 12.5px; }
@media (max-width: 767px) { .so-drinks .aku-menu--cards .aku-menu__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .so-drinks .aku-menu--cards .aku-dish { padding: 18px 12px 18px; } }

/* ---------- Room / chef: photo with a round inset ---------- */
/* Image shapes are prefixed with .elementor so they win over Elementor's own ".elementor img" reset, which loads later. */
.e-con.so-room__media, .e-con.so-chef__media { position: relative; padding: 0 56px 56px 0; }
.elementor .so-room__main img, .elementor .so-chef__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--so-radius); }
.elementor .so-chef__main img { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--so-radius) var(--so-radius); }
.so-room__inset, .so-chef__inset { position: absolute !important; right: 0; bottom: 0; width: 40% !important; z-index: 2; }
.elementor .so-room__inset img, .elementor .so-chef__inset img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid var(--so-bg); }
.so-chef__inset img { border-color: var(--so-stone); }
@media (max-width: 767px) { .e-con.so-room__media, .e-con.so-chef__media { padding: 0 32px 36px 0; } }

/* ---------- Dessert feature card ---------- */
.e-con.so-dessert__card { background: var(--so-cream); color: var(--so-cream-ink); border-radius: var(--so-radius); padding: clamp(18px, 2.4vw, 28px); }
.so-dessert__card .so-lead p { color: var(--so-cream-muted); }
.so-dessert__card .so-eyebrow-wrap p { color: #7a6433; }
.elementor .so-dessert__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.so-dessert__name .elementor-heading-title { font-size: clamp(34px, 3.6vw, 52px); color: var(--so-cream-ink); }
.so-dessert__card .so-hl { color: #7a6433; }
.so-dessert__price .elementor-heading-title { font-size: 30px; color: var(--so-cream-ink); }

/* ---------- Reviews ---------- */
.e-con.so-review { justify-content: space-between; gap: 22px; padding: 28px; border: 1px solid var(--so-line-soft); border-radius: var(--so-radius); background: var(--so-surface); }
.so-review__quote p { font-family: var(--so-display); font-size: clamp(20px, 1.7vw, 23px); font-style: italic; line-height: 1.4; color: var(--so-ink); }
.so-review__by p { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--so-muted); }
.so-review__by p::before { content: ""; width: 28px; height: 1px; background: var(--so-accent); }

/* ---------- FAQ (Elementor accordion) ---------- */
.so-accordion .elementor-accordion-item { border: 0 !important; border-bottom: 1px solid var(--so-line-soft) !important; }
.so-accordion .elementor-tab-title { display: flex; align-items: center; gap: 16px; padding: 22px 6px !important; border: 0 !important; }
.so-accordion .elementor-tab-title a, .so-accordion .elementor-accordion-title { font-family: var(--so-display); font-size: clamp(20px, 1.8vw, 25px); font-weight: 400; color: var(--so-ink); text-decoration: none; }
.so-accordion .elementor-tab-title .elementor-accordion-icon { order: 2; margin-left: auto; color: var(--so-accent); }
.so-accordion .elementor-accordion-icon svg { width: 13px; height: 13px; fill: var(--so-accent); }
.so-accordion .elementor-tab-content { padding: 0 6px 24px !important; border: 0 !important; color: var(--so-muted); font-size: 15px; line-height: 1.75; }
.so-accordion .elementor-tab-title.elementor-active a { color: var(--so-accent-2); }

/* ---------- Booking banner (cream card) ---------- */
.e-con.so-reserve__card { background: var(--so-cream); color: var(--so-cream-ink); border-radius: var(--so-radius); padding: clamp(24px, 3.2vw, 44px); }
.so-reserve__card .so-lead p { color: var(--so-cream-muted); }
.so-reserve__card .so-eyebrow-wrap p { color: #7a6433; }
.elementor .so-reserve__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }

/* ---------- Inner page heroes: arched photo on the right ---------- */
.elementor .so-page-hero__media img { width: 100%; max-width: 440px; margin-left: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px var(--so-radius) var(--so-radius); }
@media (max-width: 767px) { .elementor .so-page-hero__media img { max-width: 260px; margin: 0 auto; } }

/* ---------- Menu page ---------- */
.so-menu-page .aku-menu__group { margin-bottom: 72px; scroll-margin-top: 110px; }
.so-menu-page .aku-menu__filters { margin-bottom: 40px; }
.so-menu-sweet .aku-menu__group { margin-bottom: 56px; scroll-margin-top: 110px; }

/* ---------- Booking form card ---------- */
.e-con.so-book__form { background: var(--so-cream); color: var(--so-cream-ink); border-radius: var(--so-radius); padding: clamp(22px, 3vw, 40px); }
.so-book__form h3.elementor-heading-title { color: var(--so-cream-ink); }