/* ---------------------------------------------------------------------------
   Service hero - the redesigned page-title band.

   Markup: components/service/StraightTyreRepairPageTitle.tsx. Everything is
   scoped under .gg-hero because Elementor template 10153 is shared by every
   service page plus About, Services, Blog and the legal pages - styling its own
   classes would change all of them. Loaded after the copied stylesheets so
   nothing there can win on specificity.
--------------------------------------------------------------------------- */

/* The copied rule sets 110px top and bottom; the hero now carries four blocks
   rather than two, so it needs more room. */
.elementor-10153 .elementor-element.elementor-element-f16032a.gg-hero {
  padding: 96px 0 100px;
}

.gg-hero .elementor-element-69608d0 > .elementor-widget-container {
  margin: 0 0 22px 0;
}

/* .elementor-widget-wrap is a flex row, so anything added to it becomes a flex
   item and sits beside its siblings. Each block has to claim a full row. */
.gg-hero__lead,
.gg-hero__actions,
.gg-hero__trust {
  flex: 0 0 100%;
  width: 100%;
}

.gg-hero__lead {
  max-width: 720px;
  margin: 0 auto 32px;
  padding: 0 15px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  line-height: 1.75;
}

/* --- calls to action ----------------------------------------------------- */

.gg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 30px;
  padding: 0 15px;
}

.gg-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 30px;
  line-height: 54px;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.gg-hero__btn svg {
  flex: 0 0 auto;
}

.gg-hero__btn--call {
  background-color: var(--primary-color);
}

.gg-hero__btn--call:hover,
.gg-hero__btn--call:focus-visible {
  background-color: #b80005;
  color: #fff;
  transform: translateY(-2px);
}

/* WhatsApp brand green rather than the site red, so the two CTAs read as
   different channels at a glance. */
.gg-hero__btn--wa {
  background-color: #25d366;
}

.gg-hero__btn--wa:hover,
.gg-hero__btn--wa:focus-visible {
  background-color: #1ebe57;
  color: #fff;
  transform: translateY(-2px);
}

/* --- trust points -------------------------------------------------------- */

.gg-hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 34px;
  margin: 0;
  padding: 0 15px;
  list-style: none;
}

.gg-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.gg-hero__trust svg {
  color: var(--primary-color);
  flex: 0 0 auto;
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 767px) {
  /* The copied Elementor CSS sets this heading to 60px with no mobile size of
     its own, which is fine for a band holding only a title but not for a hero
     that now carries a paragraph, two buttons and three trust points beneath
     it. At 60px the heading ran to three lines and pushed the calls to action
     off the bottom of a 667px screen - on an iPhone SE the "Call Now" button,
     the whole point of the hero, was not visible without scrolling.

     Five classes to match the specificity of the rule it overrides. */
  .elementor-10153 .gg-hero .elementor-element.elementor-element-69608d0 .pxl-heading,
  .elementor-10153 .gg-hero .elementor-element.elementor-element-69608d0 .pxl-item--title {
    text-align: center;
    font-size: 34px;
    line-height: 1.18;
  }

  .elementor-10153 .elementor-element.elementor-element-f16032a.gg-hero {
    padding: 48px 0 52px;
  }

  .gg-hero__lead {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 22px;
    text-align: justify;
  }

  /* Content sits under the redesigned hero; the 80px main padding from
     globals.css leaves a large empty band before the first H2 on phones. */
  .elementor-946,
  .elementor-948,
  .elementor-950,
  .elementor-8983,
  .elementor-10297 {
    padding-top: 36px;
  }

  /* Empty decorative image widgets above the intro H2 still reserve margin. */
  .elementor-946 > .elementor-section.elementor-top-section:first-child .elementor-top-column:first-child .elementor-widget-pxl_image,
  .elementor-948 > .elementor-section.elementor-top-section:first-child .elementor-top-column:first-child .elementor-widget-pxl_image,
  .elementor-950 > .elementor-section.elementor-top-section:first-child .elementor-top-column:first-child .elementor-widget-pxl_image,
  .elementor-8983 > .elementor-section.elementor-top-section:first-child .elementor-top-column:first-child .elementor-widget-pxl_image,
  .elementor-10297 > .elementor-section.elementor-top-section:first-child .elementor-top-column:first-child .elementor-widget-pxl_image {
    display: none;
  }

  /* First intro H2 on every service body (left column of the opening section).
     Desktop keeps the 40px kit size; slightly smaller here so long titles
     wrap evenly instead of leaving a single orphan word. */
  .elementor-946 > .elementor-section.elementor-top-section:first-child .elementor-top-column:first-child .elementor-widget-pxl_heading .pxl-item--title,
  .elementor-948 > .elementor-section.elementor-top-section:first-child .elementor-top-column:first-child .elementor-widget-pxl_heading .pxl-item--title,
  .elementor-950 > .elementor-section.elementor-top-section:first-child .elementor-top-column:first-child .elementor-widget-pxl_heading .pxl-item--title,
  .elementor-8983 > .elementor-section.elementor-top-section:first-child .elementor-top-column:first-child .elementor-widget-pxl_heading .pxl-item--title,
  .elementor-10297 > .elementor-section.elementor-top-section:first-child .elementor-top-column:first-child .elementor-widget-pxl_heading .pxl-item--title {
    text-align: center;
    font-size: 28px;
    line-height: 1.25;
  }

  /* Body copy across all service pages. Trust ticks stay centered via .gg-hero__trust. */
  .elementor-946 .pxl-text-editor p,
  .elementor-948 .pxl-text-editor p,
  .elementor-950 .pxl-text-editor p,
  .elementor-8983 .pxl-text-editor p,
  .elementor-10297 .pxl-text-editor p {
    text-align: justify;
  }

  .gg-hero__actions {
    gap: 12px;
    margin-bottom: 22px;
  }

  .gg-hero__btn {
    justify-content: center;
    width: 100%;
    max-width: 320px;
  }

  .gg-hero__trust {
    gap: 12px 22px;
  }

  .gg-hero__trust li {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------------
   Service page "List Of Services Included" cards.

   One style for all five service pages. Two things were wrong before:

   1. Elementor's export ends each page's stylesheet with a blanket
      `padding:20px` that overrides the 30px/50px the cards were designed with,
      so the text sat tight against the card edge on every page.
   2. The white card is a box-shadow on .elementor-widget-container, which only
      grew to fit its own text, so two cards in a row came out different heights
      whenever one had more copy.

   Scoped to the five service post ids rather than .elementor-widget-icon-box at
   large, because About, Home and Services use the same classes for differently
   designed cards, and these stylesheets all load globally. `.elementor-element`
   is in the selector to match the specificity of the copied rules, which this
   file then beats on load order.
     946    Straight Tyre Repair
     8983   24/7 Emergency Service
     950    Tyre Puncture Service
     10297  Mobile Tyre Fitting
     948    Tyre Replacement Services
--------------------------------------------------------------------------- */

.elementor-946 .elementor-element.elementor-widget-icon-box > .elementor-widget-container,
.elementor-8983 .elementor-element.elementor-widget-icon-box > .elementor-widget-container,
.elementor-950 .elementor-element.elementor-widget-icon-box > .elementor-widget-container,
.elementor-10297 .elementor-element.elementor-widget-icon-box > .elementor-widget-container,
.elementor-948 .elementor-element.elementor-widget-icon-box > .elementor-widget-container {
  padding: 32px 34px;
}

/* Fill the column, which already stretches to the tallest card in the row. */
.elementor-946 .elementor-element.elementor-widget-icon-box,
.elementor-8983 .elementor-element.elementor-widget-icon-box,
.elementor-950 .elementor-element.elementor-widget-icon-box,
.elementor-10297 .elementor-element.elementor-widget-icon-box,
.elementor-948 .elementor-element.elementor-widget-icon-box,
.elementor-946 .elementor-element.elementor-widget-icon-box > .elementor-widget-container,
.elementor-8983 .elementor-element.elementor-widget-icon-box > .elementor-widget-container,
.elementor-950 .elementor-element.elementor-widget-icon-box > .elementor-widget-container,
.elementor-10297 .elementor-element.elementor-widget-icon-box > .elementor-widget-container,
.elementor-948 .elementor-element.elementor-widget-icon-box > .elementor-widget-container {
  height: 100%;
}

/* ---------------------------------------------------------------------------
   Cards added by hand carry no Elementor-generated id rules, so the card
   styling is restated here against `.gg-card` for every service page. Values
   are the copied ones from the Elementor stylesheets; padding and height come
   from the shared block above.
--------------------------------------------------------------------------- */

.elementor-946 .gg-card > .elementor-widget-container ,
.elementor-8983 .gg-card > .elementor-widget-container ,
.elementor-950 .gg-card > .elementor-widget-container ,
.elementor-10297 .gg-card > .elementor-widget-container ,
.elementor-948 .gg-card > .elementor-widget-container {
  border-style: solid;
  border-width: 0 1px 0 0;
  border-color: #e5e5e5;
  box-shadow: 0 0 10px 0 rgba(192, 192, 192, 0.5);
}

.elementor-946 .gg-card:hover > .elementor-widget-container ,
.elementor-8983 .gg-card:hover > .elementor-widget-container ,
.elementor-950 .gg-card:hover > .elementor-widget-container ,
.elementor-10297 .gg-card:hover > .elementor-widget-container ,
.elementor-948 .gg-card:hover > .elementor-widget-container {
  border-width: 0 0 5px 0;
  border-color: var(--e-global-color-secondary);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.elementor-946 .gg-card .elementor-icon-box-wrapper ,
.elementor-8983 .gg-card .elementor-icon-box-wrapper ,
.elementor-950 .gg-card .elementor-icon-box-wrapper ,
.elementor-10297 .gg-card .elementor-icon-box-wrapper ,
.elementor-948 .gg-card .elementor-icon-box-wrapper {
  text-align: start;
  gap: 15px;
}

.elementor-946 .gg-card .elementor-icon-box-title ,
.elementor-8983 .gg-card .elementor-icon-box-title ,
.elementor-950 .gg-card .elementor-icon-box-title ,
.elementor-10297 .gg-card .elementor-icon-box-title ,
.elementor-948 .gg-card .elementor-icon-box-title {
  margin-block-end: 15px;
  color: var(--e-global-color-accent);
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-size: var(--e-global-typography-accent-font-size);
  font-weight: var(--e-global-typography-accent-font-weight);
}

.elementor-946 .gg-card .elementor-icon-box-description ,
.elementor-8983 .gg-card .elementor-icon-box-description ,
.elementor-950 .gg-card .elementor-icon-box-description ,
.elementor-10297 .gg-card .elementor-icon-box-description ,
.elementor-948 .gg-card .elementor-icon-box-description {
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-weight: var(--e-global-typography-text-font-weight);
  color: var(--e-global-color-text);
}

.elementor-946 .gg-card .elementor-icon ,
.elementor-8983 .gg-card .elementor-icon ,
.elementor-950 .gg-card .elementor-icon ,
.elementor-10297 .gg-card .elementor-icon ,
.elementor-948 .gg-card .elementor-icon {
  font-size: 40px;
}

.elementor-946 .gg-card.elementor-view-default .elementor-icon ,
.elementor-8983 .gg-card.elementor-view-default .elementor-icon ,
.elementor-950 .gg-card.elementor-view-default .elementor-icon ,
.elementor-10297 .gg-card.elementor-view-default .elementor-icon ,
.elementor-948 .gg-card.elementor-view-default .elementor-icon {
  fill: var(--e-global-color-secondary);
  color: var(--e-global-color-secondary);
  border-color: var(--e-global-color-secondary);
}

@media (max-width: 767px) {
.elementor-946 .elementor-element.elementor-widget-icon-box > .elementor-widget-container,
.elementor-8983 .elementor-element.elementor-widget-icon-box > .elementor-widget-container,
.elementor-950 .elementor-element.elementor-widget-icon-box > .elementor-widget-container,
.elementor-10297 .elementor-element.elementor-widget-icon-box > .elementor-widget-container,
.elementor-948 .elementor-element.elementor-widget-icon-box > .elementor-widget-container {
    padding: 26px 24px;
  }
}

/* ---------------------------------------------------------------------------
   Card row spacing.

   Elementor gave the row that happened to be last a 100px bottom margin to
   close the block off, and 40px to the rows above it. Adding more rows to these
   sections left that 100px stranded in the middle of the grid and the new final
   row with no closing space at all, so the gaps read 40 / 40 / 100 / 0.

   Keyed off "an inner section that contains cards" rather than row ids, so it
   stays correct however many rows a page ends up with.
--------------------------------------------------------------------------- */

.elementor-946 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box),
.elementor-8983 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box),
.elementor-950 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box),
.elementor-10297 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box),
.elementor-948 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box) {
  margin-bottom: 40px;
}

.elementor-946 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box):last-child,
.elementor-8983 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box):last-child,
.elementor-950 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box):last-child,
.elementor-10297 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box):last-child,
.elementor-948 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box):last-child {
  margin-bottom: 100px;
}

/* ---------------------------------------------------------------------------
   Gutter between the two cards in a row.

   Elementor produced this as a 15px `padding-right` on the left column only,
   which rows added by hand never inherited - their cards sat edge to edge. A
   symmetric 20px either side gives a 40px gutter on every row, matching the
   40px between rows.

   Only from tablet up: below that the columns stack full width and the padding
   would just inset the cards.
--------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .elementor-946 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box) > .elementor-container > .elementor-column:first-child:not(:only-child) > .elementor-element-populated,
  .elementor-8983 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box) > .elementor-container > .elementor-column:first-child:not(:only-child) > .elementor-element-populated,
  .elementor-950 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box) > .elementor-container > .elementor-column:first-child:not(:only-child) > .elementor-element-populated,
  .elementor-10297 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box) > .elementor-container > .elementor-column:first-child:not(:only-child) > .elementor-element-populated,
  .elementor-948 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box) > .elementor-container > .elementor-column:first-child:not(:only-child) > .elementor-element-populated {
    padding-right: 20px;
  }

  .elementor-946 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box) > .elementor-container > .elementor-column:last-child:not(:only-child) > .elementor-element-populated,
  .elementor-8983 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box) > .elementor-container > .elementor-column:last-child:not(:only-child) > .elementor-element-populated,
  .elementor-950 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box) > .elementor-container > .elementor-column:last-child:not(:only-child) > .elementor-element-populated,
  .elementor-10297 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box) > .elementor-container > .elementor-column:last-child:not(:only-child) > .elementor-element-populated,
  .elementor-948 .elementor-element.elementor-inner-section:has(.elementor-widget-icon-box) > .elementor-container > .elementor-column:last-child:not(:only-child) > .elementor-element-populated {
    padding-left: 20px;
  }
}

/* ---------------------------------------------------------------------------
   Right-hand service list (sidebar).

   Ticket 14: Emergency (8983) applies the Elementor primary kit size (40px) to
   these links, so names wrap across 2–3 lines in the narrow 28% column.
   Mobile Tyre Fitting's export uses 18px. Unify every service page to that
   compact look: one line per service, tighter padding.
--------------------------------------------------------------------------- */

.elementor-946 .elementor-widget-pxl_service_list .pxl-service-list.style-2 li + li,
.elementor-8983 .elementor-widget-pxl_service_list .pxl-service-list.style-2 li + li,
.elementor-950 .elementor-widget-pxl_service_list .pxl-service-list.style-2 li + li,
.elementor-10297 .elementor-widget-pxl_service_list .pxl-service-list.style-2 li + li,
.elementor-948 .elementor-widget-pxl_service_list .pxl-service-list.style-2 li + li {
  margin-top: 8px;
}

.elementor-946 .elementor-widget-pxl_service_list .pxl-service-list.style-2 .pxl-item--title a,
.elementor-8983 .elementor-widget-pxl_service_list .pxl-service-list.style-2 .pxl-item--title a,
.elementor-950 .elementor-widget-pxl_service_list .pxl-service-list.style-2 .pxl-item--title a,
.elementor-10297 .elementor-widget-pxl_service_list .pxl-service-list.style-2 .pxl-item--title a,
.elementor-948 .elementor-widget-pxl_service_list .pxl-service-list.style-2 .pxl-item--title a {
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.25 !important;
  padding: 12px 36px 12px 16px !important;
  white-space: nowrap;
}