/* ==========================================================================
   Trycity Rentals — responsive and accessibility fixes
   Loaded last so it overrides the generated Elementor CSS.
   Each block notes the specific element it corrects.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Horizontal overflow
   Two desktop-only negative margins stayed applied at mobile widths, where the
   columns are already full width. Result: ~5px of sideways scroll on every
   page. Reset them below the tablet breakpoint.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* header logo column — had margin-left:-7px */
  .elementor-element-410d956 > .elementor-element-populated {
    margin-left: 0 !important;
    --e-column-margin-left: 0px !important;
  }
  /* "Call us free on" widget — had margin-right:-15px */
  .elementor-element-eaab136 > .elementor-widget-container {
    margin-right: 0 !important;
  }
}

/* About page: two auto-width icon widgets resolved to the full 375px inside a
   365px column, pushing the page 10px wide. Let them shrink instead. */
@media (max-width: 767px) {
  .elementor-element-60b8efe3,
  .elementor-element-431440a {
    width: auto !important;
    max-width: 100% !important;
  }
  .elementor-icon-wrapper {
    max-width: 100%;
  }
}

/* Belt and braces: nothing should be able to scroll the page sideways. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Media and embeds never exceed their column. */
img,
video,
iframe,
embed,
object,
svg:not([width]) {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   2. Map embeds
   The Google Maps iframes carried hard-coded width/height attributes
   (600x450 and 150x150). Replaced with an aspect-ratio wrapper so they scale.
   -------------------------------------------------------------------------- */
.tc-map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  background: #eceff1;
}

.tc-map-embed > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767px) {
  .tc-map-embed {
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   3. Tap targets
   Menu, footer and social links rendered 17–27px tall. The accessible minimum
   for touch is ~44px; pad the links rather than enlarging the text.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-nav-menu--dropdown a.elementor-item,
  .elementor-nav-menu--dropdown a.elementor-sub-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* footer menu — links were 16px tall */
  .menu-footer-menu-1-container li a,
  .tc-footer-links a,
  .elementor-icon-list-item > a {
    display: inline-block;
    min-height: 34px;
    line-height: 34px;
  }

  /* about-page accordion headers — were 17px tall */
  .elementor-toggle .elementor-tab-title {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .elementor-toggle .elementor-toggle-title {
    line-height: 1.4;
  }

  /* phone / email links inside contact paragraphs */
  .elementor-widget-text-editor p > a[href^="tel:"],
  .elementor-widget-text-editor p > a[href^="mailto:"] {
    display: inline-block;
    padding: 6px 0;
  }

  .elementor-social-icon {
    min-width: 40px;
    min-height: 40px;
  }
}

/* --------------------------------------------------------------------------
   4. Forms
   iOS zooms the viewport when a focused input has a font-size under 16px.
   Also give fields a comfortable touch height.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-field-textual,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px;
  }

  textarea.elementor-field-textual {
    min-height: 96px;
  }

  .elementor-form .elementor-button {
    min-height: 46px;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   5. Typography and wrapping
   Long product names and the phone number were overflowing narrow columns.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  h1, h2, h3, h4,
  .elementor-heading-title {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  .elementor-widget-text-editor table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   6. Footer sitemap column
   Added so every page is reachable from every other page.
   -------------------------------------------------------------------------- */
.tc-footer-links h4 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: inherit;
}

.tc-footer-links ul {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.tc-footer-links li {
  margin: 0 0 4px;
}

.tc-footer-links a {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
}

.tc-footer-links a:hover,
.tc-footer-links a:focus {
  opacity: 1;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .tc-footer-links ul {
    columns: 2;
    column-gap: 28px;
  }
}

/* --------------------------------------------------------------------------
   About page: orphaned decorative shapes

   Each page loaded its own generated Elementor stylesheet (post-22 for this
   page, post-24 for contact, and so on). Only four of those files made it
   into the archive, and post-22 was not among them. It carried the offsets
   for two absolutely-positioned decorative SVGs, so without it both fall
   back to top:10px/left:10px — one of them landing squarely on the "Why
   Renting" heading and making it unreadable.

   The intended offsets cannot be recovered, and the shapes are ornamental
   (their only content is <title>Shape</title>), so they are hidden rather
   than guessed at. Remove this block if the original CSS ever turns up.
   -------------------------------------------------------------------------- */
.elementor-element-60b8efe3.elementor-absolute,
.elementor-element-431440a.elementor-absolute {
  display: none !important;
}

/* Any other absolutely-positioned widget left without its offsets should at
   least sit behind the text and not intercept clicks. */
.elementor-widget.elementor-absolute {
  z-index: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. 404 page
   -------------------------------------------------------------------------- */
.tc-404 {
  padding: 48px 0 64px;
}

.tc-404 h1 {
  margin-bottom: 16px;
}

.tc-404-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 24px 0 28px;
}

.tc-404-grid a {
  display: block;
  padding: 14px 16px;
  border: 1px solid #dfe4e8;
  border-radius: 4px;
  text-decoration: none;
  color: #03699a;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}

.tc-404-grid a:hover,
.tc-404-grid a:focus {
  border-color: #03699a;
  background: #f4f9fc;
}

/* --------------------------------------------------------------------------
   8. Focus visibility
   The theme removed focus outlines without providing a replacement, which
   leaves keyboard users with no indication of position.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #03699a;
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   9. Motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   10. Print
   -------------------------------------------------------------------------- */
@media print {
  .elementor-location-header,
  .elementor-location-footer,
  .tc-map-embed,
  .elementor-widget-form {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }
}