/**
 * Elmech site UI overrides
 * Loaded last — tightens header/logo, removes menu–banner gap, improves content layouts.
 */

:root {
  --the7-header-height: 90px;
  --elmech-logo-max: 56px;
  --elmech-logo-sticky-max: 40px;
  --elmech-accent: #1ebbf0;
}

/* -------------------------------------------------------------------------- */
/* Header / logo                                                              */
/* -------------------------------------------------------------------------- */

.masthead:not(.side-header) {
  --the7-header-height: 90px;
}

/* Force compact masthead even when theme JS/CSS still expects 180px */
.masthead:not(.side-header):not(.side-header-v-stroke):not(.side-header-menu-icon),
.masthead.classic-header:not(.sticky-on) {
  min-height: 0 !important;
}

.masthead:not(.side-header) .header-bar {
  min-height: var(--the7-header-height);
}

.branding > a,
.branding > img,
.branding > a img,
.masthead .branding img,
#phantom .branding img,
.mobile-branding img,
.mobile-branding > a img {
  max-height: var(--elmech-logo-max) !important;
  width: auto !important;
  height: auto !important;
  max-width: 220px;
  object-fit: contain;
}

/* Sticky / floating header — compact, no logo/menu gap */
.phantom-sticky .sticky-on.masthead:not(.side-header) .branding > a,
.phantom-sticky .sticky-on.masthead:not(.side-header) .branding > img,
.phantom-sticky .sticky-on.masthead .branding img,
#phantom .branding img,
#phantom .logo-box img,
.sticky-on .branding img {
  max-height: var(--elmech-logo-sticky-max) !important;
}

.masthead .header-bar,
.classic-header .header-bar {
  min-height: 0;
  align-items: center;
}

.masthead.classic-header .branding {
  display: flex;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

.classic-header .navigation {
  margin-top: 0 !important;
}

/* Keep sticky header flush */
.sticky-on.masthead .header-bar,
#phantom .ph-wrap {
  min-height: 60px;
}

/* -------------------------------------------------------------------------- */
/* Homepage: remove white gap between menu and banner                         */
/* -------------------------------------------------------------------------- */

body.home #main,
body.page-id-9428 #main {
  padding-top: 0 !important;
  padding-bottom: 50px;
}

body.home #main > .wf-wrap,
body.page-id-9428 #main > .wf-wrap {
  padding-left: 0;
  padding-right: 0;
}

body.home #content,
body.page-id-9428 #content {
  padding-top: 0;
}

body.home .rs-module-wrap,
body.home #rev_slider_1_1_wrapper,
body.page-id-9428 .rs-module-wrap {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}

body.home .rs-p-wp-fix,
body.page-id-9428 .rs-p-wp-fix {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* Welcome section under slider — restore side padding */
body.home #content > h2,
body.home #content > h3,
body.home #content > h4,
body.home #content > p {
  padding-left: 50px;
  padding-right: 50px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body.home #content > h2 {
  margin-top: 2rem;
}

body.home #content > p > img {
  float: none !important;
  max-width: 100% !important;
  width: 100%;
  height: auto;
  margin: 1rem 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Page title bar                                                             */
/* -------------------------------------------------------------------------- */

.page-title .wf-wrap {
  min-height: 110px !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.page-title h1,
.page-title h1 *,
#page .page-title .entry-title {
  font-size: 32px !important;
  line-height: 1.25 !important;
}

/* -------------------------------------------------------------------------- */
/* Content layout — text + featured image                                     */
/* -------------------------------------------------------------------------- */

body:not(.home) #main {
  padding-top: 40px !important;
  padding-bottom: 50px;
}

body:not(.home) #content {
  overflow: auto;
}

/* Two-column text + aside image (class added on text+featured-image pages) */
body:not(.home) #content.content-aside-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  column-gap: 2.5rem;
  row-gap: 0.75rem;
  align-items: start;
}

body:not(.home) #content.content-aside-layout > p:has(> img:only-child),
body:not(.home) #content.content-aside-layout > p:has(> a:only-child > img),
body:not(.home) #content.content-aside-layout > .content-aside {
  grid-column: 2;
  grid-row: 1 / span 30;
  margin: 0;
}

body:not(.home) #content.content-aside-layout > p:has(> img:only-child) > img,
body:not(.home) #content.content-aside-layout > p:has(> a:only-child > img) img,
body:not(.home) #content.content-aside-layout > .content-aside img {
  float: none !important;
  display: block;
  width: 100%;
  max-width: 100% !important;
  height: auto;
  margin: 0 !important;
}

body:not(.home) #content.content-aside-layout > p:not(:has(> img)):not(:has(> a > img)),
body:not(.home) #content.content-aside-layout > h1,
body:not(.home) #content.content-aside-layout > h2,
body:not(.home) #content.content-aside-layout > h3,
body:not(.home) #content.content-aside-layout > ul,
body:not(.home) #content.content-aside-layout > ol,
body:not(.home) #content.content-aside-layout > div:not(.content-aside) {
  grid-column: 1;
}

/* Fallback float when image is first / marked alignright */
body:not(.home) #content > p > img:only-child,
body:not(.home) #content > p > a:only-child > img,
body:not(.home) #content img.alignright,
body:not(.home) #content .alignright {
  float: right;
  display: block;
  max-width: min(42%, 380px);
  width: auto;
  height: auto;
  margin: 0 0 1.5rem 2rem;
  clear: right;
}

body:not(.home) #content.content-aside-layout > p > img:only-child {
  float: none;
}

body:not(.home) #content::after {
  content: "";
  display: table;
  clear: both;
}

body:not(.home) #content p {
  line-height: 1.7;
  margin-bottom: 1em;
}

/* -------------------------------------------------------------------------- */
/* Multi-image / gallery style pages                                          */
/* -------------------------------------------------------------------------- */

/* Pages that dump many images: arrange as a responsive grid */
body.page-id-gallery #content,
body:not(.home) #content.gallery-grid,
.elmech-image-grid {
  display: block;
}

body:not(.home) #content > p > img:only-child + br,
body:not(.home) #content > p:has(> img:only-child) + p:has(> img:only-child) {
  /* consecutive image-only paragraphs → treat as grid via parent flex/grid */
}

/* Consecutive image-only paragraphs become a grid row group */
body:not(.home) #content {
  display: flow-root;
}

@supports (selector(:has(*))) {
  /* When content has 3+ image-only paragraphs, grid them */
  body:not(.home) #content:has(> p:nth-of-type(3):has(> img:only-child)) > p:has(> img:only-child) {
    float: none;
    display: inline-block;
    vertical-align: top;
    width: calc(33.333% - 1rem);
    margin: 0 0.5rem 1rem 0;
    box-sizing: border-box;
  }

  body:not(.home) #content:has(> p:nth-of-type(3):has(> img:only-child)) > p:has(> img:only-child) > img {
    float: none !important;
    max-width: 100% !important;
    width: 100%;
    height: auto;
    margin: 0 !important;
    display: block;
  }

  /* Text+single-image pages (1 image-only p): keep float layout */
  body:not(.home) #content:has(> p:has(> img:only-child)):not(:has(> p:nth-of-type(3):has(> img:only-child))) > p:has(> img:only-child) > img {
    float: right;
    max-width: min(42%, 380px);
    margin: 0 0 1.5rem 2rem;
  }

  body:not(.home) #content:has(> p:has(> img:only-child)):not(:has(> p:nth-of-type(3):has(> img:only-child))) > p:has(> img:only-child) {
    display: block;
    width: auto;
    margin: 0;
  }
}

/* Client logos / gallery figures */
body:not(.home) #content figure,
body:not(.home) #content .wp-caption {
  max-width: 100%;
}

body:not(.home) #content img {
  height: auto;
  max-width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Contact / misc polish                                                      */
/* -------------------------------------------------------------------------- */

#footer {
  clear: both;
}

/* Hide leftover loader CSS effects if any remnant styles remain */
#load.spinner-loader {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* -------------------------------------------------------------------------- */
/* Mobile                                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 992px) {
  .branding > a img,
  .branding img,
  .masthead .branding img {
    max-height: 44px !important;
  }

  body.home #content .wpb_text_column,
  body.home #content > p,
  body.home #main .wf-container-main > #content > *:not(rs-module-wrap):not(.rs-module-wrap):not(p.rs-p-wp-fix):not(script):not(style) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    --the7-header-height: 70px;
  }

  body:not(.home) #content.content-aside-layout {
    display: block;
  }

  body:not(.home) #content.content-aside-layout > p:has(> img:only-child),
  body:not(.home) #content.content-aside-layout > .content-aside {
    margin: 1rem 0 1.5rem;
  }

  body:not(.home) #content > p > img:only-child,
  body:not(.home) #content img.alignright,
  body:not(.home) #content .alignright {
    float: none !important;
    max-width: 100% !important;
    width: 100%;
    margin: 1rem 0 1.5rem !important;
  }

  @supports (selector(:has(*))) {
    body:not(.home) #content:has(> p:nth-of-type(3):has(> img:only-child)) > p:has(> img:only-child) {
      width: calc(50% - 0.75rem);
    }

    body:not(.home) #content:has(> p:has(> img:only-child)):not(:has(> p:nth-of-type(3):has(> img:only-child))) > p:has(> img:only-child) > img {
      float: none !important;
      max-width: 100% !important;
      margin: 1rem 0 !important;
    }
  }

  .page-title .wf-wrap {
    min-height: 80px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .page-title h1 {
    font-size: 24px !important;
  }
}

@media (max-width: 480px) {
  @supports (selector(:has(*))) {
    body:not(.home) #content:has(> p:nth-of-type(3):has(> img:only-child)) > p:has(> img:only-child) {
      width: 100%;
      margin-right: 0;
    }
  }
}