/**
 * PACC Style, Mobile & Responsive Fixes
 * Version: 2026-04-20
 *
 * PURPOSE: Supplements the original Webflow CSS with:
 *   1. Background-size/position overrides (admin editor bakes in wrong values)
 *   2. Image max-height overrides where needed
 *   3. Sticky header on mobile
 *   4. Mobile navigation drawer styles
 *   5. WhatsApp floating button
 *   6. Minor RTL/Arabic layout fixes
 *   7. Safe-area (iPhone notch) support
 */

/* ===================================================
   BASE BOX-SIZING SAFETY NET
=================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ===================================================
   BACKGROUND-SIZE / POSITION OVERRIDES
   ─────────────────────────────────────────────────
   The admin live-editor bakes inline styles like:
     background-size:cover; background-position:center;
   onto elements that should keep the original CSS values.
   These !important rules restore the correct appearance.
=================================================== */

/*
 * SERVICE HERO TAG BLOCK
 * Uses white-20big-20line-20icons.svg as a small decorative
 * icon on the left side. Should be auto (natural SVG size).
 * Wrong inline value makes entire block solid white → white
 * text becomes invisible.
 */
.service-two-tag-block {
  background-size: auto !important;
  background-position: 0% !important;
}

/*
 * SERVICE ONE TAG BLOCK
 * Uses home-20four-20line.svg — same pattern.
 */
.service-one-tag-block {
  background-size: auto !important;
  background-position: 0% !important;
}

/*
 * SERVICE ONE PROJECT MANAGEMENT TAG
 * Uses medium-20line-20black.svg — same pattern.
 */
.service-one-project-management-tag {
  background-size: auto !important;
  background-position: 0% !important;
}

/*
 * BLOG / CONTENT TAG BLOCK (used on sub-service pages)
 * Uses medium-20line-20black.svg as a thin decorative line
 * on the left. Wrong value stretches it to fill the whole
 * block → solid black bar, text buried underneath.
 */
.blog-two-tag-block {
  background-size: auto !important;
  background-position: 0% !important;
}

/*
 * SERVICE GRID SECTION BACKGROUND
 * Uses services.svg as a subtle decorative background at
 * the bottom of the section (position 50% 96.6%, auto size).
 * Wrong value fills entire section with the SVG.
 */
.service-two-grid-section {
  background-size: auto !important;
  background-position: 50% 96.6% !important;
}

/*
 * HOME ABOUT CONTENT BLOCK
 * Uses home-20three-20logo-20fav.svg as a faint logo
 * watermark on the right side (position 100%, auto size).
 */
.home-three-about-content {
  background-size: auto !important;
  background-position: 100% !important;
}

/*
 * HOME "CHOOSE US" SECTION
 * Large background photo at 1920px wide, centered.
 */
.home-two-choose-section {
  background-size: 1920px !important;
  background-position: 50% !important;
}

/*
 * HOME NAVIGATING SECTION
 * Fixed-size background image (1348×636px), left-aligned.
 * On mobile (≤767px) we switch to cover/center below.
 */
.home-one-navigating-main {
  background-size: 1348px 636px !important;
  background-position: 0% !important;
}

/* On small screens the fixed-size bg becomes too small — use cover */
@media screen and (max-width: 767px) {
  .home-one-navigating-main {
    background-size: cover !important;
    background-position: center !important;
  }
}

/*
 * WHY CHOOSE US SECTIONS
 * Both use contain sizing so the image fills without cropping.
 */
.why-choose-us-construction-content {
  background-size: contain !important;
  background-position: 50% !important;
}

.why-choose-us-section {
  background-size: contain !important;
  background-position: 50% 0 !important;
}

/*
 * SERVICE ONE HERO SECTION
 * Textured background, auto size, centered.
 */
.service-one-hero-section {
  background-size: auto !important;
  background-position: 50% !important;
}

/* ===================================================
   IMAGE INLINE-STYLE OVERRIDES
   ─────────────────────────────────────────────────
   The PHP templates add:
     style="max-height:520px; object-fit:cover; object-position:center;"
   to many <img> elements. The hero banner image (529px tall) is
   fine at 520px, but service-two-card images (489px) and the
   feature tab images (413px) should render at their natural
   height determined by the container — not be arbitrarily capped.
=================================================== */

/*
 * SERVICE GRID CARD IMAGE BLOCKS — enforce uniform height, stretch to fill.
 * object-fit:fill stretches the image to exactly match the card dimensions —
 * no letterbox background, no cropping, all cards equal height.
 */
.service-two-card-image-block {
  height: 300px !important;
  overflow: hidden !important;
}
.service-two-card-image-block img.cover-image {
  max-height: none !important;
  object-fit: fill !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/*
 * WHY PACC? FEATURE TAB IMAGES (Design / Performance / Quality panels)
 * The inline style bakes max-height:520px; object-fit:cover which crops
 * portrait images. Override to show the full image at natural aspect ratio.
 */
.service-two-features-image-block img.cover-image,
.service-two-features-image-block .creative-image-block img.cover-image {
  max-height: none !important;
  height: auto !important;
  width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

/*
 * CREATIVE IMAGE BLOCKS — Security/CCTV and other feature images that use
 * creative-image-block layout. Inline style bakes object-fit:cover which
 * crops tall images. Remove max-height constraint and show full image.
 */
.creative-image-block img.cover-image {
  max-height: none !important;
  height: auto !important;
  width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/*
 * WHY PACC? TAB LABELS — gold colour matching the hero slider "Shade Systems" label.
 * Applies to Design / Performance / Quality tab titles on shades.php,
 * steel-structures.php, fit-out.php etc.
 */
.service-two-features-tab-title {
  color: #f6b61b !important;
}

/*
 * APPLICATION LIST IMAGES (Key Features / service application items)
 * The admin editor bakes max-height:520px on the .cover-image hero banner
 * but NOT on app-image thumbnails. Show app-images in full color by default
 * (not grayscale) so they are immediately visible to users.
 */
.app-image {
  filter: grayscale(0%) !important;
}

.application-item:hover .app-image {
  transform: scale(1.05) !important;
}

/* ===================================================
   PROJECT-DETAILS RIGHT COLUMN — fill remaining flex space
   ─────────────────────────────────────────────────
   Webflow defines .project-details-flex as display:flex but
   gives .project-details-pricing-choose no flex-grow, so it
   shrinks to content width. Adding flex:1 makes it fill the
   remaining space after the left grid (max-width:359px).
=================================================== */
.project-details-pricing-choose {
  flex: 1;
  min-width: 0;
}

/* ===================================================
   STICKY HEADER (not in original Webflow CSS)
=================================================== */
@media screen and (max-width: 991px) {
  .header-three.header-two {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

/* ===================================================
   LANGUAGE BUTTON — keep visible on mobile
   (Original Webflow CSS hides .cart-icons on mobile
    but we want the language toggle to stay visible)
=================================================== */
@media screen and (max-width: 991px) {
  .cart-icons.language-btn-wrapper {
    display: flex !important;
  }
  .language-header-btn {
    display: flex !important;
  }
}

/* ===================================================
   MOBILE NAVIGATION DRAWER
   (Injected into DOM by pacc-mobile-nav.js)
=================================================== */
.pacc-mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 85%;
  max-width: 320px;
  height: 100vh;
  background: #fff;
  z-index: 99999;
  overflow-y: auto;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  padding: 20px 0;
}

.pacc-mobile-nav.open {
  transform: translateX(0);
}

/* RTL: drawer slides in from the right */
[dir="rtl"] .pacc-mobile-nav {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

[dir="rtl"] .pacc-mobile-nav.open {
  transform: translateX(0);
}

.pacc-mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99998;
}

.pacc-mobile-nav-overlay.open {
  display: block;
}

.pacc-mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.pacc-mobile-nav-close {
  background: none;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  color: #333;
  padding: 6px 10px;
  line-height: 1;
}

.pacc-mobile-nav-logo img {
  height: 35px;
  width: auto;
}

.pacc-mobile-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pacc-mobile-nav-links li a {
  display: block;
  padding: 14px 20px;
  color: #0e2041;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  font-family: Montserrat, sans-serif;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.2s;
}

.pacc-mobile-nav-links li a:hover {
  background: #f5f7ff;
}

.pacc-mobile-nav-links .submenu a {
  padding-left: 36px;
  font-weight: 500;
  font-size: 14px;
  color: #444;
  background: #f9f9f9;
}

[dir="rtl"] .pacc-mobile-nav-links .submenu a {
  padding-left: 20px;
  padding-right: 36px;
}

.pacc-mobile-nav-footer {
  padding: 16px 20px;
  margin-top: 10px;
  border-top: 1px solid #eee;
}

.pacc-mobile-nav-footer a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0e2041;
  font-weight: 700;
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  text-decoration: none;
}

/* Show the nav drawer only on tablet/mobile */
@media screen and (max-width: 991px) {
  .pacc-mobile-nav {
    display: block;
  }
}

/* ===================================================
   WHATSAPP FLOATING BUTTON
=================================================== */
.whatsapp-floating-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9990;
  background-color: #25d366;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}

.whatsapp-floating-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

[dir="rtl"] .whatsapp-floating-btn {
  right: auto;
  left: 24px;
}

@media screen and (max-width: 479px) {
  .whatsapp-floating-btn {
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
  }

  [dir="rtl"] .whatsapp-floating-btn {
    right: auto;
    left: 16px;
  }
}

/* ===================================================
   RTL / ARABIC — Webflow slider fix
   ─────────────────────────────────────────────────
   Webflow's slider positions slides using LTR-based
   translateX calculations. In dir="rtl" pages the
   mask translation goes the wrong way, making slides
   2 and 3 appear as blank gray panels. Forcing
   direction:ltr on the slider container restores
   correct positioning while slide content stays RTL.
=================================================== */
[dir="rtl"] .w-slider,
[dir="rtl"] .w-slider-mask {
  direction: ltr;
}

/* Keep the text/content inside each slide RTL */
[dir="rtl"] .w-slide {
  direction: rtl;
}

/* ===================================================
   ABOUT / STATS SECTION — reduce oversized stat numbers
   ─────────────────────────────────────────────────
   The "نقدم حلول بناء مبتكرة" / "Provide Innovative Construction
   Solutions" section uses <h2 class="margin-zero"> for every
   stat counter (20+, 1,000+, Year-10, 70+, 3,000m², KSA+,
   ISO45001, ISO9001, ISO14001).  At the Webflow default of
   2.625rem they look disproportionately large, especially the
   multi-character ISO strings.  We drop them to 1.875rem which
   keeps them prominent but balanced with surrounding text.
=================================================== */
.home-three-about-count h2 {
  font-size: 1.875rem !important;
  line-height: 1.2 !important;
}

/* ===================================================
   HERO SLIDER — small slide tag label
   ─────────────────────────────────────────────────
   Replace white background + dark text with
   transparent background + gold text (#f6b61b),
   matching the "Get Started" button colour.
   Applied to both EN and AR slider pages.
=================================================== */
.home-one-hero-slider-block .tag-three {
  background-color: transparent !important;
  color: #f6b61b !important;
  border: none !important;
}

/* ===================================================
   RTL / ARABIC — menu roll text direction
=================================================== */
[dir="rtl"] .menu-list {
  direction: rtl;
}

[dir="rtl"] .single-menu .menu-text-block,
[dir="rtl"] .header-menu-item {
  font-family: 'Cairo', sans-serif;
}

/* ===================================================
   SAFE-AREA SUPPORT (iPhone notch / Dynamic Island)
=================================================== */
@supports (padding: max(0px)) {
  .header-three.header-two {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .whatsapp-floating-btn {
    bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* ===================================================
   SERVICE DETAILS — enforce row layout on all screens
   ─────────────────────────────────────────────────
   The .project-details-card-flex container holds the
   label (heading) and value (block) side by side.
   On narrow screens without explicit rules, flex items
   can wrap or the container loses its flex display,
   causing the layout to collapse to a vertical stack.
=================================================== */
.project-details-card-flex {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 8px;
  padding: 8px 0;
}
.project-details-card-flex-title-heading {
  flex-shrink: 0;
  color: #888;
  font-size: 13px;
  min-width: 70px;
}
.project-details-card-flex-title-block {
  flex: 1;
  text-align: right;
  font-size: 13px;
  color: #0e2041;
  font-weight: 600;
  word-break: break-word;
}

/* RTL: flip the text alignment */
[dir="rtl"] .project-details-card-flex-title-block {
  text-align: left;
}
[dir="rtl"] .project-details-card-flex {
  flex-direction: row-reverse;
}

/* ===================================================
   SERVICE DETAILS — card-line dividers always visible
   ─────────────────────────────────────────────────
   steel-structural-works.php has data-w-id on .card-line elements,
   triggering Webflow's scroll animation that expands them from
   width:0% to 100%. The fit-out sub-pages were built without those
   data-w-id attributes so the lines stay at width:0% and are
   invisible, making each detail row run together without separators.
   This override forces full-width rendering on all pages.
=================================================== */
/* Webflow animates card-line width via JS only when data-w-id is present.
   Pages built without data-w-id stay at the inline width:0%.
   All !important here ensures the inline style is always overridden. */
.card-line {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 1px !important;
  background-color: #d5d5d5 !important;
  background: #d5d5d5 !important;
  margin: 4px 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===================================================
   SECURITY-CCTV — hide decorative black/white rectangle overlays
   ─────────────────────────────────────────────────
   The Webflow template uses .why-choose-us-style (containing
   .about-company-black and .about-company-white) as a decorative
   corner frame behind feature-section images. On the security
   page these render as a visible black+white rectangle above/over
   the images. Hiding the container removes the artifact while
   keeping the images intact.
=================================================== */
.why-choose-us-style {
  display: none !important;
}

/* ===================================================
   APP IMAGE THUMBNAILS — show in full colour by default
   ─────────────────────────────────────────────────
   Application-list thumbnails use object-fit:cover in the
   inline <style> block inside each page. Switch to contain so
   the full image is visible inside the fixed 90×65px thumb.
=================================================== */
.app-image {
  object-fit: contain !important;
  background: #f5f5f5 !important;
}