/**
 * Siyam Holidays – Frontend theme (logo-based)
 * Colors: dark blue, royal blue, ocean cyan, orange from logo
 */
:root {
  --sh-dark: #0f2744;
  --sh-primary: #1e5f9e;
  --sh-primary-light: #2d7ab8;
  --sh-accent: #0ea5e9;
  --sh-accent-soft: #7dd3fc;
  --sh-cta: #e8762b;
  --sh-cta-hover: #d46920;
  --sh-topbar-bg: #0f2744;
  --sh-topbar-text: #ffffff;
  --sh-topbar-muted: rgba(255,255,255,0.85);
  --sh-topbar-link-hover: #fbbf24;
  --sh-cta-bg: #e8762b;
  --sh-cta-bg-hover: #d46920;
  --sh-nav-link: #374151;
  --sh-nav-link-hover: #1e5f9e;
  --sh-nav-dropdown-bg: #ffffff;
  --sh-nav-dropdown-hover: #eff6ff;
}

/* Top bar – theme colors */
.sh-topbar { background-color: var(--sh-topbar-bg); color: var(--sh-topbar-text); }
.sh-topbar a { color: var(--sh-topbar-muted); text-decoration: none; }
.sh-topbar a:hover { color: var(--sh-topbar-link-hover); }
.sh-topbar .sh-cta-btn { background-color: var(--sh-cta-bg); color: #fff; text-decoration: none; }
.sh-topbar .sh-cta-btn:hover { background-color: var(--sh-cta-bg-hover); color: #fff; }

/* Logo tagline – smaller than logo */
.sh-tagline { font-size: 0.65rem; font-weight: 600; color: var(--sh-dark); max-width: 140px; line-height: 1.2; }
@media (min-width: 640px) { .sh-tagline { font-size: 0.7rem; max-width: 160px; } }

/* Nav links */
.sh-nav a { color: var(--sh-nav-link); }
.sh-nav a:hover { color: var(--sh-nav-link-hover); }
.sh-nav .sh-btn { background-color: var(--sh-primary); color: #fff; }
.sh-nav .sh-btn:hover { background-color: var(--sh-primary-light); color: #fff; }

/* Dropdown */
.sh-dropdown { background: var(--sh-nav-dropdown-bg); }
.sh-dropdown a:hover { background: var(--sh-nav-dropdown-hover); color: var(--sh-primary); }

/* Primary button (Support, etc.) */
.sh-btn { background-color: var(--sh-primary); color: #fff; }
.sh-btn:hover { background-color: var(--sh-primary-light); color: #fff; }

/* Sticky footer – footer at bottom of viewport when content is short */
.sh-page { display: flex; flex-direction: column; min-height: 100vh; }
.sh-page-main { flex: 1 1 auto; min-height: 0; width: 100%; }
.sh-page > .sh-topbar,
.sh-page > header,
.sh-page > footer { flex-shrink: 0; }

/* Footer – ensure dark background and readable text (fixes low-contrast display) */
.sh-footer,
footer.sh-footer {
  background-color: #0f2744 !important;
  color: #ffffff !important;
}
.sh-footer h3,
.sh-footer h4 {
  color: #ffffff !important;
}
.sh-footer a {
  color: rgba(255, 255, 255, 0.85) !important;
}
.sh-footer a:hover {
  color: #fbbf24 !important;
}
.sh-footer p,
.sh-footer li {
  color: rgba(255, 255, 255, 0.9) !important;
}
.sh-footer .border-t {
  border-color: rgba(255, 255, 255, 0.2) !important;
}