/**
 * Tawali + Elementor
 * - Section/column width: controlled by Elementor (no width locks).
 * - Card grids: theme HTML (.services-grid, .stats-grid…) from styles.css.
 */

/* Boxed container default — Elementor inline width overrides when you change it */
body.tawali-elementor-canvas .elementor-section.elementor-section-boxed > .elementor-container,
body.tawali-elementor-editor .elementor-section.elementor-section-boxed > .elementor-container,
.elementor-section.elementor-section-boxed > .elementor-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* ---- Hero (CSS layers — same in frontend + Elementor editor) ---- */
body.tawali-elementor-canvas .elementor-section.hero,
body.tawali-elementor-editor .elementor-section.hero,
body.elementor-editor-active .elementor-section.hero,
body.elementor-editor-preview .elementor-section.hero,
.elementor-section.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h, 90px) !important;
  padding-bottom: 72px !important;
  margin-bottom: -72px !important;
  overflow: visible;
  background: var(--navy-950, #040a14) !important;
  z-index: 2;
}

/* Background gradient */
.elementor-section.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(4, 10, 20, 0.3) 0%,
      rgba(10, 22, 40, 0.82) 58%,
      var(--navy-950, #040a14) 100%
    ),
    linear-gradient(135deg, var(--navy-950, #040a14) 0%, var(--navy-900, #0a1628) 40%, var(--navy-800, #0f2240) 100%);
}

/* Gold glow orb — full section width (not clipped to container box) */
.elementor-section.hero::after {
  content: "";
  position: absolute;
  width: min(640px, 88vw);
  height: min(640px, 88vw);
  border-radius: 50%;
  top: 8%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(201, 162, 39, 0.16) 0%,
    rgba(201, 162, 39, 0.07) 38%,
    transparent 68%
  );
}

html[lang^="ar"] .elementor-section.hero::after,
[dir="rtl"] .elementor-section.hero::after,
body[data-tawali-lang="ar"] .elementor-section.hero::after {
  left: -14%;
  right: auto;
}

html[lang^="en"] .elementor-section.hero::after,
[dir="ltr"] .elementor-section.hero::after,
body[data-tawali-lang="en"] .elementor-section.hero::after {
  right: -14%;
  left: auto;
}

/* Wave divider at bottom */
.elementor-section.hero > .elementor-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  z-index: 3;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,50 1440,40 L1440,80 L0,80 Z' fill='%23040a14'/%3E%3C/svg%3E") bottom center / 100% 80px no-repeat;
}

.elementor-section.hero > .elementor-container {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: calc(100vh - var(--header-h, 90px) - 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.elementor-section.hero > .elementor-container > .elementor-column {
  position: relative;
  z-index: 2;
  align-self: center;
}

/* Legacy import columns (v11) — hide so editor layout is not broken */
.elementor-section.hero .tawali-hero-layers-col,
.elementor-section.hero .tawali-hero-wave-col {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
  max-width: 0 !important;
}

.elementor-section.hero:not(.tawali-hero-shell) {
  background: linear-gradient(135deg, #040a14 0%, #0a1628 40%, #0f2240 100%) !important;
}

.elementor-section.hero .hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.elementor-section.hero .hero-logo-wrap img {
  max-width: 380px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.elementor-section.hero .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Section vertical rhythm (matches .section padding in theme) */
body.tawali-elementor-canvas .elementor-section.tawali-section-content > .elementor-container > .elementor-row > .elementor-column > .elementor-element-populated,
body.tawali-elementor-editor .elementor-section.tawali-section-content > .elementor-container > .elementor-row > .elementor-column > .elementor-element-populated {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Theme grid widgets: full width, use styles.css grid gap */
body.tawali-elementor-canvas .elementor-widget-html.tawali-theme-grid,
body.tawali-elementor-editor .elementor-widget-html.tawali-theme-grid {
  width: 100%;
}

body.tawali-elementor-canvas .elementor-widget-html.tawali-theme-grid .elementor-widget-container,
body.tawali-elementor-editor .elementor-widget-html.tawali-theme-grid .elementor-widget-container {
  width: 100%;
  max-width: 100%;
}

body.tawali-elementor-canvas .elementor-widget-html.tawali-theme-grid .services-grid,
body.tawali-elementor-canvas .elementor-widget-html.tawali-theme-grid .stats-grid,
body.tawali-elementor-canvas .elementor-widget-html.tawali-theme-grid .why-grid,
body.tawali-elementor-editor .elementor-widget-html.tawali-theme-grid .services-grid,
body.tawali-elementor-editor .elementor-widget-html.tawali-theme-grid .stats-grid,
body.tawali-elementor-editor .elementor-widget-html.tawali-theme-grid .why-grid {
  width: 100%;
}

.elementor-section.section-light {
  background-color: #f8f9fb;
}

.elementor-section.section-navy {
  background-color: #0a1628;
}

.elementor-section.cta-banner {
  background: linear-gradient(135deg, #0f2240, #163058);
}

.elementor-section.page-header {
  background: linear-gradient(135deg, #040a14, #0f2240);
}

.elementor-section.stats,
.elementor-section.tawali-stats-section {
  width: 100% !important;
  max-width: none !important;
  padding-top: 0 !important;
  padding-bottom: 80px !important;
  margin-top: 0 !important;
  position: relative;
  z-index: 4;
  overflow: visible !important;
  background-color: transparent !important;
  background-image: none !important;
}

.elementor-section.stats::before,
.elementor-section.tawali-stats-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(4, 10, 20, 0.35) 40px,
    var(--navy-950, #040a14) 110px,
    var(--navy-950, #040a14) 100%
  );
}

.elementor-section.hero + .elementor-section.stats {
  margin-top: 0 !important;
}

.elementor-section.stats > .elementor-container,
.elementor-section.tawali-stats-section > .elementor-container {
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.elementor-section.stats > .elementor-container > .elementor-column,
.elementor-section.tawali-stats-section > .elementor-container > .elementor-column {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.elementor-section.stats .elementor-element-populated,
.elementor-section.tawali-stats-section .elementor-element-populated {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  background: transparent !important;
}

.elementor-section.stats .elementor-widget-html.tawali-theme-grid,
.elementor-section.tawali-stats-section .elementor-widget-html.tawali-theme-grid {
  width: 100% !important;
  max-width: 100% !important;
}

.elementor-section.stats .elementor-widget-html.tawali-theme-grid .elementor-widget-container,
.elementor-section.tawali-stats-section .elementor-widget-html.tawali-theme-grid .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.elementor-section.stats .stats-grid,
.elementor-section.tawali-stats-section .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: -72px !important;
  position: relative;
  z-index: 3;
  box-sizing: border-box;
}

.elementor-section.stats .stat-card {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.elementor-section.tawali-page-header .page-header-inner {
  text-align: center;
  width: 100%;
}

.elementor-section.tawali-cta-section .cta-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.elementor-section.tawali-form-center .form-wrapper {
  max-width: 640px;
  margin: 0 auto;
}

body.tawali-elementor-canvas .elementor-widget-html.tawali-theme-form .contact-grid .form-wrapper,
body.tawali-elementor-editor .elementor-widget-html.tawali-theme-form .contact-grid .form-wrapper {
  max-width: none;
}

/* Theme header (Elementor Theme Builder) */
.elementor-location-header.tawali-elementor-header-wrap,
body.tawali-elementor-canvas .elementor-location-header.tawali-elementor-header-wrap,
body.tawali-elementor-editor .elementor-location-header.tawali-elementor-header-wrap {
  width: 100%;
  max-width: none;
  position: relative;
  z-index: 1000;
  padding: 0 !important;
  margin: 0;
  background: transparent !important;
}

.elementor-location-header .elementor-widget-html.tawali-header-html,
.elementor-location-header .elementor-widget-html.tawali-header-html .elementor-widget-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

.elementor-location-header .header,
.elementor-location-header .tawali-site-header {
  width: 100%;
}

.elementor-location-header .logo img {
  max-height: 56px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Theme footer (Elementor Theme Builder) — match .footer padding from styles.css */
.elementor-location-footer.footer.tawali-site-footer,
body.tawali-elementor-canvas .elementor-location-footer.footer.tawali-site-footer,
body.tawali-elementor-editor .elementor-location-footer.footer.tawali-site-footer {
  width: 100%;
  max-width: none;
  min-height: 0 !important;
  padding-top: 60px !important;
  padding-bottom: 24px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: var(--navy-950, #0a1628);
  border-top: 1px solid rgba(201, 162, 39, 0.15);
}

body.tawali-elementor-canvas .elementor-location-footer.tawali-site-footer > .elementor-container,
body.tawali-elementor-editor .elementor-location-footer.tawali-site-footer > .elementor-container {
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
}

body.tawali-elementor-canvas .elementor-location-footer .elementor-column > .elementor-element-populated,
body.tawali-elementor-editor .elementor-location-footer .elementor-column > .elementor-element-populated {
  padding: 0 !important;
}

body.tawali-elementor-canvas .elementor-widget-html.tawali-footer-html,
body.tawali-elementor-editor .elementor-widget-html.tawali-footer-html {
  width: 100%;
  margin: 0;
}

body.tawali-elementor-canvas .elementor-widget-html.tawali-footer-html .elementor-widget-container,
body.tawali-elementor-editor .elementor-widget-html.tawali-footer-html .elementor-widget-container {
  padding: 0;
  margin: 0;
}

body.tawali-elementor-canvas .elementor-location-footer .footer-brand img,
body.tawali-elementor-canvas .elementor-location-footer .footer-brand .footer-logo,
body.tawali-elementor-editor .elementor-location-footer .footer-brand img,
body.tawali-elementor-editor .elementor-location-footer .footer-brand .footer-logo,
.elementor-location-footer .footer-brand img,
.elementor-location-footer .footer-brand .footer-logo {
  max-height: 56px !important;
  max-width: 180px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hero / content images in Elementor pages */
body.tawali-elementor-canvas .hero-logo-wrap img,
body.tawali-elementor-canvas .about-image img,
body.tawali-elementor-canvas .elementor-widget-image img,
body.tawali-elementor-editor .hero-logo-wrap img,
body.tawali-elementor-editor .about-image img,
body.tawali-elementor-editor .elementor-widget-image img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

body.tawali-elementor-canvas .hero-logo-wrap img,
body.tawali-elementor-editor .hero-logo-wrap img {
  max-height: 320px;
}

body.tawali-elementor-canvas .about-image img,
body.tawali-elementor-editor .about-image img {
  max-height: 400px;
}