/* Yodac UI fixes (2026-10-27): the one override file, linked last on every page (EN + AR).
   Anchor offsets, header height, "Our Services" heading, type scale, three button variants, form themes,
   mobile menu tap targets, RTL details, hero contrast, and the footer links / terms / 404 pages.
   Logical properties throughout so /ar/ mirrors; font families are only set outside Arabic pages
   (yodac-ar-20261025.css keeps the Arabic fonts). Palette: #16243e #1e4982 #2965b4 #15803d. */
:root {
  --header-h: 80px;
  --fs-h1: clamp(40px, 5vw, 72px);
  --fs-h2: clamp(30px, 3.2vw, 46px);
  --fs-h3-lg: clamp(24px, 2.2vw, 32px);
  --fs-h3: clamp(20px, 1.5vw, 22px);
  --ui-primary: #16243e;
  --ui-primary-hover: #1e4982;
  --ui-wa: #15803d;
  --ui-wa-hover: #116b33;
  --ui-sans: Inter, Arial, sans-serif;
  --ui-serif: "Noto Serif", Georgia, serif;
}
@media (max-width: 920px) { :root { --header-h: 64px; } }

/* 1. In-page anchors land below the sticky header */
:where([id]) { scroll-margin-top: calc(var(--header-h) + 24px); }
#yodac-contact, #enquiry, .ybl-zig, .ybl-section[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* 3. Header: <=80px desktop, <=64px mobile (logo scaled, never cropped) */
@media (min-width: 921px) {
  header.block-header .block-header-layout-desktop { min-height: var(--header-h); padding-block: 8px; }
  header.block-header .block-header-layout-desktop .block-header__logo { justify-self: start; width: auto !important; height: 64px !important; padding: 0 !important; margin-inline-end: 16px !important; justify-content: flex-start !important; }
  header.block-header .block-header-layout-desktop .block-header-logo__image { width: auto !important; height: 64px !important; }
}
@media (max-width: 920px) {
  header.block-header .block-header-layout-mobile { min-height: var(--header-h); padding-block: 8px !important; }
  header.block-header .block-header-layout-mobile .block-header__logo { justify-self: start; width: auto !important; height: 48px !important; padding: 0 !important; justify-content: flex-start !important; }
  header.block-header .block-header-layout-mobile .block-header-logo__image { width: auto !important; height: 48px !important; }

  /* 7. Mobile menu: 44x44 burger (same icon), 44px link rows */
  header.block-header .burger.block-header__hamburger-menu { position: relative; box-sizing: content-box; width: 24px; height: 18px; padding: 13px 10px; }
  header.block-header .burger .burger__bun, header.block-header .burger .burger__meat { left: 10px; width: 24px; }
  header.block-header .burger .burger__bun:first-child { top: 13px; }
  header.block-header .burger .burger__meat { top: 21px; }
  header.block-header .burger .burger__bun:last-child { top: 29px; }
  header.block-header .burger.burger--open .burger__bun:first-child { top: 12px; }
  header.block-header .burger.burger--open .burger__meat { width: 0; }
  header.block-header .block-header-layout-mobile .block-header__nav-links { gap: 2px; width: 100%; }
  header.block-header .block-header-layout-mobile__dropdown :is(.block-header-item, .block-header-item__label, .item-content-wrapper) { display: flex; width: 100%; }
  html body header.block-header .block-header-layout-mobile__dropdown .item-content { display: flex; align-items: center; justify-content: flex-end; width: 100%; min-height: 44px; padding-block: 10px; font-size: 17px; line-height: 1.4; }
}

/* 2. "Our Services": a normal horizontal H2 at every width, cards in a 4 / 2 / 1 grid below it */
.ybl-services__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.ybl .ybl-vertical { justify-self: start; writing-mode: horizontal-tb; transform: none; white-space: normal; }
.ybl-motion .ybl .ybl-vertical[data-ybl-reveal] { transform: translateY(24px); }
.ybl-motion .ybl .ybl-vertical[data-ybl-reveal].is-visible { transform: none; }
.ybl-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .ybl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .ybl-cols { grid-template-columns: minmax(0, 1fr); } }

/* 4. Typography: one scale; Noto Serif headings, Inter UI text (Outfit / DM Sans / Arial fallbacks removed) */
.ybl-hero h1, .yt-hero h1, .yt-doc-head h1, .yt-404 h1 { font-size: var(--fs-h1); }
.ybl h2, .yt h2, .ybl .ybl-vertical, .yodac-footer-v2 h2 { font-size: var(--fs-h2); line-height: 1.15; }
.ybl h3, .yt h3, .yodac-footer-v2 .yodac-footer-v2__newsletter h3, .ybl-approach__item strong { font-size: var(--fs-h3); line-height: 1.3; }
.ybl .ybl-zig__text h3, .ybl .ybl-contact h3, .ybl .ybl-req h3, .yt .yt-h3-lg { font-size: var(--fs-h3-lg); line-height: 1.25; }
.yt .yt-legal h2 { font-size: var(--fs-h3-lg); }
.ybl-col p, .yt-legal, .yodac-footer-v2__lead, .yodac-footer-v2__newsletter p { font-size: 16px; }
.ybl-statement p, .yt-lead, .yt-head p, .yt-panel h2 + p, .yt-split__text .yt-h3-lg + p { font-size: 17px; }
.yodac-footer-v2__channel-value { font-size: 15px; }
html:not([lang="ar"]) :is(.ybl-hero__tag, .ybl-channel__value) { font-family: var(--ui-sans); }
html:not([lang="ar"]) :is(.ybl-approach__item strong, .yodac-footer-v2 h2, .yodac-footer-v2__newsletter h3) { font-family: var(--ui-serif); letter-spacing: -.01em; }
.yodac-captcha__refresh, .yodac-captcha__answer { font-family: inherit; }

/* 5. Buttons: primary (navy; brand blue on dark panels), whatsapp (green), ghost (outline, dark / hero backgrounds).
   Same 48px height, radius, Inter 600 16px, sentence case; labels never wrap, buttons stack instead. */
.ybl-contact, .yt-panel, .yodac-footer-v2, .ybl-approach { --ui-primary: #2965b4; --ui-primary-hover: #1e4982; }
.ybl a.ybl-btn, .ybl a.ybl-pill, .yt a.yt-btn,
:is(.yt-panel, .yt-form-dark) form .form__button, .yodac-footer-v2__form button[type=submit] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  min-height: 48px;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: 999px !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}
html:not([lang="ar"]) :is(.ybl a.ybl-btn, .ybl a.ybl-pill, .yt a.yt-btn, .yt-panel form .form__button, .yt-form-dark form .form__button, .yodac-footer-v2__form button[type=submit]) { font-family: var(--ui-sans); }
.ybl a.ybl-btn svg, .yt a.yt-btn svg { width: 20px; height: 20px; }
/* primary */
.ybl a.ybl-btn--mail, .ybl a.ybl-btn--mail:visited, .ybl a.ybl-pill, .ybl a.ybl-pill:visited, .yt a.yt-btn, .yt a.yt-btn:visited {
  background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; box-shadow: 0 8px 20px rgba(22, 36, 62, .18);
}
.ybl a.ybl-btn--mail:hover, .ybl a.ybl-pill:hover, .yt a.yt-btn:hover { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: #fff; }
:is(.yt-panel, .yt-form-dark) form .form__button, .yodac-footer-v2__form button[type=submit] {
  background: var(--ui-primary) !important; color: #fff !important; border-color: var(--ui-primary) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
:is(.yt-panel, .yt-form-dark) form .form__button:hover, .yodac-footer-v2__form button[type=submit]:hover { background: var(--ui-primary-hover) !important; border-color: var(--ui-primary-hover) !important; }
.yodac-footer-v2__form button[type=submit] { width: 100%; margin-block-start: 4px; }
/* whatsapp */
.ybl a.ybl-btn--wa, .ybl a.ybl-btn--wa:visited { background: var(--ui-wa); border-color: var(--ui-wa); color: #fff; box-shadow: 0 8px 20px rgba(21, 128, 61, .22); }
.ybl a.ybl-btn--wa:hover { background: var(--ui-wa-hover); border-color: var(--ui-wa-hover); color: #fff; }
/* ghost */
.ybl a.ybl-btn--glass, .ybl a.ybl-btn--glass:visited, .yt a.yt-btn--light, .yt a.yt-btn--light:visited {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .85); color: #fff; box-shadow: none;
}
.ybl a.ybl-btn--glass:hover, .yt a.yt-btn--light:hover { background: rgba(255, 255, 255, .18); border-color: #fff; color: #fff; }
.yt a.yt-btn--ghost, .yt a.yt-btn--ghost:visited { background: transparent; border-color: var(--ui-primary); color: var(--ui-primary); box-shadow: none; }
.yt a.yt-btn--ghost:hover { background: #e3f2fd; color: var(--ui-primary); }
.ybl-actions, .yt-actions { flex-wrap: wrap; }

/* 6. Forms: both forms use the dark theme of their panels, captcha included; every field >= 16px */
:is(.yt-panel, .yt-form-dark) form .input__component { min-height: 48px; font-size: 16px; }
:is(.yt-panel, .yt-form-dark) form textarea.input__component { min-height: 140px; }
.yodac-footer-v2__form .input input, .yodac-footer-v2__form .input__component {
  height: 48px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(194, 215, 237, .35) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-family: inherit !important;
}
.yodac-footer-v2__form .input__component::placeholder { color: rgba(223, 232, 244, .55); }
.yodac-footer-v2__form .input__component:focus { border-color: #8db9f7 !important; background: rgba(255, 255, 255, .1) !important; outline: none; }
:is(.yt-panel, .yt-form-dark, .yodac-footer-v2) .yodac-captcha { background: rgba(255, 255, 255, .05); border: 1px solid rgba(194, 215, 237, .3); border-radius: 12px; color: #dfe8f4; }
:is(.yt-panel, .yt-form-dark, .yodac-footer-v2) .yodac-captcha__label { color: #dfe8f4; }
:is(.yt-panel, .yt-form-dark, .yodac-footer-v2) .yodac-captcha__question { color: #fff; }
:is(.yt-panel, .yt-form-dark, .yodac-footer-v2) .yodac-captcha__refresh { min-height: 44px; padding-inline: 6px; color: #b2cbe7; font-size: 14px; }
:is(.yt-panel, .yt-form-dark, .yodac-footer-v2) .yodac-captcha__refresh:hover { color: #fff; }
:is(.yt-panel, .yt-form-dark, .yodac-footer-v2) .yodac-captcha__answer { height: 48px; border: 1px solid rgba(194, 215, 237, .35); border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 16px; }
:is(.yt-panel, .yt-form-dark, .yodac-footer-v2) .yodac-captcha__answer::placeholder { color: rgba(223, 232, 244, .55); }
:is(.yt-panel, .yt-form-dark, .yodac-footer-v2) .yodac-captcha__status { color: #ffc2c2; font-size: 13px; }
.yodac-footer-v2__form .yodac-captcha { text-align: start; }
form :is(input:not([type=hidden]), textarea, select) { font-size: max(16px, 1em); }

/* 8. Arabic / bidi: phone numbers and e-mail stay one left-to-right run */
.ybl-channel__value, .yodac-footer-v2__channel-value { overflow-wrap: normal; }
a:is([href^="mailto:"], [href^="tel:"], [href*="wa.me"]) :is(.ybl-channel__value, .yodac-footer-v2__channel-value) { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
html[dir="rtl"] a:is([href^="mailto:"], [href^="tel:"], [href*="wa.me"]) .yodac-footer-v2__channel-value { display: inline-block; }
@media (max-width: 680px) { .ybl-channel__value { font-size: 16px; } }

/* 9. Hero contrast: darker only on the text side (left in EN, right in AR; bottom on mobile), image stays bright */
.ybl-hero::before, .yt-hero::before {
  background:
    linear-gradient(180deg, rgba(10, 20, 38, .40) 0%, rgba(10, 20, 38, 0) 24%),
    linear-gradient(90deg, rgba(10, 20, 38, .58) 0%, rgba(10, 20, 38, .50) 38%, rgba(10, 20, 38, .26) 64%, rgba(10, 20, 38, .06) 86%, rgba(10, 20, 38, 0) 100%);
}
html[dir="rtl"] :is(.ybl-hero, .yt-hero)::before {
  background:
    linear-gradient(180deg, rgba(10, 20, 38, .40) 0%, rgba(10, 20, 38, 0) 24%),
    linear-gradient(270deg, rgba(10, 20, 38, .58) 0%, rgba(10, 20, 38, .50) 38%, rgba(10, 20, 38, .26) 64%, rgba(10, 20, 38, .06) 86%, rgba(10, 20, 38, 0) 100%);
}
@media (max-width: 680px) {
  .ybl-hero::before, .yt-hero::before, html[dir="rtl"] :is(.ybl-hero, .yt-hero)::before {
    background:
      linear-gradient(180deg, rgba(10, 20, 38, .40) 0%, rgba(10, 20, 38, 0) 22%),
      linear-gradient(0deg, rgba(10, 20, 38, .66) 0%, rgba(10, 20, 38, .52) 42%, rgba(10, 20, 38, .14) 72%, rgba(10, 20, 38, 0) 88%);
  }
}

/* 12. Footer: page links + address line */
.yodac-footer-v2__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-block-start: 34px; padding-block-start: 18px; border-block-start: 1px solid rgba(210, 230, 250, .15); }
.yodac-footer-v2__links a { display: inline-flex; align-items: center; min-height: 44px; color: #dfe8f4; font-size: 15px; font-weight: 500; }
.yodac-footer-v2__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.yodac-footer-v2__address { margin: 0; color: inherit; font-size: inherit; }
.yodac-footer-v2__links + .yodac-footer-v2__bottom { margin-block-start: 8px; }

/* 11. Terms / privacy pages and 14. the 404 page */
.yt-doc-head { padding-block: 72px 40px; background: #f2f4f7; }
.yt-doc-head h1 { margin-block-start: 16px; }
.yt-doc-head p { margin-block-start: 14px; font-size: 16px; }
.yt-draft { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff4d6; color: #6b4300; font-size: 14px; font-weight: 600; }
.yt-doc { padding-block: 56px 104px; }
.yt .yt-doc .yt-legal { max-width: 860px; margin-inline: auto; }
.yt .yt-doc .yt-legal h2 { margin-block: 40px 12px; text-align: start; }
.yt .yt-doc .yt-legal h2:first-child { margin-block-start: 0; }
.yt .yt-doc .yt-legal ul { padding: 0; padding-inline-start: 22px; }
html[dir="rtl"] .yt .yt-doc .yt-legal, html[dir="rtl"] .yt .yt-doc .yt-legal h2 { text-align: start; }
.yt-404 { padding-block: 112px 120px; text-align: center; }
.yt-404 p { max-width: 560px; margin: 18px auto 0; font-size: 17px; }
.yt-404 .yt-actions { justify-content: center; margin-block-start: 32px; }
.yt-404 [lang="ar"], .yt-404 [lang="ar"] * { font-family: "Noto Sans Arabic", Arial, sans-serif; letter-spacing: 0; }
.yt-404 [lang="ar"] h2 { margin-block-start: 36px; font-size: var(--fs-h3-lg); }
@media (max-width: 680px) {
  .yt-doc-head { padding-block: 48px 32px; }
  .yt-doc { padding-block: 40px 72px; }
  .yt-404 { padding-block: 72px 88px; }
}