/* ============================================
   JM GLOBAL MARKETING — DESIGN REFRESH 2026
   Additive layer only: refines the existing
   design system (css/style.css) site-wide.
   Does NOT remove or override structural rules,
   so every existing page keeps working exactly
   as before, just with a more premium finish.
   ============================================ */

:root {
  /* Formalizing the gold accent already used ad-hoc
     across hero sections as a real design token —
     matched precisely to the official JM Global Marketing logo */
  --gold: #CEA85C;
  --gold-soft: rgba(206,168,92,.15);
  --gold-line: rgba(206,168,92,.35);

  /* Slightly warmer, more premium shadow tone */
  --shadow-premium: 0 24px 60px rgba(10,22,40,.14);
}

/* Smoother rendering + selection color themed to the brand */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--gold-soft); color: var(--blue-deep); }

/* Slightly refined focus ring for accessibility, doesn't change layout */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---- Cards: subtle gold edge + lift on hover (additive, doesn't replace .card) ---- */
.card {
  position: relative;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color .3s ease;
  pointer-events: none;
}
.card:hover::after { border-color: var(--gold-line); }
.card:hover { box-shadow: var(--shadow-premium); }

/* ---- Buttons: soft shine sweep on hover, no layout change ---- */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
  pointer-events: none;
}
.btn:hover::before { left: 130%; }

/* ---- Country / flag chips used across "dove lavoriamo" style pages ---- */
.badge-country {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid rgba(30,58,138,.1);
  border-radius: 12px; padding: 12px 14px;
  font-size: 14px; font-weight: 500; color: var(--text-dark);
  transition: var(--transition);
}
.badge-country:hover {
  border-color: var(--gold-line);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

/* ---- Tag pill: slightly refined, still matches existing .tag usage ---- */
.tag {
  position: relative;
}

/* ---- Section dividers for premium feel between light/dark blocks ---- */
.section--dark { position: relative; }
.section--dark::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}

/* ---- Images: consistent gentle rounding + premium shadow where used ---- */
img { -webkit-user-drag: none; }

/* ---- Reduced motion respect (accessibility, additive safeguard) ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================
   CLARITY PASS — stronger visual hierarchy so
   the primary action always stands out and the
   page reads faster at a glance. Still additive:
   only strengthens existing .btn variants, does
   not remove or rename any class.
   ============================================ */

/* Primary CTA: bolder, warmer, unmistakably "the" button to press */
.btn--accent {
  background: linear-gradient(135deg, var(--gold) 0%, #b8901f 100%) !important;
  color: #1a1200 !important;
  box-shadow: 0 10px 28px rgba(201,162,39,.35);
  font-weight: 800 !important;
}
.btn--accent:hover { box-shadow: 0 14px 34px rgba(201,162,39,.5); transform: translateY(-2px); }

/* Secondary / outline CTAs: quieter, so they don't compete with the primary one */
.btn--outline { opacity: .9; }
.btn--outline:hover { opacity: 1; }

/* Sticky nav: backdrop-filter removed — it was creating a CSS "containing
   block" for position:fixed descendants (the mobile menu), which broke
   the full-screen mobile nav overlay (it rendered relative to the navbar
   itself instead of the viewport, collapsing to a sliver instead of
   covering the screen). This was a pre-existing issue in the original
   stylesheet, made worse by strengthening the blur here — removing it
   fixes the mobile menu completely, with only a tiny, invisible-to-most
   cosmetic trade-off (no frosted-glass blur behind the sticky nav). */
.nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Headings: a touch more breathing room = easier to read at a glance */
h1, h2 { letter-spacing: -0.01em; }
.section-header p { max-width: 620px; margin-left: auto; margin-right: auto; }

/* Make the floating WhatsApp button the visual anchor for "contact" on every page */
a[aria-label="WhatsApp"] { animation: jm-wa-pulse 2.4s ease-in-out infinite; }
@keyframes jm-wa-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(37,211,102,.45); }
  50% { box-shadow: 0 8px 30px rgba(37,211,102,.75); }
}
@media (prefers-reduced-motion: reduce) {
  a[aria-label="WhatsApp"] { animation: none; }
}

/* ============================================
   MOBILE PASS — many pages set grid-template-columns
   directly as an inline style (style="..."), which
   completely bypasses the responsive breakpoints
   defined in style.css (those only target CSS classes,
   not inline styles). This fixes it globally, for
   every page, without editing each file individually.
   ============================================ */

/* Tablets: ease very wide grids down first */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}

/* Phones: collapse any hardcoded multi-column inline grid to one column */
@media (max-width: 640px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero-style sections often set a fixed large top/bottom padding
     (e.g. padding:80px 24px) — too much empty space on a phone screen */
  [style*="padding:80px 24px"],
  [style*="padding: 80px 24px"] {
    padding: 44px 20px !important;
  }

  /* Large hardcoded gaps between grid items waste space on narrow screens */
  [style*="gap:60px"], [style*="gap: 60px"] { gap: 28px !important; }
  [style*="gap:40px"], [style*="gap: 40px"] { gap: 20px !important; }

  /* Keep every section's inner content readable, no forced min-width overflow */
  table { max-width: 100%; }

  /* Slightly smaller display fonts on very narrow phones so headlines don't
     wrap awkwardly mid-word */
  h1 { word-break: break-word; }
}

/* Extra-small phones */
@media (max-width: 380px) {
  [style*="font-size:48px"], [style*="font-size: 48px"] { font-size: 34px !important; }
  [style*="padding:18px 40px"], [style*="padding: 18px 40px"] { padding: 16px 22px !important; }
}

/* Prevent any accidental horizontal scroll from wide inline elements */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }