/* ============================================================================
   safari-compat.css
   ----------------------------------------------------------------------------
   Loaded LAST in _Layout.cshtml. Everything here is ADDITIVE and safe: it adds
   Safari/-webkit- fallbacks and does NOT change the visual design on any other
   browser. You should never need to edit this by hand.

   What the refactor already fixed elsewhere (not repeated here):
     • The nested-document nav/footer injection  -> fixed by the partials.
     • position: sticky on the navbar            -> -webkit-sticky added in nav.css.
     • appearance:none on the product dropdowns   -> already had -webkit-appearance
                                                     in the original CSS (no change needed).
   ============================================================================ */

/* iOS Safari inflates font sizes on orientation change unless this is set.
   A very common cause of "text looks wrong only on iPhone". Harmless elsewhere. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Smooth momentum scrolling for any scrollable panels on old iOS Safari. Harmless. */
body,
.modal,
.modal-content {
    -webkit-overflow-scrolling: touch;
}


/* ----------------------------------------------------------------------------
   OPTIONAL — only enable if you still support OLD iOS/Safari ( < 14.1 ).
   Modern Safari supports fl<ex/grid `gap`, so these stay commented by default
   to avoid shifting the layout on current browsers. Uncomment per-component if
   you confirm real users on old iPhones/iPads.
   ----------------------------------------------------------------------------

   Example gap fallback for a flex row that uses `gap: 16px;`:

     .some-flex-row > * + * { margin-left: 16px; }

   Example gap fallback for a grid/column stack that uses `gap: 24px;`:

     .some-stack > * + * { margin-top: 24px; }
   ---------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
   .webp IMAGES ( invisible on Safari < 14 )
   ----------------------------------------------------------------------------
   CSS cannot fall back an <img src="x.webp">. If you must support Safari < 14,
   change those 8 views to use <picture> so Safari gets a .jpg/.png:

     <picture>
       <source srcset="~/Images/AboutUs_backImg.webp" type="image/webp" />
       <img src="~/Images/AboutUs_backImg.jpg" alt="..." />
     </picture>

   Safari 14 (2020) and newer read .webp fine, so this is only for legacy devices.
   ---------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
   fit-content FIXES (the cause of the giant stretched logo in Safari)
   ----------------------------------------------------------------------------
   `height: fit-content` on an <img>/block is ignored by Chrome/Firefox but
   Safari honours it and stretches the element to fill the flex row. These
   overrides load last, so they correct the copies that live in Rough.css
   without you editing that file. (The nav's own copies are already fixed in
   nav.css.)
   ---------------------------------------------------------------------------- */
.logo_NeW a img {
    height: auto; /* never let the logo stretch */
}

.col,
.col1 {
    height: auto; /* was height: fit-content */
}

.popup-left li {
    width: -webkit-fit-content; /* Safari needs the prefix */
    width: fit-content;
}