/*
Theme Name: Bamyan HSE
Theme URI: https://bamyangroup.com
Author: Bamyan Group
Author URI: https://bamyangroup.com
Description: A clean, modern, professional WordPress theme for BAMYAN Group of HSE Professional Training and Inspection. Built with native Gutenberg blocks, a custom Courses post type, course categories, GCC flag components, and full RTL/Arabic support. No page builder required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bamyan-hse
Tags: custom-colors, custom-menu, custom-logo, translation-ready, rtl-language-support, threaded-comments, block-styles, wide-blocks
*/

/* ==========================================================================
   DESIGN TOKENS
   Palette:
     --navy        #0B2545  deep industrial navy   (primary / headings / header-footer)
     --navy-2      #123163  secondary navy (gradients, hover)
     --gold        #C9A227  professional gold (accents, dividers, badges)
     --gold-light  #E8C766  gold tint
     --orange      #E85D04  safety orange (CTAs, alerts, highlight)
     --white       #FFFFFF
     --off-white   #F6F7F9  section background
     --steel       #4A5568  body text on white
     --steel-light #8993A4  muted text
   Type:
     Display: "Barlow Condensed" (technical, stencil-adjacent, industrial signage feel)
     Body:    "Inter" (clean, highly legible, strong Arabic pairing via Noto Sans Arabic)
   Signature element: the "hazard bar" — a repeating diagonal navy/gold stripe,
   used only as a thin structural divider (never decorative filler), echoing
   physical safety barrier tape used on every site this audience works on.
   ========================================================================== */

:root{
  --navy:#0B2545;
  --navy-2:#123163;
  --navy-tint:#E9F1FF;
  --gold:#5EA8FF;
  --gold-light:#8FC4FF;
  --orange:#2F6FED;
  --orange-dark:#1B4FC4;
  --white:#FFFFFF;
  --off-white:#F4F7FC;
  --steel:#3E4757;
  --steel-light:#7C8595;
  --border:#E2E8F2;
  --radius:12px;
  --shadow:0 4px 20px rgba(11,37,69,0.07);
  --shadow-lg:0 16px 40px rgba(11,37,69,0.14);
  --font-display:'Barlow Condensed', 'Segoe UI', Tahoma, sans-serif;
  --font-body:'Inter', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --container:1240px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--steel);
  background:var(--white);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--navy);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--orange);}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--navy);
  line-height:1.15;
  font-weight:600;
  letter-spacing:.2px;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.1rem,4vw,3.4rem);font-weight:700;text-transform:none;}
h2{font-size:clamp(1.6rem,3vw,2.3rem);}
h3{font-size:1.35rem;}
p{margin:0 0 1.1em;}
ul{margin:0 0 1.1em;padding-inline-start:1.2em;}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);overflow:hidden;height:1px;width:1px;}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:72px 0;}
.section--tight{padding:48px 0;}
.section--off{background:var(--off-white);}
.section--navy{background:var(--navy);color:#DCE4F2;}
.section--navy h2, .section--navy h3{color:var(--white);}
.section--navy p{color:#C4D0E5;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-size:.85rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--orange);font-weight:600;margin-bottom:10px;
}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--orange);display:inline-block;}

.section-head{max-width:720px;margin:0 0 40px;}
.section-head.center{margin-inline:auto;text-align:center;}

/* Signature divider — smooth modern gradient bar (kept subtle, used sparingly) */
.hazard-bar{
  height:6px;width:100%;
  background:linear-gradient(90deg, var(--navy) 0%, var(--orange) 50%, var(--gold-light) 100%);
}
.hazard-bar--thin{height:3px;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:600;letter-spacing:.4px;
  font-size:1.02rem;padding:13px 28px;border-radius:var(--radius);
  border:2px solid transparent;cursor:pointer;transition:all .18s ease;
  text-transform:uppercase;
}
.btn-primary{background:var(--orange);border-color:var(--orange);color:var(--white);}
.btn-primary:hover{background:var(--orange-dark);border-color:var(--orange-dark);color:var(--white);}
.btn-secondary{background:transparent;border-color:var(--white);color:var(--white);}
.btn-secondary:hover{background:var(--white);color:var(--navy);}
.btn-navy{background:var(--navy);border-color:var(--navy);color:var(--white);}
.btn-navy:hover{background:var(--navy-2);border-color:var(--navy-2);}
.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy);}
.btn-outline:hover{background:var(--navy);color:var(--white);}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy);}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light);}
.btn-block{width:100%;}

/* Cards */
.card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}

/* Grid utilities */
.grid{display:grid;gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}

@media (max-width:960px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-6{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr;}
  .section{padding:48px 0;}
}

/* RTL adjustments */
html[dir="rtl"] .eyebrow::before{order:2;}
html[dir="rtl"] .hazard-bar{background:linear-gradient(270deg, var(--navy) 0%, var(--orange) 50%, var(--gold-light) 100%);}