/*
Theme Name: SINTAD
Theme URI: https://sintad.solutions
Author: Noundesign for SINTAD
Author URI: https://noundesign.agency
Description: Custom WordPress theme for SINTAD (Somali Institution for Transformation & Digitization) — civic technology consultancy homepage. Built on Tailwind CDN with Plus Jakarta Sans typography. All major content editable via WP Customizer.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sintad
Tags: business, government, consultancy, one-column, custom-colors, custom-logo, custom-menu, featured-images, theme-options, threaded-comments, translation-ready
*/

/* Base body — Tailwind handles most styling; this provides fallback + WP-required rules */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;   /* never allow horizontal scroll on mobile, no matter what */
  max-width: 100%;
}
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1A3A6B;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
html { scroll-behavior: smooth; }
img, svg { max-width: 100%; height: auto; }

/* Mobile safety: cap hero collage size so it never overflows on phones */
@media (max-width: 1023px) {
  section#home .relative.w-full.max-w-md { max-width: 100% !important; }
  /* Hide the floating absolute-positioned cards in hero on mobile to avoid overlap */
  section#home .absolute.\-bottom-8.\-left-10,
  section#home .absolute.\-top-6.\-right-4 { display: none !important; }
}

/* ─────────────── Aggressive mobile-overflow safety (v1.0.4) ─────────────── */

/* Universal: any element wider than its parent on mobile must wrap, not overflow */
@media (max-width: 767px) {
  * { max-width: 100%; }
  *, *::before, *::after { word-wrap: break-word; overflow-wrap: anywhere; }

  /* Headlines: cap font sizes so long words always fit phone widths */
  section h1 {
    font-size: clamp(26px, 8vw, 38px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    overflow-wrap: anywhere;
    hyphens: auto;
    word-break: normal;
  }
  section h2 {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
  }
  section h3 { font-size: clamp(16px, 4.5vw, 20px) !important; }

  /* Body text */
  section p { font-size: 14.5px !important; line-height: 1.55 !important; }

  /* Hero specifically: tighter vertical padding so phone users see more above the fold */
  section#home { padding-top: 32px !important; padding-bottom: 40px !important; }
  section#home > div { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* Stat numbers can be huge — cap them */
  .stat-num { font-size: clamp(22px, 7vw, 30px) !important; }

  /* Buttons — keep them tappable, full-width if needed */
  .badge { white-space: normal !important; }

  /* Header: ensure hamburger is reachable and not pushed off screen */
  header .max-w-7xl { padding-left: 16px !important; padding-right: 16px !important; }
  header #menuBtn { margin-left: auto !important; flex-shrink: 0 !important; }
  header a.flex.items-center.gap-3 img { height: 36px !important; max-width: 200px !important; }

  /* Cards: stack with breathing room */
  .grid { gap: 16px !important; }
}

/* Slightly larger but still narrow: tablets in portrait (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  section h1 { font-size: clamp(34px, 6vw, 52px) !important; line-height: 1.1 !important; }
}

/* WP-required alignment classes for block editor compatibility */
.alignleft   { float: left;  margin: 0 1.5em 1em 0; }
.alignright  { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* WP screen-reader-text utility */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); height: 1px; overflow: hidden;
  padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}

/* Custom SINTAD design tokens (used inside templates) */
.grid-pattern {
  background-image:
    linear-gradient(rgba(26,58,107,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,58,107,.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
.circuit-bg {
  background-image: radial-gradient(circle at 1px 1px, rgba(61,191,165,.18) 1.5px, transparent 0);
  background-size: 28px 28px;
}
.gradient-navy { background: linear-gradient(135deg, #142E55 0%, #1A3A6B 55%, #264772 100%); }
.gradient-teal-line { background: linear-gradient(90deg, transparent, #3DBFA5, transparent); }
.stat-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.nav-link { position: relative; }
.nav-link::after {
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:#3DBFA5; transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 14px 36px -10px rgba(20,46,85,0.22); }

.icon-tile {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, #3DBFA5 0%, #2FA68C 100%);
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 6px 16px -6px rgba(47,166,140,.55);
}
.icon-tile.alt  { background: linear-gradient(135deg, #1A3A6B 0%, #264772 100%); box-shadow: 0 6px 16px -6px rgba(26,58,107,.5); }
.icon-tile.gold { background: linear-gradient(135deg, #D7B061 0%, #C9A24A 100%); box-shadow: 0 6px 16px -6px rgba(201,162,74,.5); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(61,191,165,.12); color: #247E6A; border: 1px solid rgba(61,191,165,.25);
}
.badge.gold { background: rgba(201,162,74,.12); color: #A8853A; border-color: rgba(201,162,74,.28); }
.badge.navy { background: rgba(26,58,107,.08);  color: #1A3A6B; border-color: rgba(26,58,107,.18); }

.placeholder-img {
  background:
    linear-gradient(135deg, rgba(26,58,107,.85), rgba(47,166,140,.85)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 8px, transparent 8px 16px);
  color: #fff; display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11px;
}

/* Nav links never wrap their labels */
header nav a { white-space: nowrap; }

/* Responsive nav: hide desktop-nav below 1280px (xl) — !important to override Tailwind cascade */
@media (max-width: 1279px) {
  .desktop-nav { display: none !important; }
}
@media (min-width: 1280px) {
  .mobile-scroll-nav { display: none !important; }
}

/* ─────────────── Mobile horizontal-scrolling nav (v1.0.5) ─────────────── */
.mobile-scroll-nav > div {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
}
.mobile-scroll-nav > div::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

.mobile-scroll-nav .mobile-nav-link {
  position: relative;
  padding: 6px 2px;
  color: #1A3A6B;
  transition: color .2s ease;
}
.mobile-scroll-nav .mobile-nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: #3DBFA5;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.mobile-scroll-nav .mobile-nav-link.active { color: #247E6A; }
.mobile-scroll-nav .mobile-nav-link.active::after { transform: scaleX(1); }
.mobile-scroll-nav .mobile-nav-link:hover { color: #247E6A; }

/* Fade-out gradient on the right edge of mobile nav to hint there's more to scroll */
.mobile-scroll-nav { position: relative; }
.mobile-scroll-nav::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 24px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
}

/* WP admin bar offset when logged in */
.admin-bar header { top: 32px; }
@media (max-width: 782px) { .admin-bar header { top: 46px; } }