/*
 * Project overrides layered on top of the vendored theme stylesheets in the same folder.
 * Linked LAST in app/layout.tsx so these rules win over style.css.
 *
 * Every rule below answers a specific item in the site-owner feedback round; see
 * feedback/site-feedback-actions.csv for the comment each one maps to.
 */

/* Home — "Menu items need to be highlighted to a brighter white" (was #f5f0e9). */
header.fixed .navbar .navbar-nav .nav-item .nav-link {
  color: #fff;
}

/* Header — "The spacing in the top menu appears to be too close."
 * style.css already uses the reference design's 30px nav-link padding at
 * 1481px and up, but steps hard down to 18px under 1480px and 10px under
 * 1300px, so the labels bunch together on common laptop widths.
 *
 * A flat 30px cannot be held all the way down: the six labels are ~621px of
 * text at 14px, and between the 182px logo and the 218px search field only
 * (100vw - 450px) is left for the row, so 30px padding starts wrapping labels
 * onto two lines below ~1450px. Instead ramp the padding across the band so it
 * uses whatever room exists and reaches the full 30px as soon as it fits. The
 * 1105px offset covers the navbar's own 50px padding, the logo, the search
 * field and the scrollbar; /12 spreads the remainder over the six items' two
 * sides each. */
header .navbar .navbar-nav .nav-item .nav-link {
  /* never let a label break across two lines — the ramp below keeps it honest */
  white-space: nowrap;
}
@media (min-width: 1201px) and (max-width: 1480px) {
  header .navbar .navbar-nav .nav-item .nav-link {
    padding-left: clamp(10px, calc((100vw - 1105px) / 12), 30px);
    padding-right: clamp(10px, calc((100vw - 1105px) / 12), 30px);
  }
}

/* Privacy & Cookie Policy / Terms of Use — the policy documents are the first
 * content on the site to use bullet lists and inline links inside .single-typo.
 * style.css resets `ul li { list-style: none }` globally and gives
 * .single-page-wrap no list or link styling at all, so both are restored here. */
.single-container .single-page-wrap .single-list {
  padding-left: 1.4em;
  list-style: disc outside;
}
.single-container .single-page-wrap .single-list li {
  list-style: inherit;
  margin-bottom: 12px;
}
.single-container .single-page-wrap .single-list ul {
  margin-top: 12px;
  padding-left: 1.4em;
  list-style: circle outside;
}
.single-container .single-page-wrap .single-list ul li {
  list-style: inherit;
}
.single-container .single-page-wrap .single-typo a {
  color: inherit;
  text-decoration: underline;
}

/* Home — "Arrow needs to be highlighted white" (deck arrows were 20% white). */
.swiper-button-prev.light-icon,
.swiper-button-next.light-icon,
.swiper-rtl .swiper-button-next.light-icon,
.swiper-rtl .swiper-button-prev.light-icon {
  /* a later theme rule re-asserts the dark colour, hence !important */
  color: #fff !important;
}

/* Home — "Highlight social icons when selected" (footer slide icons). */
.slide-sections .social-icons li a {
  transition: background-color 0.25s ease, color 0.25s ease;
}
.slide-sections .social-icons li a:hover,
.slide-sections .social-icons li a:focus-visible {
  background-color: #5f190c !important;
  color: #fff !important;
}

/* All pages — the Instagram icon sat high and left inside its circle.
 * style.css centres the icon-font glyphs with `text-align: center` +
 * `line-height: 30px`, but the Instagram icon is an inline SVG (the icon font
 * has no Instagram glyph) and `display: block` opts it out of both, parking it
 * flush to the top-left of the 28px circle. Centre just that one anchor —
 * :has(svg) keeps the three icon-font glyphs on their existing baseline. */
footer .social-links ul li a:has(svg) {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* All pages — "Highlight social icons when selected" (site footer).
 * style.css already inverts the circle on hover (background -> #f5f0e9,
 * colour -> #5f190c). This block used to force the icon-font glyphs to #fff on
 * hover, which put a white icon on the now-cream circle and made LinkedIn, X
 * and Facebook disappear; Instagram escaped it because its SVG inherits the
 * anchor colour via fill="currentColor". Every icon now inherits the anchor,
 * so all four highlight identically. Keyboard focus mirrors hover. */
footer .social-links ul li a {
  transition: background-color 0.25s ease, color 0.25s ease;
}
footer .social-links ul li a:focus-visible {
  background: #f5f0e9;
  color: #5f190c;
}

/* Contact & Location — "Address is not in bold as per design". */
.city-details .city-address {
  font-weight: 600;
}

/* Contact & Location — "Underline is missing from under phone number and email". */
.city-details .city-contact a {
  text-decoration: underline;
}