/* ============================================================
   MOG Support Center – Custom Styles v3
   Přidej za style.css v document_head.hbs
   ============================================================ */

/* ============================================================
   GLOBAL – tělo stránky
   ============================================================ */
body {
  color: #e0e0e0 !important;
}

/* ============================================================
   NAVBAR
   ============================================================ */

/* Wrapper co obaluje celý header */
body > header,
.sub-nav,
[role="banner"] {
  border-bottom: 1px solid #0e0e1a !important;
}

/* Logo text / separator */
.logo span {
  color: #2b3fef !important;
}

/* Linky v navbaru */
.user-nav a,
.user-nav button,
.nav-wrapper-desktop a,
#user #user-name,
.user-info > button {
  color: #c0c4d8 !important;
}

.user-nav a:hover,
.nav-wrapper-desktop a:hover,
#user #user-name:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Dropdown menu v navbaru (user menu) */
.dropdown-menu {
  background-color: #0e0e1a !important;
  border: 1px solid #1a1a2e !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: #c0c4d8 !important;
}

.dropdown-menu [role=menuitem]:hover,
.dropdown-menu [role=menuitemradio]:hover {
  background-color: #14142a !important;
  color: #ffffff !important;
}

/* Mobile menu */
.nav-wrapper-mobile .menu-list-mobile {
  background-color: #0a0a14 !important;
  border-top: 1px solid #1a1a2e !important;
  border-bottom: 1px solid #1a1a2e !important;
}

.nav-wrapper-mobile .menu-list-mobile-items a,
.nav-wrapper-mobile .menu-list-mobile-items button {
  color: #c0c4d8 !important;
}

.nav-wrapper-mobile .menu-list-mobile-items a:hover,
.nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #14142a !important;
}

.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #14142a !important;
}

/* ============================================================
   SEARCH – globální override (platí i pro search v navbaru)
   ============================================================ */
.search {
  border-color: #1e1e30 !important;
  border-radius: 10px !important;
  background-color: #0e0e18 !important;
}

.search:focus-within {
  border-color: #2b3fef !important;
  box-shadow: 0 0 0 3px rgba(43, 63, 239, 0.12) !important;
}

.search input[type=search],
.search .clear-button {
  background-color: #0e0e18 !important;
  border-radius: 10px !important;
  color: #ffffff !important;
}

.search input[type=search] {
  color: #ffffff !important;
}

.search input[type=search]:focus {
  color: #ffffff !important;
}

.search input[type=search]::placeholder {
  color: #3a3a55 !important;
}

/* Autofill override */
.search input[type=search]:-webkit-autofill,
.search input[type=search]:-webkit-autofill:hover,
.search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0e0e18 inset !important;
  -webkit-text-fill-color: #ffffff !important;
}

.search .clear-button {
  color: #555b6e !important;
}

.search .clear-button:hover {
  background-color: #2b3fef !important;
  color: #fff !important;
}

/* Search icon (lupa) */
.search-icon {
  color: #3a3a55 !important;
}

/* Autocomplete / instant search dropdown */
.search-results-dropdown,
[data-garden-id="dropdowns.menu"],
.hc-search-autocomplete,
.dropdown-autocomplete {
  background-color: #0e0e18 !important;
  border: 1px solid #1e1e30 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================================
   HERO sekce (homepage)
   ============================================================ */
.mog-hero {
  text-align: center;
  padding: 64px 20px 52px;
}

.mog-hero__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2b3fef;
  margin: 0 0 16px;
}

.mog-hero__title {
  font-size: 48px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.1;
}

.mog-hero__subtitle {
  font-size: 15px;
  color: #6b7080;
  margin: 0 0 36px;
}

.mog-hero .search {
  max-width: 500px;
  margin: 0 auto;
}

/* hide floating search icon that appears outside the search box */
.section.hero > .search-icon {
  display: none !important;
}

/* ============================================================
   CATEGORIES
   ============================================================ */
.mog-categories {
  max-width: 1060px;
  margin: 48px auto;
  padding: 0 24px;
}

.mog-categories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 860px) {
  .mog-categories__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .mog-categories__grid { grid-template-columns: 1fr; }
}

.mog-categories__item {
  background-color: #0c0c17;
  border: 1px solid #14142a;
  border-radius: 14px;
  padding: 28px 24px 24px;
  transition: border-color 0.2s, background-color 0.2s;
}

.mog-categories__item:hover {
  border-color: #2b3fef;
  background-color: #0e0e1e;
}

.mog-categories__icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #2b3fef 0%, #4a5cf0 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.mog-categories__icon svg {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mog-categories__name {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
}

.mog-categories__desc {
  font-size: 13px;
  color: #5a6080;
  margin: 0 0 20px;
  line-height: 1.65;
  min-height: 42px;
}

.mog-categories__link {
  font-size: 13px;
  font-weight: 600;
  color: #2b3fef;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}

.mog-categories__link:hover {
  color: #6878f5;
  text-decoration: none;
}

/* ============================================================
   POPULAR ARTICLES
   ============================================================ */
.mog-articles {
  max-width: 1060px;
  margin: 0 auto 52px;
  padding: 0 24px;
}

.mog-articles__title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 18px;
}

.mog-articles__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 640px) {
  .mog-articles__grid { grid-template-columns: 1fr; }
}

.mog-articles__item a {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #0c0c17;
  border: 1px solid #14142a;
  border-radius: 9px;
  padding: 14px 16px;
  color: #b0b4cc;
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.15s;
}

.mog-articles__item a:hover {
  border-color: #2b3fef;
  background-color: #0e0e1e;
  color: #ffffff;
  text-decoration: none;
}

.mog-articles__dot {
  width: 7px;
  height: 7px;
  background-color: #2b3fef;
  border-radius: 50%;
  flex-shrink: 0;
}

.mog-articles__item-text {
  flex: 1;
}

.mog-articles__arrow {
  color: #2e2e45;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.mog-cta {
  max-width: 1060px;
  margin: 0 auto 80px;
  padding: 0 24px;
}

.mog-cta__inner {
  background: linear-gradient(135deg, #0a0f2e 0%, #0d1540 60%, #111a50 100%);
  border: 1px solid #1a2460;
  border-radius: 14px;
  padding: 36px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

@media (max-width: 600px) {
  .mog-cta__inner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }
}

.mog-cta__title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
}

.mog-cta__desc {
  font-size: 14px;
  color: #5a6080;
  margin: 0;
}

.mog-cta__btn {
  background-color: #2b3fef;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.2s, transform 0.1s;
  display: inline-block;
}

.mog-cta__btn:hover {
  background-color: #1f30d4;
  text-decoration: none !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background-color: #020209 !important;
  border-top: 1px solid #0e0e1a !important;
  margin-top: 0 !important;
}

.footer a,
.footer-language-selector button,
.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: #5a6080 !important;
}

.footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* ============================================================
   SCHOVAT původní Copenhagen sekce na homepage
   ============================================================ */
.section.hero .hero-inner { display: none !important; }
.section.knowledge-base { display: none !important; }
.section.home-section { display: none !important; }