/*
Theme Name:   Hello Elementor Child - AVP
Theme URI:    https://avpinternetservices.com/
Description:  Child theme for AVP Marketing & Internet Services. Holds all custom CSS so Hello Elementor can update safely.
Author:       Miller's Software
Template:     hello-elementor
Version:      1.0.7
Text Domain:  hello-elementor-child-avp
*/

/* ---------------------------------------------------------------
   AVP brand tokens - sampled from the previous theme's blue.css
   Mirrored in Elementor Global Colors so both stay in sync.
     primary   #0b4d86
     mid       #0b86cc
     bright    #0b8fdb
     muted     #3683b0
     tint      #d1edf5
     tint pale #e1f5fb
     body text #4d4c4c
   Fonts: Montserrat (headings), Lato (body)
   --------------------------------------------------------------- */

:root {
  --avp-primary:   #0b4d86;
  --avp-mid:       #0b86cc;
  --avp-bright:    #0b8fdb;
  --avp-muted:     #3683b0;
  --avp-tint:      #d1edf5;
  --avp-tint-pale: #e1f5fb;
  --avp-text:      #4d4c4c;
}

/* Readable measure for long-form pages (Terms, Privacy, DMCA).
   The old theme let text run the full 1400px width. */
.avp-prose {
  max-width: 72ch;
  margin-inline: auto;
}

/* ---------------------------------------------------------------
   Homepage carousel.
   The seven source photos have wildly different dimensions (694x477
   landscape through to tall portraits), so at natural size the slider
   jumped between a full-width photo and a thumbnail. Fix the stage and
   let each photo crop to fill it. !important is needed because
   Elementor's frontend.css loads after the child theme.
   --------------------------------------------------------------- */
.elementor-element-avph2 .elementor-image-carousel-wrapper .swiper-slide img,
.elementor-element-avph2 .swiper-slide img {
  width: 100% !important;
  height: 430px !important;
  object-fit: cover !important;
  display: block;
}

@media (max-width: 767px) {
  .elementor-element-avph2 .elementor-image-carousel-wrapper .swiper-slide img,
  .elementor-element-avph2 .swiper-slide img {
    height: 250px !important;
  }
}

/* Arrows sit over light photos - give them a readable backdrop. */
.elementor-element-avph2 .elementor-swiper-button {
  background: rgba(11, 77, 134, .78);
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------
   Homepage specialty cards.
   Same problem: three photos, three aspect ratios, so card three's
   heading and button sat well below the other two.
   --------------------------------------------------------------- */
.elementor-element-avph4 .elementor-widget-image .elementor-widget-container img,
.elementor-element-avph4 .elementor-widget-image img {
  width: 100% !important;
  height: 230px !important;
  object-fit: cover !important;
  display: block;
}

.elementor-element-avph4 > .elementor-container {
  align-items: flex-start;
}

/* The card images are wrapped in links; an inline <a> shrink-wraps the
   portrait photo, so card three came out narrower than the other two. */
.elementor-element-avph4 .elementor-widget-image a,
.elementor-element-avph4 .elementor-widget-image .elementor-widget-container {
  display: block;
  width: 100%;
}

/* ---------------------------------------------------------------
   Long-form prose pages (Terms, Privacy, DMCA).
   The old theme ran these the full 1400px, which is roughly 160
   characters per line. Constrain to a readable measure.
   --------------------------------------------------------------- */
/* Constrain the whole column, not the inner blocks - otherwise the page
   title keeps the full width and stops sharing a left edge with the body.
   Hello sets this via `body:not([class*=elementor-page-]) .site-main`
   inside a media query, which outranks a plain two-class selector, so
   this needs !important rather than more specificity games. */
body.page-id-868 .site-main,
body.page-id-866 .site-main,
body.page-id-867 .site-main,
body.page-id-868 .page-header .entry-title,
body.page-id-866 .page-header .entry-title,
body.page-id-867 .page-header .entry-title {
  max-width: 74ch !important;
  margin-inline: auto !important;
}

/* ---------------------------------------------------------------
   Contact page phone list. Hello/Elementor put a full grid border on
   bare tables; only the row rule was wanted.
   --------------------------------------------------------------- */
.page-id-6 .elementor-widget-text-editor table,
.page-id-6 .elementor-widget-text-editor table td {
  border: 0;
  background: transparent;
}
.page-id-6 .elementor-widget-text-editor table td {
  border-bottom: 1px solid #E6E9EF;
}

/* ---------------------------------------------------------------
   Inventory gallery carousels (pages 235 / 254 / 274), converted
   from Master Slider. Same heterogeneous-source problem as the
   homepage, but these are merchandise photos, so letterbox with
   object-fit:contain rather than cropping them with cover.
   --------------------------------------------------------------- */
.elementor-element-avpsl1 .swiper-slide img,
.elementor-element-avpsl2 .swiper-slide img,
.elementor-element-avpsl3 .swiper-slide img {
  width: 100% !important;
  height: 540px !important;
  object-fit: contain !important;
  background: #F2F4F7;
  display: block;
}

@media (max-width: 767px) {
  .elementor-element-avpsl1 .swiper-slide img,
  .elementor-element-avpsl2 .swiper-slide img,
  .elementor-element-avpsl3 .swiper-slide img {
    height: 300px !important;
  }
}

.elementor-element-avpsl1 .elementor-swiper-button,
.elementor-element-avpsl2 .elementor-swiper-button,
.elementor-element-avpsl3 .elementor-swiper-button {
  background: rgba(11, 77, 134, .78);
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------
   Service and offer pages: readable measure.
   601 (We Can Ship Anything) is deliberately excluded - it is a
   65-image gallery and wants the full width.
   --------------------------------------------------------------- */
body.page-id-4 .site-main,
body.page-id-7 .site-main,
body.page-id-8 .site-main,
body.page-id-164 .site-main,
body.page-id-365 .site-main,
body.page-id-759 .site-main,
body.page-id-4 .page-header .entry-title,
body.page-id-7 .page-header .entry-title,
body.page-id-8 .page-header .entry-title,
body.page-id-164 .page-header .entry-title,
body.page-id-365 .page-header .entry-title,
body.page-id-759 .page-header .entry-title {
  max-width: 84ch !important;
  margin-inline: auto !important;
}

/* ---------------------------------------------------------------
   Long reference lists, converted from newline runs and from 25
   stacked <h2> tags into real <ul>s. Flowing them into columns turns
   a 190-item scroll into something scannable.
   --------------------------------------------------------------- */
.avp-cols {
  list-style: none;
  margin: 18px 0 30px;
  padding: 0;
  columns: 3;
  column-gap: 38px;
}

.avp-cols li {
  break-inside: avoid;
  padding: 5px 2px;
  border-bottom: 1px solid #E6E9EF;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
}

.avp-cols a {
  color: var(--avp-primary);
  text-decoration: none;
  font-weight: 600;
}
.avp-cols a:hover { text-decoration: underline; }

/* Member names are longer than brand names, so give them more room. */
.avp-cols-members { columns: 2; }

@media (max-width: 900px) {
  .avp-cols          { columns: 2; }
  .avp-cols-members  { columns: 1; }
}
@media (max-width: 560px) {
  .avp-cols { columns: 1; }
}

/* Embedded video (page 7) was a fixed 853x480 iframe. */
body.page-id-7 iframe {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Inline images on content pages should never overflow the measure. */
body.page-id-8 img,
body.page-id-759 img { max-width: 100%; height: auto; }