/* custom.css - intentionally created to resolve 404 on enqueue (functions.php: category_filter_scripts). Add filter-related styles here as needed. */

/* =========================================================================
   TYPOGRAPHY - matches the live site (arellicleaning.com on Webflow)
   -------------------------------------------------------------------------
   Headings  : DM Serif Display 400   (Webflow uses it for h1-h6 and quotes)
   Eyebrows  : DM Sans                (small label stacked above a heading)
   Body/UI   : Mukta Malar            (paragraphs, lists, nav, buttons, forms)

   Why this file and not style.css: this file is enqueued with a filemtime
   version, so edits bust caches. style.css is served with a fixed ?ver and a
   10-year Cache-Control, so browsers would keep the old fonts.

   Why !important and #page-container: Divi writes per-module font settings
   into et-cache CSS, and its button rules are
   `body #page-container .et_pb_section .et_pb_button_N {...!important}`.
   Every selector below outranks those. Only font-family (and heading weight)
   is forced - sizes, spacing and colours are untouched.

   Icon fonts (ETmodules / FontAwesome) are never targeted: no rule sets a
   family on span, i, or any ::after icon.

   To revert: delete everything below the first comment in this file.
   ========================================================================= */

@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/dm-serif-display-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/dm-serif-display-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/dm-serif-display-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/dm-serif-display-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mukta Malar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/mukta-malar-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mukta Malar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/mukta-malar-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mukta Malar';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/mukta-malar-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mukta Malar';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/mukta-malar-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mukta Malar';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../fonts/mukta-malar-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mukta Malar';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../fonts/mukta-malar-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mukta Malar';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/mukta-malar-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mukta Malar';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/mukta-malar-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../../fonts/dm-sans-400-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../../fonts/dm-sans-400-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --arelli-font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --arelli-font-body: 'Mukta Malar', 'Segoe UI', Helvetica, Arial, sans-serif;
  --arelli-font-label: 'DM Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---- baseline --------------------------------------------------------- */
html body {
  font-family: var(--arelli-font-body);
}

/* ---- body copy & UI --------------------------------------------------- */
html body #page-container :is(p, li, dd, dt, td, th, a, label, figcaption, small, input, textarea, select, button),
html body #page-container :is(.et_pb_text, .et_pb_text_inner, .et_pb_blurb_description, .et_pb_slide_content,
                              .et_pb_slide_description, .et_pb_toggle_content, .et_pb_tab, .et_pb_testimonial,
                              .et_pb_testimonial_description, .et_pb_number_counter, .et_pb_post_content,
                              .entry-content, .post-meta, .et_pb_menu, .et-menu, .et_mobile_menu,
                              .et_pb_contact_form, .et_pb_blog_grid .post-content) {
  font-family: var(--arelli-font-body) !important;
}

/* testimonial parts: Divi styles these inner elements directly */
html body #page-container .et_pb_testimonial :is(.et_pb_testimonial_content, .et_pb_testimonial_description,
                                                  .et_pb_testimonial_description_inner, .et_pb_testimonial_meta,
                                                  .et_pb_testimonial_author, .et_pb_testimonial_position,
                                                  .et_pb_testimonial_separator, .et_pb_testimonial_company) {
  font-family: var(--arelli-font-body) !important;
}

/* buttons: must outrank Divi's ID-based !important button rules */
html body #page-container .et_pb_section a.et_pb_button,
html body #page-container .et_pb_section .et_pb_button,
html body #page-container .et_pb_section :is(.filter-btn, .view-more-btn, .faq-btn, a.box-btn),
html body #page-container .et_pb_contact_submit {
  font-family: var(--arelli-font-body) !important;
}

/* ---- headings --------------------------------------------------------- */
/* DM Serif Display ships in a single weight (400). Anything heavier would be
   faux-bolded by the browser, so headings are pinned to 400 - as on Webflow. */
html body #page-container :is(h1, h2, h3, h4, h5, h6),
html body #page-container :is(.et_pb_module_header, .et_pb_module_heading, .et_pb_slide_title,
                              .et_pb_toggle_title, .entry-title) {
  font-family: var(--arelli-font-heading) !important;
  font-weight: 400 !important;
}

/* links, bold and emphasis inside a heading follow the heading */
html body #page-container :is(h1, h2, h3, h4, h5, h6) :is(a, strong, b, em) {
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* pull quotes are serif on Webflow */
html body #page-container blockquote,
html body #page-container blockquote :is(p, li) {
  font-family: var(--arelli-font-heading) !important;
}

/* ---- eyebrow labels -> DM Sans ---------------------------------------- */
/* A label is a heading module sitting directly above a module whose heading
   is an H2 (e.g. "Proof in Numbers" above "Results You Can Count On").
   The label itself is never an H2 - that excludes headlines deliberately split
   across stacked H2 modules, like the /our-story/ hero.
   Kept in its own rule: a selector list containing :has() is dropped whole by
   any browser without :has() support, which would take the other labels too. */
html body #page-container .et_pb_heading:has(+ .et_pb_heading h2) :is(h1, h3, h4, h5, h6) {
  font-family: var(--arelli-font-label) !important;
  font-weight: 500 !important;
}

html body #page-container .et_pb_slider .et_pb_slide_title,
html body #page-container .section-heading2 :is(.et_pb_module_heading, h1, h2, h3, h4, h5, h6) {
  font-family: var(--arelli-font-label) !important;
}

html body #page-container .et_pb_number_counter :is(.title, h3, h4) {
  font-family: var(--arelli-font-label) !important;
  font-weight: 500 !important;
}

/* ---- child-theme pseudo-element text ---------------------------------- */
html body #page-container .custom-faqs .et_pb_toggle_title:before {
  font-family: var(--arelli-font-body) !important;
}

/* ---- Popup Maker renders outside #page-container ---------------------- */
html body .pum-container :is(p, li, a, label, input, textarea, select, button, .et_pb_button) {
  font-family: var(--arelli-font-body) !important;
}
html body .pum-container :is(h1, h2, h3, h4, h5, h6, .pum-title) {
  font-family: var(--arelli-font-heading) !important;
  font-weight: 400 !important;
}

/* =========================================================================
   Inline button groups inside an ordinary column.
   Divi wraps every button module in a block-level wrapper, so buttons stack.
   Give a button the class "btn-inline" to sit it beside its neighbours
   (used under the /commercial-cleaning/ intro). Without :has() support the
   buttons simply stack, which is still fine.
   ========================================================================= */
.et_pb_button_module_wrapper:has(> .btn-inline) {
  display: inline-block;
  width: auto;
  margin: 0 12px 16px 0 !important;
  vertical-align: top;
}
/* space between the last button line and whatever follows */
.et_pb_button_module_wrapper:has(> .btn-inline) + .et_pb_module:not(.et_pb_button_module_wrapper) {
  margin-top: 14px !important;
}

/* =========================================================================
   BLOG CARD GRID  (.blogpost - /blog/ and the "latest from the blog" modules)
   Divi lays these out with salvattore: a flex row of .column wrappers, each
   stacking its own articles. Two problems that fixes below address:
     1. vertical gap between stacked cards was 0 - cards touched
     2. card height followed the title (315 / 337 / 359px for 1 / 2 / 3 lines)
   Titles are reserved AND clamped at 2 lines, so every card is the same
   height and rows line up across columns. Meta stays on one line.
   ========================================================================= */
.blogpost .et_pb_salvattore_content {
  display: flex;
  gap: 26px;
}
.blogpost .et_pb_salvattore_content > .column {
  flex: 1 1 0;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.blogpost .et_pb_salvattore_content > .column > article.et_pb_post {
  width: auto !important;
  margin: 0 0 26px !important;
  display: flex;
  flex-direction: column;
}
/* keep every thumbnail the same shape, whatever the source image */
.blogpost article.et_pb_post .et_pb_image_container img,
.blogpost article.et_pb_post .entry-featured-image-url img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* the height driver: always exactly two lines, ellipsis past that */
.blogpost article.et_pb_post .entry-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;          /* 2 x the module's 1.3em line-height */
  line-height: 1.3em;
}
/* categories can make this wrap on narrow cards - hold it to one line */
.blogpost article.et_pb_post .post-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 980px) {
  .blogpost .et_pb_salvattore_content { gap: 20px; }
  .blogpost .et_pb_salvattore_content > .column > article.et_pb_post { margin-bottom: 20px !important; }
}