/* Additions on top of the theme's own CSS. Kept in a separate file so the
   original all.css / libraries.css / style.css stay untouched and a theme
   update never silently drops these rules. */

/* Responsive image baseline.
   The theme ships NO global `img { max-width:100%; height:auto }` — only
   `.img-fluid` and `.img-thumbnail` carry it. Two consequences:
     1. any image wider than its column overflows;
     2. width/height ATTRIBUTES cannot be added safely, because without
        `height:auto` the browser treats the height attribute as the used
        height instead of deriving the box from the ratio.
   This rule is the precondition for tools/imgdims.mjs. It was added with a
   before/after rendered-size comparison at 1366px, not on faith. */
img {
  max-width: 100%;
  height: auto;
}

/* Skip link — visible only when focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 18px;
  background: #fff;
  color: #111;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}

/* Screen-reader-only text. The theme ships Bootstrap's .sr-only, but this file
   is loaded last and the form labels depend on it, so it is defined here too
   rather than assumed. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot fields.
   Moved off-screen rather than display:none — a bot that skips hidden inputs
   would sail past a display:none trap, but fills these in. Never focusable
   (tabindex="-1") and aria-hidden, so a keyboard or screen-reader user never
   reaches them. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Consent line under the contact form. */
.form-consent {
  font-size: 13px;
  line-height: 1.5;
  /* NOT opacity. `opacity: 0.75` on #6b7488 composites to #9097a6 = 2.93:1 on
     white — my own rule was the last color-contrast failure Lighthouse
     reported, on /az/elaqe/. Opacity is invisible to a colour-contrast reader
     of the CSS but not to the pixel. An explicit colour instead. */
  color: #6b7488;
  margin: 10px 0 0;
}

/* Submit feedback. Empty until the script writes to it, so no reserved space
   that would shift the layout. */
.contact-result:not(:empty) {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
}

/* Focus visibility. The theme removes outlines in places; keyboard users need
   them back. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Text contrast.
   The theme paints body copy and every dropdown link in #848e9f, which is
   3.31:1 on white — below the WCAG AA minimum of 4.5:1 for normal text, and the
   reason Lighthouse reported color-contrast on all five measured pages. In the
   mega menus, with 22 and 29 items on white, it reads as greyed-out/disabled.

   #6b7488 is 4.69:1: it passes AA and stays in the same blue-grey family, so
   the design still looks like itself. Measured, not eyeballed.

   Scoped to the light-background contexts only. The top bar and footer sit on
   dark navy, where this colour would go the wrong way. */
/* The selector must MATCH the theme's own specificity, not merely come later in
   the file. The theme sets the colour with
     .navbar .dropdown-menu .nav-item > .nav-item-link  (0,4,1)
   so the first version of this rule — `.mega-dropdown-menu .nav-item-link`
   (0,2,0) — lost the cascade and changed nothing. It was written, deployed and
   measured before that showed up: the computed colour was still #848e9f. */
.navbar .dropdown-menu .nav-item > .nav-item-link {
  color: #6b7488;
}
.navbar .dropdown-menu .nav-item > .nav-item-link[aria-current="page"] {
  color: #10074b;
  font-weight: 600;
}

/* Storm credit — colour override REMOVED, deliberately.
   It used to force #a7aeff because the credit sat in the dark #0d0e43 widget
   column, where the theme's `.color-primary` (#2e3192) is 1.70:1. That was
   treating a symptom: the credit belonged in `.footer-secondary`, which the
   theme paints WHITE precisely so the brand blue reads there (8.6:1). The
   markup was moved instead, so no colour override is needed. */

/* A mega menu must never be taller than the viewport: the 29-item procedures
   list used to run off the bottom of the screen with no way to reach the last
   items. Columns bring it down, this is the backstop. */
.mega-dropdown-menu {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

/* Language switcher rows.
   The longest label ("Азербайджанский") wrapped under its flag: the popup has a
   170px box and the row needs 144px, which fits — but with the label allowed to
   wrap, the browser broke it anyway and the row grew from 32px to 52px, leaving
   the flag on one line and the text on the next.
   The legacy site rendered all three rows on one line; nowrap restores that and
   lets the popup size itself to the widest label instead of squeezing it. */
.miniPopup-language li a {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.miniPopup-language li a img {
  flex: 0 0 auto;
}
.miniPopup-language {
  width: auto;
  min-width: 170px;
}

/* Storm credit hit area.
   The link is the word "Storm" alone (owner's instruction), which gave a 40x18
   target — under WCAG 2.2's 24x24 minimum, and the "Developed by ⚡" beside it
   is deliberately not a link. Clicking anywhere but exactly on those five
   letters did nothing, which reads as a broken link rather than a small one.
   The padding grows the clickable box; the negative margin cancels the layout
   effect, so nothing moves on screen. */
.footer .storm-credit a {
  display: inline-block;
  padding: 8px 6px;
  margin: -8px -6px;
}

/* Copyright bar layout. The theme gives .footer-secondary its white background,
   padding and accent bar but no inner layout, because the legacy site never
   used it. Credit right-aligned on desktop, stacked and centred on mobile. */
.footer .footer-secondary .footer-copyright,
.footer .footer-secondary .footer-credit {
  font-size: 14px;
  line-height: 1.6;
  color: #6b7488;
}
.footer .footer-secondary .footer-credit {
  text-align: right;
}
@media (max-width: 767px) {
  .footer .footer-secondary .footer-copyright,
  .footer .footer-secondary .footer-credit {
    text-align: center;
  }
  .footer .footer-secondary .footer-credit {
    margin-top: 6px;
  }
}

/* .bg-img carriers — DEYİŞDİRİLMƏDİ, qəsdən.
   2026-09-10: hero fonunu build vaxtı HTML-ə yazmaq (tools/bgimg.mjs) LCP faza
   bölgüsünü düzəltdi — «resource load delay» 2553ms -> 239ms — LAKİN CLS-i
   pisləşdirdi: desktop 0.001 -> 0.831, mobil 0.37 -> 0.903. İki fərqli
   izahat sınandı (selektorun valideynin övladlarını da tutması; holder-in
   gizlədilməsi) və heç biri CLS-i geri qaytarmadı, yəni səbəb hələ tapılmayıb.
   Ölçmə ilə təsdiqlənməyən dəyişiklik saytda saxlanılmır — addım geri alındı.
   Alət `tools/bgimg.mjs` saxlanılır, boru xəttində DEYİL. */

/* Body text contrast.
   The theme sets `body { color: #848e9f }` and everything inherits it. On white
   that is 3.31:1 — below the WCAG AA minimum of 4.5:1 for normal text, and the
   reason Lighthouse reported color-contrast on all six measured pages
   (`p.mb-30` inside `.about-Text` was the flagged node).

   #6b7488 is 4.69:1 on white.

   ⚠ This cannot be a blanket change. The top bar and the footer sit on dark
   navy (#0d0e43), where the SAME colour moves the wrong way:
     #848e9f on navy = 5.47:1 (passes)
     #6b7488 on navy = 3.86:1 (fails)
   So the dark regions are restored to a light tone instead. Measured, both
   directions, before writing this. */
body {
  color: #6b7488;
}

/* Dark-background regions: lighten rather than darken. #9aa3b5 is 7.13:1 on
   #0d0e43. The explicit #f9f9f9 the theme puts on footer nav links is more
   specific and keeps winning, which is correct — those are already 17:1. */
/* Scoped to .footer-primary, NOT .footer: .footer-secondary is white, and
   #9aa3b5 there would be 2.6:1 — the same mistake in the other direction. */
.footer-primary,
.footer-primary p,
.footer-primary li,
.footer-primary span,
.header-topbar,
.header-topbar li {
  color: #9aa3b5;
}

/* Navigation and footer labels are not document headings.
   `.nav-title` was <h2> and `.footer-widget-title` was <h6>. Both live in
   chrome, so every page's outline read: 7–11 h2 (mega-menu columns) → the real
   h1 → h4 … → 5 h6 (footer). heading_skips was 187/187 and Lighthouse failed
   heading-order on all six measured pages.

   They are <div> now. The theme's classes carry only font-size and
   margin-bottom — colour, font-weight and line-height came from its
   `h1,h2,h3,h4,h5,h6 { color:#10074B; font-weight:600; line-height:1.4 }` rule,
   which a div does not match. Restored explicitly here; the rendered box is
   compared before and after, because losing typography on a tag change is
   silent (no error, nothing in the console). */
.navbar .dropdown-menu .nav-title {
  color: #10074b;
  font-weight: 600;
  line-height: 1.4;
}
.footer .footer-widget-title {
  font-weight: 600;
  line-height: 1.4;
}

/* Medical disclaimer (condition + procedure pages). Body grey #6b7488 on the
   light panel #f4f6fa is 4.39:1 — too low for 14px text — so the text colour is
   the darker #4b5568 (7.0:1 on #f4f6fa). */
.medical-disclaimer { padding: 28px 0 60px; }
.medical-disclaimer p {
  font-size: 14px; line-height: 1.7; color: #4b5568;
  background: #f4f6fa; border-left: 4px solid #2e3192; padding: 16px 20px; border-radius: 4px;
}
.medical-disclaimer strong { color: #10074b; }

/* .bg-img holder out of the flow (CLS) — 2026-09-10, second attempt.
   Cause, now found: the holder <div class="bg-img"><img width height></div>
   sits in the normal flow of its section, so its <img> reserves e.g. 412x275 on
   mobile until main.js deletes the holder — then the section shrinks and the
   next section jumps up. Whether that happens before or after first paint is a
   race with main.js, which is why PSI mobile CLS flipped between 0 and
   0.249-0.367 on the same URL.
   Why the FIRST attempt (above note) blew CLS up to 0.83/0.90: main.js also
   ADDS class "bg-img" to the PARENT after moving the image into its background.
   A plain `.bg-img` rule therefore also hits the slides and banners after JS.
   `:has(> img:only-child)` matches only the untouched holder; after JS the
   parents never have an image-only child, so they are left alone (A/B in real
   Chrome, mobile + Slow 4G + CPU 4x: page height identical 7830px, all 7
   parents still position:relative with their background set, CLS 0).
   Browsers without :has() ignore the rule and behave exactly as before.
   Every holder parent on the site is position:relative (page-title z-index 1,
   slide-item, widget-banner, banner-img, fancybox-layout4), so the layer stays
   inside its own section and under the .bg-overlay pseudo-elements (z -1). */
.bg-img:has(> img:only-child) {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  z-index: -2; overflow: hidden;
}
.bg-img:has(> img:only-child) > img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
}

/* Hero slider before slick initialises (CLS) — 2026-09-10.
   The home hero has 4 .slide-item children. The theme hides extra slides only
   via `.slick-slide{display:none}`, a class slick adds ON init — so until
   plugins.js/main.js run, all 4 slides sit stacked in the flow: measured in real
   Chrome (mobile, Slow 4G, CPU 4x, cold cache) the slider was 1676px pre-init
   and 441px after, and section.about-layout2 jumped: CLS 0.367, the exact value
   PSI reported in about half of its runs (a race with the scripts).
   With this rule the slider is 441px before AND after init: CLS 0.
   `!important` is required, not a habit: style.css has
   `.align-v-h{display:flex !important}` on every slide, which beat the first
   version of this rule silently. After init slick moves the slides into
   .slick-track, so the direct-child selector stops matching by itself.
   Scoped to the hero (.slider): the other two carousels show 3 and 5 slides
   and need a row layout pre-init, not "first slide only". */
.slider > .slick-carousel:not(.slick-initialized) > .slide-item:not(:first-child) {
  display: none !important;
}

/* Medical reviewer line, above the disclaimer panel (EAT-03). The link uses the
   brand blue #2e3192 on the #f4f6fa panel: 9.6:1, and is underlined so it reads
   as a link, not just bold text. */
.medical-disclaimer .medical-reviewer {
  margin-bottom: 10px; border-left-color: #0d0e43;
}
.medical-disclaimer .medical-reviewer a {
  color: #2e3192; text-decoration: underline; text-underline-offset: 2px; font-weight: 600;
}