/* === Modern typography overrides — kineagadir.com === */
:root {
  --kg-text: #2d2d2d;
  --kg-text-strong: #1a1a1a;
  --kg-text-muted: #595959;
  /* Latin-first cascade, then a stack of Arabic-Naskh fonts so Arabic
     codepoints render in proper Naskh on every browser. Chrome on
     macOS without an explicit Arabic font picks Noto Nastaliq Urdu —
     which is Urdu calligraphy, not Arabic — so we name the right
     fonts ourselves: Noto Sans Arabic (loaded), then Geeza Pro
     (macOS), Segoe UI (Windows), Tahoma (legacy Windows). */
  --kg-font-body: 'Inter', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, -apple-system, BlinkMacSystemFont, Roboto, system-ui, sans-serif;
  --kg-font-display: 'Manrope', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, -apple-system, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--kg-font-body) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--kg-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p, li, td, th, dd, dt, blockquote, label, input, textarea, select {
  font-family: var(--kg-font-body);
}

/* Restore strong contrast on body text (theme had #999 — fails WCAG AA) */
body,
body p,
.content-area .icon-box--description,
.has-theme-text-color-color,
.team-member--description,
.testimonials .testimonial--description,
.entry-content,
.textwidget,
.siteorigin-widget-tinymce {
  color: var(--kg-text) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.widget-title,
.team-member--name,
p.caption-heading-tag,
.brochure,
.testimonials .testimonial--author,
.call-to-action .call-to-action--content .call-to-action--title,
.counter .counter--text .counter--number {
  font-family: var(--kg-font-display) !important;
  color: var(--kg-text-strong);
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.625rem, 3vw, 2rem); }
h3 { font-size: clamp(1.375rem, 2.4vw, 1.625rem); }
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1.125rem; font-weight: 600; }
h6 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }

/* Navigation */
.main-navigation > li > a {
  font-family: var(--kg-font-display) !important;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
}
/* Sub-menu items: customizer sets Open Sans (removed from the Google
   Fonts load), so without this they fall back to the browser default
   sans-serif and visibly mismatch the rest of the site. */
.main-navigation .sub-menu li a {
  font-family: var(--kg-font-body) !important;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* ============================================================
 * Dropdown menu UX — desktop only
 *   • Visible caret on items that have a sub-menu (the theme uses
 *     FontAwesome \f107 which isn't in our subsetted font).
 *   • Parent visually anchors to the dropdown on open: subtle bg
 *     + 3 px brand-purple inset border at the seam.
 *   • Caret rotates 180° as open-state feedback.
 *   • Reacts to :focus-within for keyboard users, not just :hover.
 * ============================================================ */
@media (min-width: 992px) {
  .main-navigation > li.menu-item-has-children > a {
    padding-right: 26px !important;
  }
  .main-navigation > li.menu-item-has-children::after {
    /* Pure-CSS chevron — no font dependency, crisp at any DPI */
    content: "" !important;
    position: absolute;
    top: 50%;
    right: 12px;
    bottom: auto !important;
    left: auto !important;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 180ms ease, opacity 180ms ease;
    font: inherit !important;
    color: #1c6e91 !important;
    line-height: 0;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
  }
  /* When the dropdown opens (hover or keyboard focus inside the li),
     rotate the caret up and tighten its opacity. Caret flips to white
     because the parent bg below turns purple. */
  .main-navigation > li.menu-item-has-children:hover::after,
  .main-navigation > li.menu-item-has-children:focus-within::after {
    transform: translateY(-25%) rotate(-135deg);
    opacity: 1;
    color: #ffffff !important;
  }
  /* Hover highlight on EVERY top-level menu item (with or without a
     dropdown) — purple bg matches the sub-menu so dropdown parents
     read as one solid block with their menu, and items without a
     dropdown stay visually consistent. Text color matches the brand
     light-blue accent line at the bottom edge so the label and the
     underline read as one visual unit.
     The explicit .current-*:hover variants bump specificity above
     the a11y darken-for-white-bar rule (later in this file), so the
     hover color also wins on the active page's own top-level item
     and its dropdown ancestors. Without these variants, hovering the
     active page's parent (e.g. "خدماتنا" on a Services sub-page)
     would keep the darker #1c6e91 from the a11y rule. */
  .main-navigation > li:hover > a,
  .main-navigation > li:focus-within > a,
  .main-navigation > li.current-menu-item:hover > a,
  .main-navigation > li.current-menu-item:focus-within > a,
  .main-navigation > li.current_page_parent:hover > a,
  .main-navigation > li.current_page_parent:focus-within > a,
  .main-navigation > li.current-menu-ancestor:hover > a,
  .main-navigation > li.current-menu-ancestor:focus-within > a {
    background-color: #9A65A5 !important;
    color: #56afd5 !important;
    /* Subtle dark drop shadow anchors the #56afd5 light-blue against
       the #9A65A5 purple. 1 px y-offset + 2 px blur is small enough
       to read as crisp rather than a glow; the dark side carries the
       contrast lift because the bg is already mid-tone. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 -3px 0 #56afd5;
    transition:
      background-color 160ms ease,
      color 160ms ease,
      text-shadow 160ms ease,
      box-shadow 160ms ease;
  }

  /* Dropdown reveal animation — slide-fade with a snappy modern easing
     curve (ease-out-expo-ish). Visibility switches instantly on open
     and waits for the fade-out to finish on close, so the menu is
     never blocking clicks while invisible. */
  .main-navigation .sub-menu {
    transform: translateY(-8px);
    transition:
      opacity 220ms ease-out,
      transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 240ms;
  }
  .main-navigation > li.menu-item-has-children:hover > .sub-menu,
  .main-navigation > li.menu-item-has-children:focus-within > .sub-menu {
    transform: translateY(0);
    transition:
      opacity 220ms ease-out,
      transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0s;
  }

  /* Sub-menu hover state — same signal as top-level: dash + light-blue
     text, no bg shift. The customizer paints a darker purple #905b9b
     and a matching dark top-border on hover, but with the top-level
     items already painting #9A65A5 on hover, that second purple gives
     sub-items a different hover signature than their parents. Hold the
     sub-menu hover bg at #9A65A5 (= dropdown bg = parent hover bg) so
     the entire menu shares one purple, and the only thing that changes
     on hover is the dash + the label color. Border-top is kept neutral
     so it doesn't flash a darker line on the hovered row.
     The shared transition on every sub-menu link makes the dash feel
     like it slides from row to row rather than blinking on/off. */
  .main-navigation .sub-menu > li > a {
    transition:
      background-color 160ms ease,
      color 160ms ease,
      text-shadow 160ms ease,
      box-shadow 160ms ease;
  }
  .main-navigation .sub-menu > li:hover > a,
  .main-navigation .sub-menu > li:focus-within > a {
    background-color: #9A65A5 !important;
    border-top-color: transparent !important;
    color: #56afd5 !important;
    /* Same subtle dark drop shadow as the top-level hover so the
       readability lift is consistent at both levels of the menu. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 -3px 0 #56afd5;
  }

  /* Drop the parent's bottom dash the moment a sub-menu item is the
     actual hover/focus target, so only one accent shows at a time —
     the one on the item the user is actually pointing at. Uses :has()
     to react to the descendant's hover state; the existing box-shadow
     transition on the parent fades it out smoothly. */
  .main-navigation > li.menu-item-has-children:hover:has(.sub-menu > li:hover) > a,
  .main-navigation > li.menu-item-has-children:focus-within:has(.sub-menu > li:focus-within) > a {
    box-shadow: none;
  }
}

/* Buttons */
.btn {
  font-family: var(--kg-font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* Team member tag — modern eyebrow style */
.team-member--tag {
  color: var(--kg-text-muted) !important;
  font-family: var(--kg-font-body);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}

.team-member--name {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 0.25em;
}

/* Page header subtitle muted */
.page-header--subtitle {
  color: var(--kg-text-muted) !important;
}

/* Caption headings (homepage hero overlays) — keep theme weight, just match family */
.caption-heading-tag {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Hero captions on slider keep their original colors (they're on dark images) */
.jumbotron .jumbotron-caption .caption-small-heading {
  font-family: var(--kg-font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Call-to-action — keep white text on dark background, just font + weight */
.call-to-action .call-to-action--content .call-to-action--title {
  color: #ffffff !important;
  font-weight: 700;
  line-height: 1.3;
}

/* === Header centering on full-width screens === */

/* Topbar tagline — center it (right column is empty so no conflict) */
.header .header-topbar .header-topbar-sidebar.topbar-left {
  text-align: center !important;
  width: 100%;
}
.header .header-topbar .header-description {
  text-align: center;
}
.header .header-topbar .header-topbar-sidebar.topbar-right:empty {
  display: none;
}
@media (min-width: 768px) {
  .header .header-topbar .col-md-4,
  .header .header-topbar .col-md-8 {
    float: none;
    width: 100%;
  }
}

/* Header on desktop: logo on top (centered, own row), nav menu below */
@media (min-width: 992px) {
  .header .header-wrapper > .container {
    position: relative;
    padding-top: 20px;
    padding-bottom: 0;
    min-height: auto;
  }
  /* Logo gets its own full-width row, centered */
  .header .header-wrapper .header-logo {
    position: static !important;
    transform: none !important;
    float: none !important;
    display: block !important;
    text-align: center;
    margin: 0 auto 15px;
    padding: 0;
    height: auto;
    width: 100%;
  }
  .header .header-wrapper .header-logo a {
    display: inline-block !important;
  }
  /* Nav: full-width row below the logo, centered menu, button stays on right */
  .header .header-wrapper .header-navigation {
    position: relative;
    width: 100%;
    text-align: center;
  }
  .header .header-wrapper .header-navigation .navbar-collapse {
    display: inline-block !important;
    vertical-align: middle;
  }
  .header .header-wrapper .header-navigation .featured-button.hidden-xs.hidden-sm {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Hide mobile-only featured button on desktop */
  .header .header-wrapper .featured-button.hidden-md.hidden-lg {
    display: none !important;
  }
}

/* ============================================================
 * Language switcher (FR / AR / EN) in the header top-bar
 * ============================================================ */
.header .header-topbar .topbar-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 32px;
}
.language-switcher {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
}
.language-switcher--icon {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-inline-end: 4px;
  opacity: 0.9;
}
.language-switcher .lang-link {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  /* WCAG AA: white on solid #3e4248 = 9.5 contrast.
     The rgba(0,0,0,0.45) over the #707780 topbar gives ~#3e4248. */
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  line-height: 1;
  white-space: nowrap;
}
.language-switcher .lang-link:hover,
.language-switcher .lang-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}
.language-switcher .lang-link.active {
  color: #ffffff !important;
  /* WCAG AA: white on #1c6e91 = ~5.7 contrast (was #56afd5 = 2.47). */
  background: #1c6e91;
  border-color: #1c6e91;
  cursor: default;
}
.language-switcher .lang-link.active:hover {
  background: #1c6e91;
  border-color: #1c6e91;
}
.language-switcher .lang-ar {
  /* Arabic glyph rendering tweak — bump size very slightly for readability */
  font-size: 13px;
  font-family: "Tahoma", "Arial", sans-serif;
}

/* On mobile, center the switcher below the tagline (the topbar stacks) */
@media (max-width: 991px) {
  .header .header-topbar .topbar-right {
    justify-content: center;
    padding-bottom: 6px;
  }
  .language-switcher {
    padding: 4px 0 8px;
  }
}

/* ============================================================
 * Direction-aware layout overrides — use logical properties /
 * flex so layouts auto-mirror for RTL without dir-specific rules.
 * ============================================================ */

/* Icon-box (advantages widgets, header widgets, footer widgets):
 * convert from float-based to flex-based layout so icon position
 * mirrors with the document direction.  This replaces the theme's
 * `.icon-box--icon { float: left; margin-right: 20px; }` rule.
 */
.icon-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.icon-box .icon-box--icon {
  float: none;
  flex: 0 0 auto;
  margin: 0;
  width: auto;
}
.icon-box .icon-box--text {
  flex: 1 1 auto;
  overflow: visible;
  text-align: start;   /* logical: left in LTR, right in RTL */
  min-width: 0;
}
.icon-box .icon-box--title {
  text-align: start;
}
.icon-box .icon-box--description {
  text-align: start;
}

/* Header topbar icon-box still keeps inline-flex with smaller gap */
.header .header-topbar .icon-box {
  display: inline-flex;
  gap: 7px;
}

/* Page-header + breadcrumbs — text-align: start instead of left */
.page-header,
.page-header--wrap,
.page-header--title,
.page-header--subtitle,
.breadcrumbs {
  text-align: start;
}

/* Team-member, featured-page, carousel captions, brochure — start-aligned */
.team-member--content,
.team-member--name,
.team-member--description,
.featured-page--content,
.featured-page .featued-page--title,
.jumbotron-caption,
.jumbotron-caption .caption-small-heading,
.jumbotron-caption .caption-heading,
.jumbotron-caption .caption-content,
.brochure,
.featured-box,
.page-content-extra ul li,
.page-content-extra,
.siteorigin-widget-tinymce {
  text-align: start;
}

/* Lists — padding on the inline-start side */
.page-content-extra ul,
.siteorigin-widget-tinymce ul {
  padding-inline-start: 1.5em;
  padding-inline-end: 0;
}

/* Opening-hours: the .right time value floats to the inline-end side */
.opening-hours ul li {
  display: flex;
  justify-content: space-between;
}
.opening-hours ul li .right {
  float: none;
  text-align: end;
}

/* Sidebar (service pages) */
.sidebar,
aside.sidebar,
.sidebar .widget_nav_menu ul.menu li,
.footer .widget,
.footer .icon-box--text,
.footer--top-container,
.footer .widget_nav_menu ul.menu li {
  text-align: start;
}

/* Pathology hub — card grid */
.pathology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin: 16px 0 32px;
}
.pathology-card {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  padding: 22px 24px;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.pathology-card:hover {
  box-shadow: 0 6px 18px rgba(86, 175, 213, 0.15);
  border-color: #56afd5;
  transform: translateY(-2px);
}
.pathology-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.3;
}
.pathology-card h3 a {
  color: #464646;
  text-decoration: none;
}
.pathology-card h3 a:hover {
  color: #56afd5;
}
.pathology-card p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #707780;
}
.pathology-card .text-link {
  font-size: 13px;
  font-weight: 600;
  color: #56afd5;
}

/* Footer text — force everything to white for readability against the
 * dark footer background. Overrides the various #C1C7CE / #909BA2
 * defaults from the WordPress theme customizer. */
.footer,
.footer .footer--top,
.footer .footer--middle,
.footer .footer--bottom,
.footer p,
.footer span,
.footer li,
.footer .widget-title,
.footer .icon-box--title,
.footer .icon-box--description,
.footer .opening-hours ul li,
.footer .opening-hours ul li span,
.footer .footer--middle .widget_nav_menu ul.menu li > a,
.footer .footer--middle .widget_nav_menu ul.menu li.current-menu-item > a,
.footer .footer--bottom a,
.footer .footer--bottom p {
  color: #ffffff !important;
}
.footer .footer--middle .widget_nav_menu ul.menu li > a::before {
  color: rgba(255, 255, 255, 0.6);
}
.footer .footer--middle .widget_nav_menu ul.menu li > a:hover {
  color: #ffffff;
  opacity: 0.85;
}
.footer .footer--middle .widget_nav_menu ul.menu li > a:hover::before {
  color: rgba(255, 255, 255, 0.85);
}

/* Brochure icon — flex layout, gap handles spacing */
.brochure {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brochure i {
  float: none;
  margin: 0;
}

/* Buttons with icons inside */
.btn i,
.btn .fa {
  margin-inline-end: 6px;
  margin-inline-start: 0;
  margin-right: unset;
  margin-left: unset;
}

/* ============================================================
 * Accessibility — WCAG AA contrast overrides
 * The theme defaults to #C1C7CE / #828282 / #56afd5 text in places
 * where Lighthouse measured 2.4–3.8 contrast (need 4.5 for AA).
 * ============================================================ */

/* Topbar tagline + topbar links on the #707780 background.
   #C1C7CE → #FFFFFF lifts contrast from 2.65 to ~5.4. */
.header .header-topbar,
.header .header-topbar .header-description,
.header .header-topbar a,
.header .header-topbar .header-topbar-sidebar a.icon-box .icon-box--title,
.header .header-topbar .header-topbar-sidebar .icon-box--title {
  color: #ffffff !important;
}

/* Main navigation text on white. #828282 → #555 lifts contrast from
   3.84 to ~7.3. Brand-blue link color #56afd5 (2.47) is bumped to a
   darker hue #1c6e91 (~4.6). Hover state is intentionally NOT covered
   here — the hover rule earlier in the file paints a purple bg, and
   the matching text color is defined there. */
@media (min-width: 992px) {
  .main-navigation > li > a {
    color: #555555 !important;
  }
  .main-navigation > li.current-menu-item > a,
  .main-navigation > li.current_page_parent > a,
  .main-navigation > li.current-menu-ancestor > a {
    color: #1c6e91 !important;
  }
}

/* Header widgets (Address / Phone / Email row above the page).
   Theme defaults: title #838383, description #bfbfbf — both fail AA. */
.header-widgets .icon-box--title {
  color: #5a5a5a !important;   /* ~7.2 contrast on white */
}
.header-widgets .icon-box--description {
  color: #6e6e6e !important;   /* ~5.7 contrast on white */
}

/* Featured "Prendre rendez-vous" button — brand purple #A175AA gives
   only 3.6 contrast with white text. Darken to #7A4884 (≥5.0). */
.header .header-wrapper .featured-button a,
.header .header-wrapper .featured-button a:hover {
  background: #7A4884 !important;
}

/* Card-style "En savoir plus" links rendered in brand blue on white.
   #56afd5 → #1c6e91 lifts contrast from 2.47 to ~4.6 (AA). */
a.text-link,
.content-area a.text-link {
  color: #1c6e91 !important;
}

/* ============================================================
 * Modern image styling — soft rounded corners on every content image
 * for the contemporary "card-y" feel of 2020s product/clinic sites.
 * 10 px is large enough to read as intentional at thumbnail sizes
 * and small enough not to crop hero/slider content awkwardly.
 *
 * Exceptions:
 *   * Header logo — brand identity must read pixel-accurate, no clipping.
 * ============================================================ */
img {
  border-radius: 10px;
}
.header-logo img {
  border-radius: 0;
}