/* Plain content pages (Terms and Conditions, Privacy Policy, Shipping/
   Refund/Cancellation, Automotive Consultation, About Us 2, etc.) — see
   inc/automania-content-page.php for exactly which pages load this.

   .common-page/.container/.row/.col-sm-12 (page.php) are leftover
   Bootstrap grid classes from the pre-redesign theme. Matches .am-fluid
   (automania-shared-sections.css), the same max-width/padding wrapper
   every Home/About/Shop section uses, instead of Bootstrap's own
   540/720/960/1140px-at-576/768/992/1200px defaults — confirmed live,
   this container was rendering visibly narrower than the rest of the
   site's pages at the same viewport width. */
.common-page .container {
  margin: 0 auto;
  max-width: 1800px;
  padding-left: 60px;
  padding-right: 60px;
  width: 100%;
}

/* Fills the container just like .am-fluid's own content does elsewhere
   on the site — no separate narrower reading column, matching what was
   asked for after the first pass (a 860px cap here) read as "not full
   width" next to Home/About's sections. */
.common-page .content {
  color: rgba(0, 0, 0, .75);
  font-family: var(--am-font-body);
  font-size: 18px;
  line-height: 28px;
}

.common-page .content p {
  margin: 0 0 20px;
}

.common-page .content p:last-child {
  margin-bottom: 0;
}

/* No .content a rule needed here anymore — global.css's sitewide "a"
   default (color: var(--am-red); text-decoration: none) already covers
   this at the same color, minus the underline this used to add. */
.common-page .content strong,
.common-page .content b {
  color: #111110;
  font-weight: 600;
}

/* None of the six pages this loads for currently use real heading/list
   markup (checked live — Terms, Privacy, Shipping/Refund, Automotive
   Consultation, and About Us 2 are all flat <p> tags), but styling
   these anyway means any future edit that DOES add a heading or list in
   the editor picks up this design system instead of style_1.css's
   sitewide h1-h4 default (Fraunces, 30px, #333, confirmed live as what
   any plain WYSIWYG heading elsewhere on the site falls back to). */
.common-page .content h1,
.common-page .content h2,
.common-page .content h3,
.common-page .content h4 {
  color: #111110;
  font-family: var(--am-font-heading);
  font-weight: 600;
  margin: 32px 0 16px;
}

.common-page .content h1:first-child,
.common-page .content h2:first-child,
.common-page .content h3:first-child,
.common-page .content h4:first-child {
  margin-top: 0;
}

.common-page .content h2 {
  font-size: var(--am-h4-size);
  line-height: var(--am-h4-line-height);
}

.common-page .content h3 {
  font-size: var(--am-h5-size);
  line-height: var(--am-h5-line-height);
}

.common-page .content h4 {
  font-size: var(--am-h6-size);
  line-height: var(--am-h6-line-height);
}

.common-page .content ul,
.common-page .content ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.common-page .content li {
  margin-bottom: 8px;
}

@media (max-width: 991px) {
  .common-page .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 767px) {
  .common-page .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .common-page .content {
    font-size: 16px;
    line-height: 26px;
  }

  .common-page .content h2 {
    font-size: var(--am-h5-size);
    line-height: var(--am-h5-line-height);
  }

  .common-page .content h3,
  .common-page .content h4 {
    font-size: var(--am-h6-size);
    line-height: var(--am-h6-line-height);
  }
}

/* Contact Us (page-id-11433) — edited in the page editor with its own
   .row/.col-sm-7/.col-sm-5 two-column markup (map + address, then the
   Contact Form 7 form), not plain paragraphs like the rest of this
   stylesheet. Confirmed live: none of it had any real styling — the map
   rendered at the browser's bare default 300x150 iframe size, and the
   form's inputs were unstyled underlined text fields. Both columns now
   get the same card treatment (white/bordered/shadowed) used for the
   product gallery elsewhere (css/product.css), instead of sitting bare
   on the page background. */
/* No align-items here — grid items default to "stretch", so both cards
   naturally match the taller one's height (whichever content is longer)
   instead of each sizing to its own content. No fixed height needed. */
.page-id-11433 .content .row {
  display: grid;
  gap: 40px;
  grid-template-columns: 1.15fr 1fr;
}

/* Bootstrap's ".row:before/:after" clearfix (content:" "; display:table)
   doesn't just disappear once .row becomes a grid container — those
   pseudo-elements still generate boxes, and a grid container places ALL
   of its generated boxes as grid items alongside the two real columns.
   Confirmed live: with 2 columns defined, the 4 total items (before,
   col-sm-7, col-sm-5, after) wrapped into 2 rows, so col-sm-7 landed
   alone in row 1's second track and col-sm-5 got pushed down into row
   2's first track instead of sitting beside it. A grid container
   doesn't need a float clearfix anyway. */
.page-id-11433 .content .row:before,
.page-id-11433 .content .row:after {
  content: none;
  display: none;
}

.page-id-11433 .content .col-sm-7,
.page-id-11433 .content .col-sm-5 {
  background: #fff;
  border: 1px solid var(--am-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .05);
  float: none;
  min-width: 0;
  padding: 32px;
  width: 100%;
}

.page-id-11433 .frame1 {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--am-line);
  border-radius: 10px;
  display: block;
  height: auto;
  margin-bottom: 24px;
  width: 100%;
}

.page-id-11433 .contact-address p {
  margin: 0 0 12px;
  padding-left: 28px;
  position: relative;
}

.page-id-11433 .contact-address p:last-child {
  margin-bottom: 0;
}

/* Small icon accents (matching the :before + FontAwesome pattern already
   used in style_1.css's myaccount_user_container) — content order here
   is fixed (showroom line, address, telephone, mobile, email), so these
   target it by position rather than a class the editor's plain
   paragraphs don't have. */
.page-id-11433 .contact-address p:first-child,
.page-id-11433 .contact-address p:nth-child(2) {
  padding-left: 28px;
}

.page-id-11433 .contact-address p:first-child:before {
  color: var(--am-red);
  content: '\f041';
  font-family: FontAwesome;
  left: 0;
  position: absolute;
}

.page-id-11433 .contact-address p:nth-child(3):before,
.page-id-11433 .contact-address p:nth-child(4):before {
  color: var(--am-red);
  content: '\f095';
  font-family: FontAwesome;
  left: 0;
  position: absolute;
}

.page-id-11433 .contact-address p:nth-child(5):before {
  color: var(--am-red);
  content: '\f0e0';
  font-family: FontAwesome;
  left: 0;
  position: absolute;
}

.page-id-11433 .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-id-11433 .wpcf7-form > p {
  margin: 0;
}

.page-id-11433 .wpcf7-form-control-wrap {
  display: block;
  margin-top: 8px;
}

.page-id-11433 input.wpcf7-form-control,
.page-id-11433 textarea.wpcf7-form-control {
  background: #fff;
  border: 1px solid var(--am-line);
  border-radius: 10px;
  box-sizing: border-box;
  color: #111110;
  font-family: var(--am-font-body);
  font-size: 16px;
  padding: 0 18px;
  width: 100%;
}

.page-id-11433 input.wpcf7-form-control:focus,
.page-id-11433 textarea.wpcf7-form-control:focus {
  border-color: var(--am-red);
  outline: 0;
}

.page-id-11433 input.wpcf7-form-control {
  height: 52px;
}

.page-id-11433 textarea.wpcf7-form-control {
  height: 110px;
  min-height: 80px;
  padding: 14px 18px;
  resize: vertical;
}

.page-id-11433 .wpcf7-form-control::placeholder {
  color: rgba(0, 0, 0, .45);
}

.page-id-11433 .mathcaptcha-636 {
  color: rgba(0, 0, 0, .75);
}

.page-id-11433 .mathcaptcha-636 input.wpcf7-form-control {
  display: inline-block;
  height: 40px;
  margin: 0 6px;
  text-align: center;
  width: 56px;
}

.page-id-11433 input.wpcf7-submit {
  background: var(--am-red);
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font-family: var(--am-font-body);
  font-size: 16px;
  font-weight: 600;
  height: 52px;
  padding: 0 32px;
  width: auto;
}

.page-id-11433 input.wpcf7-submit:hover {
  background: #a91e26;
}

@media (max-width: 900px) {
  .page-id-11433 .content .row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .page-id-11433 .content .row {
    gap: 24px;
  }

  .page-id-11433 .content .col-sm-7,
  .page-id-11433 .content .col-sm-5 {
    padding: 24px;
  }
}

/* Automania Cars In Rustom Movie (page-id-13157) — edited in the page
   editor with hardcoded inline styles (style="color: #9e0000") instead
   of plain paragraphs, so the sitewide h1-h4 rule above can't reach its
   color (inline styles beat an external stylesheet regardless of
   selector specificity — only !important here can still win). Swapped
   the old off-brand #9e0000 for the actual brand red.

   Content here is a short intro statement, a video, and a closing line
   — read better as a centered "feature" layout than left-aligned body
   text edge-to-edge across the full 1800px content width (confirmed
   live: full-width was part of why this looked off — both the headings
   and the video read as too large/sprawling on a wide screen). Headings
   capped at 760px and the video at 900px, both centered, instead of
   filling .content's full width like the plain-paragraph pages do.

   Targets h1-h4 generically rather than just h1 — this content has
   already changed tags once (h1 to h2) between edits in the page
   editor, so pinning to one specific tag isn't reliable here. */
.page-id-13157 .content {
  text-align: center;
}

.page-id-13157 .content h1,
.page-id-13157 .content h2,
.page-id-13157 .content h3,
.page-id-13157 .content h4 {
  color: var(--am-red) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 760px;
}

/* The editor also tends to leave a fully empty heading (e.g.
   "<h1 style="text-align:center;"></h1>") between the video and the
   next line purely as a spacer — :empty hides it instead of leaving a
   blank heading-sized gap. */
.page-id-13157 .content h1:empty,
.page-id-13157 .content h2:empty,
.page-id-13157 .content h3:empty,
.page-id-13157 .content h4:empty {
  display: none;
}

.page-id-13157 .content iframe {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--am-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .05);
  display: block;
  height: auto !important;
  margin: 32px auto;
  max-width: 900px;
  width: 100%;
}

/* Services (page-id-11431, "services-2") — the page editor's content is
   a plain <ul><li> list ("Auto Consultation: ...", etc.); the box/icon
   layout requested needs real markup this content doesn't have, so
   inc/automania-services-page.php rebuilds that one <ul> into the
   .am-services-grid/.am-service-box markup styled here. Same white-card
   pattern as Contact Us's cards (border/radius/shadow), with a round
   icon badge using the design system's peach tint + brand red instead
   of plain gray, so it reads as an intentional accent rather than a
   generic icon. */
.page-id-11431 .am-services-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(2, 1fr);
  margin: 32px 0 0;
}

.page-id-11431 .am-service-box {
  background: #fff;
  border: 1px solid var(--am-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .05);
  padding: 32px;
}

.page-id-11431 .am-service-box__icon {
  align-items: center;
  background: var(--am-peach-tint);
  border-radius: 50%;
  color: var(--am-red);
  display: flex;
  font-size: 22px;
  height: 56px;
  justify-content: center;
  margin-bottom: 20px;
  width: 56px;
}

.page-id-11431 .am-service-box__title {
  color: #111110;
  font-family: var(--am-font-heading);
  font-size: var(--am-h6-size);
  font-weight: 600;
  line-height: var(--am-h6-line-height);
  margin: 0 0 12px;
}

.page-id-11431 .am-service-box__desc {
  color: rgba(0, 0, 0, .75);
  font-family: var(--am-font-body);
  font-size: 16px;
  line-height: 26px;
  margin: 0;
}

@media (max-width: 767px) {
  .page-id-11431 .am-services-grid {
    gap: 20px;
    grid-template-columns: 1fr;
  }

  .page-id-11431 .am-service-box {
    padding: 24px;
  }
}

/* Consultation ("automotive-consultation") and The Automania Story
   ("about-us-2") — the page editor's plain paragraphs are rebuilt into
   cards by inc/automania-story-pages.php (those two pages only). Cards use
   the same white/bordered/shadowed pattern as Contact Us and Services; the
   side card is brand red (Consultation's call-us card) / black (Story),
   with the same round icon badge. Selectors start at .common-page .content
   so they win over that stylesheet's own plain-paragraph rules. */
.common-page .content .am-consult,
.common-page .content .am-story {
  display: grid;
  gap: 32px;
  margin: 8px 0 0;
}

.common-page .content .am-consult {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

.common-page .content .am-story {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.common-page .content .am-story--single {
  grid-template-columns: minmax(0, 1fr);
}

.common-page .content .am-consult__main,
.common-page .content .am-story__lead {
  background: #fff;
  border: 1px solid var(--am-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .05);
  padding: 40px;
}

.common-page .content .am-consult__main {
  align-items: flex-start;
  display: flex;
  gap: 28px;
}

.common-page .content .am-consult__icon {
  align-items: center;
  background: var(--am-peach-tint);
  border-radius: 50%;
  color: var(--am-red);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 24px;
  height: 64px;
  justify-content: center;
  width: 64px;
}

.common-page .content .am-consult__icon--light {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.common-page .content .am-consult__icon--red {
  background: var(--am-red);
  color: #fff;
}

.common-page .content .am-story__lead .am-consult__icon {
  margin-bottom: 24px;
}

.common-page .content .am-consult__text {
  min-width: 0;
}

.common-page .content .am-consult__text p,
.common-page .content .am-story__lead p {
  color: rgba(0, 0, 0, .8);
  font-size: 18px;
  line-height: 30px;
  margin: 0 0 20px;
}

.common-page .content .am-story__lead p {
  font-size: 20px;
  line-height: 34px;
  margin: 0;
}

.common-page .content .am-consult__text p:last-child {
  margin-bottom: 0;
}

.common-page .content .am-consult__contact,
.common-page .content .am-story__more {
  border-radius: 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  padding: 40px;
}

.common-page .content .am-consult__contact {
  align-items: flex-start;
  background: var(--am-red);
}

.common-page .content .am-story__more {
  align-items: flex-start;
  background: #000;
}

.common-page .content .am-consult__contact p,
.common-page .content .am-story__more p {
  color: rgba(255, 255, 255, .88);
  font-size: 18px;
  line-height: 30px;
  margin: 0;
}

.common-page .content .am-story__more strong,
.common-page .content .am-story__more b {
  color: #fff;
}

.common-page .content a.am-consult__call {
  background: #fff;
  border-radius: 8px;
  color: var(--am-red);
  display: inline-block;
  font-family: var(--am-font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  padding: 12px 24px;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
  white-space: nowrap;
}

.common-page .content a.am-consult__call:hover,
.common-page .content a.am-consult__call:focus {
  background: #000;
  color: #fff;
}

@media (max-width: 991px) {
  .common-page .content .am-consult,
  .common-page .content .am-story {
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .common-page .content .am-consult__main,
  .common-page .content .am-story__lead,
  .common-page .content .am-consult__contact,
  .common-page .content .am-story__more {
    padding: 28px;
  }

  .common-page .content .am-consult__text p,
  .common-page .content .am-consult__contact p,
  .common-page .content .am-story__more p {
    font-size: 16px;
    line-height: 26px;
  }

  .common-page .content .am-story__lead p {
    font-size: 17px;
    line-height: 29px;
  }

  .common-page .content .am-consult__main {
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .common-page .content .am-consult__main,
  .common-page .content .am-story__lead,
  .common-page .content .am-consult__contact,
  .common-page .content .am-story__more {
    padding: 22px;
  }

  .common-page .content a.am-consult__call {
    font-size: 20px;
  }
}