/* SAMT custom refinements (approved improvements on top of the Webflow css).
   Loaded after both Webflow stylesheets, so these rules win in either theme. */

/* ---- Navbar on scroll (every page) -------------------------------------
   The exports gave only some pages a scroll interaction tinting the fixed
   navbar (25% white); Arabic pages and a few EN pages had none, so the menu
   sat transparent over content. useWebflowPage toggles .nav-scrolled
   site-wide; the tint matches the export's interaction, plus a backdrop blur
   for the frosted-glass reading. !important beats the IX2 inline writes on
   the pages that still carry the original interaction. */

.navbar-2 {
  transition: background-color 0.45s ease, backdrop-filter 0.45s ease,
    -webkit-backdrop-filter 0.45s ease;
}

.navbar-2.nav-scrolled {
  background-color: rgba(255, 255, 255, 0.25) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* At the very top of a page (before the frosted bar appears) some heroes are
   bright photos and the transparent navbar's links washed out (samtlife's
   chandelier, the detail pages' pale interiors). A soft dark halo keeps them
   readable on light imagery and is invisible on the dark pages. */
.navbar-2 .nav-link-2 {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* ---- Hero title legibility (course + service detail pages) -------------
   The export's .bg-gradient darkened only the bottom edge of these photo
   heroes, so the centered title could land on bright/busy areas (worst case:
   the reference-guide page, where the H1 sat unreadably on the book cover's
   own printed text). Deepen the middle of the scrim and halo the title. */
.section-top-3 .bg-gradient {
  background-image: linear-gradient(
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.62) 55%,
    #000 100%
  );
}

.section-top-3 .heading-project-2 {
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.85);
}

/* On mobile the title spans nearly the full hero, so the photo behind it
   (worst case: the reference-guide book cover's own printed text) needs a
   deeper scrim to keep the H1 unambiguous. */
@media screen and (max-width: 767px) {
  .section-top-3 .bg-gradient {
    background-image: linear-gradient(
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.8) 55%,
      #000 100%
    );
  }
}

/* SamtLife magazine section: on mobile the white overlay title collapses
   onto the bright cover photo — halo it for legibility. */
@media screen and (max-width: 767px) {
  .content-wrapper.hero-v1.life {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
  }
}

/* ---- Services grid (Home + Services, EN + AR) --------------------------
   The exports let every card image keep its natural aspect ratio (or, in the
   old AR stylesheet, a fixed 300px height) inside vertically-centered
   stretched cells, so rows came out ragged and titles floated at different
   heights. Uniform 3:2 images, aligned rows, breathing room, and a calm
   hover consistent with the site's teal accent. The .grid-3-columns block
   exists only in this section (home + services pages, both languages). */

.grid-3-columns {
  grid-row-gap: 60px;
  align-items: start;
}

/* The export ran a scroll parallax that drifted the outer cards up and the
   middle card down (±70px) — with real content it read as misalignment.
   Neutralize it here; the section's entrance fade is unaffected. */
.grid-3-columns > div {
  transform: none !important;
}

.grid-3-columns .text-wrapper {
  height: auto;
  justify-content: flex-start;
}

.grid-3-columns .photo-line-animation {
  height: auto;
  border-radius: 10px;
}

/* One home-page card ships its img outside .photo-line-animation, leaving
   the wrapper empty — collapse it so it doesn't add a phantom flex gap. */
.grid-3-columns .photo-line-animation:not(:has(.photo)) {
  display: none;
}

/* Uniform 3:2 crop on the image itself (works whether or not it sits inside
   the line-animation wrapper; overrides the old stylesheet's fixed 300px). */
.grid-3-columns .photo {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.grid-3-columns .text-wrapper:hover .photo {
  transform: scale(1.04);
}

.grid-3-columns .project-title-flex {
  min-height: 66px;
  align-items: flex-start;
  padding: 0 8px;
}

/* The export's hover effect slid a duplicate title through a fixed 30px
   clip — any title that wraps to a second line got cut off mid-sentence.
   Let titles wrap freely instead; the hover accent is the color change. */
.grid-3-columns .title-flex {
  height: auto;
  overflow: visible;
}

.grid-3-columns .title-flex .project-title {
  transform: none !important;
}

.grid-3-columns .title-flex .project-title:nth-child(n + 2) {
  display: none;
}

.grid-3-columns .project-title {
  font-size: 1.2rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-align: center;
  transition: color 0.3s ease;
}

/* Arabic titles (Swissra) render wider than Bodoni — step down slightly so
   long titles stay on one line inside the hover-slide clip. */
.grid-3-columns .project-title.arsub {
  font-size: 1.05rem;
  letter-spacing: 0;
}

.grid-3-columns .text-wrapper:hover .project-title {
  color: var(--light);
}

@media screen and (max-width: 767px) {
  .grid-3-columns {
    grid-row-gap: 40px;
  }
  .grid-3-columns .project-title-flex {
    min-height: 0;
  }
}

/* ---- Arabic course pages ------------------------------------------------
   Generated from the English course markup (no Arabic course pages exist in
   the exports), so the export's Latin type classes yield to the Arabic face
   and list geometry follows the RTL direction here. */
body[data-samt-page="ar:courses"] :is(h1, h2, h3, h4, h5, h6, p, li, a, span, strong, b, em, div, input, textarea, button),
body[data-samt-page^="ar:course:"] :is(h1, h2, h3, h4, h5, h6, p, li, a, span, strong, b, em, div, input, textarea, button) {
  font-family: Swissra, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body[data-samt-page="ar:courses"] :is(ul, ol),
body[data-samt-page^="ar:course:"] :is(ul, ol) {
  padding-left: 0;
  padding-right: 1.4em;
}