/* ============================================================
   QMEDIC – OVERRIDES.CSS
   ------------------------------------------------------------
   Purpose:
   - One file to patch/extend Elementor + theme styles in a controlled way.
   - Keep selectors scoped to Qmedic sections (.q-hero, .q-cards, .q-partners, .q-page, .q-maps).
   - Prefer Elementor global CSS variables when available.
   - Use minimal !important. Only where Elementor/theme inline styles win.

   Notes for developers:
   - `body.elementor-kit-6` is the Elementor kit scope. Included first where possible.
   - A fallback selector without `body.elementor-kit-6` is provided to stay resilient
     if the kit ID changes or pages render without that class.
   ============================================================ */


/* ============================================================
   MIGRATION MAP (future refactor plan)
   ------------------------------------------------------------
   Goal:
   - Keep overrides.css small over time.
   - Move stable, reusable rules into "core" stylesheets.

   Suggested target structure (later):
   1) qmedic-core.css
      - Brand tokens (colors, typography scale, spacing scale)
      - Minimal specificity, no !important

   2) qmedic-components.css
      - Reusable Qmedic blocks: .q-hero, .q-cards, .q-partners, .q-page, .q-rte, .q-maps
      - Component-only styling, scoped to .q-* classes
      - Very limited !important, prefer correct cascade order

   3) qmedic-overrides.css (this file)
      - Only patches depending on Elementor/theme internals
      - Temporary hotfixes (Safari/mobile quirks)
      - Rules that exist because the base cascade cannot be changed yet

   Migration candidates in THIS file:
   - [MIGRATE:CORE]
     Section 0) Design Tokens -> qmedic-core.css

   - [MIGRATE:COMPONENT]
     Section 1) q-cards
     Section 3) q-partners
     Section 4) q-recaptcha-note
     Section 5) q-page / q-rte
     Section 6) q-maps layout + typography

   - [KEEP:OVERRIDE] (until proven stable + tested broadly)
     Section 2) Hero mobile H1 fix
     Section 5) Elementor width hardening selectors
     Section 6) Maps overlay reset (Elementor internals)
   ============================================================ */


/* ============================================================
   0) Design Tokens (local fallbacks)
   ------------------------------------------------------------
   [MIGRATE:CORE]
   ============================================================ */

:root{
  --q-color-text: var(--e-global-color-text, #0D1646);
  --q-color-primary: var(--e-global-color-primary, #4675C0);
  --q-color-primary-dark: #3A4D97; /* chosen as "darkest logo blue" */
}


/* ============================================================
   1) FEATURES / CARDS (q-cards)
   ------------------------------------------------------------
   [MIGRATE:COMPONENT]
   ============================================================ */

body.elementor-kit-6 .q-cards .elementor-widget-heading .elementor-heading-title,
.q-cards .elementor-widget-heading .elementor-heading-title{
  font-family: var(--e-global-typography-secondary-font-family, "Open Sans"), sans-serif;
  font-weight: var(--e-global-typography-secondary-font-weight, 700);
  font-size: 24px;
  line-height: 1.25em;
  text-transform: var(--e-global-typography-secondary-text-transform, none);
  color: var(--q-color-text);
  margin: 0;
}

@media (max-width: 1024px){
  body.elementor-kit-6 .q-cards .elementor-widget-heading .elementor-heading-title,
  .q-cards .elementor-widget-heading .elementor-heading-title{
    font-size: 22px;
  }
}

body.elementor-kit-6 .q-cards .elementor-widget-icon .elementor-icon,
.q-cards .elementor-widget-icon .elementor-icon{
  --q-icon-size: 56px;
  width: var(--q-icon-size);
  height: var(--q-icon-size);
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--q-color-primary);
}

body.elementor-kit-6 .q-cards .elementor-widget-icon .elementor-icon svg,
.q-cards .elementor-widget-icon .elementor-icon svg{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Make inline SVGs follow currentColor (works if SVG uses fill/stroke attributes) */
body.elementor-kit-6 .q-cards .elementor-widget-icon .elementor-icon svg [fill],
.q-cards .elementor-widget-icon .elementor-icon svg [fill]{
  fill: currentColor !important;
}

body.elementor-kit-6 .q-cards .elementor-widget-icon .elementor-icon svg [stroke],
.q-cards .elementor-widget-icon .elementor-icon svg [stroke]{
  stroke: currentColor !important;
}

@media (max-width: 1024px){
  body.elementor-kit-6 .q-cards .elementor-widget-icon .elementor-icon,
  .q-cards .elementor-widget-icon .elementor-icon{
    --q-icon-size: 48px;
  }
}

@media (max-width: 767px){
  body.elementor-kit-6 .q-cards .elementor-widget-icon .elementor-icon,
  .q-cards .elementor-widget-icon .elementor-icon{
    --q-icon-size: 44px;
  }
}

/* Card grid layout */
body.elementor-kit-6 .q-grid,
.q-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

body.elementor-kit-6 .q-card,
.q-card{
  max-width: 460px;
  width: 100%;
  flex: 1 1 clamp(320px, 30%, 360px);
}

/* If only one card exists, keep it visually centered and not too wide */
body.elementor-kit-6 .q-grid > .q-card:only-child,
.q-grid > .q-card:only-child{
  flex: 0 1 460px;
}

/* Optional: card image sizing */
body.elementor-kit-6 .q-card .elementor-widget-image img,
.q-card .elementor-widget-image img{
  max-width: 240px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto 12px;
}

@media (max-width: 1024px){
  body.elementor-kit-6 .q-grid,
  .q-grid{
    gap: 36px;
  }

  body.elementor-kit-6 .q-card,
  .q-card{
    flex-basis: 45%;
  }

  body.elementor-kit-6 .q-card .elementor-widget-image img,
  .q-card .elementor-widget-image img{
    max-width: 200px;
  }
}

@media (max-width: 767px){
  body.elementor-kit-6 .q-grid,
  .q-grid{
    gap: 44px;
  }

  body.elementor-kit-6 .q-card,
  .q-card{
    flex-basis: 100%;
    max-width: 520px;
  }

  body.elementor-kit-6 .q-grid > .q-card:only-child,
  .q-grid > .q-card:only-child{
    flex-basis: 100%;
    max-width: 520px;
  }

  body.elementor-kit-6 .q-card .elementor-widget-image img,
  .q-card .elementor-widget-image img{
    max-width: 180px;
    margin-bottom: 10px;
  }
}

body.elementor-kit-6 .q-features-sub,
.q-features-sub{
  margin: 10px 0 0;
  opacity: .85;
  font-size: 0.95em;
  line-height: 1.5em;
}

body.elementor-kit-6 .q-features-subwrap,
.q-features-subwrap{
  max-width: 760px;
}

body.elementor-kit-6 .q-cards .elementor-widget-text-editor,
.q-cards .elementor-widget-text-editor{
  font-size: 16px;
  line-height: 1.6em;
}


/* ============================================================
   2) HERO (q-hero)
   ------------------------------------------------------------
   [MIGRATE:COMPONENT] lead paragraph sizing
   [KEEP:OVERRIDE] mobile H1 fix until validated broadly
   ============================================================ */

/* Hero lead paragraph block (desktop typography) */
body.elementor-kit-6 .q-hero .elementor-element-bbf2019,
.q-hero .elementor-element-bbf2019{
  font-size: 24px;
  line-height: 1.4em;
  font-weight: 300;
  opacity: .98;
}

/* Width control for that lead paragraph */
body.elementor-kit-6 .q-hero .elementor-element-bbf2019 .elementor-widget-container,
.q-hero .elementor-element-bbf2019 .elementor-widget-container{
  width: 100%;
  max-width: 810px;
}

body.elementor-kit-6 .q-hero .elementor-element-bbf2019 p + p,
.q-hero .elementor-element-bbf2019 p + p{
  margin-top: 14px;
  opacity: .92;
  font-size: 0.85em;
}

body.elementor-kit-6 .q-hero .elementor-element-bbf2019 .elementor-widget-container p,
.q-hero .elementor-element-bbf2019 .elementor-widget-container p{
  margin: 0;
}

@media (max-width: 1024px){
  body.elementor-kit-6 .q-hero .elementor-element-bbf2019 .elementor-widget-container,
  .q-hero .elementor-element-bbf2019 .elementor-widget-container{
    max-width: 680px;
  }
}

@media (max-width: 767px){
  body.elementor-kit-6 .q-hero .elementor-element-bbf2019 .elementor-widget-container,
  .q-hero .elementor-element-bbf2019 .elementor-widget-container{
    max-width: 100%;
  }
}

/* [KEEP:OVERRIDE]
   HERO – MOBILE FIX (iOS Safari / small screens) */
@media (max-width: 767px){
  body.elementor-kit-6 .q-hero h1,
  body.elementor-kit-6 .q-hero .elementor-heading-title,
  .q-hero h1,
  .q-hero .elementor-heading-title{
    font-size: clamp(34px, 9vw, 52px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
  }

  body.elementor-kit-6 .q-hero,
  .q-hero{
    padding-top: 22px !important;
    padding-bottom: 26px !important;
  }
}

@media (max-width: 390px){
  body.elementor-kit-6 .q-hero h1,
  body.elementor-kit-6 .q-hero .elementor-heading-title,
  .q-hero h1,
  .q-hero .elementor-heading-title{
    font-size: clamp(30px, 9.5vw, 44px) !important;
  }
}


/* ============================================================
   3) PARTNERS (q-partners)
   ------------------------------------------------------------
   [MIGRATE:COMPONENT]
   ============================================================ */

body.elementor-kit-6 .q-partners .elementor-widget-button .elementor-button,
.q-partners .elementor-widget-button .elementor-button{
  font-size: 13px;
  padding: 10px 16px;
  opacity: .8;
  transform: translateY(0);
}

/* Fixed logo area + centered logo */
body.elementor-kit-6 .q-partners .q-card .elementor-widget-image .elementor-widget-container,
.q-partners .q-card .elementor-widget-image .elementor-widget-container{
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Keep logos contained */
body.elementor-kit-6 .q-partners .q-card .elementor-widget-image img,
.q-partners .q-card .elementor-widget-image img{
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}


/* ============================================================
   4) CONTACT FORM
   ------------------------------------------------------------
   [MIGRATE:COMPONENT] (or forms.css)
   ============================================================ */

body.elementor-kit-6 .q-recaptcha-note,
.q-recaptcha-note{
  font-size: 11px;
  color: #555;
  line-height: 1.4;
  margin-top: 10px;
}


/* ============================================================
   5) LEVEL 2 PAGES (q-page + q-rte) – STANDARD
   ------------------------------------------------------------
   [MIGRATE:COMPONENT] for layout/typography
   [KEEP:OVERRIDE] for Elementor width hardening
   ============================================================ */

body.elementor-kit-6 .q-page,
.q-page{
  padding: 90px 20px 80px;
}

body.elementor-kit-6 .q-page-inner,
.q-page-inner{
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* [KEEP:OVERRIDE]
   Harden: keep nested Elementor containers from breaking column width. */
body.elementor-kit-6 .q-page-inner .e-con,
body.elementor-kit-6 .q-page-inner .e-con-inner,
body.elementor-kit-6 .q-page-inner .elementor-widget-text-editor,
body.elementor-kit-6 .q-page-inner .elementor-widget-text-editor .elementor-widget-container,
.q-page-inner .e-con,
.q-page-inner .e-con-inner,
.q-page-inner .elementor-widget-text-editor,
.q-page-inner .elementor-widget-text-editor .elementor-widget-container{
  width: 100% !important;
  max-width: 100% !important;
}

body.elementor-kit-6 .q-page-title,
.q-page-title{
  margin: 0 0 18px;
  color: var(--q-color-primary-dark) !important;
}

body.elementor-kit-6 .q-rte,
.q-rte{
  color: var(--q-color-text);
}

body.elementor-kit-6 .q-rte p,
body.elementor-kit-6 .q-rte li,
.q-rte p,
.q-rte li{
  margin: 0 0 14px;
  line-height: 1.7em;
}

body.elementor-kit-6 .q-rte h2,
body.elementor-kit-6 .q-rte h3,
body.elementor-kit-6 .q-rte h4,
body.elementor-kit-6 .q-rte .wp-block-heading,
.q-rte h2,
.q-rte h3,
.q-rte h4,
.q-rte .wp-block-heading{
  margin: 28px 0 10px;
  color: var(--q-color-primary) !important;
}

body.elementor-kit-6 .q-rte a,
.q-rte a{
  color: var(--q-color-primary);
  text-decoration: underline;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.elementor-kit-6 .q-rte ul,
body.elementor-kit-6 .q-rte ol,
.q-rte ul,
.q-rte ol{
  margin: 0 0 14px;
  padding-left: 22px;
}

body.elementor-kit-6 .q-rte li,
.q-rte li{
  margin: 0 0 8px;
}


/* ============================================================
   6) MAPS (q-maps)
   ------------------------------------------------------------
   Two locations block: layout + “safe embed” styling.
   - Layout/typography can migrate to components later.
   - Overlay/background resets are Elementor-specific -> keep as override.
   ============================================================ */

/* [MIGRATE:COMPONENT] Layout: stack by default */
.q-maps .q-maps-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  width: 100%;
}

/* [MIGRATE:COMPONENT] Desktop: two columns */
@media (min-width: 1024px){
  .q-maps .q-maps-grid{
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
  }
}

/* [MIGRATE:COMPONENT] Meta text above the map */
.q-maps .q-map-meta{
  margin: 0 0 10px;
}

.q-maps .q-map-label{
  font-weight: 700;
  line-height: 1.2;
  color: var(--q-color-text);
}

.q-maps .q-map-address{
  margin-top: 4px;
  font-size: 0.95em;
  line-height: 1.4;
  opacity: 0.85;
  color: var(--q-color-text);
}

/* Map frame sizing */
.q-maps iframe{
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

@media (max-width: 767px){
  .q-maps iframe{
    height: 260px;
  }
}

/* [KEEP:OVERRIDE]
   MAPS: remove Elementor background + overlay inside the maps block
   Reason:
   Elementor containers can paint backgrounds via background-image or via ::before overlay.
   We kill both, scoped to .q-maps only. */
.q-maps{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.q-maps::before,
.q-maps::after,
.q-maps .e-con::before,
.q-maps .e-con::after,
.q-maps .e-con-inner::before,
.q-maps .e-con-inner::after,
.q-maps .elementor-widget-container::before,
.q-maps .elementor-widget-container::after{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* Safety: wrappers should never paint a background */
.q-maps .q-maps-grid,
.q-maps .q-map,
.q-maps .q-map-meta{
  background: transparent !important;
}

/* [KEEP:OVERRIDE]
   MAPS: force full color
   Reason:
   Some themes/Elementor widgets apply CSS filters (grayscale/contrast) to embeds or iframes.
   We explicitly disable filters for maps only. */
.q-maps iframe{
  filter: none !important;
  -webkit-filter: none !important;
}

/* OPTIONAL HARD KILL (enable only if a future update applies filters to wrappers again)
.q-maps,
.q-maps *{
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}
*/

/* Address meta: 3-line styling */
.q-maps .q-map-address{
  margin-top: 4px;
  color: var(--q-color-text);
}

.q-maps .q-map-line1{
  font-size: 0.82em;
  line-height: 1.35;
  opacity: 0.92;
}

.q-maps .q-map-line2{
  font-size: 0.82em;
  line-height: 1.35;
  opacity: 0.86;
}

.q-maps .q-map-line3{
  font-size: 0.82em;
  line-height: 1.35;
  opacity: 0.80;
}