/* =========================================================================
   AZTÖR — POST-LAUNCH FIXES
   Loaded last, so every rule here intentionally wins over the base theme.
   Each block maps to a numbered item on the client change list.
   ========================================================================= */

/* -------------------------------------------------------------------------
   ITEM 6 — Mega / dropdown menu flicker (desktop)
   The panel is a DOM child of the nav-item, but it is absolutely positioned,
   so the empty strip between the link and the panel is not part of any hover
   target. Crossing that strip drops :hover for a frame and the panel blinks.
   Fix: a transparent "bridge" that belongs to the panel fills the strip, so
   the pointer never leaves the hover region; and the reveal is a single, calm
   opacity fade with no transform re-animation.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .navbar .nav-item.dropdown > .dropdown-menu {
    transition: opacity .18s ease, visibility .18s ease !important;
    animation: none !important;
  }
  /* invisible hover bridge — covers the gap above the panel */
  .navbar .nav-item.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -28px;
    height: 30px;
    background: transparent;
    pointer-events: auto;
  }
  /* keep the panel open the whole time the link OR the panel is hovered */
  .navbar .nav-item.dropdown:hover > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }
  /* and hide it the instant the pointer leaves, even if Bootstrap still
     thinks it is "open" — this is what stops the panel getting stuck/blinking */
  .navbar .nav-item.dropdown:not(:hover) > .dropdown-menu {
    opacity: 0;
    visibility: hidden;
  }
}

/* -------------------------------------------------------------------------
   ITEM 1 — "Genuine Product Only / Documented Handover" block
   The template markup uses <h3> but the theme only styled <h4>, so the two
   headings rendered at the browser default size and pushed the layout out of
   alignment. Restyle the real elements and make the pair stack cleanly on
   phones instead of squeezing side by side.
   ------------------------------------------------------------------------- */
.about-content .about-item .content :is(h2, h3, h4, h5) {
  font-size: 21px;
  line-height: 1.3;
  color: var(--color-dark);
  margin: 0 0 8px;
}
.about-content .about-item .content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}
.about-content .about-item {
  align-items: flex-start;
}
.about-content .about-item .icon {
  flex: 0 0 60px;
}
/* Give each of the two columns breathing room and a clean divider on desktop */
@media (min-width: 992px) {
  .about-content .row > [class*="col-"]:first-child .about-item {
    padding-right: 26px;
  }
}
/* On tablet/phone the two items sit in one column — tidy the rhythm and stop
   the long heading from overflowing its card */
@media (max-width: 991.98px) {
  .about-content { margin-top: 28px; margin-bottom: 32px; }
  .about-content .about-item {
    padding-bottom: 22px;
    margin-bottom: 22px;
  }
  .about-right .site-title { font-size: clamp(26px, 6vw, 34px); line-height: 1.18; }
}
.about-right .about-text { overflow-wrap: anywhere; }

/* -------------------------------------------------------------------------
   ITEMS 2 / 3 / 4 — card badge icons
   The glyphs themselves are fixed in PHP (folded to the solid weight). These
   rules just guarantee the little badge always centres its icon crisply, on
   every card type, at any width.
   ------------------------------------------------------------------------- */
.solution-range-card .src-icon i,
.service-card .sc-media-icon i,
.industry-card .ic-body i,
.process-step .ps-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.industry-card .ic-body i::before,
.solution-range-card .src-icon i::before,
.service-card .sc-media-icon i::before { display: block; }

/* -------------------------------------------------------------------------
   ITEM 12 — Projects listing: uniform cards
   Images came in at their natural aspect ratio, so no two cards were the same
   height. Lock the thumbnail to a fixed ratio, make the card a flex column and
   let the text area grow, so every "View Details" button lines up.
   ------------------------------------------------------------------------- */
.portfolio-area .blog-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.portfolio-area .blog-img { aspect-ratio: 16 / 10; }
.portfolio-area .blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portfolio-area .blog-meta { margin-top: -15px; }
.portfolio-area .blog-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 4px 4px 8px;
}
.portfolio-area .blog-info .blog-title { min-height: 0; }
.portfolio-area .blog-info p {
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.portfolio-area .blog-info .theme-btn { align-self: flex-start; margin-top: auto; }
/* the project filter chips, kept tidy and wrapping on small screens */
.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }

/* -------------------------------------------------------------------------
   ITEM 7 — Solution range listing (e.g. /solutions/entrance-automation/)
   Every product card now leads with a photo (managed per product from
   Admin > Solutions > Main Image) instead of a flat monochrome icon, with a
   gentle zoom + lift on hover. Cards are a flex column so every "View Details"
   lines up regardless of description length.
   ------------------------------------------------------------------------- */
.solution-card.solution-card--media {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.solution-card--media .sc-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--theme-bg-light2);
}
.solution-card--media .sc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.solution-card--media:hover .sc-media img { transform: scale(1.08); }
.solution-card--media .sc-media::after {
  /* subtle top-down wash so the number stays legible on light photos */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 11, 22, .28) 0%, rgba(6, 11, 22, 0) 42%);
  opacity: .9;
}
.solution-card--media .sc-num {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-blue, #0745b6) 0%, var(--brand-blue-bright, #2b8aef) 100%);
  color: #fff;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(7, 69, 182, .3);
}
.solution-card--media .sc-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.solution-card--media .sc-body p { flex: 1 1 auto; }
.solution-card--media .sc-body .sc-link { margin-top: auto; align-self: flex-start; }

/* -------------------------------------------------------------------------
   ITEM 13 — Site-inspection (and all form pages) left info panel
   The "Free measured inspection…" column was plain white pills on a white
   page. It now reads as a premium navy panel with glassy contact rows and
   blue icon chips, giving the form real presence. Applies to every form page
   (inspection, survey, quote) for consistency.
   ------------------------------------------------------------------------- */
.contact-area .contact-content {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 42px 34px 38px;
  border-radius: 20px;
  background: linear-gradient(158deg, #0b1220 0%, #10285a 58%, #0745b6 128%);
  box-shadow: 0 24px 60px rgba(11, 18, 32, .18);
}
.contact-area .contact-content::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(43, 138, 239, .45) 0%, rgba(43, 138, 239, 0) 70%);
  pointer-events: none;
}
.contact-area .contact-content > * { position: relative; z-index: 1; }
.contact-area .contact-content .site-title { color: #fff; }
.contact-area .contact-content .about-text { color: rgba(255, 255, 255, .82); }
.contact-area .contact-content .site-title-tagline.bg-white { background: #fff; }

.contact-area .contact-info {
  width: 100%;
  gap: 16px;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.contact-area .contact-info:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(43, 138, 239, .5);
  transform: translateX(4px);
}
.contact-area .contact-info .icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  line-height: 1;
  border: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-blue, #0745b6) 0%, var(--brand-blue-bright, #2b8aef) 100%);
  box-shadow: 0 8px 18px rgba(7, 69, 182, .35);
}
.contact-area .contact-info .icon img { width: 24px; filter: brightness(0) invert(1); }
.contact-area .contact-info .content :is(h2, h3, h4, h5) {
  font-size: 16px;
  color: #fff;
  margin: 0 0 3px;
}
.contact-area .contact-info .content p,
.contact-area .contact-info .content p a { color: rgba(255, 255, 255, .82); font-size: 15px; }
.contact-area .contact-info .content p a:hover { color: #fff; }

/* -------------------------------------------------------------------------
   ITEMS 8–11 — Company / policy pages
   (Why AZTÖR, Mission & Vision, Quality Policy, Certifications and every other
   page that uses the shared content-page template.)
   The section headings rendered at the raw browser <h2> size with almost no
   space between a heading and its paragraph, so the reading rhythm was off and
   long headings crowded the edge on phones. This restyles the real elements,
   adds a branded accent, spaces the copy, upgrades bullet lists, and makes the
   sidebar stick alongside the content on desktop / drop cleanly below on mobile.
   ------------------------------------------------------------------------- */
.service-single .policy-content > h2,
.service-single .policy-content > h3 {
  font-size: clamp(21px, 2.5vw, 27px);
  line-height: 1.28;
  color: var(--color-dark);
  margin: 36px 0 12px;
  padding-left: 16px;
  position: relative;
  overflow-wrap: anywhere;
}
.service-single .policy-content > :is(h2, h3):first-child { margin-top: 0; }
.service-single .policy-content > h2::before,
.service-single .policy-content > h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .16em;
  bottom: .16em;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--brand-blue, #0745b6), var(--brand-blue-bright, #2b8aef));
}
.service-single .policy-content p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.78;
  color: var(--body-text-color);
  overflow-wrap: anywhere;
}
/* first paragraph of the page reads as a short lead */
.service-single .policy-content > :is(h2, h3):first-child + p,
.service-single .policy-content > .lead-in + :is(h2,h3) + p {
  font-size: 17.5px;
  color: var(--color-dark);
}
.service-single .policy-content ul {
  margin: 4px 0 24px;
  padding-left: 2px;
  list-style: none;
}
.service-single .policy-content ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.service-single .policy-content ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--brand-blue, #0745b6), var(--brand-blue-bright, #2b8aef));
  transform: rotate(45deg);
}
/* keep the sidebar company-nav / talk-to-us panel beside the copy on desktop */
@media (min-width: 992px) {
  .service-single .service-sidebar { position: sticky; top: 104px; }
}
@media (max-width: 991.98px) {
  .service-single.py-120 { padding-top: 64px; padding-bottom: 64px; }
  .service-single .service-sidebar { margin-top: 32px; }
  .service-single .service-sidebar .widget { padding: 24px; }
}

/* Subtitle line that page.php prints above the body of an admin-managed page. */
.service-single .policy-content .lead-in {
  font-size: 18px;
  line-height: 1.6;
  color: var(--brand-blue, #0745b6);
  font-weight: 600;
  margin: 0 0 22px;
  padding-left: 16px;
  border-left: 4px solid var(--brand-blue-bright, #2b8aef);
}

/* -------------------------------------------------------------------------
   ITEM 7 (product detail page) — hero image zoom + gallery hover.
   The related-product cards on this page reuse the .solution-card--media
   image style defined above; these rules just add a little life to the
   product photo and gallery thumbnails.
   ------------------------------------------------------------------------- */
.service-details > .mb-30 {
  overflow: hidden;
  border-radius: 18px;
}
.service-details > .mb-30 img {
  width: 100%;
  display: block;
  border-radius: 18px;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.service-details > .mb-30:hover img { transform: scale(1.04); }
.service-details .content .row > [class*="col-"] img {
  width: 100%;
  border-radius: 16px;
  transition: box-shadow .3s ease, transform .3s ease;
}
.service-details .content .row > [class*="col-"] img:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(11, 18, 32, .16);
}

/* -------------------------------------------------------------------------
   TYPOGRAPHY — granular fonts from Admin > Design > Fonts
   Five independent controls, each defaulting to the Heading font when unset:
     • Heading   -> h1, h2 (and the umbrella default for all headings)
     • Title     -> .site-title (the large hero / section titles)
     • Sub-head  -> h3, h4, h5, h6 (card titles, widget titles, sub-sections)
     • Sub-title -> .site-title-tagline / eyebrow labels above titles
     • Body      -> body copy (already wired via --body-font)
   The values come from assets/css/dynamic-theme.php as CSS variables, so this
   file only has to point each element at the right variable.
   ------------------------------------------------------------------------- */
.hero-aztor h1,
.site-heading .site-title,
.site-title,
h1:not(.site-title),
h2:not(.site-title) { font-family: var(--title-font); }

h3:not(.site-title), h4:not(.site-title),
h5:not(.site-title), h6:not(.site-title) { font-family: var(--subheading-font); }

.site-title-tagline,
.hero-eyebrow,
.sec-eyebrow,
.breadcrumb-eyebrow { font-family: var(--subtitle-font); }