/* =============================================================
   CASI homepage — modern design system (single, disciplined layer)
   Loaded after the page's inline styles (and cache-busted) so these
   tokens and section styles win. One palette, one type scale, one
   shadow scale, one radius scale — applied consistently.
   ============================================================= */
:root {
    --c-teal-900: #04302a;
    --c-teal-800: #043d35;
    --c-teal-700: #054239;
    --c-teal-600: #0a5d50;
    --c-teal-500: #428177;
    --c-gold-500: #b9a779;
    --c-gold-400: #d4af37;
    --c-ink: #15241f;
    --c-body: #41514c;
    --c-muted: #6b7a76;
    --c-surface: #ffffff;
    --c-tint: #f4f8f7;
    --c-line: #e7efec;

    --grad-teal: linear-gradient(160deg, #002623 0%, #054239 48%, #0a5d50 100%);
    --grad-gold: linear-gradient(135deg, #d4af37 0%, #b9a779 100%);
    --grad-icon: linear-gradient(135deg, #0a5d50 0%, #428177 100%);

    --sh-sm: 0 1px 2px rgba(4, 48, 42, .04), 0 2px 10px rgba(4, 48, 42, .05);
    --sh-md: 0 8px 24px rgba(4, 48, 42, .08);
    --sh-lg: 0 22px 48px rgba(4, 48, 42, .14);

    --r-card: 18px;
    --r-pill: 999px;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--c-body);
    background: #fbfdfc;
}

/* ── Section rhythm + alternating surfaces ────────────────── */
.services-section,
.news-section,
.announcements-section,
.president-message { padding: 5.5rem 0 !important; position: relative; }
.services-section { background: var(--c-surface) !important; }
.news-section { background: var(--c-tint) !important; }
.president-message { background: var(--c-surface) !important; }

/* ── Section headers ──────────────────────────────────────── */
.section-header { margin-bottom: 3rem; text-align: center; }
.section-title {
    font-weight: 800 !important;
    font-size: clamp(1.7rem, 2.4vw, 2.25rem) !important;
    color: var(--c-teal-700) !important;
    letter-spacing: -.015em;
    position: relative;
    display: inline-block;
    padding-bottom: .85rem;
    margin-bottom: .35rem !important;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: 70px;
    height: 4px;
    border-radius: 4px;
    background: var(--grad-gold);
}
[dir="rtl"] .section-title::after { transform: translateX(50%); }
.section-description {
    color: var(--c-muted) !important;
    font-size: 1.02rem;
    max-width: 600px;
    margin-inline: auto;
}

/* =============================================================
   HERO — one deep-teal government banner with the navbar
   ============================================================= */
/* Seamless navbar → hero: drop the body's top padding and let the hero
   background run up UNDER the fixed navbar, so there is no light gap/seam. */
body { padding-top: 0 !important; }
.hero-section,
.bg-gradient-primary {
    background: var(--grad-teal) !important;
    position: relative;
    overflow: hidden;
    margin-top: 0 !important;
    padding: calc(80px + 3.5rem) 0 5.5rem !important;
}
/* keep hero content above the decorative pattern */
.hero-section > .container { position: relative; z-index: 2; }
/* Damascus motif as a real <img> (a complex SVG can be unreliable as a CSS
   background) — a large gold ornament bleeding from the emblem-side corner. */
/* FIXED position — always the LTR layout (top-left corner), never flipped for RTL.
   Uses physical `left`/`top` so direction has no effect. Opaque at the top-left,
   fading inward toward the right and the bottom. */
.hero-pattern {
    position: absolute;
    top: -40px;
    left: -40px;
    right: auto;
    width: 640px;
    height: auto;
    opacity: .22;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: radial-gradient(135% 135% at 0% 0%, #000 0%, rgba(0, 0, 0, .4) 38%, transparent 72%);
    mask-image: radial-gradient(135% 135% at 0% 0%, #000 0%, rgba(0, 0, 0, .4) 38%, transparent 72%);
}
.hero-section h1.display-4 {
    position: relative;
    font-weight: 800 !important;
    font-size: clamp(2rem, 3.4vw, 3rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em;
    padding-bottom: 1.1rem;
    margin-bottom: 1.4rem !important;
}
.hero-section h1.display-4::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 96px;
    height: 4px;
    border-radius: 4px;
    background: var(--grad-gold);
}
.hero-section .lead {
    color: rgba(255, 255, 255, .88) !important;
    font-size: 1.15rem !important;
    line-height: 1.8;
    max-width: 540px;
}
.hero-section .btn-light {
    background: var(--grad-gold) !important;
    color: var(--c-teal-900) !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: .8rem 1.6rem !important;
    box-shadow: 0 10px 24px rgba(185, 167, 121, .35) !important;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease) !important;
}
.hero-section .btn-light:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(185, 167, 121, .45) !important; }
.hero-section .btn-outline-light {
    border-width: 2px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: .8rem 1.6rem !important;
    transition: transform .25s var(--ease), background .25s var(--ease) !important;
}
.hero-section .btn-outline-light:hover { background: rgba(255, 255, 255, .12) !important; transform: translateY(-2px); }
.hero-section .social-icon-link {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    transition: all .25s var(--ease);
}
.hero-section .social-icon-link i { font-size: 1.05rem; }
.hero-section .social-icon-link:hover {
    background: var(--grad-gold);
    color: var(--c-teal-900);
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(185, 167, 121, .35);
}
/* Emblem: clean, no frame or shadow */
.hero-section .hero-logo {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    max-width: 500px !important;
    width: 100%;
}
@media (max-width: 991px) {
    .hero-section .hero-logo { max-width: 360px !important; }
}

/* =============================================================
   SERVICE CARDS — modern, with a circular gradient icon badge
   ============================================================= */
.service-card {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--r-card) !important;
    box-shadow: var(--sh-sm) !important;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease) !important;
    overflow: hidden;
    height: 100%;
}
.service-card::before {
    height: 4px !important;
    background: var(--grad-gold) !important;
}
.service-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--sh-lg) !important;
    border-color: transparent !important;
}
.service-card .card-body { padding: 2.4rem 1.75rem !important; }
.service-card .service-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.5rem !important;
    border-radius: 20px;
    background: var(--grad-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(10, 93, 80, .28);
    transition: transform .35s var(--ease), border-radius .35s var(--ease);
}
.service-card:hover .service-icon { transform: translateY(-2px) rotate(-4deg); border-radius: 28px; }
.service-card .service-icon i,
.service-card .service-icon i.fas,
.service-card .service-icon i[class*="fa-"],
.service-card .service-icon i::before,
.service-card .service-icon svg {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;  /* overrides home.css dark fill */
    fill: #fff !important;
    font-size: 1.9rem !important;
}
.service-card h3,
.service-card h4,
.service-card .card-title {
    color: var(--c-ink) !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    margin-bottom: .65rem !important;
}
.service-card p { color: var(--c-muted) !important; font-size: .96rem; line-height: 1.75; }
.service-card .btn,
.service-card a.btn {
    border-radius: var(--r-pill) !important;
    font-weight: 600 !important;
    border: 1px solid var(--c-line) !important;
    color: var(--c-teal-700) !important;
    background: var(--c-tint) !important;
    padding: .5rem 1.1rem !important;
    transition: all .25s var(--ease) !important;
}
.service-card:hover .btn { background: var(--c-teal-700) !important; color: #fff !important; border-color: var(--c-teal-700) !important; }

/* =============================================================
   NEWS CARDS — modern, with a real image treatment
   ============================================================= */
.news-card-modern {
    background: var(--c-surface) !important;
    border-radius: var(--r-card) !important;
    box-shadow: var(--sh-sm) !important;
    border: 1px solid var(--c-line) !important;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease) !important;
    overflow: hidden;
    height: 100%;
}
.news-card-modern:hover { transform: translateY(-8px) !important; box-shadow: var(--sh-lg) !important; border-color: transparent !important; }
.news-card-image {
    height: 200px !important;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(212, 175, 55, .35), transparent 55%),
        var(--grad-icon) !important;
}
/* decorative emblem for image-less news (calm, not flat olive) */
.news-image-placeholder { color: rgba(255, 255, 255, .9) !important; font-size: 2.6rem !important; opacity: .9 !important; }
.news-image-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/images/pattern.svg') repeat;
    background-size: 110px 110px;
    opacity: .10;
}
.news-image { object-fit: cover; transition: transform .5s var(--ease) !important; }
.news-card-modern:hover .news-image { transform: scale(1.06) !important; }
.news-badge {
    background: rgba(4, 48, 42, .55) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--r-pill) !important;
    font-weight: 600 !important;
}
.news-card-content { padding: 1.5rem !important; }
.news-title, .news-title a { color: var(--c-ink) !important; font-weight: 700 !important; transition: color .25s ease; }
.news-title a:hover { color: var(--c-teal-700) !important; }
.news-card-footer { border-top: 1px solid var(--c-line); color: var(--c-muted); }

/* =============================================================
   ANNOUNCEMENT ticker cards
   ============================================================= */
.announcement-banner-card {
    border-radius: var(--r-card) !important;
    box-shadow: var(--sh-sm) !important;
    border: 1px solid var(--c-line) !important;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease) !important;
}
.announcement-banner-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md) !important; }

/* =============================================================
   PRESIDENT message — refined quote card
   ============================================================= */
.president-message .card {
    border: 1px solid var(--c-line) !important;
    border-radius: var(--r-card) !important;
    box-shadow: var(--sh-md) !important;
}

/* =============================================================
   QUICK LINKS — soft cards with a circular badge (lighter than services)
   ============================================================= */
.quick-links { background: var(--c-tint) !important; padding: 5rem 0 !important; }
.quick-link-card {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--r-card) !important;
    box-shadow: var(--sh-sm) !important;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease) !important;
}
.quick-link-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md) !important; }
.quick-link-card .card-body { padding: 2rem 1.25rem !important; }
.quick-link-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.1rem !important;
    border-radius: 50%;
    background: #e9f3f0;
    font-size: 1.45rem !important;
    transition: background .3s var(--ease), transform .3s var(--ease);
}
.quick-link-card:hover i { background: #d6ebe4; transform: translateY(-2px) scale(1.05); }
.quick-link-card .card-title { color: var(--c-ink) !important; font-weight: 700 !important; font-size: 1.1rem; }
.quick-link-card .card-text { color: var(--c-muted) !important; font-size: .92rem; }

/* "Load more news" and similar pill buttons */
.news-section .btn,
.btn-government-green {
    border-radius: var(--r-pill) !important;
    font-weight: 600 !important;
}

/* ── Generic buttons on the page ─────────────────────────── */
.btn-modern { border-radius: 12px !important; font-weight: 600 !important; }

/* =============================================================
   NAVBAR is part of the hero: transparent over the banner, solid on scroll
   (homepage-only, since home-polish.css is loaded only here).
   ============================================================= */
#mainNavbar:not(.is-scrolled) {
    background: transparent !important;
    box-shadow: none !important;
}

/* =============================================================
   Wavy, living hero bottom — two soft white waves drifting gently
   ============================================================= */
.hero-section { padding-bottom: 9.5rem !important; }
.hero-waves {
    position: absolute;
    inset-inline: -4%;
    bottom: -1px;
    width: 108%;
    height: 170px;
    z-index: 4;
    line-height: 0;
    pointer-events: none;
}
.hero-waves svg { width: 100%; height: 100%; display: block; }
.hero-waves .wave { fill: #ffffff; will-change: transform; }
.hero-waves .wave-back  { opacity: .35; animation: heroWave 7s ease-in-out infinite alternate; }
.hero-waves .wave-mid   { opacity: .6;  animation: heroWave 5s ease-in-out infinite alternate-reverse; }
.hero-waves .wave-front { opacity: 1;   animation: heroWave 4s ease-in-out infinite alternate; }
@keyframes heroWave {
    from { transform: translateX(-2.6%); }
    to   { transform: translateX(2.6%); }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .service-card, .news-card-modern, .announcement-banner-card,
    .news-image, .hero-logo, .btn, .btn-modern, .service-icon,
    .hero-section .btn-light, .hero-section .btn-outline-light,
    .hero-section .social-icon-link { transition: none !important; }
    .hero-waves .wave { animation: none !important; }
    .hqb-item, .hqb-arrow { transition: none !important; }
}

/* ── Modern quick-action bar (below hero) ──────────────────── */
.home-quick-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 5;
}
.hqb-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #eef2f1;
    border-radius: 16px;
    padding: 1.05rem 1.35rem;
    text-decoration: none;
    color: #15241f;
    box-shadow: 0 12px 32px rgba(4, 48, 42, 0.09);
    transition: transform .2s ease, box-shadow .2s ease;
}
.hqb-item:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(4, 48, 42, .15); color: #15241f; }
.hqb-icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff;
    background: linear-gradient(135deg, #0a5d50, #428177);
}
.hqb-item:nth-child(2) .hqb-icon { background: linear-gradient(135deg, #b9a779, #9a8a5f); }
.hqb-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.hqb-text strong { font-size: 1.05rem; font-weight: 700; }
.hqb-text small { color: #6b7a76; font-size: .82rem; }
.hqb-arrow { color: #cbd5e1; font-size: .95rem; transition: transform .2s ease; flex-shrink: 0; }
.hqb-item:hover .hqb-arrow { transform: translateX(-4px); color: #0a5d50; }
@media (max-width: 640px) {
    .home-quick-bar { grid-template-columns: 1fr; margin-top: 1.25rem; gap: .75rem; }
}

/* ── Services section: elegant, subtle, premium ambient glow (top-right) ── */
.services-section {
    position: relative;
    overflow: hidden;
}
.services-section::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    top: -140px;
    inset-inline-end: -140px;
    width: 580px;
    height: 580px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 93, 80, 0.11) 0%, rgba(10, 93, 80, 0) 70%);
    filter: blur(75px);
}
.services-section > .container,
.services-section .row { position: relative; z-index: 1; }