/* ==========================================================================
   Food Diplomacy — corrections layer
   Loaded last, after the theme. Fixes defects only: no colour, font, or
   layout decision is changed. Every rule below is here because something was
   measurably wrong, not because it could look different.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Eyebrow label alignment
   The theme puts padding-left:16px on .section-title headings to make room for
   the small marker, so the label text sits 16px right of the headline beneath
   it at every breakpoint. Hang the marker in the gutter instead, so the label
   and the heading share one left edge.
   -------------------------------------------------------------------------- */
.section-title .elementor-heading-title {
  padding-left: 0;
}
.section-title .elementor-heading-title::before {
  left: -16px;
}
/* Phones have a 20px gutter, so pull the marker in a little less — it stays
   on screen and the label still lines up with the headline. */
@media (max-width: 767px) {
  .section-title .elementor-heading-title::before {
    left: -13px;
  }
}


/* --------------------------------------------------------------------------
   2. Mobile header
   The logo rendered at 77px inside a ~230px tall bar, so the header ate a
   quarter of a phone screen before any content. Same logo, same layout —
   proportioned for the viewport.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ata-site-logo-img,
  header .ata-site-logo-img {
    height: 56px !important;
    width: auto !important;
  }
  .elementskit-menu-hamburger,
  .elementskit-menu-close,
  .elementskit-menu-close.elementskit-menu-toggler {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .ata-site-logo-img,
  header .ata-site-logo-img {
    height: 48px !important;
  }
  /* burger: a comfortable 44px touch target */
  .elementskit-menu-hamburger {
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .elementskit-menu-close,
  .elementskit-menu-close.elementskit-menu-toggler {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .elementskit-btn,
  .elementor-button-link.elementor-button,
  a.elementor-button {
    min-height: 44px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    box-sizing: border-box;
  }
}
@media (max-width: 480px) {
  .ata-site-logo-img,
  header .ata-site-logo-img {
    height: 42px !important;
  }
}


/* --------------------------------------------------------------------------
   3. Tap targets
   Menu rows and inline links were below the 40px minimum on touch screens.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementskit-navbar-nav-default .elementskit-navbar-nav > li > a,
  .elementskit-submenu-panel > li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* --------------------------------------------------------------------------
   4. Focus visibility
   The theme removes outlines without providing a replacement, so keyboard
   users cannot see where they are.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #0B8381;
  outline-offset: 3px;
  border-radius: 3px;
}


/* --------------------------------------------------------------------------
   5. Media defaults
   width/height are now on every <img>; these two rules stop those attributes
   from distorting images inside flexible containers.
   -------------------------------------------------------------------------- */
img,
svg,
video {
  max-width: 100%;
}
/* The attributes exist so the browser can reserve the right box before the
   file arrives. Once CSS sizes one axis, the other must follow the ratio —
   otherwise the attribute wins and the image renders at its intrinsic size. */
img[width][height] {
  height: auto;
}


/* --------------------------------------------------------------------------
   6. Nothing may scroll sideways
   -------------------------------------------------------------------------- */
html,
body {
  overflow-x: clip;
}


/* --------------------------------------------------------------------------
   7. Respect reduced-motion
   The theme animates on scroll unconditionally.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .elementor-invisible {
    opacity: 1 !important;
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   8. Content must never be stuck invisible
   .elementor-invisible is opacity:0 until the builder's script reveals it. If
   that script is slow, blocked or errors, whole sections stay blank. This is
   a safety net, not an animation change: the reveal still runs normally.
   -------------------------------------------------------------------------- */
@media (scripting: none) {
  .elementor-invisible {
    opacity: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   9. Perf stability (no visual redesign)
   Hide theme preloader overlay; reserve header height to cut CLS.
   -------------------------------------------------------------------------- */
.theme-preloader {
  display: none !important;
}
.ekit-template-content-header {
  min-height: 72px;
}
@media (max-width: 1024px) {
  .ekit-template-content-header {
    min-height: 64px;
  }
}

/* --------------------------------------------------------------------------
   10. Cross-device / Safari / Android / iPad hardening
   Layout and colours unchanged — only overflow, tap, and safe-area fixes.
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html,
body {
  overflow-x: hidden; /* Safari < 16 fallback */
  overflow-x: clip;
  max-width: 100%;
}

/* Notch / home-indicator safe areas (iPhone) */
body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* iOS Safari zooms inputs under 16px — keep forms usable without zoom jump */
@media (max-width: 1024px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Sticky WhatsApp clear of home indicator */
a.fd-whatsapp,
.fd-whatsapp {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  right: calc(16px + env(safe-area-inset-right, 0px)) !important;
}

/* Prevent Elementor absolute/wide rows from forcing horizontal scroll.
   Nested child containers are exempt: Elementor uses them to build deliberate
   overlaps, setting --width to things like calc(100% + 150px) so an element
   sits across the one beside it. Clamping those to the parent's width silently
   flattened the design — the About-section overlap image and three containers
   on every project detail page were all being cut down (measure again any time
   with `node .work/find-clamped.js`).
   The rows this rule exists for are top-level ones, and a child that does
   overhang still cannot produce a scrollbar, because html/body are overflow-x:
   clip further down. */
.elementor-section,
.e-con:not(.e-child),
.e-con-inner,
.elementor-widget-container,
.elementor-container {
  max-width: 100%;
}
/* --------------------------------------------------------------------------
   Half-drawn badge on first paint
   The rotating "14+ Years Experiences" badge is an SVG that Elementor's
   text-path script writes into an empty <div class="e-text-path">. Until that
   runs, the widget paints its background logo with no ring of text around it —
   an element caught mid-build, which reads as a broken page rather than a
   loading one.
   Hide it while that div is still empty. No JS involved: the selector stops
   matching by itself the moment the SVG is written.
   This hides the half-built state; it does not remove the reflow. The widget
   still grows when the SVG lands (measured 120x32 -> 120x128), exactly as it
   did before — fixing that needs a reserved height on the widget, which is a
   layout change and so a separate decision.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Hero entrance, without waiting for a script
   Elementor's entrance animation starts an element at visibility:hidden and
   reveals it when its JS runs. With the critical CSS inlined the hero paints
   before the scripts arrive, so the eyebrow, the sub-heading and the buttons
   would sit blank until then — the half-built first screen this work set out to
   remove.
   Replaced with a plain CSS fade-up that needs no script, so it begins on the
   first paint and the content is never hidden waiting for anything. Same
   direction and feel as the original (fadeInUp), staggered so the hero reads
   top to bottom.
   Scoped to these three ids on the homepage hero — every other section on every
   page keeps its own scroll animation untouched.
   -------------------------------------------------------------------------- */
@keyframes fd-hero-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* The container must never be the thing that hides its children, and it must
   not animate as a block — otherwise its transform stacks on theirs. */
.elementor-67 .elementor-element.elementor-element-bddc32f {
  visibility: visible !important;
  animation: none !important;
  opacity: 1 !important;
}

/* Each line arrives on its own beat, top to bottom. */
.elementor-67 .elementor-element.elementor-element-83c75ee,
.elementor-67 .elementor-element.elementor-element-7281be5,
.elementor-67 .elementor-element.elementor-element-6df85b5,
.elementor-67 .elementor-element.elementor-element-06248fb,
.elementor-67 .elementor-element.elementor-element-2f1feec {
  visibility: visible !important;
  animation: fd-hero-in .55s cubic-bezier(.22, 1, .36, 1) both !important;
  will-change: opacity, transform;
}
.elementor-67 .elementor-element.elementor-element-83c75ee { animation-delay: .05s !important; }
.elementor-67 .elementor-element.elementor-element-7281be5 { animation-delay: .28s !important; }
.elementor-67 .elementor-element.elementor-element-6df85b5 { animation-delay: .40s !important; }
.elementor-67 .elementor-element.elementor-element-06248fb { animation-delay: .50s !important; }
.elementor-67 .elementor-element.elementor-element-2f1feec { animation-delay: .50s !important; }

/* The headline rises but never fades.
   Largest Contentful Paint ignores anything at opacity 0, so fading the biggest
   text on the page in would push the metric out by the whole delay plus
   duration. Moving it costs nothing: it is painted, and visible, from the first
   frame. */
@keyframes fd-hero-rise {
  from { transform: translate3d(0, 16px, 0); }
  to { transform: none; }
}
.elementor-67 .elementor-element.elementor-element-24302db {
  visibility: visible !important;
  opacity: 1 !important;
  animation: fd-hero-rise .55s cubic-bezier(.22, 1, .36, 1) both !important;
  animation-delay: .16s !important;
  will-change: transform;
}
/* Section 7 above already flattens animation-duration under reduced-motion, so
   these arrive instantly for anyone who asked for that. */

/* --------------------------------------------------------------------------
   Video modal
   fd-video-scroll.js builds this overlay, but the styles it needs were never
   in the project. Without them the modal was an unstyled div at the end of the
   body holding an iframe with no size: the video played, and all you got was
   the sound.
   -------------------------------------------------------------------------- */
.fd-video-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px
    max(16px, env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, .88);
}
.fd-video-modal__frame {
  position: relative;
  width: min(100%, 1100px);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
/* Browsers without aspect-ratio still need a box to put the iframe in. */
@supports not (aspect-ratio: 16 / 9) {
  .fd-video-modal__frame {
    height: 0;
    padding-bottom: 56.25%;
  }
}
.fd-video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.fd-video-modal__close {
  position: absolute;
  top: max(8px, env(safe-area-inset-top, 0px));
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 34px;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.fd-video-modal__close:hover {
  opacity: .75;
}
/* The script adds this while an overlay is up so the page behind cannot move. */
html.fd-video-scroll-lock,
body.fd-video-scroll-lock {
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Rotating badge
   Only the SVG turns. The monogram behind it is the widget's own background
   image, so spinning the widget would spin the logo with it — the ring of text
   is meant to travel around a logo that stays upright.
   Now that the SVG is baked into the markup this needs no script: it starts on
   the first paint. Section 7 above flattens it for anyone who asked for
   reduced motion.
   -------------------------------------------------------------------------- */
@keyframes fd-badge-spin {
  to {
    transform: rotate(360deg);
  }
}
.elementor-widget-text-path .e-text-path > svg {
  animation: fd-badge-spin 18s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

.elementor-widget-text-path {
  transition: opacity .35s ease;
}
.elementor-widget-text-path:has(.e-text-path:empty) {
  opacity: 0;
}
img,
video,
iframe,
svg,
table {
  max-width: 100%;
  height: auto;
}
iframe {
  width: 100% !important;
}

/* Long URLs / unbroken strings in blog content */
.elementor-widget-theme-post-content,
.elementor-widget-text-editor,
.fd-content {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* Tablet (iPad portrait / small Android tablets): keep gutters usable */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-section > .elementor-container,
  .e-con-boxed > .e-con-inner {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}

/* Phones: avoid content kissing screen edges when theme padding collapses */
@media (max-width: 767px) {
  .e-con-boxed > .e-con-inner {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  /* Hero text shouldn't overflow the viewport */
  .elementor-widget-heading .elementor-heading-title {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* Off-canvas menu: full height with safe area */
  .elementskit-menu-container {
    max-width: min(100vw, 360px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* iPad landscape / large tablet: ensure burger or desktop nav doesn't collide */
@media (min-width: 768px) and (max-width: 1024px) {
  .ata-site-logo-img,
  header .ata-site-logo-img {
    height: 52px !important;
    width: auto !important;
  }
}

/* Reduce 300ms tap delay legacy feel; keep double-tap zoom */
a,
button,
.elementor-button,
.ekit-wid-con a {
  touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   11. Mobile nav — Contact Us (desktop already has header CTA button)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  #menu-header-menu .fd-nav-contact-mobile {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  #menu-header-menu .fd-nav-contact-mobile > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}