/*
Theme Name: MeriPac
Description: Child theme of Hello Elementor for meripac.it (direction B "Piuma": colour blocks, warm black and MeriPac orange).
Template: hello-elementor
Version: 1.1
Text Domain: meripac
*/

/* Colors, fonts, backgrounds, paddings and grids live in Elementor (Site Settings and element controls).
   This file holds what Elementor controls cannot express: the header and phone menu, the 404 page,
   and the details hooked to the CSS classes set on the Elementor elements (prefix mp-). */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face { font-family: "Syne"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("assets/fonts/syne.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/figtree.woff2") format("woff2"); }

/* ---------- Tokens: follow the Elementor global colors, with safe fallbacks ---------- */
body.mp {
  --mp-night: var(--e-global-color-night, #15110F);
  --mp-night-2: var(--e-global-color-night2, #221C19);
  --mp-orange: var(--e-global-color-orange, #F0561D);
  --mp-orange-deep: var(--e-global-color-orangedeep, #C2410C);
  --mp-bone: var(--e-global-color-bone, #EFECE6);
  --mp-white: var(--e-global-color-white, #FFFFFF);
  --mp-muted: var(--e-global-color-muted, #6F6660);
  --mp-soft: var(--e-global-color-soft, #D6CFC8);
  --mp-line: var(--e-global-color-line, #D9D3CA);
  --mp-display: "Syne", "Arial Black", sans-serif;
  --mp-sans: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --mp-gutter: clamp(16px, 4vw, 48px);
  margin: 0;
  background: var(--mp-bone);
  color: var(--mp-night);
  font-family: var(--mp-sans);
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
.mp :focus-visible { outline: 3px solid var(--mp-orange); outline-offset: 3px; }
.mp img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .mp * { transition: none !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } }

/* ---------- Pill buttons (theme markup) ---------- */
.mp .mp-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border: 0; border-radius: 999px; font: 700 16px/1 var(--mp-sans); text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.mp .mp-btn:hover { transform: translateY(-2px); }
.mp .mp-btn--orange { background: var(--mp-orange); color: var(--mp-night); }
.mp .mp-btn--orange:hover { background: #FF6A2F; color: var(--mp-night); }
.mp .mp-btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ---------- Header: floating dark pill ---------- */
.mp-top { position: sticky; top: 14px; z-index: 90; padding: 0 var(--mp-gutter); }
.admin-bar .mp-top { top: 46px; }
.mp-bar { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 10px 10px 26px; border-radius: 999px; background: var(--mp-night); color: var(--mp-bone); }
.mp-logo img { display: block; height: 30px; width: auto; }
.mp-nav { display: flex; gap: 26px; font: 600 15px/1 var(--mp-sans); }
.mp .mp-nav a { color: var(--mp-bone); opacity: .82; text-decoration: none; }
.mp .mp-nav a:hover, .mp .mp-nav a[aria-current="page"] { opacity: 1; color: var(--mp-orange); }
.mp .mp-bar-cta { padding: 12px 20px; font-size: 15px; }
.mp .mp-burger { display: none; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--mp-orange); color: var(--mp-night); font: 700 15px/1 var(--mp-sans); cursor: pointer; }
.mp .mp-burger:hover, .mp .mp-burger:focus { background: #FF6A2F; color: var(--mp-night); }

/* Phone menu: full-screen dark panel */
.mp-menu { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; padding: 24px var(--mp-gutter); overflow: hidden; background: var(--mp-night); color: var(--mp-bone); }
.mp-menu[hidden] { display: none; }
.mp-menu-head { position: relative; display: flex; justify-content: space-between; align-items: center; }
.mp-menu-head img { height: 30px; width: auto; }
.mp-menu nav { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 48px; }
.mp .mp-menu nav a { color: var(--mp-bone); font: 800 40px/1.15 var(--mp-display); letter-spacing: -.02em; text-decoration: none; }
.mp .mp-menu nav a:hover { color: var(--mp-orange); }
.mp-menu-foot { position: relative; margin: auto 0 0; color: var(--mp-soft); font-size: 15px; }
.mp .mp-menu-foot a { color: var(--mp-orange); font-weight: 700; text-decoration: none; }
.mp-menu-feather { position: absolute; right: -30%; bottom: 8%; width: 110%; max-width: none !important; opacity: .12; pointer-events: none; }
body.mp-menu-open { overflow: hidden; }

@media (max-width: 1024px) {
  .mp-nav, .mp .mp-bar-cta { display: none; }
  .mp .mp-burger { display: block; }
}

/* ---------- Elementor content: shared details ---------- */
.mp .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.mp .elementor-heading-title span { color: var(--mp-orange); }
.mp .elementor-widget-text-editor a { color: inherit; }

/* Pill label above titles */
.mp .mp-pill-w { margin-bottom: 24px; }
.mp .mp-pill-w .elementor-heading-title, .mp .mp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--mp-night); color: var(--mp-bone); font: 600 14px/1 var(--mp-sans); }
.mp .mp-pill-w.on-dark .elementor-heading-title, .mp .mp-404 .mp-pill { background: rgba(255, 255, 255, .12); }
.mp .mp-pill-w .elementor-heading-title::before, .mp .mp-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mp-orange); }
.mp .mp-contact .mp-pill-w .elementor-heading-title::before { background: var(--mp-bone); }

/* Buttons from the Elementor button widget: variants through the widget CSS class */
.mp .mp-b .elementor-button { border-radius: 999px; transition: transform .2s ease, background .2s ease, color .2s ease; }
.mp .mp-b .elementor-button:hover { transform: translateY(-2px); }
.mp .mp-b--orange .elementor-button:hover { background: #FF6A2F; }
.mp .mp-b--ghost .elementor-button, .mp .mp-b--ghost .elementor-button:hover { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.mp .on-dark .mp-b--ghost .elementor-button { color: var(--mp-bone); }
.mp .mp-b--dark .elementor-button, .mp .mp-b--dark .elementor-button:hover { background: var(--mp-night); color: var(--mp-bone); }

/* Link chips */
.mp .mp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mp .mp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1.5px solid var(--mp-line); border-radius: 999px; background: transparent; color: inherit; font: 600 15px/1.2 var(--mp-sans); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.mp .on-dark .mp-chip { border-color: rgba(255, 255, 255, .25); color: var(--mp-bone); }
.mp a.mp-chip::after { content: "↗"; color: var(--mp-orange); }
.mp .mp-chip:hover, .mp .on-dark .mp-chip:hover { background: var(--mp-orange); border-color: var(--mp-orange); color: var(--mp-night); }
.mp a.mp-chip:hover::after { color: var(--mp-night); }
.mp .mp-tile-links { margin-top: auto; padding-top: 28px; }

/* Content above the decorative feathers */
.mp .mp-above { position: relative; z-index: 1; }

/* ---------- Home hero ---------- */
.mp .mp-hero-mark, .mp .mp-page-mark, .mp .mp-contact { position: relative; }
.mp .mp-hero-feather { position: absolute !important; right: -12%; top: 14%; width: 118% !important; max-width: none !important; pointer-events: none; }
.mp .mp-hero-feather img { width: 100%; opacity: .96; }
.mp .mp-page-mark .mp-hero-feather { right: -30%; top: 18%; width: 150% !important; }
@media (max-width: 1024px) {
  .mp .mp-hero-mark .mp-hero-feather { top: 4%; right: -18%; width: 125% !important; }
  .mp .mp-page-mark .mp-hero-feather { top: 10%; right: -10%; width: 110% !important; }
}

/* ---------- Story: portrait on black, badge on the photo ---------- */
.mp .mp-story-photo { position: relative; }
.mp .mp-portrait, .mp .mp-portrait img { height: 100%; }
.mp .mp-portrait img { width: 100%; min-height: 560px; object-fit: cover; object-position: center 30%; }
.mp .mp-badge { position: absolute !important; left: 24px; bottom: 24px; width: auto !important; }
.mp .mp-badge .elementor-heading-title { padding: 10px 18px; border-radius: 999px; background: var(--mp-orange); }
@media (max-width: 1024px) { .mp .mp-portrait img { min-height: 0; aspect-ratio: 4 / 5; } }

/* ---------- Works ---------- */
.mp .mp-work { text-decoration: none; transition: transform .25s ease; }
.mp .mp-work:hover { transform: translateY(-4px); }
.mp .mp-work-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--mp-line); }
.mp .mp-kind .elementor-heading-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp .mp-status { padding: 3px 9px; border-radius: 999px; background: var(--mp-night); color: var(--mp-bone) !important; font-size: 12px; }
.mp .mp-work-foot { margin-top: auto; padding-top: 16px; }
.mp .mp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mp .mp-tags span { padding: 4px 10px; border-radius: 999px; background: var(--mp-bone); color: var(--mp-night); font-size: 12px; font-weight: 600; }
.mp .mp-host { margin: 14px 0 0; color: var(--mp-night); font-size: 13px; font-weight: 700; }
.mp .mp-host::after { content: " ↗"; color: var(--mp-orange-deep); }
.mp .mp-work.is-hidden { display: none; }
.mp .mp-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.mp .mp-filters .mp-chip span { opacity: .6; font-weight: 500; }
.mp .mp-filters .mp-chip[aria-pressed="true"] { background: var(--mp-night); border-color: var(--mp-night); color: var(--mp-bone); }
@media (min-width: 1025px) { .mp .mp-works .mp-work .elementor-heading-title { overflow-wrap: anywhere; } }

/* ---------- FAQ: one white card per question ---------- */
.mp .mp-faq .elementor-accordion { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px; }
@media (max-width: 767px) { .mp .mp-faq .elementor-accordion { grid-template-columns: 1fr; } }
.mp .mp-faq .elementor-accordion-item { border: 0 !important; border-radius: 22px; background: var(--mp-white); overflow: hidden; }
.mp .mp-faq .elementor-tab-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 0 !important; }
.mp .mp-faq .elementor-tab-title a { color: inherit; text-decoration: none; }
.mp .mp-faq .elementor-accordion-icon { order: 2; flex: 0 0 36px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mp-bone); }
.mp .mp-faq .elementor-tab-title.elementor-active .elementor-accordion-icon { background: var(--mp-orange); }
.mp .mp-faq .elementor-accordion-icon { line-height: 0; }
.mp .mp-faq .elementor-accordion-icon svg { display: block; width: 14px; height: 14px; }
.mp .mp-faq .elementor-tab-content { border: 0 !important; }

/* ---------- Contact ---------- */
.mp .mp-contact-feather { position: absolute !important; right: -60px; top: -40px; width: 520px !important; max-width: none !important; opacity: .14; pointer-events: none; }
.mp .mp-mail .elementor-heading-title a { color: var(--mp-night); text-decoration: none; white-space: nowrap; }
.mp .mp-mail .elementor-heading-title a:hover { text-decoration: underline; text-underline-offset: 8px; }

/* ---------- Pages that are not built with Elementor (the policies of Lobbit Cookie Consent) ---------- */
/* Hello Elementor keeps them in a narrow column: here they get the site width and a white block. */
.mp:not(.elementor-page) main.site-main { box-sizing: border-box; width: 100%; max-width: calc(1280px + 2 * var(--mp-gutter)); margin: 0 auto; padding: 28px var(--mp-gutter) 0; }
.mp .custcc-frame { padding: 0; }
.mp .custcc-policy { max-width: none; padding: clamp(28px, 5vw, 72px); border-radius: 22px; background: var(--mp-white); color: #3B3531; }
.mp .custcc-policy > * { max-width: 46em; }
.mp .custcc-policy-title { margin: 0 0 28px; color: var(--mp-night); font: 800 clamp(34px, 4.6vw, 60px)/.98 var(--mp-display); letter-spacing: -.02em; }
.mp .custcc-policy h2 { margin: 44px 0 14px; color: var(--mp-night); font: 700 clamp(24px, 2.4vw, 32px)/1.1 var(--mp-display); letter-spacing: -.02em; }
.mp .custcc-policy h3 { margin: 28px 0 10px; color: var(--mp-night); font: 700 20px/1.2 var(--mp-display); }
.mp .custcc-policy a { color: var(--mp-orange-deep); }
.mp .custcc-policy > :has(table), .mp .custcc-policy table { max-width: none; }
.mp .custcc-policy table { font-size: 14px; }

/* ---------- Cookie banner (Lobbit Cookie Consent): its colors come from the plugin settings ---------- */
/* An orange edge keeps the dark banner apart from the dark blocks of the page. */
#custcc-root.custcc { border: 1.5px solid var(--mp-orange); border-radius: 20px; }

/* ---------- Footer (Elementor template) ---------- */
.mp .mp-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mp .mp-foot-links a { color: var(--mp-night); text-decoration: none; }
.mp .mp-foot-links a:hover { color: var(--mp-orange-deep); }
.mp-footer-fallback { margin: 0; padding: 32px var(--mp-gutter); color: var(--mp-muted); font-size: 14px; text-align: center; }
/* The footer template has its own "Preferenze cookie" link (#custcc-preferences): the paragraph the plugin prints is not needed. */
.mp .custcc-recall { display: none; }

/* ---------- 404 ---------- */
.mp-404 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1280px; margin: 0 auto; padding: 28px var(--mp-gutter) 0; }
.mp-404-text, .mp-404-side { position: relative; overflow: hidden; border-radius: 22px; }
.mp-404-text { padding: clamp(28px, 5vw, 72px); background: var(--mp-night); color: var(--mp-bone); }
.mp-404 h1 { margin: 24px 0 0; color: var(--mp-bone); font: 800 clamp(34px, 4.6vw, 68px)/.96 var(--mp-display); letter-spacing: -.02em; }
.mp-404 h1 span { color: var(--mp-orange); }
.mp-404-text p { margin: 24px 0 32px; color: var(--mp-soft); font-size: 18px; }
.mp-404 .mp-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.mp-404 .mp-btn--ghost { color: var(--mp-bone); }
.mp-404-side { display: flex; align-items: flex-end; min-height: 420px; padding: clamp(28px, 4vw, 48px); background: var(--mp-orange); }
.mp-404-side img { position: absolute; right: -20%; top: 10%; width: 130%; max-width: none !important; transform: rotate(-12deg); }
.mp-404-side strong { position: relative; color: var(--mp-night); font: 800 clamp(90px, 11vw, 160px)/.8 var(--mp-display); letter-spacing: -.05em; }
@media (max-width: 1024px) { .mp-404 { grid-template-columns: 1fr; } .mp-404-side { min-height: 300px; } }