/* ============================================================
   HAN SARAI — user.css for Cassiopeia
   Path: /media/templates/site/cassiopeia/css/user.css
   
   APPROACH: Only dark background on body. Light text ONLY on
   specific Cassiopeia elements. Custom modules are NEVER touched.
   ============================================================ */

/* === BODY — dark background + light text for all Joomla pages === */
body.site {
  background: #0f0f0f !important;
  color: #e8e4dc !important;
}

/* Cassiopeia grid backgrounds — transparent */
.site-grid,
.container-component,
.container-main,
.grid-child-main,
.container-sidebar-left,
.container-sidebar-right,
.grid-child-sidebar-left,
.grid-child-sidebar-right,
.container-banner,
.container-bottom {
  background: transparent !important;
}

/* ============================================================
   HEADER — GOLD GRADIENT
   ============================================================ */
.container-header {
  background: linear-gradient(135deg, #a07c2e 0%, #c9a84c 50%, #a07c2e 100%) !important;
  padding: 2px 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}
.container-header .grid-child-header { background: transparent !important; }
.container-header .logo > a,
.container-header .site-title a,
.container-header .site-description { color: #0f0f0f !important; }
.container-header .logo > a:hover { color: #fff !important; }
.container-header .logo img,
.container-header .navbar-brand img { filter: brightness(0) !important; max-height: 48px !important; }

/* Address under logo */
.container-header .logo,
.container-header .navbar-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}
.container-header .logo::after,
.container-header .navbar-brand::after {
  content: 'Ілияс Есенберлін даңғылы, 12' !important;
  display: block !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 0.85em !important;
  font-weight: 400 !important;
  color: rgba(15, 15, 15, 0.6) !important;
  letter-spacing: 0.3px !important;
}

/* ============================================================
   NAVIGATION — DARKER GOLD
   ============================================================ */
.container-nav {
  background: linear-gradient(135deg, #7a6020 0%, #a07c2e 50%, #7a6020 100%) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}
.container-nav .navbar { background: transparent !important; }
.container-nav .nav-link,
.container-nav .mod-menu__link {
  color: #f5f0e8 !important;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.88em !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
  transition: all 0.3s !important;
}
.container-nav .nav-link:hover,
.container-nav .mod-menu__link:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}
.container-nav .active > .nav-link,
.container-nav .current > .nav-link {
  background: rgba(0,0,0,0.2) !important;
  color: #fff !important;
}
/* dropdown */
.container-nav .dropdown-menu {
  background: #1a1a1a !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
  padding: 8px !important;
}
.container-nav .dropdown-menu .nav-link,
.container-nav .dropdown-menu .mod-menu__link,
.container-nav .dropdown-item {
  color: #e8e4dc !important;
  text-transform: none !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
}
.container-nav .dropdown-menu .nav-link:hover,
.container-nav .dropdown-item:hover {
  background: rgba(201,168,76,0.1) !important;
  color: #c9a84c !important;
}
/* hamburger */
.container-nav .navbar-toggler { border-color: rgba(255,255,255,0.3) !important; }
.container-nav .navbar-toggler-icon { filter: brightness(0) invert(1) !important; }

/* ============================================================
   ARTICLE CONTENT — light text on dark background
   This is the ONLY place we set light text colors.
   Targets Joomla article views specifically.
   ============================================================ */
.com-content-article,
.com-content-category-blog,
.item-page {
  color: #e8e4dc !important;
}

.com-content-article h1,
.com-content-article h2,
.com-content-article h3,
.com-content-article h4,
.com-content-article h5,
.com-content-article h6,
.item-page h1,
.item-page h2,
.item-page h3,
.item-page h4 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: #f5f0e8 !important;
  font-weight: 700 !important;
}

.com-content-article a,
.item-page a {
  color: #c9a84c !important;
}
.com-content-article a:hover,
.item-page a:hover {
  color: #e8d5a0 !important;
}

/* Tables inside articles */
.com-content-article table {
  border-color: rgba(201,168,76,0.15) !important;
}
.com-content-article table th {
  background: rgba(201,168,76,0.06) !important;
  color: #e8d5a0 !important;
  border-color: rgba(201,168,76,0.15) !important;
}
.com-content-article table td {
  border-color: rgba(201,168,76,0.1) !important;
}

/* Blockquotes inside articles */
.com-content-article blockquote,
.item-page blockquote {
  background: rgba(201,168,76,0.04) !important;
  border-left: 3px solid #a07c2e !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 16px 20px !important;
  color: #8a8478 !important;
}

/* Images inside articles */
.com-content-article img,
.item-page img {
  border-radius: 10px !important;
}

/* HR inside articles */
.com-content-article hr,
.item-page hr {
  border-color: rgba(201,168,76,0.15) !important;
  opacity: 1 !important;
}

/* Page header (article title) */
.page-header {
  border-bottom: 1px solid rgba(201,168,76,0.15) !important;
  padding-bottom: 14px !important;
  margin-bottom: 28px !important;
}
.page-header h1,
.page-header h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: #f5f0e8 !important;
}

/* Article prev/next links */
.com-content-article-navigation a {
  background: #1a1a1a !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  color: #e8e4dc !important;
}
.com-content-article-navigation a:hover {
  border-color: #c9a84c !important;
  color: #c9a84c !important;
}
.com-content-article-navigation span {
  color: #8a8478 !important;
}

/* Pagination */
.pagination .page-link {
  background: #1a1a1a !important;
  border-color: rgba(201,168,76,0.15) !important;
  color: #e8e4dc !important;
}
.pagination .page-link:hover {
  background: rgba(201,168,76,0.1) !important;
  color: #c9a84c !important;
}
.pagination .active .page-link {
  background: linear-gradient(135deg, #a07c2e, #c9a84c) !important;
  border-color: #c9a84c !important;
  color: #0f0f0f !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.mod-breadcrumbs,
nav[aria-label="Breadcrumbs"] {
  background: #1a1a1a !important;
  border: 1px solid rgba(201,168,76,0.12) !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  margin-bottom: 20px !important;
}
.mod-breadcrumbs a { color: #c9a84c !important; }
.mod-breadcrumbs li,
.mod-breadcrumbs span,
.mod-breadcrumbs .divider { color: #8a8478 !important; }

/* ============================================================
   LOGIN MODULE (sidebar)
   ============================================================ */
.mod-login {
  background: #1a1a1a !important;
  border: 1px solid rgba(201,168,76,0.12) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  color: #e8e4dc !important;
}
.mod-login label { color: #e8e4dc !important; }
.mod-login a { color: #c9a84c !important; }
.mod-login a:hover { color: #e8d5a0 !important; }
.mod-login input[type="text"],
.mod-login input[type="password"] {
  background: #151515 !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
  border-radius: 8px !important;
  color: #e8e4dc !important;
}
.mod-login input:focus {
  border-color: #c9a84c !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
  background: #151515 !important;
  color: #e8e4dc !important;
}
.mod-login input::placeholder { color: #8a8478 !important; }
.mod-login .btn-primary {
  background: linear-gradient(135deg, #a07c2e, #c9a84c) !important;
  border: none !important;
  color: #0f0f0f !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}
.mod-login .btn-primary:hover {
  background: linear-gradient(135deg, #c9a84c, #e8d5a0) !important;
}
.mod-login .input-password-toggle {
  background: #151515 !important;
  border-color: rgba(201,168,76,0.2) !important;
  color: #8a8478 !important;
}
.mod-login .form-check-input:checked {
  background-color: #c9a84c !important;
  border-color: #c9a84c !important;
}
.mod-login .form-check-label { color: #8a8478 !important; }

/* ============================================================
   SIDEBAR MODULE CARDS (Joomla's default card style)
   ============================================================ */
.container-sidebar-left > .card,
.container-sidebar-right > .card {
  background: #1a1a1a !important;
  border: 1px solid rgba(201,168,76,0.12) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  color: #e8e4dc !important;
}
.container-sidebar-left > .card > .card-header,
.container-sidebar-right > .card > .card-header {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  background: rgba(201,168,76,0.05) !important;
  border-bottom: 1px solid rgba(201,168,76,0.12) !important;
  color: #e8d5a0 !important;
}
.container-sidebar-left > .card a,
.container-sidebar-right > .card a { color: #c9a84c !important; }

/* ============================================================
   COM_USERS PAGES (login, reset, remind)
   ============================================================ */
.com-users-login,
.com-users-reset,
.com-users-remind,
.com-users-profile {
  color: #e8e4dc !important;
}
.com-users-login label,
.com-users-reset label,
.com-users-remind label,
.com-users-profile label {
  color: #e8e4dc !important;
}
.com-users-login input,
.com-users-reset input,
.com-users-remind input {
  background: #151515 !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
  border-radius: 8px !important;
  color: #e8e4dc !important;
}
.com-users-login input:focus,
.com-users-reset input:focus,
.com-users-remind input:focus {
  border-color: #c9a84c !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
}
.com-users-login .btn-primary,
.com-users-reset .btn-primary,
.com-users-remind .btn-primary {
  background: linear-gradient(135deg, #a07c2e, #c9a84c) !important;
  border: none !important;
  color: #0f0f0f !important;
  font-weight: 700 !important;
}
.com-users-login a,
.com-users-reset a,
.com-users-remind a {
  color: #c9a84c !important;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert { border-radius: 10px !important; }
.alert-info    { background: rgba(52,152,219,0.1) !important; border-color: rgba(52,152,219,0.3) !important; color: #85c1e9 !important; }
.alert-success { background: rgba(39,174,96,0.1)  !important; border-color: rgba(39,174,96,0.3)  !important; color: #82e0aa !important; }
.alert-warning { background: rgba(201,168,76,0.1) !important; border-color: rgba(201,168,76,0.3) !important; color: #e8d5a0 !important; }
.alert-danger  { background: rgba(192,57,43,0.1)  !important; border-color: rgba(192,57,43,0.3)  !important; color: #f1948a !important; }

/* ============================================================
   FOOTER — GOLD GRADIENT
   ============================================================ */
.container-footer,
footer.container-footer {
  background: linear-gradient(135deg, #7a6020 0%, #a07c2e 50%, #c9a84c 100%) !important;
  border-top: none !important;
  padding: 36px 0 !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important;
}
.container-footer p,
.container-footer a,
.container-footer span,
.container-footer div { color: #0f0f0f !important; }
.container-footer a:hover { color: #fff !important; }

/* ============================================================
   OFF-CANVAS (mobile menu)
   ============================================================ */
.offcanvas,
.offcanvas-body { background: #1a1a1a !important; }
.offcanvas-header {
  background: linear-gradient(135deg, #a07c2e, #c9a84c) !important;
  border-bottom: none !important;
}
.offcanvas-header .btn-close { filter: brightness(0) !important; }
.offcanvas-body .nav-link,
.offcanvas-body .mod-menu__link {
  color: #e8e4dc !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
}
.offcanvas-body .nav-link:hover {
  background: rgba(201,168,76,0.1) !important;
  color: #c9a84c !important;
}
.offcanvas-body .active > .nav-link {
  color: #c9a84c !important;
}

/* Back to top */
.back-to-top-link {
  background: linear-gradient(135deg, #a07c2e, #c9a84c) !important;
  color: #0f0f0f !important;
  border: none !important;
}

/* ============================================================
   MOBILE — FULL WIDTH
   ============================================================ */
@media (max-width: 768px) {
  .container, .container-fluid,
  .site-grid,
  .site-grid > *,
  .grid-child-main,
  .container-component,
  .container-component > *,
  .container-header > *,
  .container-nav > *,
  .container-footer > * {
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .site-grid {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .container-header {
    padding: 6px 4px !important;
  }
  .container-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .container-component {
    padding: 0 4px !important;
  }
  .container-footer {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* Compact header on mobile */
  .container-header {
    padding: 0 !important;
  }
  .container-header .logo img,
  .container-header .navbar-brand img {
    max-height: 24px !important;
  }
  .container-header .logo,
  .container-header .navbar-brand {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .container-header .logo::after,
  .container-header .navbar-brand::after {
    font-size: 0.55em !important;
  }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.3) #0f0f0f; }
::selection { background: rgba(201,168,76,0.3); color: #f5f0e8; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f0f0f; }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 4px; }

/* Smooth load */
body.site { animation: hsLoad 0.4s ease; }
@keyframes hsLoad { from { opacity: 0; } to { opacity: 1; } }