/* ============================================================
   GVTO – Services Updates (Add-on Stylesheet)
   ------------------------------------------------------------
   Contains ONLY the new styles for:
     1. Navbar "Services" dropdown (desktop hover / mobile click)
     2. Updated Services cards (icon head, points list, accordion)
     3. "Recent Global Initiatives" vertical timeline
   All colors, fonts, radii, shadows and transitions reuse the
   existing CSS variables from style.css — no design changes.
   ============================================================ */

/* ------------------------------------------------------------
   1. NAVBAR SERVICES DROPDOWN
   ------------------------------------------------------------ */
.nav-item-dropdown { position: relative; }

.nav-item-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-dd-caret {
  font-size: 0.6rem;
  transition: transform 0.3s ease;
}

/* Rotate caret when open (hover on desktop, .open via JS) */
.nav-item-dropdown:hover .nav-dd-caret,
.nav-item-dropdown.open .nav-dd-caret,
.nav-item-dropdown:focus-within .nav-dd-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  min-width: 265px;
  background: rgba(11, 26, 49, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(201, 162, 39, 0.18);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 1100;
}

/* Invisible hover bridge so the menu doesn't close while moving cursor down */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}

/* Show on hover / keyboard focus (desktop) or .open (JS - all devices) */
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu,
.nav-item-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu li { width: 100%; }

.nav-dropdown-menu a {
  display: block;
  width: 100%;
  padding: 0.65rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  color: var(--gold-light);
  background: rgba(43, 127, 212, 0.12);
  border-left-color: var(--gold);
  padding-left: 1.5rem;
}

/* Remove the underline "active" bar inside the dropdown */
.nav-dropdown-menu a.active::after { display: none; }

/* --- Mobile behaviour (inside the fullscreen nav overlay) --- */
@media (max-width: 992px) {
  .nav-item-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    min-width: 0;
    width: min(320px, 84vw);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: none;
    text-align: center;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    padding: 0;
    margin-top: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
  }
  .nav-dropdown-menu::before { display: none; }

  /* On touch devices only the JS-driven .open class expands the menu */
  .nav-item-dropdown:hover .nav-dropdown-menu,
  .nav-item-dropdown:focus-within .nav-dropdown-menu {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
  }
  .nav-item-dropdown.open .nav-dropdown-menu {
    max-height: 320px;
    opacity: 1;
    visibility: visible;
    margin-top: 0.6rem;
    padding: 0.4rem 0;
    transform: none;
  }
  .nav-dropdown-menu a {
    font-size: 0.95rem;
    padding: 0.6rem 1rem;
    white-space: normal;
  }
  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus-visible { padding-left: 1rem; }
}

/* ------------------------------------------------------------
   2. SERVICES CARDS (5 affairs) + ACCORDION DETAILS
   ------------------------------------------------------------ */

/* Anchor offset so smooth-scroll lands below the fixed navbar */
.service-card[id],
#recent-initiatives { scroll-margin-top: 150px; }

/* Icon head — reuses the navy gradient of .service-card-img */
.service-card-icon-head {
  height: 130px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  overflow: hidden;
}
.service-card-icon-head::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 15%, rgba(77, 159, 232, 0.25), transparent 55%);
}
.service-card-icon-head i {
  font-size: 2.6rem;
  color: var(--gold-light);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}
.service-card:hover .service-card-icon-head i { transform: scale(1.12); }

/* Service points checklist */
.service-points {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}
.service-points li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.45rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.service-points li::before {
  content: '\f00c'; /* fa-check */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 0.7rem;
  color: var(--gold);
}

/* Accordion toggle button */
.service-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  margin-top: auto;            /* pin to card bottom for equal heights */
  padding: 0.65rem 0.9rem;
  background: var(--off-white);
  border: 1px solid rgba(30, 48, 80, 0.12);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--navy);
  cursor: pointer;
  transition: var(--transition-fast);
}
.service-accordion-toggle:hover,
.service-accordion-toggle:focus-visible {
  background: rgba(43, 127, 212, 0.10);
  border-color: rgba(43, 127, 212, 0.30);
  color: var(--gold-dark);
}
.service-accordion-toggle i {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}
.service-accordion-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

/* Accordion panel */
.service-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}
.service-accordion-panel > ul {
  list-style: none;
  margin: 0.9rem 0 0.15rem;
  padding: 0;
}
.service-accordion-panel li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.6rem;
  font-size: 0.85rem;
  color: var(--text-body);
  line-height: 1.55;
  border-bottom: 1px dashed rgba(30, 48, 80, 0.12);
}
.service-accordion-panel li:last-child { border-bottom: none; }
.service-accordion-panel li::before {
  content: '\f054'; /* fa-chevron-right */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0.2rem;
  top: 0.62rem;
  font-size: 0.6rem;
  color: var(--gold);
}

/* Make card bodies flex so toggle pins to bottom (equal heights) */
.service-card .service-card-body {
  display: flex;
  flex-direction: column;
  padding-top: 1.6rem;
}

/* ------------------------------------------------------------
   3. RECENT GLOBAL INITIATIVES — VERTICAL TIMELINE
   ------------------------------------------------------------ */
.initiatives-section { background: var(--off-white); }

.gvto-timeline {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 0.5rem 0;
}

/* Animated connecting line */
.gvto-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  background: linear-gradient(180deg, var(--gold), var(--gold-light), var(--navy-light));
  border-radius: 2px;
  transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gvto-timeline.line-visible::before { transform: translateX(-50%) scaleY(1); }

.gvto-timeline-item {
  position: relative;
  width: 50%;
  padding: 0 2.6rem 2.2rem 0;
}
.gvto-timeline-item:nth-child(even) {
  margin-left: 50%;
  padding: 0 0 2.2rem 2.6rem;
}
.gvto-timeline-item:last-child { padding-bottom: 0.25rem; }

/* Milestone icon on the line */
.gvto-timeline-icon {
  position: absolute;
  top: 0;
  right: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  box-shadow: var(--shadow-md), 0 0 0 5px var(--off-white);
  z-index: 2;
  transition: var(--transition);
}
.gvto-timeline-item:nth-child(even) .gvto-timeline-icon { right: auto; left: -24px; }
.gvto-timeline-item:hover .gvto-timeline-icon {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg), 0 0 0 5px var(--off-white);
}

/* Milestone card */
.gvto-timeline-card {
  background: var(--white);
  border: 1px solid rgba(30, 48, 80, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.35rem 1.5rem;
  transition: var(--transition);
}
.gvto-timeline-item:hover .gvto-timeline-card {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(43, 127, 212, 0.30);
}
.gvto-timeline-card h3 {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
  line-height: 1.35;
}
.gvto-timeline-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
.gvto-timeline-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(43, 127, 212, 0.10);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  margin-bottom: 0.55rem;
}

/* Fade-up reveal (mirrors existing .fade-in pattern, driven by JS) */
.gvto-timeline-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.gvto-timeline-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Timeline responsive: single column on tablets & phones --- */
@media (max-width: 768px) {
  .gvto-timeline::before { left: 24px; }
  .gvto-timeline-item,
  .gvto-timeline-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 2rem 4.2rem;
  }
  .gvto-timeline-icon,
  .gvto-timeline-item:nth-child(even) .gvto-timeline-icon {
    left: 0;
    right: auto;
  }
}

/* Allow the fullscreen mobile menu to scroll when the Services
   submenu is expanded on shorter screens (additive, safe rule). */
@media (max-width: 992px) {
  .nav-links.open { overflow-y: auto; }
}

/* ------------------------------------------------------------
   KNOW MORE BUTTON  (added to each service card)
   ------------------------------------------------------------ */
.btn-know-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.72rem 1rem;
  background: transparent;
  color: var(--navy-light);
  border: 2px solid var(--navy-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}
.btn-know-more i {
  transition: transform 0.3s ease;
}
.btn-know-more:hover,
.btn-know-more:focus-visible {
  background: var(--navy-light);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-know-more:hover i { transform: translateX(4px); }

/* ------------------------------------------------------------
   SERVICE DETAIL PAGE  — shared helpers
   ------------------------------------------------------------ */

/* Breadcrumb */
.breadcrumb-bar {
  background: var(--off-white);
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(30,48,80,0.10);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--navy-light); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb-sep { color: var(--mid-gray); font-size: 0.65rem; }
.breadcrumb-current { color: var(--navy); font-weight: 600; }

/* Service detail hero */
.svc-hero {
  position: relative;
  padding: 12rem 0 5rem;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  overflow: hidden;
  text-align: center;
}
.svc-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(77,159,232,0.18), transparent 60%);
}
.svc-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px; height: 80px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: 50%;
  font-size: 2rem;
  color: var(--navy);
  margin: 0 auto 1.4rem;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-lg);
}
.svc-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  color: var(--white);
  margin-bottom: 1rem;
  position: relative; z-index: 1;
}
.svc-hero-intro {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.80);
  line-height: 1.75;
  position: relative; z-index: 1;
}

/* Service sub-sections */
.svc-offerings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}
.svc-offering-card {
  background: var(--white);
  border: 1px solid rgba(30,48,80,0.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 2rem 1.75rem;
  transition: var(--transition);
}
.svc-offering-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(43,127,212,0.28);
}
.svc-offering-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-sm);
}
.svc-offering-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 0.6rem;
  line-height: 1.35;
}
.svc-offering-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.70;
  margin: 0;
}

/* Benefits strip */
.svc-benefits {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  padding: 4.5rem 0;
}
.svc-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.svc-benefit-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.svc-benefit-item i {
  font-size: 1.3rem;
  color: var(--gold-light);
  flex-shrink: 0;
  margin-top: 2px;
}
.svc-benefit-item h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--white);
  margin-bottom: 0.3rem;
}
.svc-benefit-item p {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin: 0;
}

/* CTA on detail pages */
.svc-cta {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  padding: 4rem 0;
  text-align: center;
}
.svc-cta h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.svc-cta p {
  color: rgba(11,26,49,0.75);
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 520px;
  margin-left: auto; margin-right: auto;
}
.svc-cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
  .svc-offerings-grid { grid-template-columns: 1fr; }
  .svc-benefits-grid  { grid-template-columns: 1fr; }
  .svc-hero { padding: 7rem 0 4rem; }
}
@media (max-width: 480px) {
  .svc-benefits-grid { grid-template-columns: 1fr; }
}


/* Service card short description paragraph (replaces bullet list) */
.service-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.70;
  margin-bottom: 1rem;
  flex-grow: 1;
}


/* Latest News section on service detail pages */
.svc-news-section { background: var(--off-white); }

/* news-grid is already defined in additions.css (repeat(3,1fr)).
   Ensure image height is consistent inside service pages. */
.svc-news-section .news-card-img { height: 200px; }
.svc-news-section .news-card-img img { width: 100%; height: 100%; object-fit: cover; }