/*
 * Milk World Dairy — visual refinements only.
 * This file does not change Elementor structure, content, colours or functionality.
 */

:root {
  --mwd-navy: #003f73;
  --mwd-green: #16853b;
  --mwd-soft-shadow: 0 14px 38px rgba(0, 45, 82, .10);
  --mwd-hover-shadow: 0 20px 48px rgba(0, 45, 82, .15);
  --mwd-transition: 220ms ease;
}

/* More consistent text rhythm without replacing the site's typography. */
body:not(.elementor-editor-active) .elementor-widget-text-editor p,
body:not(.elementor-editor-active) .elementor-icon-box-description,
body:not(.elementor-editor-active) .elementor-image-box-description {
  line-height: 1.68;
}

body:not(.elementor-editor-active) .elementor-heading-title {
  text-wrap: balance;
}

/* Buttons retain their existing colours and dimensions. */
body:not(.elementor-editor-active) .elementor-button,
body:not(.elementor-editor-active) button,
body:not(.elementor-editor-active) input[type="submit"] {
  transition: transform var(--mwd-transition), box-shadow var(--mwd-transition), filter var(--mwd-transition);
}

@media (hover: hover) {
  body:not(.elementor-editor-active) .elementor-button:hover,
  body:not(.elementor-editor-active) button:hover,
  body:not(.elementor-editor-active) input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 45, 82, .17);
  }
}

body:not(.elementor-editor-active) .elementor-button:focus-visible,
body:not(.elementor-editor-active) button:focus-visible,
body:not(.elementor-editor-active) input:focus-visible,
body:not(.elementor-editor-active) select:focus-visible,
body:not(.elementor-editor-active) textarea:focus-visible,
body:not(.elementor-editor-active) a:focus-visible {
  outline: 3px solid rgba(22, 133, 59, .30);
  outline-offset: 3px;
}

/* Images stay unchanged, with only smoother presentation and hover movement. */
body:not(.elementor-editor-active) .elementor-widget-image img,
body:not(.elementor-editor-active) .elementor-image-box-img img {
  transition: transform 420ms ease, filter 420ms ease;
  backface-visibility: hidden;
}

@media (hover: hover) {
  body:not(.elementor-editor-active) .elementor-widget-image:hover img,
  body:not(.elementor-editor-active) .elementor-image-box-wrapper:hover img {
    transform: scale(1.012);
  }
}

/* Give existing cards a more refined interactive finish without forcing new backgrounds. */
body:not(.elementor-editor-active) .elementor-widget-icon-box > .elementor-widget-container,
body:not(.elementor-editor-active) .elementor-widget-image-box > .elementor-widget-container {
  transition: transform var(--mwd-transition), box-shadow var(--mwd-transition), border-color var(--mwd-transition);
}

@media (hover: hover) {
  body:not(.elementor-editor-active) .elementor-widget-icon-box > .elementor-widget-container:hover,
  body:not(.elementor-editor-active) .elementor-widget-image-box > .elementor-widget-container:hover {
    transform: translateY(-4px);
    box-shadow: var(--mwd-soft-shadow);
  }
}

/* Icon alignment and consistency. Existing icon colours remain authoritative. */
body:not(.elementor-editor-active) .elementor-icon,
body:not(.elementor-editor-active) .elementor-icon-box-icon {
  transition: transform var(--mwd-transition);
}

@media (hover: hover) {
  body:not(.elementor-editor-active) .elementor-widget-icon-box:hover .elementor-icon,
  body:not(.elementor-editor-active) .elementor-widget-icon:hover .elementor-icon {
    transform: translateY(-2px);
  }
}

/* Cleaner navigation/footer interaction without changing layout. */
body:not(.elementor-editor-active) header a,
body:not(.elementor-editor-active) footer a,
body:not(.elementor-editor-active) .elementor-nav-menu a {
  transition: color var(--mwd-transition), opacity var(--mwd-transition), transform var(--mwd-transition);
}

@media (hover: hover) {
  body:not(.elementor-editor-active) footer a:hover {
    opacity: .82;
  }
}

/* Contact page polish; structure and form behaviour remain untouched. */
body:not(.elementor-editor-active) .mwd-contact-card,
body:not(.elementor-editor-active) .mwd-detail-card {
  transition: transform var(--mwd-transition), box-shadow var(--mwd-transition), border-color var(--mwd-transition);
}

@media (hover: hover) {
  body:not(.elementor-editor-active) .mwd-detail-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mwd-hover-shadow);
    border-color: rgba(0, 63, 115, .18);
  }
}

/* Mobile refinements: more breathing room, no structural redesign. */
@media (max-width: 767px) {
  body:not(.elementor-editor-active) .elementor-widget-heading + .elementor-widget-text-editor {
    margin-top: 4px;
  }

  body:not(.elementor-editor-active) .elementor-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body:not(.elementor-editor-active) .elementor-widget-icon-box > .elementor-widget-container,
  body:not(.elementor-editor-active) .elementor-widget-image-box > .elementor-widget-container {
    margin-bottom: 10px;
  }

  body.mwd-story-page:not(.elementor-editor-active) .elementor-widget-icon-box,
  body.mwd-story-page:not(.elementor-editor-active) .elementor-widget-image-box,
  body.mwd-story-page:not(.elementor-editor-active) .elementor-widget-text-editor {
    margin-bottom: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.elementor-editor-active) *,
  body:not(.elementor-editor-active) *::before,
  body:not(.elementor-editor-active) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}