/* ==========================================================================
   Manazel Al-Sham - site customisations
   Loaded after the Webflow stylesheets. Everything here is either a fix or a
   deliberate improvement on the original export; nothing overrides brand style.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Intrinsic image sizing
   Every <img> now carries width/height attributes so the browser can reserve
   space before the image arrives (removes layout shift / improves CLS).
   Webflow sets `max-width:100%` but never `height:auto`, which would make a
   constrained image keep its full attribute height. This restores the ratio.
   -------------------------------------------------------------------------- */
img {
  height: auto;
}

/* --------------------------------------------------------------------------
   2. Contact details block
   The original markup centred a single phone icon against a stack of numbers,
   so the first number floated above the icon and the spacing between numbers
   was inconsistent. This lays the rows out on one rhythm with the icon locked
   to the first line, and uses tabular figures so digits align in a column.
   -------------------------------------------------------------------------- */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: 20px 0 10px;
}

/* Every line in the block - the email, each phone number and the address -
   sits on the same 40px pitch, and every one of them is a 40px tap target. */
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  color: var(--white);
  text-decoration: none;
  transition: opacity .2s;
}

/* The phone rows carry their own padding on each link, so the wrapper drops it
   and the first number lines up exactly like the email above it. */
.contact-row--phones {
  padding: 0;
}

/* The icon is nudged down to sit on the first text line's optical centre.
   The matching negative bottom margin keeps it from adding to the row height,
   so every row stays exactly one 40px step tall. */
.contact-details .contact-icon {
  flex: 0 0 22px;
  margin-top: 10px;
  margin-bottom: -10px;
  margin-right: 0;
}

.contact-details .contact-icon img {
  width: 100%;
  height: auto;
  display: block;
}

.contact-details .contact-text {
  margin: 0;
  color: var(--white);
  font-family: Carlito, sans-serif;
  font-size: 16px;
  line-height: 22px;
  text-decoration: none;
}

.contact-phones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-phone {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: .015em;
  white-space: nowrap;
  padding: 9px 14px 9px 0;
}

a.contact-row:hover,
.contact-phone:hover {
  opacity: .8;
}

/* Match the same figure treatment on the Find Us branch numbers */
.link, .link-2, .link-3, .link-4, .link-5 {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: .015em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Contact page hero background
   Was a 6000x4000 / 526 KB JPEG. Now an optimised WebP with a smaller variant
   for phones. `background-attachment: fixed` is dropped below desktop because
   iOS Safari does not support it and renders the image at the wrong scale.
   -------------------------------------------------------------------------- */
.big-image-form-04 {
  background-image:
    linear-gradient(rgba(51, 40, 28, .46), rgba(51, 40, 28, .46)),
    url('../images/contact-hero-1920.webp');
}

@media screen and (max-width: 991px) {
  .big-image-form-04 {
    background-image:
      linear-gradient(rgba(51, 40, 28, .46), rgba(51, 40, 28, .46)),
      url('../images/contact-hero-1080.webp');
    background-attachment: scroll, scroll;
  }
}

/* --------------------------------------------------------------------------
   3b. Find Us maps
   The Webflow map widget authenticated with Webflow's own Google Maps key and
   failed with BillingNotEnabledMapError, so every map rendered greyed out under
   a "For development purposes only" watermark. These are keyless Google Maps
   embeds instead - no API key, no billing account, no quota.
   -------------------------------------------------------------------------- */
.map-embed {
  width: 100%;
  height: 400px;
  display: block;
  border: 3px solid var(--peru);
  border-radius: 20px;
  background: #e5e3df;
}

@media screen and (max-width: 767px) {
  .map-embed {
    height: 320px;
  }
}

/* --------------------------------------------------------------------------
   3c. "Explore Our Store Selections" logo grid
   The five columns were `1fr`, which defaults to `min-width:auto` and so cannot
   shrink below the cell's content (100px logo + 2x45px padding = 190px). Five
   of those plus gaps needs 1006px, so the page scrolled sideways on any
   viewport between roughly 992px and 1005px. `minmax(0, 1fr)` lets the tracks
   shrink; the padding and logo size now scale with the viewport.
   -------------------------------------------------------------------------- */
.lynx-grid-5-customers {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lynx-customer {
  padding-left: clamp(12px, 2.4vw, 45px);
  padding-right: clamp(12px, 2.4vw, 45px);
}

.lynx-image-customer {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .lynx-grid-5-customers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 479px) {
  .lynx-grid-5-customers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   4. Forms - accessible labels and the Netlify honeypot
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden-field {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* The select shows placeholder-grey until a real option is chosen */
select.text-field-inform:invalid,
select.text-field-inform option[value=""] {
  color: #8a8a8a;
}

/* --------------------------------------------------------------------------
   5. Legal pages - numbered sections are now real <h2> headings
   Restores the visual rhythm the original styled <p> had, plus breathing room.
   -------------------------------------------------------------------------- */
h2.margin-bottom-24px-2._3 {
  margin-top: 32px;
  margin-bottom: 12px;
}

h2.margin-bottom-24px-2._3:first-of-type {
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   6. Accessibility
   The export shipped no visible keyboard focus state anywhere.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  border-radius: 2px;
}

.button-primary:focus-visible,
.button:focus-visible,
.nav-link-2:focus-visible {
  outline: 3px solid var(--tan, #c19a6b);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--peru, #c19a6b);
  color: #fff;
  font-family: Carlito, sans-serif;
  text-decoration: none;
  border-bottom-right-radius: 8px;
}

.skip-link:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .big-image-form-04 {
    background-attachment: scroll, scroll;
  }
}

/* --------------------------------------------------------------------------
   7. Simple centred page (thank-you / 404)
   -------------------------------------------------------------------------- */
.simple-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 5% 100px;
}

.simple-page .simple-page-text {
  max-width: 620px;
  margin: 0 auto 32px;
  font-family: Carlito, sans-serif;
  font-size: 20px;
  line-height: 30px;
  color: #4a4a4a;
}

.simple-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}