/*
Theme Name:  Rosa dei Venti
Theme URI:   https://rosadeiventi-loano.com/
Description: Tema figlio di Hello Elementor per le case vacanze Rosa dei Venti a Loano. Design & Dev: MeriPac.it.
Author:      MeriPac.it
Author URI:  https://meripac.it/
Template:    hello-elementor
Version:     1.2.0
Text Domain: rosadeiventi
*/

/* ------------------------------------------------------------ Tokens and fonts */
@font-face { font-family: 'Marcellus'; src: url('assets/fonts/marcellus.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('assets/fonts/manrope.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --rv-navy: #12243a;
  --rv-navy2: #1b3350;
  --rv-night: #0c1828;
  --rv-brass: #c79a4b;
  --rv-brass-l: #e6c98f;
  --rv-brass-d: #8a6522;
  --rv-paper: #fbf8f2;
  --rv-soft: #efe8da;
  --rv-line: #d9d2c4;
  --rv-ink: #142233;
  --rv-mute: #5b6676;
  --rv-head: 'Marcellus', Georgia, serif;
  --rv-body: 'Manrope', system-ui, sans-serif;
  --rv-bar: 92px;
}

body.rv { background: var(--rv-paper); color: var(--rv-ink); font-family: var(--rv-body); -webkit-font-smoothing: antialiased; }
body.rv img { height: auto; }
.screen-reader-text:focus { clip: auto !important; clip-path: none; height: auto; width: auto; z-index: 100000; position: fixed !important; top: 8px; left: 8px; background: #fff; color: var(--rv-ink); padding: 12px 16px; border-radius: 8px; }

/* ------------------------------------------------------------ Header */
.rv-top { position: fixed; top: 0; left: 0; right: 0; z-index: 900; color: #fff; transition: background .3s, box-shadow .3s, height .3s; }
.rv-top.is-solid, body.rv-solid .rv-top { background: var(--rv-navy); box-shadow: 0 6px 24px rgba(8, 16, 28, .18); }
body.rv-solid #rv-content { padding-top: var(--rv-bar); }
body.admin-bar .rv-top { top: 32px; }
.rv-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--rv-bar); width: min(1280px, 100% - 64px); margin: 0 auto; }
.rv-top.is-solid .rv-bar { height: 76px; }
body.rv .rv-logo { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
body.rv .rv-logo:hover { color: #fff; }
.rv-logo svg { width: 40px; height: 40px; color: var(--rv-brass); flex: none; }
.rv-logo b { display: block; font: 400 23px/1 var(--rv-head); letter-spacing: .05em; }
.rv-logo small { display: block; font: 600 10px/1.2 var(--rv-body); letter-spacing: .3em; text-transform: uppercase; opacity: .85; margin-top: 5px; }
.rv-nav { display: flex; gap: 34px; }
body.rv .rv-nav a { color: #fff; text-decoration: none; font: 600 13px/1 var(--rv-body); letter-spacing: .14em; text-transform: uppercase; padding: 8px 0; border-bottom: 1px solid transparent; }
body.rv .rv-nav a:hover, body.rv .rv-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--rv-brass); }
body.rv a.rv-cta, .rv-cta { background: var(--rv-brass); color: var(--rv-navy); text-decoration: none; padding: 13px 22px; border-radius: 999px; font: 700 13px/1 var(--rv-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
body.rv a.rv-cta:hover, body.rv a.rv-cta:focus { background: var(--rv-brass-l); color: var(--rv-navy); }
.rv-top button.rv-burger, .rv-menu button.rv-burger { display: none; background: none; border: 1px solid rgba(255, 255, 255, .5); color: #fff; border-radius: 999px; padding: 10px 18px; font: 700 13px/1 var(--rv-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.rv-top button.rv-burger:hover, .rv-top button.rv-burger:focus, .rv-menu button.rv-burger:hover, .rv-menu button.rv-burger:focus { background: rgba(255, 255, 255, .12); color: #fff; }

.rv-menu { position: fixed; inset: 0; z-index: 950; background: var(--rv-navy); color: #fff; padding: 24px 24px 40px; display: flex; flex-direction: column; overflow: auto; }
.rv-menu[hidden] { display: none; }
.rv-menu .rv-menu-head button.rv-burger { display: inline-block; }
.rv-menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.rv-menu nav { display: flex; flex-direction: column; gap: 6px; }
body.rv .rv-menu nav a { color: #fff; text-decoration: none; font: 400 36px/1.3 var(--rv-head); padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rv-menu .rv-cta { align-self: flex-start; margin-top: 32px; padding: 16px 26px; }
.rv-menu-rose { position: absolute; right: -90px; bottom: -90px; width: 320px; color: var(--rv-navy2); pointer-events: none; }
html.rv-menu-open { overflow: hidden; }

/* ------------------------------------------------------------ Elementor helpers */
/* Hero: full-bleed photo with a night-blue veil (class rv-hero on the first container). */
.rv-hero { position: relative; isolation: isolate; }
.rv-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 36, 58, .78), rgba(18, 36, 58, .3) 45%, rgba(18, 36, 58, .82)); pointer-events: none; }
.rv-hero > .e-con-inner, .rv-hero > * { position: relative; z-index: 1; }
.rv-hero-rose svg { width: 110px; height: 110px; color: var(--rv-brass); animation: rv-spin 80s linear infinite; }
@keyframes rv-spin { to { transform: rotate(360deg); } }
.rv-eyebrow .elementor-heading-title { letter-spacing: .3em; text-transform: uppercase; }
.rv-chips-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rv-chips-row li { border: 1px solid rgba(255, 255, 255, .45); color: #fff; border-radius: 999px; padding: 8px 16px; font: 500 13px/1.2 var(--rv-body); }
.rv-chips-row.is-dark li { border-color: var(--rv-line); color: var(--rv-ink); background: #fff; }

/* Buttons drawn by Elementor: classes rv-b (brass), rv-b--dark, rv-b--line. */
body.rv .rv-b .elementor-button { border-radius: 999px; font: 700 13px/1.2 var(--rv-body); letter-spacing: .08em; text-transform: uppercase; padding: 16px 28px; background: var(--rv-brass); color: var(--rv-navy); border: 1px solid var(--rv-brass); }
body.rv .rv-b .elementor-button:hover, body.rv .rv-b .elementor-button:focus { background: var(--rv-brass-l); border-color: var(--rv-brass-l); color: var(--rv-navy); }
body.rv .rv-b--dark .elementor-button { background: var(--rv-navy); border-color: var(--rv-navy); color: #fff; }
body.rv .rv-b--dark .elementor-button:hover, body.rv .rv-b--dark .elementor-button:focus { background: var(--rv-navy2); border-color: var(--rv-navy2); color: #fff; }
body.rv .rv-b--line .elementor-button { background: transparent; color: inherit; border-color: currentColor; }
body.rv .rv-b--line .elementor-button:hover, body.rv .rv-b--line .elementor-button:focus { background: rgba(255, 255, 255, .12); color: inherit; }

/* Service tiles. */
.rv-svc { border: 1px solid var(--rv-line); border-radius: 14px; background: #fff; }
.rv-svc .elementor-icon-box-icon .elementor-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--rv-navy); color: var(--rv-brass); font-size: 20px; }
.rv-svc .elementor-icon-box-icon .elementor-icon svg { width: 20px; height: 20px; fill: var(--rv-brass); }
.rv-svc .elementor-icon-box-title { margin: 0; }

/* Numbered list of the other structures. */
.rv-steps { list-style: none; margin: 26px 0 0; padding: 0; }
.rv-steps li { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rv-line); padding: 14px 0; }
.rv-steps li span { color: var(--rv-brass-d); font-family: var(--rv-head); }

/* Photos with rounded corners. */
.rv-photo img { border-radius: 14px; width: 100%; object-fit: cover; }
.rv-photo-fill, .rv-photo-fill .elementor-widget-container { height: 100%; }
.rv-photo-fill img { height: 100% !important; width: 100%; object-fit: cover; }

/* Apartment page: feature list and the request box. */
.rv-features ul { list-style: none; margin: 0; padding: 0; }
.rv-features li { padding: 12px 0 12px 30px; border-bottom: 1px dashed var(--rv-line); position: relative; }
.rv-features li::before { content: ''; position: absolute; left: 4px; top: 21px; width: 9px; height: 9px; background: var(--rv-brass); transform: rotate(45deg); }
.rv-aside { position: sticky !important; top: 110px; }
.rv-aside .rdv-btn { width: 100%; }

/* Gallery (Elementor basic gallery). */
.rv-gallery .gallery { margin: 0 !important; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rv-gallery .gallery-item { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.rv-gallery .gallery-item img { border-radius: 12px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; border: 0 !important; transition: opacity .2s; }
.rv-gallery .gallery-item a:hover img { opacity: .88; }
.rv-gallery br { display: none; }

/* Big rose in the background of the call to action. */
.rv-cta-sec { position: relative; overflow: hidden; }
.rv-cta-sec .rv-bg-rose-w { position: absolute !important; inset: 0; margin: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.rv-cta-sec .rv-bg-rose { position: absolute; right: -140px; top: -120px; width: 520px; height: 520px; color: var(--rv-navy2); }
.rv-cta-sec > .e-con-inner { position: static; }
.rv-cta-sec > .e-con-inner > :not(.rv-bg-rose-w) { position: relative; z-index: 1; }

/* Section heads centered on the page. */
.rv-head--center { max-width: 720px; margin-left: auto !important; margin-right: auto !important; text-align: center; }

/* ------------------------------------------------------------ Footer */
.rv-footer { background: var(--rv-night); color: #b9c2cf; }
.rv-footer a { color: #dfe5ee; }
.rv-footer a:hover { color: var(--rv-brass-l); }
.rv-foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.rv-foot-bottom p { margin: 0; }
/* Link that reopens the cookie panel, printed by Lobbit Cookie Consent right after the footer. */
body.rv .custcc-recall { margin: 0; padding: 0 16px 26px; background: var(--rv-night); text-align: center; font: 400 13px/1.5 var(--rv-body); }
body.rv .custcc-recall a { color: #c9d1dc; }
body.rv .custcc-recall a:hover { color: var(--rv-brass-l); }

/* Policy pages and 404 (no Elementor hero). */
.rv-page { width: min(860px, 100% - 32px); margin: 0 auto; padding: 56px 0 96px; }
.rv-page h1 { font: 400 clamp(36px, 5vw, 56px)/1.1 var(--rv-head); margin: 0 0 24px; }
.rv-page h2 { font: 400 28px/1.2 var(--rv-head); margin: 40px 0 12px; }
.rv-404 { text-align: center; padding: 120px 16px 140px; }
.rv-404 svg { width: 120px; height: 120px; color: var(--rv-brass); }
.rv-404 h1 { font: 400 clamp(38px, 6vw, 64px)/1.1 var(--rv-head); margin: 20px 0 14px; }
.rv-404 .rv-cta { display: inline-block; margin-top: 18px; }

@media (max-width: 1024px) {
  .rv-nav, .rv-bar > .rv-cta { display: none; }
  .rv-top button.rv-burger { display: inline-block; }
  .rv-bar { width: calc(100% - 32px); }
  :root { --rv-bar: 76px; }
}
@media (max-width: 782px) {
  body.admin-bar .rv-top { top: 46px; }
}
@media (max-width: 767px) {
  .rv-gallery .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .rv-aside { position: relative !important; top: auto !important; }
  .rv-logo b { font-size: 20px; }
  .rv-logo svg { width: 34px; height: 34px; }
  .rv-menu nav a { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-hero-rose svg { animation: none; }
}

/* Legibility of the white titles over the opening photos. */
.rv-hero .elementor-heading-title, .rv-hero .elementor-widget-text-editor { text-shadow: 0 1px 14px rgba(8, 16, 28, .45); }

/* MeriPac credit: the white feather before the name, as on the other MeriPac sites. */
.rv-foot-bottom a[href*="meripac.it"], .rv-credit { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.rv-foot-bottom a[href*="meripac.it"]::before, .rv-credit::before { content: ""; flex: none; width: 25px; height: 22px; background: url("assets/img/meripac-feather-white-96.png") no-repeat center / contain; }