/* ===================================================
   GROKIPORTAGE REDESIGN — Design System v1
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

/* === VARIABLES === */
:root {
  --navy:     #0A1628;
  --navy-lt:  #1a2d4a;
  --gold:      #F7B731;
  --gold-dk:   #e0a020;
  --blue:      #0066CC;
  --blue-lt:   #3d8bff;
  --white:     #ffffff;
  --gray-50:   #F8FAFC;
  --gray-100:  #F1F5F9;
  --gray-200:  #E2E8F0;
  --gray-500:  #64748B;
  --gray-700:  #334155;
  --gray-900:  #0F172A;
  --sh-sm: 0 1px 3px rgba(0,0,0,.08);
  --sh-md: 0 4px 16px rgba(0,0,0,.10);
  --sh-lg: 0 8px 32px rgba(0,0,0,.12);
  --rad-sm: 6px;
  --rad-md: 12px;
  --rad-lg: 20px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-head: 'Manrope', 'Inter', sans-serif;
}

/* === BASE RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === TYPOGRAPHY === */
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-700);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.25;
  font-weight: 700;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-lt); }
img { max-width: 100%; height: auto; display: block; }

/* === HEADER === */
.topbar {
  background: var(--navy) !important;
  color: rgba(255,255,255,.75) !important;
}
.topbar a { color: rgba(255,255,255,.8) !important; }
.topbar a:hover { color: var(--gold) !important; }

.main-header {
  background: var(--white) !important;
  box-shadow: var(--sh-sm) !important;
  border-bottom: 1px solid var(--gray-200) !important;
}

.logosite { height: 52px; width: auto; }

/* === NAV === */
.nav-container ul li a {
  font-family: var(--font-head) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  padding: 18px 14px !important;
  border-bottom: 2px solid transparent !important;
  transition: color .2s ease, border-color .2s ease !important;
}
.nav-container ul li a:hover { color: var(--blue) !important; border-bottom-color: var(--blue) !important; }

/* === BUTTONS === */
.green-btn {
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
  border-radius: var(--rad-sm) !important;
  transition: background .2s ease, transform .2s ease !important;
}
.green-btn:hover { background: var(--gold-dk) !important; transform: translateY(-1px) !important; }

.blue-btn {
  background: var(--blue) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  border-radius: var(--rad-sm) !important;
  transition: background .2s ease, transform .2s ease !important;
}
.blue-btn:hover { background: var(--blue-lt) !important; transform: translateY(-1px) !important; }

/* === HERO / SLIDER === */
.stack-wrapper {
  background: linear-gradient(135deg,var(--navy) 0%,var(--navy-lt) 100%) !important;
  padding: 60px 0 !important;
}

/* === ARTICLE CARDS === */
.article-style-1 {
  border-radius: var(--rad-md) !important;
  overflow: hidden;
  border: 1px solid var(--gray-200) !important;
  background: var(--white) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.article-style-1:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--sh-lg) !important;
  border-color: var(--blue) !important;
}
.article-style-1-image .imgCover {
  transition: transform .4s ease !important;
}
.article-style-1:hover .imgCover { transform: scale(1.05) !important; }
.article-style-1-title a {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.35 !important;
  transition: color .2s ease !important;
}
.article-style-1-title a:hover { color: var(--blue) !important; }
.article-like, .article-views {
  background: rgba(0,0,0,.55) !important;
  color: var(--white) !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.article-data {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: flex !important;
  gap: 6px !important;
}

/* === CONTENT === */
.main-content {
  background: var(--white) !important;
  border-radius: var(--rad-lg) !important;
  padding: 32px !important;
  box-shadow: var(--sh-md) !important;
  margin-bottom: 24px !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  border: 1px solid var(--gray-200) !important;
}

/* === SIDEBAR === */
.sideBarWidget {
  background: var(--white) !important;
  border-radius: var(--rad-md) !important;
  padding: 20px !important;
  box-shadow: var(--sh-sm) !important;
  margin-bottom: 20px !important;
  border: 1px solid var(--gray-200) !important;
}
.sidebar-title {
  font-family: var(--font-head) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  border-bottom: 2px solid var(--gold) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

/* === FOOTER === */
footer.main-footer {
  background: var(--navy) !important;
  color: rgba(255,255,255,.65) !important;
  padding: 48px 0 24px !important;
  margin-top: 48px !important;
}
footer.main-footer h4, footer.main-footer h3 {
  color: var(--white) !important;
  font-family: var(--font-head) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-bottom: 2px solid var(--gold) !important;
  padding-bottom: 8px !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
}
footer.main-footer a { color: rgba(255,255,255,.6) !important; font-size: 13px !important; transition: color .2s ease, padding-left .2s ease !important; }
footer.main-footer a:hover { color: var(--gold) !important; padding-left: 4px !important; }

/* === OWL DOTS === */
.owl-theme .owl-dots .owl-dot span {
  width: 8px !important; height: 8px !important;
  background: rgba(255,255,255,.4) !important;
  border-radius: 100px !important;
  transition: all .2s ease !important;
}
.owl-theme .owl-dots .owl-dot.active span {
  background: var(--gold) !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; }
::selection { background: var(--gold); color: var(--navy); }

/* === RESPONSIVE === */
@media(max-width:768px) {
  .nav-container { display: none !important; }
  .hamburger-menu { display: block !important; }
  .topbar { display: none !important; }
}