/*
Theme Name: Astra Child
Theme URI: https://3dplus.sa/
Description: Child theme for Astra. Implements the 3D+ Brand Book 2026 as one system.
Author: 3D+ Innovative Solutions
Author URI: https://3dplus.sa/
Template: astra
Version: 1.1.0
Text Domain: astra-child
*/

/* ==========================================================================
   3D+ BRAND LAYER - Brand Book 2026
   One source of truth for colour, type and rhythm.
   Tokens mirror Elementor Site Settings > Global Colours / Global Fonts.
   ========================================================================== */

:root{
  /* Colour */
  --3d-azure:      #05A3D5;
  --3d-indigo:     #2B3386;
  --3d-gradient:   linear-gradient(135deg, #05A3D5 0%, #2B3386 100%);
  --3d-ink:        #16181D;
  --3d-slate:      #5A6068;
  --3d-mist:       #F5F6F8;
  --3d-paper:      #FFFFFF;
  --3d-hairline:   #E4E7EB;
  --3d-azure-50:   #E7F6FC;
  --3d-azure-700:  #04769B;

  /* Rhythm */
  --3d-max:        1200px;
  --3d-gutter:     clamp(20px, 5vw, 48px);
  --3d-radius:     10px;
}

/* --------------------------------------------------------------------------
   1. ONE CONTENT EDGE
   Before this, section headings began at 120 / 130 / 134 / 159px on the same
   page because every section carried its own padding. One container, one edge.
   -------------------------------------------------------------------------- */
/* Top-level sections only - nested containers keep their own padding so that
   cards and columns are not double-indented. */
.elementor > .elementor-section,
.elementor > .e-con{
  padding-inline: 0;
}

.elementor > .elementor-section > .elementor-container,
.elementor > .e-con > .e-con-inner{
  max-width: var(--3d-max);
  margin-inline: auto;
  padding-inline: var(--3d-gutter);
}

/* Full-bleed sections keep their background edge-to-edge. */
.elementor > .elementor-section.elementor-section-full_width > .elementor-container,
.elementor > .e-con-full > .e-con-inner{
  max-width: none;
}

/* --------------------------------------------------------------------------
   2. TYPE - Cairo for headings and Arabic, Inter for body, UI and data
   -------------------------------------------------------------------------- */
body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-icon-list .elementor-icon-list-text,
button, input, select, textarea{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.site-title, .entry-title{
  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}

/* Arabic always sets in Cairo, never letter-spaced. */
[lang="ar"], [dir="rtl"], .rtl, :lang(ar){
  font-family: 'Cairo', system-ui, sans-serif;
  letter-spacing: 0 !important;
}

/* Figures line up in columns wherever numbers are shown. */
.elementor-counter-number, .elementor-counter,
table td, table th, .3d-figure{
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. HEADER - the logo was oversized and overhanging the nav
   -------------------------------------------------------------------------- */
.elementor-widget-theme-site-logo img,
.elementor-widget-image .elementor-widget-container > a > img.3d-logo,
.site-header .custom-logo-link img{
  max-height: 56px;
  width: auto;
}
@media (max-width: 767px){
  .elementor-widget-theme-site-logo img,
  .site-header .custom-logo-link img{ max-height: 40px; }
}

/* --------------------------------------------------------------------------
   4. INTERACTION - one accent, used once
   -------------------------------------------------------------------------- */
a{ color: var(--3d-azure); }
a:hover{ color: var(--3d-azure-700); }

:focus-visible{
  outline: 2px solid var(--3d-azure);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. MOBILE - consistent gutter, nothing escaping the viewport
   -------------------------------------------------------------------------- */
@media (max-width: 767px){
  html, body{ overflow-x: hidden; }

  .elementor-section > .elementor-container,
  .e-con > .e-con-inner{ padding-inline: 20px; }

  /* Long words and URLs must not force a sideways scroll. */
  h1, h2, h3, h4, p, li, .elementor-heading-title{
    overflow-wrap: break-word;
  }

  /* Media never exceeds its column. */
  img, video, iframe, canvas, svg{ max-width: 100%; height: auto; }
}

/* --------------------------------------------------------------------------
   6. LEADING - Brand Book: body 1.65, H1 1.1, H2 1.2.
   Several widgets carried a line-height below 1 (one was 0.6), which only
   looked right while the text happened to fit on a single line. These are
   floors, not overrides - anything already more generous is left alone.
   -------------------------------------------------------------------------- */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li{
  line-height: 1.65;
}

.elementor-widget-heading .elementor-heading-title,
h1, h2, h3, h4{
  line-height: 1.15;
}

/* Display-scale headings keep the tighter brand leading. */
.elementor-widget-heading .elementor-heading-title[style*="font-size: 4"],
.elementor-widget-heading .elementor-heading-title[style*="font-size: 5"],
.elementor-widget-heading .elementor-heading-title[style*="font-size: 6"],
.elementor-widget-heading .elementor-heading-title[style*="font-size: 7"]{
  line-height: 1.05;
}

/* ---------------------------------------------------------------------------
   7. CONTACT PAGE
   The hero container is pulled up under the header by a negative offset, which
   hid the H1 behind the navigation bar. Reset it and give the section room.
   --------------------------------------------------------------------------- */
body.page-id-731 .elementor > .e-con:first-child,
body.page-id-731 .elementor > .elementor-section:first-child{
	margin-top:0 !important;
	padding-top:clamp(40px,6vw,88px);
}

/* ---------------------------------------------------------------------------
   8. ABOUT PAGE
   The theme's page title rendered as dark text on the dark opening section and
   duplicated the H1 inside the content. Hide it; the content supplies its own.
   --------------------------------------------------------------------------- */
body.page-id-3152 .entry-header,
body.page-id-3152 .ast-archive-description,
body.page-id-3152 header.page-header{
	display:none;
}
body.page-id-3152 .elementor > .e-con:first-child,
body.page-id-3152 .elementor > .elementor-section:first-child{
	margin-top:0 !important;
}

/* ---------------------------------------------------------------------------
   9. HEALTHCARE HERO
   The hero column is 406px, sized when the word was MEDICAL. HEALTHCARE is
   three characters longer and was breaking mid-word. Scale it to the column.
   --------------------------------------------------------------------------- */
body.page-id-2961 .elementor-element-40f77f1 .elementor-heading-title{
	font-size:clamp(30px,5.6vw,64px) !important;
	line-height:1.12 !important;
	letter-spacing:-0.01em !important;
	white-space:nowrap;
}
@media (max-width:480px){
	body.page-id-2961 .elementor-element-40f77f1 .elementor-heading-title{white-space:normal;}
}