/* Farino Homepage template. Loaded only on pages using that template. */

html { scroll-behavior: smooth; }
body.farino-page { margin: 0; padding: 0; background: #F7F3EA; -webkit-font-smoothing: antialiased; }

.farino-root, .farino-root *, .farino-root *::before, .farino-root *::after { box-sizing: border-box; }
.farino-root a { color: #E0251B; text-decoration: none; }
.farino-root a:hover { color: #FFC72C; }
.farino-root img { display: block; max-width: none; border-radius: 0; box-shadow: none; }
.farino-root [hidden] { display: none !important; }

/* Keep theme / plugin typography rules from leaking into the design */
.farino-root :is(h1, h2, h3, p, a, span, nav, button, article) { font-family: inherit; }
.farino-root button { font: inherit; box-shadow: none; }

@keyframes farino-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes farino-spin { to { transform: rotate(360deg); } }
@keyframes farino-bob { 0%,100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-8px); } }

/* Responsive nav (breakpoint 920px) */
.only-desktop { display: contents; }
.only-mobile { display: none; }
@media (max-width: 919.98px) {
  .only-desktop { display: none; }
  .only-mobile { display: contents; }
}
@media (min-width: 920px) {
  .mobile-nav { display: none !important; }
}

.farino-root picture { display: contents; }

/* ------------------------------------------------------------------
 * Phones (up to 767px). Desktop and tablet keep the inline design untouched.
 * ---------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Header: logo, order button and menu button on one balanced row */
  .farino-header-inner { padding: 10px 16px !important; gap: 10px !important; }
  .farino-logo { height: 40px !important; }
  .farino-order-btn { min-height: 42px !important; padding: 0 16px !important; font-size: 12px !important; letter-spacing: 0.06em !important; }
  .farino-nav-toggle { width: 42px !important; height: 42px !important; }

  /* Hero: photo on top, then badge, headline, text and buttons stacked below it */
  .farino-hero { --farino-hero-img: clamp(280px, 78vw, 360px); display: block !important; min-height: 0 !important; }
  .farino-hero-img { inset: 0 0 auto 0 !important; height: var(--farino-hero-img) !important; }
  .farino-hero-img--bundled { object-position: 80% 0 !important; }
  .farino-hero-overlay { inset: 0 0 auto 0 !important; height: calc(var(--farino-hero-img) + 1px) !important; background: linear-gradient(to top, #0E0D0C 0%, rgba(14,13,12,0.72) 26%, rgba(14,13,12,0.12) 62%, rgba(14,13,12,0.18) 100%) !important; }
  .farino-hero-badge { top: calc(var(--farino-hero-img) - 122px) !important; right: 16px !important; width: 96px !important; }
  .farino-hero-content { padding: calc(var(--farino-hero-img) - 14px) 20px 36px !important; }
  .farino-hero-kicker { font-size: 11px !important; letter-spacing: 0.2em !important; margin-bottom: 12px !important; }
  .farino-hero-title { font-size: clamp(34px, 10.2vw, 46px) !important; font-stretch: 100% !important; line-height: 0.94 !important; letter-spacing: -0.01em !important; }
  .farino-hero-title br { display: none; }
  .farino-hero-row { display: block !important; margin-top: 18px !important; }
  .farino-hero-text { max-width: none !important; font-size: 16px !important; line-height: 1.5 !important; color: rgba(247,243,234,0.86) !important; }
  .farino-hero-btns { margin-top: 22px !important; gap: 10px !important; }
  .farino-hero-btn { flex: 1 1 auto !important; justify-content: center !important; text-align: center; min-height: 54px !important; padding: 0 18px !important; font-size: 13px !important; letter-spacing: 0.08em !important; }
}
@media (max-width: 359.98px) {
  .farino-header-inner { padding: 10px 12px !important; gap: 8px !important; }
  .farino-logo { height: 36px !important; }
  .farino-order-btn { padding: 0 12px !important; font-size: 11px !important; }
  .farino-hero-content { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Long words (mostly French) wrap instead of running off the screen */
.farino-root :is(h1, h2, h3) { overflow-wrap: break-word; }
@media (max-width: 480px) {
  body.farino-lang-fr .farino-cta-btn { padding: 20px 24px !important; letter-spacing: 0.06em !important; }
}

/* Sticky header sits below the WordPress admin bar for logged-in users */
body.admin-bar .farino-header { top: 32px !important; }
@media (max-width: 782px) { body.admin-bar .farino-header { top: 46px !important; } }
@media (max-width: 600px) { body.admin-bar .farino-header { top: 0 !important; } }

/* Hover states */
@media (hover: hover) {
  .farino-root .hv-1:hover { transform: rotate(-2deg) scale(1.04) !important; }
  .farino-root .hv-2:hover { color: #E0251B !important; }
  .farino-root .hv-3:hover { transform: rotate(-3deg) scale(1.05) !important; color: #FFC72C !important; }
  .farino-root .hv-4:hover { transform: rotate(3deg) scale(1.05) !important; color: #E0251B !important; }
  .farino-root .hv-5:hover { transform: rotate(-2deg) translateY(-6px) !important; }
  .farino-root .hv-6:hover { transform: rotate(2deg) translateY(-6px) !important; }
  .farino-root .hv-7:hover { transform: translateX(6px) !important; }
  .farino-root .hv-8:hover { transform: rotate(4deg) scale(1.05) !important; }
  .farino-root .hv-9:hover { transform: rotate(-3deg) scale(1.06) !important; color: #FFC72C !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .farino-root *, .farino-root *::before, .farino-root *::after { animation: none !important; transition: none !important; }
}