/*
 * Faris Group design layer, every page. Restyles the theme's shared
 * components (header, page header, type, buttons, galleries, cards, forms,
 * the optimizer's FAQ and link blocks) over the migrated markup, so page
 * bodies stay byte-for-byte (scripts/audit-content-parity.mjs). Loaded after
 * the theme's stylesheets by scripts/optimize-site.mjs; bump SITE_CSS_VERSION
 * there on change. The homepage adds assets/css/faris-home.css on top.
 */

:root {
  --fgh-ink: #0b131d;
  --fgh-navy: #0f1c2c;
  --fgh-navy-2: #16273d;
  --fgh-text: #1d2836;
  --fgh-muted: #5a6677;
  --fgh-line: #e2e8ef;
  --fgh-surface: #f4f7fa;
  /* 4.8:1 behind white button text (the old #0aa6e0 was 2.8:1). */
  --fgh-accent: #0a7aa9;
  --fgh-accent-text: #0a9fd6;
  --fgh-accent-bright: #4ee9fe;
  /* The four colours of the Faris Group mark. */
  --fgh-orange: #f5a01a;
  --fgh-blue: #1db4e8;
  --fgh-red: #e8362d;
  --fgh-green: #5cb947;
  --fgh-brand-bar: linear-gradient(90deg, var(--fgh-orange) 0 25%, var(--fgh-blue) 25% 50%, var(--fgh-red) 50% 75%, var(--fgh-green) 75%);
  --fgh-radius: 22px;
  --fgh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fgh-display: "Jost", "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fgh-body: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[dir="rtl"] {
  --fgh-display: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Header bar ────────────────────────────────────────────────────────── */
/* Sticky: a navy glass bar instead of the theme's flat grey. */
#Top_bar.is-sticky {
  background: rgba(11, 19, 29, 0.88) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.7);
}
@media (max-width: 767px) {
  #Top_bar,
  #Top_bar.is-sticky {
    background: rgba(11, 19, 29, 0.88) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
  }
}
/* Below 1240px the theme swaps the menu for this icon. It is navy, invisible
   on the navy page headers, so on every page and width it is white. */
#Top_bar a.responsive-menu-toggle,
#Top_bar a.responsive-menu-toggle i {
  color: #fff !important;
}
#Top_bar .menu > li > a > span:not(.description) {
  position: relative;
}
@media (min-width: 1240px) {
  #Top_bar #menu > ul > li > a > span:not(.description)::after {
    content: "";
    position: absolute;
    inset-inline: 20px;
    bottom: calc(50% - 16px);
    height: 2px;
    border-radius: 2px;
    background: var(--fgh-accent-bright);
    transform: scaleX(0);
    transition: transform 0.3s var(--fgh-ease);
  }
  #Top_bar #menu > ul > li:hover > a > span:not(.description)::after,
  #Top_bar #menu > ul > li.current-menu-item > a > span:not(.description)::after {
    transform: scaleX(1);
  }
}
/* "Our store": the accent pill of the homepage buttons. */
#Top_bar a.action_button {
  border-radius: 999px !important;
  background: var(--fgh-accent) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 12px 26px -14px rgba(10, 166, 224, 0.9);
  transition: background-color 0.3s var(--fgh-ease), transform 0.3s var(--fgh-ease);
}
#Side_slide a.action_button {
  border-radius: 999px !important;
  background: var(--fgh-accent) !important;
  color: #fff !important;
  font-weight: 700;
}
#Top_bar a.action_button:hover {
  background: #086a93 !important;
  transform: translateY(-1px);
}
#Top_bar .menu li ul {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 50px -24px rgba(11, 19, 29, 0.55);
}

/* ── Page header ───────────────────────────────────────────────────────── */
#Subheader {
  position: relative;
  padding: 200px 0 96px !important;
  background-position: center !important;
  background-size: cover !important;
  isolation: isolate;
}
#Subheader::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(8, 14, 22, 0.75) 0%, rgba(8, 14, 22, 0.1) 60%),
    linear-gradient(90deg, rgba(8, 14, 22, 0.78) 0%, rgba(8, 14, 22, 0.4) 55%, rgba(8, 14, 22, 0.15) 100%);
}
html[dir="rtl"] #Subheader::before {
  background:
    linear-gradient(to top, rgba(8, 14, 22, 0.75) 0%, rgba(8, 14, 22, 0.1) 60%),
    linear-gradient(270deg, rgba(8, 14, 22, 0.78) 0%, rgba(8, 14, 22, 0.4) 55%, rgba(8, 14, 22, 0.15) 100%);
}
#Subheader .container {
  position: relative;
  max-width: 1240px;
}
#Subheader .column.one {
  text-align: start !important;
}
#Subheader .column.one::before {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-bottom: 24px;
  border-radius: 4px;
  background: var(--fgh-brand-bar);
}
#Subheader .title,
#Subheader .one h1 {
  max-width: 900px;
  margin: 0 0 18px !important;
  font-family: var(--fgh-display) !important;
  font-size: clamp(36px, 5vw, 64px) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
  text-align: start !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35) !important;
  -webkit-animation: none !important;
  animation: none !important;
}
html[dir="rtl"] #Subheader .title,
html[dir="rtl"] #Subheader .one h1 {
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}
#Subheader ul.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  text-align: start;
}
#Subheader ul.breadcrumbs li,
#Subheader ul.breadcrumbs li a {
  text-align: start;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72) !important;
}
#Subheader ul.breadcrumbs li a:hover {
  color: #fff !important;
}
#Subheader ul.breadcrumbs li:last-child {
  color: #fff !important;
}
#Subheader ul.breadcrumbs span {
  opacity: 0.6;
}
@media (max-width: 767px) {
  #Subheader {
    padding: 150px 0 56px !important;
  }
}

/* ── Type ──────────────────────────────────────────────────────────────── */
#Content h1,
#Content h2,
#Content h3,
#Content h4 {
  font-family: var(--fgh-display);
  letter-spacing: -0.01em;
}
html[dir="rtl"] #Content h1,
html[dir="rtl"] #Content h2,
html[dir="rtl"] #Content h3,
html[dir="rtl"] #Content h4 {
  letter-spacing: 0;
}
/* The theme set every h2 at 70px and every h4 at 35px, section titles and
   card titles alike. A scale instead. */
#Content .section h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.15;
  font-weight: 600;
}
#Content .section h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  font-weight: 600;
}
#Content .section h4 {
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.3;
  font-weight: 600;
}
html[dir="rtl"] #Content .section :is(h2, h3, h4) {
  font-weight: 700;
  line-height: 1.45;
}
#Content .column_attr p,
#Content .the_content_wrapper p {
  font-size: 17px;
  line-height: 1.8;
}
html[dir="rtl"] #Content .column_attr p,
html[dir="rtl"] #Content .the_content_wrapper p {
  font-size: 18px;
}
/* Centred blocks keep their centre but read at a comfortable width. */
#Content .column.one .column_attr.align_center > p,
#Content .column.one .column_attr[style*="center"] > p {
  max-width: 760px;
  margin-inline: auto;
}
/* Text that sits beside a photo reads from the start edge, not centred. */
#Content .one-second .column_attr > p,
#Content .one-second .column_attr > h2,
#Content .one-second .column_attr > h3,
#Content .one-second .column_attr > h4 {
  text-align: start !important;
}
/* A section heading gets the brand bar above it. */
#Content .section .column.one > .mcb-column-inner > .title,
#Content .section .one .column_attr > h2:only-child {
  position: relative;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
#Content a.button,
#Content .button,
#Content input[type="submit"],
.fg-faq ~ * a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px !important;
  background-color: var(--fgh-ink);
  font-family: var(--fgh-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  box-shadow: none;
  transition: background-color 0.3s var(--fgh-ease), transform 0.3s var(--fgh-ease), box-shadow 0.3s var(--fgh-ease);
}
#Content a.button .button_label {
  padding: 0 !important;
  color: inherit;
}
#Content a.button .button_icon {
  display: inline-flex;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
#Content a.button .button_icon i {
  color: inherit;
}
#Content a.button.button_theme,
#Content input[type="submit"] {
  background-color: var(--fgh-accent);
  box-shadow: 0 14px 30px -14px rgba(10, 166, 224, 0.75);
}
#Content a.button:hover,
#Content input[type="submit"]:hover {
  background-color: var(--fgh-accent);
  color: #fff;
  transform: translateY(-2px);
}
/* A few buttons carry an inline white background (about-us "Company profile");
   their label must not be white as well. */
#Content a.button[style*="#ffffff"],
#Content a.button[style*="#fff;"],
#Content a.button[style*="#fff!"] {
  color: var(--fgh-ink) !important;
  box-shadow: inset 0 0 0 1px var(--fgh-line);
}
#Content a.button[style*="#ffffff"]:hover {
  color: var(--fgh-ink) !important;
}
#Content a.button.button_theme:hover {
  background-color: #086a93;
}

/* ── Photos and galleries ──────────────────────────────────────────────── */
/* The theme tilted every gallery photo ±2°. Straight, rounded, with a zoom. */
#Content .gallery .gallery-item {
  transform: none !important;
  margin: 0 !important;
  padding: 10px !important;
}
#Content .gallery .gallery-icon .image_frame {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 20px 40px -30px rgba(11, 19, 29, 0.55);
}
#Content .gallery .gallery-icon img {
  display: block;
  width: 100%;
  height: auto;
  border: 0 !important;
  transition: transform 0.7s var(--fgh-ease);
}
#Content .gallery .gallery-icon:hover img {
  transform: scale(1.04);
}
#Content .image_frame,
#Content .image_frame .image_wrapper {
  border-radius: 18px;
  overflow: hidden;
}

/* ── Cards on the dark bands (service pages) ───────────────────────────── */
#Content .mcb-wrap-inner[style*="border-radius"],
#Content .wrap .mcb-wrap-inner {
  transition: transform 0.4s var(--fgh-ease), box-shadow 0.4s var(--fgh-ease);
}
#Content .wrap.one-third .mcb-wrap-inner:hover,
#Content .wrap.one-fourth .mcb-wrap-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.6);
}

/* ── Project listings ──────────────────────────────────────────────────── */
#Filters .filters_wrapper ul li a,
.portfolio_filters ul li a {
  padding: 10px 18px;
  border-radius: 999px !important;
  transition: background-color 0.3s var(--fgh-ease), color 0.3s var(--fgh-ease);
}
#Filters .filters_wrapper ul li a::after,
.portfolio_filters ul li a::after,
ul li.current-cat > a::after {
  display: none !important;
}
#Filters .filters_wrapper ul li.current-cat a,
#Filters .filters_wrapper ul li a:hover,
ul li.current-cat > a[aria-current="page"] {
  background: var(--fgh-ink) !important;
  color: #fff !important;
}
.portfolio_group .portfolio-item .portfolio-item-fw-bg,
.portfolio_group .portfolio-item .image_frame {
  overflow: hidden;
  border-radius: var(--fgh-radius);
}
.portfolio_group .portfolio-item .image_frame img {
  transition: transform 0.8s var(--fgh-ease);
}
.portfolio_group .portfolio-item:hover .image_frame img {
  transform: scale(1.05);
}
.portfolio_group .portfolio-item .entry-title a {
  font-family: var(--fgh-display);
  font-weight: 600;
  color: var(--fgh-ink);
}

/* ── Blog listings and articles ────────────────────────────────────────── */
.posts_group .post-item .image_frame,
.post-related .image_frame {
  border-radius: var(--fgh-radius);
  overflow: hidden;
}
/* Card titles, not section titles: the section scale made them 46px. */
#Content .posts_group .post-item .post-title h2,
#Content .post-related .desc h4,
#Content .portfolio_group .portfolio-item .entry-title {
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.posts_group .post-item .post-title h2 a,
.post-related .desc h4 a {
  font-family: var(--fgh-display);
  color: var(--fgh-ink);
}
.posts_group .post-item .date_label {
  border-radius: 999px;
  background: var(--fgh-ink);
  color: #fff;
}
.posts_group .post-item .date_label::after {
  display: none;
}
.single-post #Content .the_content_wrapper {
  max-width: 780px;
  margin-inline: auto;
}
.single-post #Content .the_content_wrapper :is(h2, h3, h4) {
  margin-top: 1.6em;
  color: var(--fgh-ink);
}
.single-post #Content .the_content_wrapper img {
  border-radius: 18px;
}
.single-post #Content .section-post-header .image_frame {
  border-radius: var(--fgh-radius);
}

/* ── Previous / next project tabs on the screen edges ──────────────────── */
.fixed-nav .arrow {
  background: var(--fgh-navy) !important;
  color: #fff !important;
}
.fixed-nav .photo {
  border-radius: 0;
}

/* ── Forms (Contact Form 7, outside the homepage) ──────────────────────── */
#Content .wpcf7-form input[type="text"],
#Content .wpcf7-form input[type="email"],
#Content .wpcf7-form input[type="tel"],
#Content .wpcf7-form textarea {
  padding: 15px 18px;
  border: 1px solid var(--fgh-line) !important;
  border-radius: 14px !important;
  background: var(--fgh-surface) !important;
  font-family: var(--fgh-body);
  font-size: 16px;
  color: var(--fgh-text);
  box-shadow: none;
  transition: border-color 0.25s var(--fgh-ease), background-color 0.25s var(--fgh-ease), box-shadow 0.25s var(--fgh-ease);
}
#Content .wpcf7-form input:focus,
#Content .wpcf7-form textarea:focus {
  border-color: var(--fgh-accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(10, 166, 224, 0.14);
  outline: none;
}

/* ── The optimizer's FAQ and link blocks ───────────────────────────────── */
.fg-faq {
  padding-block: clamp(56px, 7vw, 96px);
  background: var(--fgh-surface);
}
.fg-faq .fg-faq-inner > h2,
.fg-reading .fg-reading-inner > h2,
.fg-services .fg-services-inner > h2 {
  position: relative;
  padding-top: 22px;
  font-family: var(--fgh-display);
  font-weight: 600;
  color: var(--fgh-ink);
}
.fg-faq .fg-faq-inner > h2::before,
.fg-reading .fg-reading-inner > h2::before,
.fg-services .fg-services-inner > h2::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 48px;
  height: 4px;
  border-radius: 4px;
  background: var(--fgh-brand-bar);
}
.fg-faq .fg-faq-item {
  margin-bottom: 14px;
  padding: 22px 26px;
  border: 1px solid var(--fgh-line);
  border-radius: 18px;
  background: #fff;
}
.fg-faq .fg-faq-item h3 {
  margin: 0 0 8px;
  font-family: var(--fgh-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fgh-ink);
}
html[dir="rtl"] .fg-faq .fg-faq-item h3 {
  font-weight: 700;
}
.fg-faq .fg-faq-item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--fgh-muted);
}
.fg-reading ul li a {
  border-radius: 999px;
}

/* ── WhatsApp tab ──────────────────────────────────────────────────────── */
/* The tab parks off the right edge showing only its icon. In a right-to-left
   page the row reversed, leaving the label ("Whats…") where the icon belongs. */
.whatsapp-container,
.whatsapp-container > a {
  direction: ltr;
}

/* ── Phones: one page margin, not six ─────────────────────────────────── */
/* The theme nests section margin, section padding, wrap padding, wrap margin,
   column padding and text padding; on /products/ that left 166px of text on
   a 390px screen. On phones the page keeps one 20px margin, like the home. */
@media (max-width: 767px) {
  #Content .section.mcb-section {
    margin-inline: 0 !important;
  }
  #Content .mcb-section .section_wrapper {
    padding-inline: 20px !important;
  }
  #Content .wrap.mcb-wrap {
    padding-inline: 16px !important;
  }
  #Content .mcb-wrap-inner {
    margin-inline: 0 !important;
  }
  /* /services/: a decorative court-and-palms band drawn for the desktop
     layout. On a phone the stacked service text lands on the photo (grey on
     blue) and the palms cover the intro, so phones get a plain surface. */
  #Content .mcb-section-82f320a2e,
  #Content .mcb-section-3331ddee0 {
    background-image: none !important;
    background-color: var(--fgh-surface) !important;
  }
  #Content .mcb-column-inner[style*="background"],
  #Content .mcb-wrap-inner[style*="background"] {
    padding-inline: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #Content .gallery .gallery-icon img,
  .portfolio_group .portfolio-item .image_frame img,
  #Content a.button {
    transition: none !important;
  }
}