/* Taym Plast — Clean Corporate v3.3 (full-color logos, compact info, single font) */

/* ===== Palette (Yellow • Blue • White • Black) ===== */
:root{
  --blue:#113A8B;     /* links/buttons/headings */
  --yellow:#F2B705;   /* accents */
  --ink:#1F2328;      /* main text */
  --muted:#667085;    /* secondary */
  --bg:#F6F8FB;       /* page background */
  --surface:#FFFFFF;  /* cards/sections */
  --border:#E6E9EF;   /* hairline */
  --shadow:0 10px 28px rgba(17,26,36,.06);
}

/* ===== Base & Typography ===== */
html{scroll-behavior:smooth}
body{
  font:400 16px/1.6 "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  color:var(--ink);
}
.bg-page{ background:var(--bg) }
.topline{ height:6px; background:linear-gradient(90deg,var(--yellow),var(--blue)) }

/* Use Inter everywhere */
h1,h2,h3,h4,h5,h6,.navbar,.btn, .sec-title{ font-family:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif }

/* ===== Navbar ===== */
.border-bottom-soft{ border-bottom:1px solid var(--border) }
.navbar-light .nav-link{ color:var(--ink); opacity:.85 }
.navbar-light .nav-link:hover{ opacity:1; color:var(--blue) }
.brand-logo{ height:30px; width:auto }
.brand-type{ display:flex; flex-direction:column; line-height:1 }
.tt-strong{ font-weight:800; letter-spacing:.2px; color:#0b0b0c }
.tt-sub{ font-size:.74rem; color:var(--muted) }
.lang-switch{ min-width:110px }

/* ===== Hero (tighter) ===== */
.hero{ padding:96px 0 24px }
.hero-title{ font-weight:800; color:#0b0b0c; font-size:clamp(28px,5vw,38px); letter-spacing:.2px; margin:0 0 .3rem }
.hero-desc{ color:var(--muted); max-width:62ch; margin:0 0 .5rem }
.keypoints{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.6rem }
.chip{ background:#fff; border:1px solid var(--border); border-radius:999px; padding:.22rem .55rem; font-size:.84rem }

/* Buttons (unchanged style, tighter padding) */
.btn-lgx{ padding:.5rem .9rem; font-weight:700; letter-spacing:.2px }
.btn-blue{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 10px 24px rgba(17,58,139,.18) }
.btn-blue:hover{ filter:brightness(.96) }
.btn-outline-blue{ background:#fff; color:var(--blue); border:1px solid #cbd5e1 }
.btn-outline-blue:hover{ background:#eef5ff }

/* ===== Sections ===== */
.section{ padding:32px 0 }        /* was 40px → tighter */
.strip{ background:#fff }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:6px }
.sec-title{ font-size:clamp(22px,4vw,26px); font-weight:800; color:#0b0b0c; margin:0 }
.section-head .bar{ height:3px; background:var(--yellow); width:72px; border-radius:3px }
.muted{ color:var(--muted) }
.tiny{ font-size:.85rem }

/* ===== Cards ===== */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow) }
.card.slim{ box-shadow:none }
.card.info{ box-shadow:none; padding:14px }   /* smaller padding so content fits */

/* ===== Quick Info / Contact (compact grid labels) ===== */
.contact-list{ list-style:none; padding:0; margin:0 }
.contact-list li{
  display:grid;
  grid-template-columns: 110px 1fr;   /* label | value on one line */
  align-items:center;
  gap:.5rem;
  padding:.28rem 0;                   /* tighter rows */
  border-bottom:1px dashed #edf0f5;
}
.contact-list li:last-child{ border-bottom:0 }
.contact-list li span{ color:#3f4756; font-weight:700; font-size:.92rem }
.contact-list li a{ color:var(--blue); text-decoration:none; word-break:break-word }
.contact-list li a:hover{ text-decoration:underline }

/* On small screens, allow labels to shrink a bit */
@media (max-width:576px){
  .contact-list li{ grid-template-columns: 95px 1fr }
}

/* ===== Clients (full color logos) ===== */
.client-tile{
  background:#fff; border:1px solid var(--border);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  height:64px; transition:transform .15s ease, box-shadow .15s ease;
}
.client-logo{
  max-height:40px; width:auto;            /* remove grayscale to show true colors */
  filter:none; opacity:1;
}
.client-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }

/* ===== Divisions / Products cards (no emoji) ===== */
.card .card-body{ padding:14px }          /* tighter inner spacing */
.card .card-title{ margin:0 0 .15rem; font-weight:700; font-size:1.02rem; color:#0b0b0c }
.card .card-text{ color:var(--muted); margin:0 }

/* ===== Media blocks ===== */
.media-embed,.map-embed{
  position:relative; width:100%; padding-top:56.25%;
  border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff
}
.media-embed iframe,.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* ===== Footer ===== */
.footer{ border-top:1px solid var(--border); background:#fff; color:var(--muted); padding:14px 0 }

/* ===== RTL helpers ===== */
[dir='rtl'] .ms-auto{ margin-left:0!important; margin-right:auto!important }
[dir='rtl'] .ms-lg-3{ margin-left:0!important; margin-right:1rem!important }
[dir='rtl'] .text-start{ text-align:right!important }

/* ===== Visible section IDs (editing aids) ===== */
.sec-anchor{
  position: relative;
  height: 0; /* no extra vertical space */
}
.sec-anchor::after{
  content: attr(data-label);
  position: sticky;
  top: 74px; /* floats below the fixed navbar */
  z-index: 1020;
  display: inline-block;
  font: 700 12px/1 "Inter", ui-sans-serif, system-ui;
  color:#111827;
  background: #F2B705;           /* yellow pill */
  border:1px solid #E6B800;
  border-radius: 999px;
  padding: .28rem .55rem;
  margin: .25rem 0 .35rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

/* Hide all badges when not needed */
.hide-ids .sec-anchor::after{ display:none !important; }

/* ===== Compact lists for S01-hero (Quick Info) & S07-contact ===== */

/* S01: the sec-anchor is immediately followed by the <header> hero */
#S01-hero + header .card.info { padding: 10px; }                  /* was 14px */
#S01-hero + header .contact-list li {
  padding: .16rem 0;                                              /* tighter rows */
  grid-template-columns: 100px 1fr;                               /* slightly narrower label column */
}
#S01-hero + header .contact-list li span {
  font-size: .9rem;                                               /* a touch smaller label */
  letter-spacing: .1px;
}
#S01-hero + header .contact-list li a { line-height: 1.35; }      /* tighter line-height for values */

/* S07: the sec-anchor is immediately followed by the contact <section> */
#S07-contact + section .contact-list li {
  padding: .18rem 0;                                              /* tighter than global */
  grid-template-columns: 100px 1fr;
}
#S07-contact + section .contact-list li span {
  font-size: .9rem;
  letter-spacing: .1px;
}
#S07-contact + section .contact-list li a { line-height: 1.35; }

@media (max-width: 576px) {
  #S01-hero + header .contact-list li,
  #S07-contact + section .contact-list li {
    grid-template-columns: 92px 1fr;                              /* keep it neat on phones */
  }
}

/* Arabic typography — activates for Arabic locale or RTL pages */
:lang(ar), [dir="rtl"] body {
  font-family: "Tajawal", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0; /* Arabic reads better without extra tracking */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optional: slightly heavier headings in Arabic for balance */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] .sec-title, 
[dir="rtl"] .tt-strong, [dir="rtl"] .hero-title {
  font-weight: 700;
}

/* Keep chips/badges compact in Arabic */
[dir="rtl"] .chip { letter-spacing: 0 }

:lang(ar) {
  font-feature-settings: "lnum" 1, "tnum" 1;
}



/* English typography (LTR / English locale) */
:lang(en), [dir="ltr"] body {
  font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings a bit bolder for presence */
:lang(en) h1, :lang(en) h2, :lang(en) .sec-title, 
[dir="ltr"] .hero-title, [dir="ltr"] .tt-strong { font-weight: 800; }

/* Arabic stays on Tajawal (from earlier setup) */
:lang(ar), [dir="rtl"] body {
  font-family: "Tajawal", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
}


/* Section ID helpers  remove to show*/
.sec-anchor { position: relative; }
.show-ids .sec-anchor::after { content: attr(data-label); /* was showing */ }
.hide-ids .sec-anchor::after,
.sec-anchor::after { content: none !important; }