/*
Theme Name:  Astra Child — Belfast
Theme URI:   https://belfastpro.com
Template:    astra
Author:      Belfast Trading & Contracting
Author URI:  https://belfastpro.com
Description: Child theme for Belfast Trading & Contracting — belfastpro.com
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child-belfast
*/

/* ============================================================
   GOOGLE FONTS — Cairo (Arabic) + Montserrat (English/Numbers)
   Loaded here as fallback; functions.php enqueues them properly.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Montserrat:wght@400;500;600;700;900&display=swap');

/* ============================================================
   ASTRA GLOBAL COLOR VARIABLES — Override palette to dark theme
   The page uses UAGB/Spectra blocks with backgroundColor set to
   var(--ast-global-color-5) and var(--ast-global-color-4).
   Overriding these variables here fixes ALL block backgrounds.
   ============================================================ */
:root {
    --ast-global-color-0: #C9A227;   /* Gold — accent/primary */
    --ast-global-color-1: #00B5A3;   /* Teal — secondary */
    --ast-global-color-2: #FFFFFF;   /* White — headings */
    --ast-global-color-3: #CCCCCC;   /* Grey — body text */
    --ast-global-color-4: #111111;   /* Dark — page background */
    --ast-global-color-5: #111111;   /* Dark — content/surface bg */
    --ast-global-color-6: #1C1C1C;   /* Slightly lighter dark — alt sections */
    --ast-global-color-7: #333333;   /* Border/divider */
    --ast-global-color-8: #C9A227;   /* Gold — links */
}

/* ── UAGB / Spectra block containers ── */
.wp-block-uagb-container,
.uagb-container-inner-blocks-wrap,
.wp-block-uagb-advanced-heading,
.wp-block-uagb-image,
.wp-block-uagb-buttons,
.wp-block-uagb-icon,
.wp-block-uagb-icon-list,
.wp-block-uagb-info-box,
.wp-block-uagb-call-to-action,
.wp-block-uagb-section {
    background-color: transparent !important;
}

/* ── Force UAGB containers with inline background vars to dark ── */
.wp-block-uagb-container[style*="--ast-global-color-5"],
.wp-block-uagb-container[style*="--ast-global-color-4"],
.wp-block-uagb-container[style*="background-color"] {
    background-color: #111111 !important;
}

/* ── UAGB text colors ── */
.wp-block-uagb-container p,
.wp-block-uagb-container span,
.wp-block-uagb-container li,
.wp-block-uagb-advanced-heading .uagb-heading-text,
.wp-block-uagb-advanced-heading .uagb-sub-heading {
    color: #CCCCCC !important;
}

.wp-block-uagb-advanced-heading h1,
.wp-block-uagb-advanced-heading h2,
.wp-block-uagb-advanced-heading h3,
.wp-block-uagb-advanced-heading h4,
.uagb-heading-text {
    color: #FFFFFF !important;
}

/* ── UAGB buttons ── */
.wp-block-uagb-buttons-child a,
.wp-block-uagb-buttons a,
.uagb-button__link {
    background-color: #C9A227 !important;
    color: #111111 !important;
    border-color: #C9A227 !important;
}

/* ── Gutenberg core blocks dark override ── */
.wp-block-group,
.wp-block-cover,
.wp-block-columns {
    background-color: #111111 !important;
    color: #CCCCCC !important;
}

/* ============================================================
   ELEMENTOR INLINE OVERRIDE — Force dark background & colors
   Elementor injects inline style="" attributes with higher
   specificity. These rules use maximum-specificity selectors
   combined with !important to win in every case.
   ============================================================ */

/* ── Force dark bg on ALL Elementor sections / columns / wraps ── */
.elementor-section,
.elementor-section.elementor-section-boxed,
.elementor-section.elementor-section-full_width,
.elementor-section.elementor-section-stretched,
.elementor-top-section,
.e-container,
.e-flex,
.elementor-inner-section,
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap,
.elementor-widget-container {
  background-color: #111111 !important;
  color: #CCCCCC !important;
}

/* ── Alternating section color for visual separation ── */
.elementor-section:nth-child(even) {
  background-color: #1C1C1C !important;
}

/* ── Force ALL Elementor text elements to correct colors ── */
.elementor-widget-text-editor,
.elementor-widget-text-editor *,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget p,
.elementor-widget li,
.elementor-widget span,
.elementor-widget div {
  color: #CCCCCC !important;
}

/* ── Headings stay white ── */
.elementor-widget-heading .elementor-heading-title {
  color: #FFFFFF !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 900 !important;
}

/* ── ALL buttons: kill any inline color, force gold ── */
.elementor-button,
.elementor-button-wrapper .elementor-button,
.elementor-button-link,
a.elementor-button,
.elementor-widget-button a {
  background-color: #C9A227 !important;
  color: #111111 !important;
  border-color: #C9A227 !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}

.elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover,
a.elementor-button:hover {
  background-color: #A07D10 !important;
  color: #111111 !important;
  border-color: #A07D10 !important;
}

/* ── Force Elementor icon-list, dividers, etc ── */
.elementor-icon-list-text { color: #CCCCCC !important; }
.elementor-divider-separator { border-color: #333333 !important; }

/* ── Fix gap between header and content ── */
.site-content,
#primary,
.content-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: #111111 !important;
}

/* ── Astra page content wrappers ── */
.ast-container,
.ast-grid-right-sidebar,
.ast-grid-left-sidebar,
#content,
.ast-article-post,
.ast-blog-layout-1,
.entry-content > .elementor {
  background-color: #111111 !important;
}

/* ── Nav menu: ensure white text, gold hover ── */
#site-navigation .menu-item > a,
.main-navigation .menu-item > a,
.ast-primary-menu > li > a,
#ast-hf-menu-1 .menu-item > a {
  color: #FFFFFF !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

#site-navigation .menu-item > a:hover,
.main-navigation .menu-item > a:hover,
.ast-primary-menu > li > a:hover {
  color: #C9A227 !important;
}

/* ── Images / media: remove any white background boxes ── */
.elementor-widget-image,
.elementor-image,
.wp-caption {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── White space / padding resets Elementor sometimes adds ── */
.elementor > .elementor-inner > .elementor-section-wrap > .elementor-section:first-child {
  margin-top: 0 !important;
}

/* ── Fix white body/html that bleeds through ── */
html { background-color: #111111 !important; }
body { background-color: #111111 !important; }

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Brand Colors */
  --color-bg-primary:     #111111;
  --color-bg-section:     #1C1C1C;
  --color-gold:           #C9A227;
  --color-gold-light:     #D4AF37;
  --color-gold-dark:      #A07D10;
  --color-teal:           #00B5A3;
  --color-orange:         #E8834A;
  --color-white:          #FFFFFF;
  --color-text-secondary: #CCCCCC;
  --color-border:         #333333;

  /* Typography */
  --font-arabic:    'Cairo', 'Tajawal', sans-serif;
  --font-english:   'Montserrat', sans-serif;
  --font-size-h1:   clamp(36px, 5vw, 64px);
  --font-size-h2:   clamp(26px, 3.5vw, 42px);
  --font-size-h3:   clamp(18px, 2.5vw, 28px);
  --font-size-body: 16px;

  /* Spacing & Layout */
  --section-padding:   80px 40px;
  --content-max-width: 1200px;
  --grid-gap:          16px;
  --radius-card:       12px;
  --radius-button:     4px;
}

/* ============================================================
   GLOBAL RESET — DARK BASE
   ============================================================ */
html,
body,
#page,
.ast-container,
.site-content,
.content-area,
.entry-content,
.ast-article-post {
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-secondary);
}

/* Astra inner containers */
.ast-separate-container .ast-article-post,
.ast-plain-container .site-content,
.single-page-builder .content-area {
  background-color: var(--color-bg-primary) !important;
}

/* Remove default Astra entry boxes */
.ast-separate-container .ast-article-post {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
body,
p,
li,
td,
th,
label,
input,
textarea,
select {
  font-family: var(--font-arabic);
  font-size: var(--font-size-body);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title {
  font-family: var(--font-arabic);
  font-weight: 900;
  color: var(--color-white);
  line-height: 1.3;
}

/* English / number labels */
.font-english,
.stat-number,
.url-label,
.contact-website-pill {
  font-family: var(--font-english) !important;
}

a {
  color: var(--color-gold);
  transition: color 0.25s;
}
a:hover {
  color: var(--color-gold-dark);
}

/* ============================================================
   HEADER
   ============================================================ */
#masthead,
.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-above-header-bar,
.ast-below-header-bar {
  background-color: var(--color-bg-primary) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Sticky header */
.ast-sticky-header-active #masthead,
.ast-header-sticked #masthead {
  background-color: rgba(17, 17, 17, 0.96) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
}

/* RTL nav direction */
.main-header-bar-wrap,
.ast-primary-header-bar .main-header-bar-navigation,
.ast-header-break-point .main-header-bar,
#ast-hf-menu-1 > ul,
.main-header-menu,
.ast-primary-menu,
.ast-builder-menu-1-wrap .main-header-menu {
  direction: rtl;
}

/* Nav links */
.ast-builder-menu .menu-item a,
.main-header-menu .menu-item > a,
.ast-primary-menu > .menu-item > a {
  color: var(--color-white) !important;
  font-family: var(--font-arabic);
  font-size: 14px;
  font-weight: 600;
  transition: color 0.25s;
}

.ast-builder-menu .menu-item a:hover,
.main-header-menu .menu-item > a:hover {
  color: var(--color-gold) !important;
}

/* Active nav item */
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a {
  color: var(--color-gold) !important;
}

/* Mobile hamburger */
.ast-mobile-menu-buttons button,
#ast-mobile-header .ast-mobile-menu-buttons span {
  color: var(--color-white) !important;
}

/* Mobile off-canvas / flyout */
.ast-mobile-header-wrap,
#ast-mobile-popup-wrapper {
  background-color: var(--color-bg-primary) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
.footer-widget-area,
#colophon,
.ast-small-footer,
.ast-footer-copyright {
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-secondary) !important;
  border-top: 1px solid var(--color-border);
}

.site-footer a,
.ast-footer-copyright a,
.ast-small-footer a {
  color: var(--color-gold) !important;
}

.site-footer a:hover {
  color: var(--color-gold-dark) !important;
}

.footer-widget-area .widget-title {
  color: var(--color-gold) !important;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary CTA — Gold */
.ast-button,
.wp-block-button__link,
.elementor-button,
.elementor-button-wrapper .elementor-button,
a.button,
button.button,
input[type="submit"],
.btn-primary {
  background: var(--color-gold) !important;
  color: var(--color-bg-primary) !important;
  border: none !important;
  border-radius: var(--radius-button) !important;
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  cursor: pointer;
  transition: background 0.25s, transform 0.15s;
}

.ast-button:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
input[type="submit"]:hover {
  background: var(--color-gold-dark) !important;
  color: var(--color-bg-primary) !important;
  transform: translateY(-1px);
}

/* Secondary outline — Gold border */
.btn-secondary {
  background: transparent !important;
  color: var(--color-gold) !important;
  border: 2px solid var(--color-gold) !important;
  border-radius: var(--radius-button) !important;
  padding: 10px 26px;
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 15px;
  transition: all 0.25s;
}
.btn-secondary:hover {
  background: var(--color-gold) !important;
  color: var(--color-bg-primary) !important;
}

/* Teal action */
.btn-teal {
  background: var(--color-teal) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius-button) !important;
}
.btn-teal:hover {
  background: #009d8c !important;
}

/* URL Pill tag */
.url-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-white);
  color: var(--color-bg-primary) !important;
  border: 1.5px solid #555;
  border-radius: 999px;
  padding: 8px 20px;
  font-family: var(--font-english);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: box-shadow 0.25s;
}
.url-pill:hover {
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.4);
  color: var(--color-bg-primary) !important;
}

/* ============================================================
   SECTION — BASE
   ============================================================ */
.elementor-section,
.elementor-top-section,
.belfast-section {
  position: relative;
  overflow: hidden;
}

.belfast-section {
  background-color: var(--color-bg-primary);
}
.belfast-section-alt {
  background-color: var(--color-bg-section);
}

/* Content always above decorative shapes */
.elementor-widget-wrap,
.elementor-column-wrap,
.elementor-container,
.belfast-content,
.section-content {
  position: relative;
  z-index: 1;
}

/* ============================================================
   SECTION HEADINGS — GOLD BAR STYLE (RTL: bar appears on right)
   ============================================================ */
.section-heading,
.belfast-section-title,
h2.has-gold-bar,
h3.has-gold-bar,
.gold-bar-heading {
  position: relative;
  border-right: 4px solid var(--color-gold);
  padding-right: 16px;
  color: var(--color-white);
  font-family: var(--font-arabic);
  font-weight: 900;
  display: inline-block;
}

/* Sub-label above main heading */
.section-sub-label {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* Color variants */
.heading-teal   { color: var(--color-teal)   !important; }
.heading-orange { color: var(--color-orange) !important; }
.heading-gold   { color: var(--color-gold)   !important; }
.heading-white  { color: var(--color-white)  !important; }

/* ============================================================
   DECORATIVE SHAPES — REUSABLE UTILITY CLASSES
   ============================================================ */

/* Large teal circle — bottom-left (default) */
.shape-teal-circle-bl::before {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  background: var(--color-teal);
  border-radius: 50%;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

/* Large teal circle — top-right */
.shape-teal-circle-tr::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 190px;
  height: 190px;
  background: var(--color-teal);
  border-radius: 50%;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

/* Gold oval — top-right */
.shape-gold-oval-tr::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -25px;
  width: 155px;
  height: 220px;
  background: var(--color-gold);
  border-radius: 50%;
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}

/* Gold oval — bottom-left */
.shape-gold-oval-bl::before {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -20px;
  width: 130px;
  height: 185px;
  background: var(--color-gold);
  border-radius: 50%;
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}

/* Orange quarter-circle — right mid */
.shape-orange-right::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -110px;
  width: 240px;
  height: 240px;
  background: var(--color-orange);
  border-radius: 50%;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

/* Orange quarter-circle — top-right */
.shape-orange-tr::after {
  content: '';
  position: absolute;
  top: -110px;
  right: -110px;
  width: 260px;
  height: 260px;
  background: var(--color-orange);
  border-radius: 50%;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

/* Dark outline ring */
.shape-outline-ring::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid #444;
  border-radius: 50%;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   SECTION 1 — HERO / COVER
   ============================================================ */
.belfast-hero,
#belfast-hero {
  background-color: var(--color-bg-primary);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Gold oval — top-right hero decoration */
.belfast-hero::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -30px;
  width: 200px;
  height: 280px;
  background: var(--color-gold);
  border-radius: 50%;
  opacity: 0.75;
  z-index: 0;
  pointer-events: none;
}

/* Dark outline circle (bottom-left background ring) */
.belfast-hero::before {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 80px;
  width: 160px;
  height: 160px;
  border: 2px solid #333;
  border-radius: 50%;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

/* Company name styling */
.hero-company-arabic {
  font-family: var(--font-arabic);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900;
  color: var(--color-white);
  display: block;
  line-height: 1.2;
}

.hero-company-english {
  font-family: var(--font-english);
  font-size: clamp(12px, 1.5vw, 20px);
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 2px;
  display: block;
  margin-top: 4px;
  text-transform: uppercase;
}

/* Profile badge pill */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-family: var(--font-english);
  padding: 4px 14px;
  border-radius: 999px;
  margin-top: 12px;
  border: 1px solid #444;
}

/* City circle image frame */
.hero-city-circle {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  max-width: 480px;
  display: block;
}

/* ============================================================
   SECTION 2 — ABOUT / MISSION
   ============================================================ */
.belfast-about,
#belfast-about {
  background-color: var(--color-bg-section);
  padding: var(--section-padding);
  position: relative;
  overflow: hidden;
}

/* Gold oval — top-right */
.belfast-about::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -20px;
  width: 140px;
  height: 200px;
  background: var(--color-gold);
  border-radius: 50%;
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}

/* Circular photo frame */
.img-circle,
.about-photo-circle {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  max-width: 420px;
  display: block;
}

.about-photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* About text direction */
.about-text-block {
  direction: rtl;
  text-align: right;
}

.about-overline {
  font-size: 14px;
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: 8px;
}

/* ============================================================
   SECTION 3 — COMPANY STORY / BACKGROUND
   ============================================================ */
.belfast-story,
#belfast-story {
  background-color: var(--color-bg-primary);
  padding: var(--section-padding);
  position: relative;
  overflow: hidden;
}

/* Teal circle — top-right */
.belfast-story::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: var(--color-teal);
  border-radius: 50%;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

/* Orange quarter-circle — bottom-right */
.belfast-story::before {
  content: '';
  position: absolute;
  bottom: -110px;
  right: -110px;
  width: 240px;
  height: 240px;
  background: var(--color-orange);
  border-radius: 50%;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

/* Diagonal clip on the photo collage column */
.story-photos-wrap {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
  height: 100%;
  min-height: 460px;
}

/* 3-photo collage grid: 2 narrow stacked left + 1 wide right */
.story-collage {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4px;
  height: 100%;
}

.story-collage .col-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.story-collage img,
.story-collage .story-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Story text bullets with gold bar */
.story-text-block {
  direction: rtl;
  text-align: right;
}

.story-bullet {
  border-right: 4px solid var(--color-gold);
  padding-right: 14px;
  margin-bottom: 24px;
}

.story-bullet p {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.9;
  margin: 0;
}

.story-bullet strong,
.story-bullet .text-teal {
  color: var(--color-teal);
  font-weight: 700;
}

/* ============================================================
   SECTION 4 — MISSION STATEMENT
   ============================================================ */
.belfast-mission,
#belfast-mission {
  background-color: var(--color-bg-section);
  padding: var(--section-padding);
  position: relative;
  overflow: hidden;
}

/* Teal circle — top-left corner (behind logo area) */
.belfast-mission::before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 160px;
  height: 160px;
  background: var(--color-teal);
  border-radius: 50%;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

/* Faint outline circle background */
.belfast-mission::after {
  content: '';
  position: absolute;
  bottom: 40px;
  left: 20%;
  width: 180px;
  height: 180px;
  border: 2px solid #444;
  border-radius: 50%;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}

/* Mission headline — orange (main H2) */
.mission-headline-orange {
  font-family: var(--font-arabic);
  font-size: clamp(22px, 3.5vw, 42px);
  font-weight: 900;
  color: var(--color-orange) !important;
  border-right: 4px solid var(--color-gold);
  padding-right: 14px;
  line-height: 1.3;
  margin-bottom: 16px;
  display: block;
}

/* Mission sub-lines — white */
.mission-line-white {
  font-size: clamp(15px, 1.8vw, 20px);
  color: var(--color-white) !important;
  font-weight: 600;
  border-right: 4px solid var(--color-gold);
  padding-right: 14px;
  margin-bottom: 12px;
  display: block;
  direction: rtl;
  text-align: right;
}

/* Diagonal-clipped photo on the right */
.mission-photo-wrap {
  overflow: hidden;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  height: 100%;
  min-height: 420px;
}

.mission-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   SECTION 5 — EXPERIENCE / STATS
   ============================================================ */
.belfast-stats,
#belfast-stats {
  background-color: var(--color-bg-primary);
  padding: var(--section-padding);
  position: relative;
  overflow: hidden;
}

/* Gold oval — top-right */
.belfast-stats::after {
  content: '';
  position: absolute;
  top: -40px;
  right: 40px;
  width: 140px;
  height: 200px;
  background: var(--color-gold);
  border-radius: 50%;
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}

/* "20" large teal number + "سنه" inline */
.stat-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  direction: rtl;
  margin-bottom: 4px;
}

.stat-number-20 {
  font-family: var(--font-english);
  font-size: clamp(80px, 10vw, 120px);
  font-weight: 900;
  color: var(--color-teal);
  line-height: 1;
}

.stat-years-label {
  font-family: var(--font-arabic);
  font-size: clamp(18px, 2.5vw, 30px);
  font-weight: 700;
  color: var(--color-white);
}

.stat-since-label {
  font-family: var(--font-arabic);
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 600;
  color: var(--color-text-secondary);
  direction: rtl;
  margin-bottom: 8px;
  display: block;
}

/* Main Belfast Group heading */
.stat-headline {
  font-family: var(--font-arabic);
  font-size: clamp(28px, 4.5vw, 58px);
  font-weight: 900;
  color: var(--color-gold);
  border-right: 4px solid var(--color-gold);
  padding-right: 16px;
  line-height: 1.2;
  margin-top: 4px;
  display: block;
  direction: rtl;
  text-align: right;
}

/* Body paragraph */
.stat-body-text {
  font-family: var(--font-arabic);
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.9;
  margin-top: 20px;
  border-right: 4px solid var(--color-gold);
  padding-right: 16px;
  direction: rtl;
  text-align: right;
}

/* Background team photo */
.stats-bg-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  z-index: 0;
}

.stats-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* ============================================================
   SECTION 6 & 7 — PARTNERS / SUCCESS LOGO GRIDS
   ============================================================ */
.belfast-partners,
#belfast-partners,
.belfast-partners-2,
#belfast-partners-2 {
  background-color: var(--color-bg-section);
  padding: var(--section-padding);
  position: relative;
  overflow: hidden;
}

/* Orange quarter-circle — right mid (Set 1) */
.belfast-partners::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -115px;
  width: 250px;
  height: 250px;
  background: var(--color-orange);
  border-radius: 50%;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

/* Gold oval — top-right (Set 2) */
.belfast-partners-2::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -30px;
  width: 180px;
  height: 260px;
  background: var(--color-gold);
  border-radius: 50%;
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}

/* Section heading block */
.partners-heading {
  text-align: right;
  direction: rtl;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.partners-heading .main-title {
  font-family: var(--font-arabic);
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 900;
  color: var(--color-white);
  border-right: 4px solid var(--color-gold);
  padding-right: 16px;
  display: inline-block;
}

.partners-heading .sub-title {
  color: var(--color-text-secondary);
  font-size: 15px;
  margin-top: 6px;
  display: block;
}

/* 6-column logo grid */
.partner-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.partner-logo-cell {
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  min-height: 90px;
  transition: box-shadow 0.3s, z-index 0s;
  position: relative;
}

/* Remove right border on last of each row */
.partner-logo-cell:nth-child(6n) {
  border-right: none;
}

/* Remove bottom border on last row (24 cells = 4 rows) */
.partner-logo-cell:nth-child(n+19) {
  border-bottom: none;
}

.partner-logo-cell img {
  max-height: 60px;
  max-width: 90%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.35s ease, opacity 0.35s ease;
  display: block;
}

.partner-logo-cell:hover {
  z-index: 2;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.partner-logo-cell:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ============================================================
   SECTION 8 — PORTFOLIO — INTERIORS (9-photo mosaic)
   ============================================================ */
.belfast-portfolio-interiors,
#belfast-portfolio-interiors {
  background-color: var(--color-bg-primary);
  padding: var(--section-padding);
  position: relative;
  overflow: hidden;
}

/* Teal quarter-circle — right edge */
.belfast-portfolio-interiors::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -115px;
  width: 260px;
  height: 260px;
  background: var(--color-teal);
  border-radius: 50%;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

/* Gold oval — bottom-left */
.belfast-portfolio-interiors::before {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -20px;
  width: 130px;
  height: 185px;
  background: var(--color-gold);
  border-radius: 50%;
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}

/* Portfolio section heading */
.portfolio-heading {
  text-align: right;
  direction: rtl;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.portfolio-heading h2,
.portfolio-heading .portfolio-title {
  font-family: var(--font-arabic);
  font-size: clamp(26px, 3.5vw, 46px);
  font-weight: 900;
  color: var(--color-white);
  border-right: 4px solid var(--color-gold);
  padding-right: 16px;
  display: inline-block;
}

/*
  Irregular mosaic — 5 columns:
  Col 1: 2 small photos stacked
  Col 2: 1 full-height tall photo
  Col 3-4: 2×2 grid (4 photos)
  Col 5: 1 full-height tall photo
*/
.gallery-mosaic-9 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.gallery-mosaic-9 .gm-top-left    { grid-column: 1; grid-row: 1; }
.gallery-mosaic-9 .gm-bot-left    { grid-column: 1; grid-row: 2; }
.gallery-mosaic-9 .gm-col2-tall   { grid-column: 2; grid-row: 1 / span 2; }
.gallery-mosaic-9 .gm-grid-tl     { grid-column: 3; grid-row: 1; }
.gallery-mosaic-9 .gm-grid-tr     { grid-column: 4; grid-row: 1; }
.gallery-mosaic-9 .gm-grid-bl     { grid-column: 3; grid-row: 2; }
.gallery-mosaic-9 .gm-grid-br     { grid-column: 4; grid-row: 2; }
.gallery-mosaic-9 .gm-col5-tall   { grid-column: 5; grid-row: 1 / span 2; }

/* ============================================================
   SECTION 9 — PORTFOLIO — EQUIPMENT (6-photo 3×2 grid)
   ============================================================ */
.belfast-portfolio-equipment,
#belfast-portfolio-equipment {
  background-color: var(--color-bg-section);
  padding: var(--section-padding);
  position: relative;
  overflow: hidden;
}

/* Orange quarter-circle — top-right */
.belfast-portfolio-equipment::after {
  content: '';
  position: absolute;
  top: -115px;
  right: -115px;
  width: 270px;
  height: 270px;
  background: var(--color-orange);
  border-radius: 50%;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

/* Gold oval — bottom-left */
.belfast-portfolio-equipment::before {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -20px;
  width: 130px;
  height: 185px;
  background: var(--color-gold);
  border-radius: 50%;
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}

/* 3-col × 2-row grid; center column spans full height */
.gallery-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 250px 250px;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.gallery-grid-6 .ge-left-top    { grid-column: 1; grid-row: 1; }
.gallery-grid-6 .ge-left-bot    { grid-column: 1; grid-row: 2; }
.gallery-grid-6 .ge-center-tall { grid-column: 2; grid-row: 1 / span 2; }
.gallery-grid-6 .ge-center-bot  { grid-column: 2; grid-row: 2; } /* if not using tall */
.gallery-grid-6 .ge-right-top   { grid-column: 3; grid-row: 1; }
.gallery-grid-6 .ge-right-bot   { grid-column: 3; grid-row: 2; }

/* Gallery photo shared styles */
.gallery-mosaic-9 > div,
.gallery-grid-6 > div {
  overflow: hidden;
  position: relative;
}

.gallery-mosaic-9 img,
.gallery-grid-6 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gallery-mosaic-9 > div:hover img,
.gallery-grid-6 > div:hover img {
  transform: scale(1.05);
}

/* ============================================================
   SECTION 10 — CONTACT
   ============================================================ */
.belfast-contact,
#belfast-contact {
  background-color: var(--color-bg-primary);
  padding: var(--section-padding);
  position: relative;
  overflow: hidden;
}

/* Teal circle — bottom-left */
.belfast-contact::before {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  background: var(--color-teal);
  border-radius: 50%;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

/* Gold oval — top-right */
.belfast-contact::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -30px;
  width: 220px;
  height: 320px;
  background: var(--color-gold);
  border-radius: 50%;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

.contact-heading {
  text-align: right;
  direction: rtl;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}

.contact-heading h2,
.contact-heading .contact-title {
  font-family: var(--font-arabic);
  font-size: clamp(26px, 4vw, 52px);
  font-weight: 900;
  color: var(--color-white);
  border-right: 4px solid var(--color-gold);
  padding-right: 16px;
  display: inline-block;
}

/* White rounded info card */
.contact-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 22px 28px;
  position: relative;
  z-index: 1;
  direction: rtl;
  text-align: right;
}

.contact-card p,
.contact-card span,
.contact-card a {
  color: #111111 !important;
  font-size: 15px;
  font-family: var(--font-arabic);
  text-decoration: none;
  line-height: 1.8;
}

.contact-card a:hover {
  color: var(--color-gold-dark) !important;
}

/* Full-width address card */
.contact-card-address {
  margin-bottom: 16px;
}

/* Icon + text row */
.contact-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  direction: rtl;
}

.contact-icon {
  font-size: 18px;
  flex-shrink: 0;
  color: #111111;
}

/* Website pill inside contact card */
.contact-website-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #555;
  border-radius: 999px;
  padding: 6px 18px;
  font-family: var(--font-english) !important;
  font-size: 14px;
  font-weight: 500;
  color: #111111 !important;
  text-decoration: none;
  margin-top: 6px;
  transition: border-color 0.25s;
}

.contact-website-pill:hover {
  border-color: var(--color-gold-dark);
  color: #111111 !important;
}

/* Two-column grid for phone/email cards */
.contact-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   PERSISTENT LOGO BAR — Top-right corner of sections 2–10
   (In RTL layout, "right" is the visual left side of the screen)
   ============================================================ */
.belfast-logo-bar {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  direction: rtl;
}

.belfast-logo-bar .logo-icon {
  width: 32px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.belfast-logo-bar .logo-text {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.belfast-logo-bar .logo-arabic {
  font-family: var(--font-arabic);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
  display: block;
}

.belfast-logo-bar .logo-english {
  font-family: var(--font-english);
  font-size: 9px;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: block;
  opacity: 0.8;
}

/* ============================================================
   ASTRA OVERRIDES — Remove unwanted defaults
   ============================================================ */

/* Remove Astra's white entry box / page wrapper */
.ast-page-builder-template .site-content,
.ast-page-builder-template .content-area,
.elementor-page .site-content {
  background: transparent !important;
}

/* Remove Astra default entry padding */
.ast-page-builder-template .entry-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Dark Elementor sections */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--content-max-width);
}

/* Woocommerce / widget area dark */
/* ── Hide sidebar widget area entirely ── */
#secondary,
.widget-area,
.sidebar-main,
.ast-right-sidebar-area,
.ast-left-sidebar-area {
  display: none !important;
}

/* ── Give primary content full width when sidebar is hidden ── */
.ast-right-sidebar #primary,
.ast-left-sidebar #primary,
.ast-grid-right-sidebar #primary-content,
.ast-grid-left-sidebar #primary-content {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.widget-title {
  color: var(--color-gold) !important;
  font-family: var(--font-arabic);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* ============================================================
   COLOR UTILITY CLASSES
   ============================================================ */
.text-gold   { color: var(--color-gold)           !important; }
.text-teal   { color: var(--color-teal)           !important; }
.text-orange { color: var(--color-orange)         !important; }
.text-white  { color: var(--color-white)          !important; }
.text-grey   { color: var(--color-text-secondary) !important; }

.bg-dark     { background-color: var(--color-bg-primary) !important; }
.bg-darker   { background-color: var(--color-bg-section) !important; }
.bg-gold     { background-color: var(--color-gold)       !important; }
.bg-teal     { background-color: var(--color-teal)       !important; }
.bg-orange   { background-color: var(--color-orange)     !important; }

/* ============================================================
   RTL OVERRIDES
   ============================================================ */
[dir="rtl"] body,
.rtl-section {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .ast-site-identity {
  margin-right: 0;
}

/* Gold bar switches to left side in LTR fallback */
[dir="ltr"] .section-heading,
[dir="ltr"] .belfast-section-title,
[dir="ltr"] h2.has-gold-bar,
[dir="ltr"] h3.has-gold-bar {
  border-right: none;
  border-left: 4px solid var(--color-gold);
  padding-right: 0;
  padding-left: 16px;
}

/* ============================================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --section-padding: 60px 30px;
  }

  .partner-logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Last column border fix at 3-col */
  .partner-logo-cell:nth-child(6n) {
    border-right: 1px solid #ddd;
  }
  .partner-logo-cell:nth-child(3n) {
    border-right: none;
  }

  .gallery-mosaic-9 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
  }

  .gallery-mosaic-9 .gm-col2-tall,
  .gallery-mosaic-9 .gm-col5-tall {
    grid-row: auto;
    grid-column: auto;
  }

  .gallery-grid-6 .ge-center-tall {
    grid-row: auto;
    grid-column: auto;
  }

  .contact-cards-grid {
    grid-template-columns: 1fr;
  }

  .story-photos-wrap {
    clip-path: none;
    min-height: 300px;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --section-padding: 48px 20px;
  }

  .partner-logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partner-logo-cell:nth-child(3n),
  .partner-logo-cell:nth-child(6n) {
    border-right: 1px solid #ddd;
  }
  .partner-logo-cell:nth-child(2n) {
    border-right: none;
  }

  .gallery-mosaic-9,
  .gallery-grid-6 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .gallery-mosaic-9 > div,
  .gallery-grid-6 > div {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 200px;
  }

  .story-collage {
    grid-template-columns: 1fr;
    height: auto;
  }

  .story-collage .col-stack,
  .story-collage > * {
    height: 220px;
  }

  .contact-cards-grid {
    grid-template-columns: 1fr;
  }

  /* Hide large decorative shapes on small screens */
  .belfast-hero::after,
  .belfast-hero::before,
  .belfast-about::after,
  .belfast-story::after,
  .belfast-story::before,
  .belfast-mission::before,
  .belfast-mission::after,
  .belfast-stats::after,
  .belfast-partners::after,
  .belfast-partners-2::after,
  .belfast-portfolio-interiors::after,
  .belfast-portfolio-interiors::before,
  .belfast-portfolio-equipment::after,
  .belfast-portfolio-equipment::before,
  .belfast-contact::before,
  .belfast-contact::after {
    display: none;
  }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  .partner-logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-mosaic-9,
  .gallery-grid-6 {
    grid-template-columns: 1fr;
  }

  .gallery-mosaic-9 > div,
  .gallery-grid-6 > div {
    height: 220px;
  }

  .hero-city-circle {
    max-width: 280px;
  }

  .stat-number-20 {
    font-size: 72px;
  }
}