/*
Theme Name: muabet.mk (ColorMag child)
Template: colormag
Description: Blue and white muabet.mk look on top of ColorMag. Colours, logo text and ad spots are edited in Appearance > Customize > muabet.mk and Appearance > Widgets.
Version: 1.1.1
Author: BullHost
Text Domain: muabet-child
*/

/* Brand colours come from the Customizer as CSS variables (see functions.php). */
:root {
  --mb-blue: #1F4F9C;
  --mb-blue-dark: #163A73;
  --mb-accent: #289DCC;
  --mb-ink: #1B2430;
  --mb-muted: #4A5565;
  --mb-line: #E3E8EF;
  --mb-tint: #EAF1FA;
  --mb-bg: #F4F7FB;
}

body { background: var(--mb-bg); color: var(--mb-ink); }

/* ---------- Logo ---------- */
.mb-logo { display: inline-flex; flex-direction: column; gap: 4px; text-decoration: none; }
.mb-logo:hover { text-decoration: none; }
.mb-logo__word {
  font-family: "Nunito", system-ui, sans-serif; font-weight: 900;
  font-size: 52px; line-height: 1; letter-spacing: -1px; color: var(--mb-blue);
}
.mb-logo__sub { display: inline-flex; align-items: center; gap: 10px; }
.mb-logo__sub span.mb-line { width: 30px; height: 3px; border-radius: 2px; background: var(--mb-accent); }
.mb-logo__sub span.mb-domain {
  font-family: "Nunito", system-ui, sans-serif; font-weight: 800;
  font-size: 12px; letter-spacing: 5px; color: #1E7FAD;
}
@media (max-width: 600px) {
  .mb-logo__word { font-size: 38px; }
}

/* ---------- Header & menu ---------- */
.cm-header, .cm-header-1, .cm-main-header { background: #FFFFFF; }
.cm-primary-nav, .cm-header .cm-primary-nav, #cm-primary-nav { background: #232323; border-bottom: 4px solid var(--mb-accent); border-top: 0; }
.cm-primary-nav a, .cm-primary-nav li a { color: #FFFFFF; font-weight: 600; letter-spacing: .3px; }
.cm-primary-nav li:hover > a, .cm-primary-nav li.current-menu-item > a { color: #9FD8F0; }
.cm-home-icon, .cm-primary-nav .cm-home-icon { background: var(--mb-accent); }

/* ---------- Links, labels, buttons ---------- */
a { color: var(--mb-blue); }
a:hover { color: var(--mb-blue-dark); }
.cm-post-categories a, .cm-entry-header-meta .cm-post-categories a, .cm-below-entry-meta + .cm-post-categories a {
  background: var(--mb-accent) !important; color: #0F1A28 !important; border-radius: 4px; font-weight: 700;
}
.cm-widget-title, .widget-title, .cm-featured-posts .cm-widget-title {
  border-bottom: 3px solid var(--mb-blue) !important;
}
.cm-widget-title span, .widget-title span { background: var(--mb-blue) !important; border-radius: 4px 4px 0 0; }
button, input[type="submit"], .wp-block-button__link, .cm-button { background: var(--mb-blue); border-radius: 8px; }
button:hover, input[type="submit"]:hover { background: var(--mb-blue-dark); }

/* ---------- Cards and slider ---------- */
.cm-posts .cm-post, .cm-featured-posts .cm-post, .cm-first-post, .cm-secondary .widget {
  border-radius: 10px;
}
.cm-featured-image img, .cm-post .cm-featured-image img { border-radius: 10px; }
.cm-slider-area .cm-post, .cm-slider-area .cm-featured-image, .cm-slider-area img { border-radius: 10px; overflow: hidden; }
.cm-secondary .widget, #secondary .widget {
  background: #FFFFFF; border: 1px solid var(--mb-line); padding: 18px;
}

/* ---------- Ad spots (AdRotate widgets) ---------- */
.mb-ad-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--mb-muted); text-align: right; margin-bottom: 4px; }
.cm-header-right-section img, .cm-header .widget img { max-width: 100%; height: auto; }

/* ---------- View counter (Post Views Counter) ---------- */
.post-views { font-size: 13px; color: var(--mb-muted); }

/* ---------- Footer ---------- */
.cm-footer, #cm-footer, .cm-footer-bar { background: #0F2A55; color: #D5E1F2; }
.cm-footer a, .cm-footer-bar a { color: #D5E1F2; }
.cm-footer-bar { border-top: 1px solid #2A4677; }

/* Logo: keep the small domain line under the word */
.cm-site-branding .custom-logo-link.mb-logo, a.custom-logo-link.mb-logo { display: inline-flex !important; flex-direction: column !important; align-items: flex-start; gap: 4px; }
.mb-logo .mb-logo__sub { display: flex !important; }

/* ---------- Animated BullHost top banner (12 s loop) ---------- */
.mbb { position: relative; display: flex; align-items: center; gap: 18px; width: 100%; max-width: 728px; height: 90px; box-sizing: border-box; padding: 0 18px 0 12px; background: #000; border-radius: 8px; overflow: hidden; text-decoration: none !important; color: #fff; isolation: isolate; }
.mbb__sweep { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 0%, rgba(59,41,255,.0) 35%, rgba(59,41,255,.55) 50%, rgba(40,157,204,.0) 65%, transparent 100%); transform: translateX(-100%); animation: mbb-sweep 4s ease-in-out infinite; }
.mbb__logo { flex: none; width: 70px; height: 70px; animation: mbb-logo 12s ease-in-out infinite; }
.mbb__stage { position: relative; flex: 1 1 auto; height: 60px; min-width: 0; }
.mbb__slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; opacity: 0; transform: translateY(14px); animation: mbb-slide 12s ease-in-out infinite; }
.mbb__slide--2 { animation-delay: 4s; }
.mbb__slide--3 { animation-delay: 8s; }
.mbb__slide strong { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; font-size: 24px; line-height: 1.1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbb__slide small { font-size: 13px; line-height: 1.3; color: #C9D2FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbb__cta { flex: none; padding: 10px 14px; border-radius: 8px; background: #3B29FF; color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; animation: mbb-cta 4s ease-in-out infinite; }
.mbb:hover .mbb__cta { background: #fff; color: #000; }
.mbb:focus-visible { outline: 3px solid #289DCC; outline-offset: 3px; }
@keyframes mbb-slide { 0% { opacity: 0; transform: translateY(14px); } 4%, 29% { opacity: 1; transform: translateY(0); } 33%, 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes mbb-logo { 0% { transform: scale(.6) rotate(-8deg); opacity: 0; } 5% { transform: scale(1.08) rotate(0); opacity: 1; } 8%, 100% { transform: scale(1); opacity: 1; } }
@keyframes mbb-sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes mbb-cta { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.07); } 90% { transform: scale(1); } }
@media (max-width: 600px) {
  .mbb { height: 72px; gap: 10px; padding: 0 10px; }
  .mbb__logo { width: 52px; height: 52px; }
  .mbb__cta { display: none; }
  .mbb__slide strong { font-size: 18px; }
  .mbb__slide small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mbb__sweep, .mbb__logo, .mbb__cta { animation: none; }
  .mbb__slide { animation: none; }
  .mbb__slide--1 { opacity: 1; transform: none; }
}
.cm-header .widget_custom_html .mbb, .cm-header-right-section .mbb { margin-left: auto; }

/* Header: the banner fills all the space right of the logo */
@media (min-width: 900px) {
  .cm-header .cm-row:has(.mbb) { display: flex; align-items: center; gap: 32px; }
  .cm-header .cm-header-col-1:has(~ .cm-header-col-2 .mbb) { flex: 0 0 auto; width: auto; }
  .cm-header .cm-header-col-2:has(.mbb) { flex: 1 1 auto; width: auto; max-width: none; float: none; }
}
.cm-header-col-2 .widget:has(.mbb), .cm-header-col-2 .custom-html-widget:has(.mbb) { width: 100%; }
.cm-header .mbb { max-width: none; width: 100%; }
.mbb__stage { flex: 1 1 0; min-width: 140px; }