/* Amsiyah commercial experience layer
   Keeps the approved visual identity while strengthening clarity and conversion. */
:root {
  --ams-ink: #05322b;
  --ams-ink-soft: #11564e;
  --ams-accent: #25897a;
  --ams-mint: #b3cdcf;
  --ams-paper: #ffffff;
  --ams-warm: #f6f2f1;
  --ams-mist: #f4f7f5;
  --ams-line: rgba(5, 50, 43, .105);
  --ams-shadow-sm: 0 12px 34px rgba(5, 50, 43, .055);
  --ams-shadow-md: 0 22px 62px rgba(5, 50, 43, .075);
  --ams-ease: cubic-bezier(.22, .61, .36, 1);
}

html {
  background: var(--ams-paper);
  scroll-padding-top: 96px;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

[data-mob-root] {
  z-index: 2147482000 !important;
}

[data-mob-panel] {
  box-sizing: border-box;
  padding-block-start: env(safe-area-inset-top, 0px);
  padding-block-end: env(safe-area-inset-bottom, 0px);
}

html body [data-navwrap] {
  padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
}

html body[data-page="home"] [data-navwrap][data-over-hero="1"] {
  padding-top: calc(26px + env(safe-area-inset-top, 0px)) !important;
}

html body [data-navwrap][data-over-hero="0"] {
  padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
}

@media (max-width: 900px) {
  html body[data-page="home"] [data-navwrap][data-over-hero="1"] {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
  }
}

button[data-mob-only],
[data-mob-panel] button[aria-label="إغلاق القائمة"] {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

html.ams-menu-open .ams-cb-launch,
html.ams-menu-open .ams-cb-panel,
html.ams-menu-open .ams-mobile-conversion {
  visibility: hidden !important;
  pointer-events: none !important;
}

.ams-skip-link {
  position: fixed;
  z-index: 2147482999;
  top: 8px;
  inset-inline-start: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ams-ink);
  color: #fff;
  font-weight: 700;
  transform: translateY(-140%);
  transition: transform .2s ease;
}

.ams-skip-link:focus {
  color: #fff;
  transform: translateY(0);
}

body,
body * {
  font-family: var(--ams-font-ui) !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .ams-footer-word,
body .ams-opening__title {
  font-family: var(--ams-font-display) !important;
}

body p,
body blockquote,
body figcaption,
body .ams-opening__caption {
  font-family: var(--ams-font-text) !important;
}

/* #25897A remains the decorative accent; small white commercial labels use
   the darker brand tone to meet normal-text contrast requirements. */
body [style*="color: #FFFFFF"][style*="background: #25897A"],
body [style*="background: #25897A"][style*="color: #FFFFFF"] {
  background: #1d7468 !important;
}

/* Navigation: stable, legible and unmistakably commercial. */
body nav[data-navpill] {
  border-color: rgba(5, 50, 43, .09) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 10px 34px rgba(5, 50, 43, .07) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}

body nav[data-navpill] a[aria-current="page"] {
  color: var(--ams-ink) !important;
  background: rgba(37, 137, 122, .09) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 137, 122, .11);
}

body nav[data-navpill] a[href="contact.html"],
body nav[data-navpill] a[href$="contact.html"] {
  min-height: 40px;
}

/* Desktop header polish — intentionally isolated from the approved mobile UI. */
@media (min-width: 1025px) {
  html body nav[data-navpill] > div:nth-child(2)[data-desk-only] {
    align-items: center;
  }

  html body nav[data-navpill] > div:nth-child(2)[data-desk-only] > a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    margin: 0;
    line-height: 1.4;
  }

  html body nav[data-navpill] > div:first-child > a {
    padding: 0;
    background: transparent !important;
    box-shadow: none;
  }

  html body nav[data-navpill] > div:last-child > [data-desk-only] {
    align-items: center;
  }

  html body nav[data-navpill] > div:last-child > [data-desk-only] > a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    min-height: 42px;
    line-height: 1.4;
  }

  html body[data-page="home"] [data-navwrap][data-over-hero="1"] [data-navpill] {
    height: 64px !important;
  }

  html body[data-page="home"] [data-navwrap][data-over-hero="1"] [data-navpill] > div:nth-child(2)[data-desk-only] {
    box-sizing: border-box;
    width: clamp(440px, 36vw, 520px);
    height: 64px;
    padding: 0 14px;
    justify-content: center;
    border-radius: 22px;
  }

  html body[data-page="home"] [data-navwrap][data-over-hero="1"] [data-navpill] > div:nth-child(2)[data-desk-only] > a {
    height: 44px;
    min-height: 44px;
  }
}

body a[href*="contact.html"][style*="background: #05322B"],
body button[style*="background: #05322B"] {
  box-shadow: 0 12px 28px rgba(5, 50, 43, .14);
}

body a[href*="contact.html"][style*="background: #05322B"]:hover,
body button[style*="background: #05322B"]:hover {
  box-shadow: 0 16px 36px rgba(5, 50, 43, .2);
}

/* Compact reassurance strip: each page makes its commercial purpose explicit. */
.ams-proof-strip {
  position: relative;
  z-index: 8;
  width: min(1120px, calc(100% - 32px));
  margin: -28px auto 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ams-line);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--ams-shadow-md);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ams-proof-item {
  min-height: 88px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.ams-proof-item + .ams-proof-item {
  border-inline-start: 1px solid var(--ams-line);
}

.ams-proof-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(37, 137, 122, .09);
  color: var(--ams-accent);
  font-size: 13px;
  font-weight: 800;
}

.ams-proof-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ams-proof-copy strong {
  color: var(--ams-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

.ams-proof-copy span {
  color: rgba(5, 50, 43, .68);
  font-size: 12.5px;
  line-height: 1.65;
}

/* Keep the original social icons while making their touch area comfortable. */
a[aria-label*="@AmsiyahSA"] {
  box-sizing: border-box;
  min-width: 44px !important;
  min-height: 44px !important;
}

footer [style*="color: rgba(179,205,207,.55)"] {
  color: rgba(179, 205, 207, .76) !important;
}

/* Light commercial surface system for internal pages. */
body[data-ams-inner] section[data-screen-label] {
  border-color: rgba(5, 50, 43, .075) !important;
}

body[data-ams-inner] section[data-screen-label] h1 {
  max-width: 18ch;
}

body[data-ams-inner] section[data-screen-label] h2 {
  text-wrap: balance;
}

body[data-ams-inner] section[data-screen-label] p {
  text-wrap: pretty;
}

body[data-ams-inner] section[data-screen-label] [style*="border-radius: 22px"],
body[data-ams-inner] section[data-screen-label] [style*="border-radius: 24px"],
body[data-ams-inner] section[data-screen-label] [style*="border-radius: 26px"] {
  box-shadow: var(--ams-shadow-sm);
}

body[data-ams-inner] section[data-screen-label="مقارنة الباقات"] table {
  min-width: 760px;
}

body[data-ams-inner] section[data-screen-label="مقارنة الباقات"] thead {
  position: sticky;
  top: 82px;
  z-index: 4;
}

body[data-ams-inner] section[data-screen-label="قنوات التواصل والنموذج"] form {
  box-shadow: var(--ams-shadow-md) !important;
}

body[data-ams-inner] section[data-screen-label="قنوات التواصل والنموذج"] form::before {
  content: 'نستخدم بياناتك للتواصل بخصوص طلبك فقط';
  display: block;
  margin: -2px 0 2px;
  padding: 10px 13px;
  border-radius: 10px;
  background: rgba(37, 137, 122, .075);
  color: var(--ams-ink-soft);
  font-size: 12px;
  line-height: 1.7;
}

/* Blog: practical expertise, not an ornamental placeholder. */
.ams-blog-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(68px, 9vw, 118px) 0 clamp(48px, 6vw, 76px) !important;
  background: linear-gradient(145deg, #f5f8f6 0%, #fff 58%, #f8f2ef 100%);
}

.ams-blog-hero__inner {
  position: relative;
  z-index: 1;
  width: min(860px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.ams-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(37, 137, 122, .09);
  color: var(--ams-ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.ams-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ams-accent);
  transform: rotate(45deg);
}

.ams-blog-hero h1 {
  margin: 0;
  color: var(--ams-ink);
  font-size: clamp(42px, 6.6vw, 76px);
  font-weight: 800;
  line-height: 1.12;
}

.ams-blog-hero p {
  max-width: 650px;
  margin: 0;
  color: rgba(5, 50, 43, .62);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.95;
}

.ams-guides {
  padding: clamp(52px, 7vw, 92px) 0 clamp(70px, 9vw, 116px);
  background: #fff;
}

.ams-guides__inner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

.ams-guides__head {
  max-width: 660px;
  margin-bottom: 34px;
}

.ams-guides__head h2 {
  margin: 10px 0 0;
  color: var(--ams-ink);
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.2;
}

.ams-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ams-guide-card {
  min-height: 320px;
  padding: clamp(24px, 2.8vw, 32px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ams-line);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #f7faf8);
  box-shadow: var(--ams-shadow-sm);
  transition: transform .35s var(--ams-ease), border-color .35s ease, box-shadow .35s ease;
}

.ams-guide-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 137, 122, .24);
  box-shadow: var(--ams-shadow-md);
}

.ams-guide-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ams-accent);
  font-size: 12px;
  font-weight: 700;
}

.ams-guide-card h3 {
  margin: 22px 0 12px;
  color: var(--ams-ink);
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.35;
}

.ams-guide-card p {
  margin: 0;
  color: rgba(5, 50, 43, .64);
  font-size: 14px;
  line-height: 1.9;
}

.ams-guide-card ul {
  margin: 18px 0 24px;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}

.ams-guide-card li {
  position: relative;
  padding-inline-start: 19px;
  color: rgba(5, 50, 43, .74);
  font-size: 13px;
  line-height: 1.7;
}

.ams-guide-card li::before {
  content: '';
  position: absolute;
  top: .7em;
  inset-inline-start: 2px;
  width: 6px;
  height: 6px;
  background: var(--ams-accent);
  transform: rotate(45deg);
}

.ams-guide-card a {
  margin-top: auto;
  align-self: flex-start;
  color: var(--ams-ink);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.ams-blog-cta {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto clamp(24px, 3vw, 40px);
  padding: clamp(30px, 4vw, 46px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  border: 1px solid var(--ams-line);
  border-radius: 26px;
  background: linear-gradient(135deg, #f2f7f4, #fff 54%, #f6efeb);
  box-shadow: var(--ams-shadow-sm);
}

.ams-blog-cta h2 {
  margin: 0;
  color: var(--ams-ink);
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.2;
}

.ams-blog-cta p {
  max-width: 650px;
  margin: 9px 0 0;
  color: rgba(5, 50, 43, .62);
  line-height: 1.85;
}

.ams-blog-cta a {
  min-height: 48px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ams-ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(5, 50, 43, .15);
}

/* Mobile conversion control: visible, compact, and never blocks page controls. */
.ams-mobile-conversion {
  display: none;
}

@media (max-width: 1000px) {
  .ams-guide-grid {
    grid-template-columns: 1fr;
  }

  .ams-guide-card {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  body:not([data-page="home"]) {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }

  #request-form input,
  #request-form select,
  #request-form textarea {
    font-size: 16px !important;
  }

  .ams-proof-strip,
  body[data-page="home"] .ams-proof-strip {
    width: calc(100% - 24px);
    margin: 12px auto 24px;
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .ams-proof-item {
    min-height: 0;
    padding: 14px 16px;
  }

  .ams-proof-item + .ams-proof-item {
    border-inline-start: 0;
    border-top: 1px solid var(--ams-line);
  }

  .ams-blog-hero__inner,
  .ams-guides__inner,
  .ams-blog-cta {
    width: calc(100% - 32px);
  }

  .ams-blog-cta {
    grid-template-columns: 1fr;
  }

  .ams-blog-cta a {
    width: 100%;
    box-sizing: border-box;
  }

  .ams-mobile-conversion {
    position: fixed;
    z-index: 99970;
    right: 10px;
    bottom: calc(9px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    min-height: 56px;
    padding: 6px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
    border: 1px solid rgba(5, 50, 43, .11);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 42px rgba(5, 50, 43, .17);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .ams-mobile-conversion a {
    min-height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--ams-ink);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
  }

  .ams-mobile-conversion a:first-child {
    background: var(--ams-ink);
    color: #fff;
  }

  .ams-mobile-conversion a:last-child {
    border: 1px solid rgba(37, 137, 122, .25);
    background: rgba(37, 137, 122, .07);
  }

  .ams-cb-launch {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ams-guide-card,
  .ams-mobile-conversion,
  .ams-proof-strip {
    transition: none !important;
  }

  .ams-guide-card:hover {
    transform: none;
  }
}