/* ==========================================================================
   SIPDC THEME — single source of truth for brand colors & typography.

   2026 refresh: KEEPS the original SIPDC brand palette (green / gold /
   cream) exactly as before — only the type system changed, to a clean
   multilingual stack tuned for four scripts: Latin (English), Ethiopic
   (Amharic, Sidama Afoo), and Han (Chinese). Every color and font below
   is still exposed through the same --sipdc-* / --font-* custom property
   names used throughout the codebase, so this file is the ONLY place
   that needs to change — every component, page, and the admin panel
   inherit automatically.

   Text colors were tuned for contrast against these exact brand
   backgrounds (WCAG 2.1 AA, verified against both white #FFFFFF and the
   brand cream background #F8F5EE):
     --sipdc-text        on white/cream : 17.2:1 / 15.8:1  (AA normal text)
     --sipdc-text-muted  on white/cream :  7.6:1 /  6.9:1  (AA normal text —
       the ORIGINAL muted gray #6B7280 only hit 4.44:1 on cream, just
       under the 4.5:1 AA line; this is a genuine fix, not a re-theme)
     white on --sipdc-primary (green)   :  5.1:1            (AA normal text)
     dark text on --sipdc-secondary (gold) : 6.2:1 — white text on gold
       only reaches 2.4:1, which is why buttons use the computed
       *-contrast variables below instead of a hardcoded white.
   ========================================================================== */

:root {
  /* --- Brand colors (official SIPDC brand spec — unchanged) --- */
  --sipdc-primary: #2E7D32;        /* Primary Green */
  --sipdc-primary-dark: #235C27;   /* Darker shade of Primary Green, for hover states */
  --sipdc-primary-light: #4CAF50;  /* Secondary Green, used as the "light" tint of primary */
  --sipdc-secondary: #D4A017;      /* Gold */
  --sipdc-secondary-dark: #A97D12; /* Darker shade of Gold, for hover states */
  --sipdc-earth: #6B4226;
  --sipdc-cream: #F8F5EE;
  --sipdc-text: #111827;           /* Professional dark charcoal — darker/crisper than the old #1B1B1B, still reads as neutral ink, not a color shift */
  --sipdc-text-muted: #4B5563;     /* Fixes the old #6B7280, which failed AA (4.44:1) on the cream background */
  --sipdc-white: #FFFFFF;
  --sipdc-primary-contrast: #FFFFFF;   /* Text color to use on --sipdc-primary */
  --sipdc-secondary-contrast: #1B1B1B; /* Text color to use on --sipdc-secondary — dark, since white-on-gold fails AA (2.4:1) */
  --sipdc-success: #2E7D32;
  --sipdc-danger: #C0392B;
  --sipdc-warning: #D4A017;
  --sipdc-border: #E3E0D6;

  /* --- RGB channel triplets (for rgba() overlays/tints) — keep in sync
         with the hex values above. ALWAYS reference these instead of
         hardcoding rgb literals, so every overlay/tint stays on-brand. --- */
  --sipdc-primary-rgb: 46, 125, 50;
  --sipdc-primary-dark-rgb: 35, 92, 39;
  --sipdc-primary-light-rgb: 76, 175, 80;
  --sipdc-secondary-rgb: 212, 160, 23;
  --sipdc-secondary-dark-rgb: 169, 125, 18;
  --sipdc-text-rgb: 17, 24, 39;

  /* --- Typography -------------------------------------------------------
     One multilingual stack for every role (heading/body/nav/button).
     Inter covers Latin; Noto Sans Ethiopic covers Amharic + Sidama Afoo;
     Noto Sans SC covers Chinese; sans-serif is the final system fallback.
     Loaded in assets/vendor/fonts/main-fonts.css (Inter, self-hosted) and
     assets/vendor/fonts/multilingual-fonts.css (Noto Sans Ethiopic/SC).
     Headings/nav/buttons/body share one typeface but differ by weight,
     so hierarchy stays balanced and crisp across all four scripts —
     instead of relying on a second Latin-only display font like the
     previous Poppins/Cinzel pairing, which silently fell back to the
     browser default for Amharic, Sidama Afoo, and Chinese text. --- */
  --font-heading: 'Inter', 'Noto Sans Ethiopic', 'Noto Sans SC', sans-serif;
  --font-body: 'Inter', 'Noto Sans Ethiopic', 'Noto Sans SC', sans-serif;
  --font-nav: 'Inter', 'Noto Sans Ethiopic', 'Noto Sans SC', sans-serif;
  --font-button: 'Inter', 'Noto Sans Ethiopic', 'Noto Sans SC', sans-serif;

  /* --- Line-height ------------------------------------------------------
     >=1.6 globally so Ethiopic vowel markers (Amharic/Sidama Afoo) and
     Chinese character strokes never collide with the line above/below. --- */
  --sipdc-line-height: 1.6;
  --sipdc-line-height-heading: 1.5; /* headings stay slightly tighter than body copy but never below 1.5, since multi-word Amharic/Chinese headings still wrap */

  /* --- Spacing / radius (uniform across every page: cards, buttons, images) --- */
  --sipdc-radius: 0.5rem;
  --sipdc-radius-lg: 1rem;
  --sipdc-shadow: 0 2px 12px rgba(var(--sipdc-primary-rgb), 0.08);
  --sipdc-shadow-lg: 0 8px 30px rgba(var(--sipdc-primary-rgb), 0.12);
}

html { line-height: var(--sipdc-line-height); }

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--sipdc-line-height);
  color: var(--sipdc-text);
  background-color: var(--sipdc-cream);
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--sipdc-line-height-heading);
  color: var(--sipdc-primary-dark);
}

/* Single-line UI chrome (nav links, buttons, badges, pills) never wraps
   to a second line, so the >=1.6 anti-overlap rule above doesn't apply —
   these need a tighter line-height purely to center their text vertically
   inside a fixed-height control. */
.navbar-nav .nav-link, .btn, .badge, .breadcrumb-item {
  line-height: 1.3;
}

/* Headings inside an explicitly light-text context (a dark modal header,
   a dark hero band, etc.) must inherit that context's color instead of
   the rule above — otherwise a dark-green heading renders on a
   dark-green background and becomes nearly invisible. This was a real,
   confirmed bug on the Organizational Structure detail popup. */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.modal-header.text-white .modal-title,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6 {
    color: inherit;
}

a { color: var(--sipdc-primary); }
a:hover { color: var(--sipdc-secondary-dark); }

.btn { font-family: var(--font-button); font-weight: 600; border-radius: var(--sipdc-radius); }

.btn-primary { background-color: var(--sipdc-primary); border-color: var(--sipdc-primary); color: var(--sipdc-primary-contrast); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--sipdc-primary-dark); border-color: var(--sipdc-primary-dark); color: var(--sipdc-primary-contrast); }

.btn-secondary, .btn-accent { background-color: var(--sipdc-secondary); border-color: var(--sipdc-secondary); color: var(--sipdc-secondary-contrast); }
.btn-secondary:hover, .btn-accent:hover { background-color: var(--sipdc-secondary-dark); border-color: var(--sipdc-secondary-dark); color: var(--sipdc-secondary-contrast); }

.btn-outline-primary { color: var(--sipdc-primary); border-color: var(--sipdc-primary); }
.btn-outline-primary:hover { background-color: var(--sipdc-primary); border-color: var(--sipdc-primary); color: var(--sipdc-primary-contrast); }

/* Alias for any leftover Bootstrap stock-color buttons (btn-success) so
   they render in the exact brand green instead of Bootstrap's default.
   Text uses primary-contrast (not success-contrast) since this button's
   background is deliberately the primary brand color, not the separate
   "success" status color. */
.btn-success { background-color: var(--sipdc-primary); border-color: var(--sipdc-primary); color: var(--sipdc-primary-contrast); font-family: var(--font-button); font-weight: 600; border-radius: var(--sipdc-radius); }
.btn-success:hover, .btn-success:focus { background-color: var(--sipdc-primary-dark); border-color: var(--sipdc-primary-dark); color: var(--sipdc-primary-contrast); }

.text-primary { color: var(--sipdc-primary) !important; }
.text-secondary-brand { color: var(--sipdc-secondary) !important; }
.text-muted-brand { color: var(--sipdc-text-muted) !important; }
.bg-primary { background-color: var(--sipdc-primary) !important; }
.bg-secondary-brand { background-color: var(--sipdc-secondary) !important; }
.bg-cream { background-color: var(--sipdc-cream) !important; }
.bg-earth { background-color: var(--sipdc-earth) !important; }

.badge.bg-primary { background-color: var(--sipdc-primary) !important; color: var(--sipdc-primary-contrast) !important; }
.badge.bg-secondary-brand { background-color: var(--sipdc-secondary) !important; color: var(--sipdc-secondary-contrast) !important; }

.card { border: 1px solid var(--sipdc-border); border-radius: var(--sipdc-radius); box-shadow: var(--sipdc-shadow); }
.shadow-brand { box-shadow: var(--sipdc-shadow-lg) !important; }

.form-control:focus, .form-select:focus { border-color: var(--sipdc-primary-light); box-shadow: 0 0 0 0.2rem rgba(var(--sipdc-primary-light-rgb), 0.15); }
.nav-link.active, .page-link.active { color: var(--sipdc-primary) !important; }

.section-py { padding-top: 4rem; padding-bottom: 4rem; }
.section-title { position: relative; margin-bottom: 2rem; }
.section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 0.6rem;
  border-radius: 2px;
  /* Uniform two-tone underline used on every section title site-wide:
     brand green bar with a gold accent tip. */
  background: linear-gradient(90deg, var(--sipdc-primary) 0%, var(--sipdc-primary) 70%, var(--sipdc-secondary) 70%, var(--sipdc-secondary) 100%);
}
/* When a section title is centered (e.g. Latest News & Updates, Upcoming
   Events), the underline bar must center under the text too, instead of
   sticking to the left edge of the heading's full-width box. This keeps
   every section heading — left-aligned or centered — visually uniform. */
.section-title.text-center::after,
.text-center > .section-title::after { margin-left: auto; margin-right: auto; }
.hero-carousel .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* =========================================================================
   HERO PHOTO ANIMATION — slow "Ken Burns" zoom/pan on the active slide's
   background photo, plus a soft rotating light sweep and a slow-orbiting
   gold glow layered above it. Gives the hero a premium, cinematic feel
   instead of a static photo, similar to top-tier investment-agency sites.
   Respects prefers-reduced-motion for accessibility.
   ========================================================================= */
.hero-carousel .hero-bg-animate {
    animation: heroKenBurns 9s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes heroKenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(-1.5%, -1.5%); }
}

.hero-carousel .hero-shine {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: soft-light;
    background: conic-gradient(
        from 0deg,
        rgba(255,255,255,0) 0deg,
        rgba(255,255,255,0.35) 18deg,
        rgba(255,255,255,0) 55deg,
        rgba(var(--sipdc-secondary-rgb), 0) 180deg,
        rgba(var(--sipdc-secondary-rgb), 0.28) 205deg,
        rgba(var(--sipdc-secondary-rgb), 0) 240deg,
        rgba(255,255,255,0) 360deg
    );
    animation: heroShineRotate 16s linear infinite;
}
@keyframes heroShineRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* A slow-drifting soft glow that adds depth without competing with the
   headline text — sits between the photo and the dark scrim. */
.hero-carousel .hero-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 55% at 80% 20%, rgba(var(--sipdc-secondary-rgb), 0.22) 0%, rgba(var(--sipdc-secondary-rgb), 0) 70%);
    animation: heroGlowDrift 12s ease-in-out infinite alternate;
}
@keyframes heroGlowDrift {
    0%   { opacity: 0.55; transform: translate(0, 0) scale(1); }
    100% { opacity: 0.9;  transform: translate(-4%, 3%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-carousel .hero-bg-animate,
    .hero-carousel .hero-shine,
    .hero-carousel .hero-glow { animation: none; }
}

/* Video slides: the glow/shine overlays sit in the same DOM spot but need
   to paint ABOVE the video/iframe (z-index 1) and below the dark shade
   (z-index 2) instead of their default z-index:0 used on photo slides,
   or they'd be invisible behind the opaque video. */
.hero-bg-video .hero-glow,
.hero-bg-video .hero-shine {
    z-index: 1;
}

.hero-carousel .carousel-item {
    height: 100%; /* fill the .hero-carousel wrapper (see assets/css/frontend.css for the
                     actual height + its responsive breakpoints) instead of hardcoding a
                     second, different pixel height here that could drift out of sync */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* =========================================================================
   LOGO BADGE — a small rounded "chip" so the multi-tone SIPDC logo stays
   crisp and visible no matter how dark the surface behind it is (footer,
   admin sidebar, etc). Never apply brightness/invert filters to the logo —
   it already carries its own light backing shape and loses all detail
   when flattened to a silhouette.
   ========================================================================= */
.brand-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sipdc-white);
    border-radius: var(--sipdc-radius);
    padding: 8px 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* =========================================================================
   ANIMATED BRAND OVERLAY CARDS — reusable on About/Mission/Vision/Core
   Values/Leadership sections so every "story" card across the site shares
   the same lift + glow + brand-color overlay treatment.
   ========================================================================= */
.brand-overlay-card {
    position: relative;
    background: var(--sipdc-white);
    border-radius: var(--sipdc-radius-lg);
    border: 1px solid var(--sipdc-border);
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-overlay-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--sipdc-primary-rgb), 0.95) 0%, rgba(var(--sipdc-secondary-rgb), 0.92) 100%);
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 1;
}
.brand-overlay-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sipdc-shadow-lg);
}
.brand-overlay-card:hover::before { opacity: 1; }
.brand-overlay-card .boc-inner {
    position: relative;
    z-index: 2;
    transition: color 0.45s ease;
}
.brand-overlay-card:hover .boc-inner,
.brand-overlay-card:hover .boc-inner * { color: #fff !important; }
.brand-overlay-card:hover .boc-icon {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}
.brand-overlay-card .boc-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: rgba(var(--sipdc-primary-rgb), 0.1);
    color: var(--sipdc-primary);
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 1.25rem;
}
.brand-overlay-card:hover .boc-icon { transform: scale(1.12) rotate(-6deg); }

/* ==========================================================================
   RTL LAYOUT SUPPORT
   Bootstrap 5.3's spacing/float utilities (ms-*, me-*, float-start/end, etc.)
   already use CSS logical properties and flip automatically once dir="rtl"
   is set on <html> — no separate rtl.css needed for those. The handful of
   custom, physically-positioned components below need explicit overrides.
   None of the four languages shipped today (English, Amharic, Sidama Afoo,
   Chinese) are RTL; this is future-proofing for the day an RTL language
   (e.g. Arabic) is added via Admin Panel > System > Languages.
   ========================================================================== */
html[dir="rtl"] .skip-to-content {
    left: auto;
    right: -9999px;
    border-radius: 0 0 0 8px;
}
html[dir="rtl"] .skip-to-content:focus {
    right: 0;
    left: auto;
}
html[dir="rtl"] .oss-card-badge {
    right: auto;
    left: 8px;
}
html[dir="rtl"] .investor-status-badge {
    right: auto;
    left: 12px;
}
html[dir="rtl"] .service-step-flow {
    border-left: none;
    border-right: 2px solid var(--sipdc-secondary);
}
html[dir="rtl"] .service-step-flow li::before {
    left: auto;
    right: -15px;
}