/* "Layl" theme: navy + green, Cairo, rounded cards, no decorative shapes.
   Loaded after site.css (Pages/Shared/_Layout.cshtml) and only overrides the look, so removing that one <link> brings the old design back.
   The three main colours still come from Admin > الإعدادات > اللوجو والألوان (ColorPrimary / ColorAccent / ColorDark);
   this theme expects green #22C55E, accent #0E8F5B and navy #0B1D3A there. */

:root {
  --font-head: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --paper: #f4f7fb;
  --surface-2: #f8fafd;
  --line: #dce3ee;
  --soft: #4b5b78;
  --accent-text: #0e8f5b;   /* green text and links */
  --accent-icon: #0e8f5b;   /* green icons */
  --mint: #0e8f5b;
  --navy-2: #13294f;        /* cards on navy */
  --navy-line: #23406f;
  --radius: 16px;
}
html[data-theme="dark"] {
  --accent-text: #4ade80;
  --accent-icon: #4ade80;
  --mint: #4ade80;
}

h1, h2, h3, h4 { font-weight: 700; }

/* ---------- Buttons: rounded, no capitals ---------- */
.btn { border-radius: 12px; }
.btn-primary:hover, .btn-sun:hover { background: #16a34a; color: var(--on-brand); }
.btn-white:hover { background: var(--brand); color: var(--on-brand); }
.btn-dark:hover { background: var(--brand); color: var(--on-brand); }
.text-link { border-bottom-color: var(--brand); }
.text-link:hover { color: var(--accent-text); }

/* ---------- Header ---------- */
.site-header { box-shadow: 0 1px 0 var(--line); }
.main-nav a { font-weight: 600; }
.main-nav a:hover { color: var(--accent-text); }
.main-nav a[aria-current="page"]::before { background: var(--brand); }
.tool-link:hover { color: var(--accent-text); }

/* ---------- No decorative shapes (stripes, dots, lines) ---------- */
.hero-shapes, .feature-dots, .feature-back, .stats-shape,
.cta-band .shape-stripes, .page-head .shape-stripes, .page-head .shape-dots { display: none; }

/* ---------- Slider: solid navy, the picture in a rounded frame ---------- */
.hero { background: var(--dark); }
.hero h1, .hero .h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.3; letter-spacing: 0; max-width: 14em; }
.hero-sub { color: #b7c3d9; }
.hero .eyebrow { color: #4ade80; }
.hero .eyebrow::before { background: var(--brand); }
.hero .btn-white { background: transparent; color: #fff; border: 1px solid #3b4f73; }
.hero .btn-white:hover { border-color: #fff; background: transparent; color: #fff; }
.hero-photo, [dir="rtl"] .hero-photo, .has-hero .hero-photo { margin: 0; align-self: center; min-height: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--navy-2); border: 1px solid var(--navy-line); padding: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.hero-photo img { position: static; width: 100%; height: auto; border-radius: 10px; }
.slider-arrow:hover { background: var(--brand); color: var(--on-brand); }

/* ---------- Section titles ---------- */
.section-head h2 { font-weight: 700; }
.section-head h2::after { width: 48px; background: var(--brand); }
.eyebrow::before { background: var(--brand); }
.eyebrow-accent { color: var(--accent-text); }
.eyebrow-accent::before { background: var(--brand); }

/* ---------- Services: cards with a soft green icon ---------- */
.service-grid { gap: 20px; }
.service { padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.service-icon { width: 52px; height: 52px; border: 0; border-radius: 12px; background: #e7f8ee; color: var(--accent-icon); }
html[data-theme="dark"] .service-icon { background: rgba(74, 222, 128, .12); }
a.service:hover { border-color: var(--brand); }
a.service:hover .service-icon { background: var(--brand); color: var(--on-brand); }

/* ---------- Products on the home page: a navy band, all products at once ---------- */
#products { background: var(--dark); padding-block: 96px; }
#products .section-head h2 { color: #fff; }
#products .section-head p { color: #b7c3d9; }
#products .product-row { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
#products .column-grid.row-track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px; overflow: visible; scroll-snap-type: none; }
#products .row-pager { display: none !important; }
#products .column { padding: 0 0 24px; background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--radius); overflow: hidden; color: #b7c3d9; }
#products .column > :not(.column-img) { margin-inline: 22px; }
#products .column-img { margin-bottom: 20px; }
#products .column h3 { color: #fff; font-size: 21px; }
#products .column p { margin-block: 10px 20px; }
#products .eyebrow-accent { color: #4ade80; margin-bottom: 8px; }
#products .btn-dark { background: var(--brand); color: var(--on-brand); }
#products .btn-dark:hover { background: #fff; color: var(--dark); }
#products .center-link { margin-top: 40px; }
#products .btn-line { border-color: #4ade80; color: #4ade80; }
#products .btn-line:hover { background: #4ade80; color: var(--dark); }

/* ---------- Other cards ---------- */
.product, .post-cover, .work, .gallery a, .video-cover, .feature-visual img, .column-img { border-radius: var(--radius); overflow: hidden; }
.product { border: 1px solid var(--line); }
.form { border-radius: var(--radius); }
.field input, .field textarea, .field select { border-radius: 10px; }
.field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); border-color: var(--brand); }

/* ---------- Pricing ---------- */
.plan { border-radius: 18px; border-top: 1px solid var(--line); }
.plan.is-featured { border-top-color: var(--dark); box-shadow: 0 20px 40px rgba(11, 29, 58, .25); }
.plan-flag { border-radius: 999px; padding: 3px 12px; }
.plan-features .icon { color: var(--accent-text); }

/* ---------- FAQ, contact, tags, numbers: green instead of pink ---------- */
.faq-list summary .icon, .contact-info .icon { border-color: var(--brand); color: var(--accent-icon); }
.faq-list details[open] summary .icon { background: var(--brand); color: var(--on-brand); }
.ring-fill { stroke: var(--brand); }
.quote-stars { color: #f5b301; }
.tags a { border-radius: 999px; }
.tags a::before { color: var(--accent-text); }
.prose ul li::marker { color: var(--brand); }
.prose a { color: var(--accent-text); }
.prose blockquote { border-inline-start-color: var(--brand); }
.not-found b { color: var(--brand); }

/* ---------- Call to action: green band ---------- */
.cta-band { background: var(--accent); color: #d7f5e4; }
.cta-band .btn-primary { background: #fff; color: var(--dark); }
.cta-band .btn-primary:hover { background: var(--dark); color: #fff; }

/* ---------- Inner page titles: solid navy ---------- */
.page-head { background: var(--dark); color: #b7c3d9; }
.crumbs { color: #4ade80; }

/* ---------- Footer ---------- */
.site-footer { color: #b7c3d9; }
.footer-links a::before { background: var(--brand); }
.footer-contact .icon { color: #4ade80; }
.site-footer a:hover { color: #4ade80; }
.social a:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* ---------- Title animation: words rise one after another (wwwroot/js/site.js adds .words-anim and the word spans) ---------- */
.words-anim .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .18em; margin-block: -.18em; }
.words-anim .w > span { display: inline-block; transform: translateY(110%); opacity: 0;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .6s ease-out; transition-delay: calc(var(--i, 0) * 80ms + .1s); }
.words-anim .is-words-in .w > span,
.words-anim .section-head.is-in .w > span { transform: none; opacity: 1; }
/* In the slider, the text under the title, the buttons and the picture follow the title. */
.words-anim .hero .hero-sub, .words-anim .hero .hero-actions, .words-anim .hero .eyebrow, .words-anim .hero .hero-photo {
  opacity: 0; transform: translateY(24px); transition: opacity .8s ease-out, transform .8s cubic-bezier(.2, .7, .2, 1); }
.words-anim .hero .eyebrow { transition-delay: .05s; }
.words-anim .hero .hero-sub { transition-delay: .55s; }
.words-anim .hero .hero-actions { transition-delay: .75s; }
.words-anim .hero .hero-photo { transform: translateY(24px) scale(.97); transition-delay: .45s; }
.words-anim .hero.is-words-in .hero-sub, .words-anim .hero.is-words-in .hero-actions,
.words-anim .hero.is-words-in .eyebrow, .words-anim .hero.is-words-in .hero-photo { opacity: 1; transform: none; }
.words-anim .page-head p { opacity: 0; transition: opacity .8s ease-out .5s; }
.words-anim .page-head.is-words-in p { opacity: 1; }

@media (max-width: 760px) {
  #products { padding-block: 72px; }
  .hero-photo, [dir="rtl"] .hero-photo, .has-hero .hero-photo { margin: 32px 0 0; padding: 8px; border-radius: var(--radius); }
}