/*
 Theme Name:   Yabaleli Child (Newspaper Magazine Blog)
 Theme URI:    https://www.yabaleli.com
 Description:  Child theme to match Yabaleli branding and add VOD support
 Author:       Yabaleli
 Author URI:   https://www.yabaleli.com
 Template:     newspaper-magazine-blog
 Version:      1.1.2
 Requires at least: 6.4
 Tested up to: 6.7
 Requires PHP: 8.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  yabaleli-child
 Tags:         custom-colors, custom-menu, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready
*/

/* ========== Yabaleli brand colors (override theme) ========== */
:root {
  --yabaleli-primary: #0ea5e9;
  --yabaleli-primary-dark: #0369a1;
  --yabaleli-bg: #ffffff;
  --yabaleli-text: #0a0a0f;
  --yabaleli-muted: #64748b;
  --yabaleli-border: #e2e8f0;
  --yabaleli-radius: 0.75rem;
}

/* Force body and main content colors */
body,
.site {
  background-color: var(--yabaleli-bg) !important;
  color: var(--yabaleli-text) !important;
}

/* All links – primary blue */
a {
  color: var(--yabaleli-primary) !important;
}

a:hover,
a:focus {
  color: var(--yabaleli-primary-dark) !important;
}

/* Buttons – primary blue */
.wp-block-button__link,
.button,
.site .button,
button[type="submit"],
input[type="submit"],
.nav-links a,
.pagination a,
.page-numbers {
  background-color: var(--yabaleli-primary) !important;
  border-color: var(--yabaleli-primary) !important;
  color: #fff !important;
  border-radius: var(--yabaleli-radius);
  border: none;
}

.wp-block-button__link:hover,
.button:hover,
.site .button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.nav-links a:hover,
.pagination a:hover,
.page-numbers:hover {
  background-color: var(--yabaleli-primary-dark) !important;
  border-color: var(--yabaleli-primary-dark) !important;
  color: #fff !important;
}

/* ========== Header & menu – clean white bar, horizontal nav (like reference) ========== */
.site-header,
header.header,
.main-header,
#masthead,
.header-wrap,
.headerbox,
.menubox {
  background-color: var(--yabaleli-bg) !important;
  border-bottom: 1px solid var(--yabaleli-border) !important;
}

/* Logo – primary blue on white */
.site-header .logo h1 a,
.site-header .logo p a,
.site-header .logo p.site-title a,
.headerbox .logo a,
#masthead .logo h1 a,
#masthead .logo p a {
  color: var(--yabaleli-primary) !important;
}

/* Search icon – dark on white */
.headerbox .search-bar .open-search,
.headerbox .search-bar .open-search i,
.headerbox .search-bar button {
  color: var(--yabaleli-text) !important;
  fill: var(--yabaleli-text) !important;
}
.headerbox .search-bar .open-search:hover {
  color: var(--yabaleli-primary) !important;
  fill: var(--yabaleli-primary) !important;
}

/* Desktop: show menu as simple horizontal row (hide hamburger, show nav inline) */
@media (min-width: 992px) {
  .toggle-nav.mobile-menu {
    display: none !important;
  }
  #mySidenav.sidenav.nav {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #mySidenav .closebtn.mobile-menu {
    display: none !important;
  }
  #mySidenav .main-navigation,
  #mySidenav .main-menu {
    display: block !important;
    width: 100% !important;
  }
  #mySidenav .main-menu ul.mobile_nav,
  #mySidenav ul.menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 1.5rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  #mySidenav .main-menu li,
  #mySidenav ul.menu > li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }
}

/* Menu links – dark text, plain (like reference) */
.main-navigation a,
#site-navigation a,
.menu a,
.nav-menu a,
ul.menu > li > a {
  color: var(--yabaleli-text) !important;
  padding: 0.5em 0 !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: none !important;
  border-bottom: 4px solid transparent !important;
  white-space: nowrap !important;
}

.main-navigation a:hover,
#site-navigation a:hover,
.menu a:hover,
.nav-menu a:hover,
ul.menu > li > a:hover {
  color: var(--yabaleli-primary) !important;
  background: none !important;
  border-bottom-color: transparent !important;
}

/* Selected item – blue text + blue underline (like reference) */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
#site-navigation .current-menu-item > a,
#site-navigation .current_page_item > a,
.menu .current-menu-item > a,
.menu .current_page_item > a,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a,
ul.menu > li.current-menu-item > a,
ul.menu > li.current_page_item > a {
  color: var(--yabaleli-primary) !important;
  background: none !important;
  border-bottom: 4px solid var(--yabaleli-primary) !important;
}

/* Dropdown – clean, no red */
.main-navigation .sub-menu,
#site-navigation .sub-menu,
.nav-menu .sub-menu,
ul.menu ul.sub-menu {
  display: none !important;
  position: absolute !important;
  left: 0 !important;
  min-width: 10rem !important;
  margin: 0 !important;
  padding: 0.5rem 0 !important;
  list-style: none !important;
  background: var(--yabaleli-bg) !important;
  border: 1px solid var(--yabaleli-border) !important;
  border-radius: var(--yabaleli-radius) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.main-navigation li:hover > .sub-menu,
#site-navigation li:hover > .sub-menu,
.nav-menu li:hover > .sub-menu,
ul.menu > li:hover > .sub-menu {
  display: block !important;
}
.main-navigation .sub-menu a,
#site-navigation .sub-menu a,
.nav-menu .sub-menu a,
ul.menu .sub-menu a {
  color: var(--yabaleli-text) !important;
  padding: 0.4rem 1rem !important;
  font-weight: 500 !important;
  border-bottom: none !important;
  display: block !important;
}
.main-navigation .sub-menu a:hover,
#site-navigation .sub-menu a:hover,
.nav-menu .sub-menu a:hover,
ul.menu .sub-menu a:hover {
  color: var(--yabaleli-primary) !important;
  background: #f0f9ff !important;
}
.main-navigation .sub-menu .current-menu-item > a,
.nav-menu .sub-menu .current-menu-item > a {
  color: var(--yabaleli-primary) !important;
  background: #f0f9ff !important;
}

/* Footer – flat, no nested boxes */
.site-footer,
footer,
#colophon {
  background-color: #f8fafc !important;
  border-top: 1px solid var(--yabaleli-border) !important;
  color: var(--yabaleli-muted) !important;
}

/* Don’t apply card style to footer widgets – no white box inside footer */
.site-footer .widget,
footer .widget,
#colophon .widget {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.site-footer .widget::before,
footer .widget::before,
#colophon .widget::before {
  display: none !important;
}

.site-footer a,
footer a,
#colophon a {
  color: var(--yabaleli-primary) !important;
}

/* Entry / content area */
.entry-content,
.site-main {
  max-width: 100%;
}

.entry-content h1,
.entry-content h2,
.entry-content h3 {
  color: var(--yabaleli-text) !important;
}

/* Hide ThemesPride / theme author credit in footer */
a[href*="themespride"],
a[href*="ThemesPride"],
.site-footer a[href*="themespride"],
footer a[href*="themespride"],
#colophon a[href*="themespride"],
.themespride-credit,
.theme-by,
.copyright a[href*="themespride"] {
  display: none !important;
}

/* If the credit is in a paragraph or div with the link, hide the parent line */
.site-footer p:has(a[href*="themespride"]),
footer p:has(a[href*="themespride"]),
#colophon p:has(a[href*="themespride"]) {
  display: none !important;
}

/* Hide red/promo bar at bottom of page (theme offer, ThemesPride bar, etc.) */
[class*="promo-bar"],
[class*="announcement-bar"],
[class*="footer-promo"],
[class*="theme-offer"],
[class*="offer-bar"],
[class*="bottom-banner"],
[class*="footer-banner"],
[class*="themespride"]:not(a),
.site-footer [class*="promo"],
.site-footer [class*="offer"],
#colophon [class*="promo"],
#colophon [class*="offer"],
footer [class*="promo"],
footer [class*="offer"] {
  display: none !important;
}

/* ========== 1. Override red – sidebar, search, bullets ========== */
.widget-title,
.widget .widgettitle,
.widget h2,
.widget h3,
aside .widget-title,
aside .widget .widgettitle {
  color: var(--yabaleli-text) !important;
  border-bottom-color: var(--yabaleli-primary) !important;
}

.widget ul li::before,
.widget ul li::marker,
.widget ul li {
  color: var(--yabaleli-primary) !important;
}

.widget ul li a {
  color: var(--yabaleli-primary) !important;
}

/* Search icon and form – no red */
.search-form,
.search-form *,
[class*="search"] svg,
[class*="search"] path,
.search-icon,
.icon-search,
.dashicons-search {
  color: var(--yabaleli-text) !important;
  fill: var(--yabaleli-text) !important;
}

/* Any theme accent that might be red – force to Yabaleli blue */
[style*="color: red"],
[style*="color:#c00"],
[style*="color: #c00"],
[style*="color:#dc2626"],
[style*="color:#ef4444"],
[style*="color:#e11d48"],
.border-red,
.text-red,
.accent,
[class*="accent"],
[class*="theme-color"],
.elementor-accent,
hr,
.section-title::after,
.section-title::before,
.widget-title::after,
h2.widgettitle::after,
h3.widgettitle::after,
.entry-title a:hover,
.entry-meta a,
span[style*="red"],
span[style*="#c00"],
span[style*="#dc2626"],
span[style*="#ef4444"] {
  color: var(--yabaleli-primary) !important;
  border-color: var(--yabaleli-primary) !important;
  background-color: transparent !important;
  fill: var(--yabaleli-primary) !important;
}

/* Red backgrounds and underlines – override to blue */
[style*="background.*red"],
[style*="background.*#c00"],
[style*="background.*#dc2626"],
[style*="background.*#ef4444"],
[class*="bg-red"],
.border-left-red {
  background-color: var(--yabaleli-primary) !important;
  border-color: var(--yabaleli-primary) !important;
}

/* ========== Cards – Yabaleli only (no red): clear card look ========== */
/* Override WP/theme red on presets used in blocks */
.has-vivid-red-color,
.has-vivid-red-background-color,
.has-vivid-red-border-color {
  color: var(--yabaleli-primary) !important;
  background-color: transparent !important;
  border-color: var(--yabaleli-border) !important;
}

/* Theme blog cards: .page-box is the post card wrapper */
.page-box,
article .page-box,
.post .page-box {
  background-color: var(--yabaleli-bg) !important;
  border: 1px solid var(--yabaleli-border) !important;
  border-radius: var(--yabaleli-radius) !important;
  color: var(--yabaleli-text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Card image area – no red tint */
.page-box .box-image,
.page-box .box-image::before,
.page-box .box-image::after {
  background-color: var(--yabaleli-border) !important;
  border-color: var(--yabaleli-border) !important;
  color: var(--yabaleli-text) !important;
}

/* Card content area */
.page-box .box-content {
  background-color: var(--yabaleli-bg) !important;
  color: var(--yabaleli-text) !important;
  padding: 1rem 1.25rem !important;
  border-top: 1px solid var(--yabaleli-border) !important;
}

.page-box .box-content h4 a,
.page-box .box-content .entry-date,
.page-box .box-content .entry-author,
.page-box .box-content .entry-comments,
.page-box .box-content .entry-category,
.page-box .box-info a {
  color: var(--yabaleli-primary) !important;
}

.page-box .box-info {
  color: var(--yabaleli-muted) !important;
}

.page-box .box-content h4 a:hover {
  color: var(--yabaleli-primary-dark) !important;
}

/* Read more button – primary blue only */
.page-box .blogbutton-small,
.page-box .readmore-btn a,
.page-box .more-btn a {
  background-color: var(--yabaleli-primary) !important;
  border-color: var(--yabaleli-primary) !important;
  color: #fff !important;
  border-radius: var(--yabaleli-radius) !important;
}

.page-box .blogbutton-small:hover,
.page-box .readmore-btn a:hover,
.page-box .more-btn a:hover {
  background-color: var(--yabaleli-primary-dark) !important;
  border-color: var(--yabaleli-primary-dark) !important;
  color: #fff !important;
}

/* Generic card-like blocks (sidebar, groups) – Yabaleli palette only */
.card,
.wp-block-group,
.wp-block-group__inner-container,
.wp-block-columns .wp-block-column,
.entry,
.post,
article .page-box,
.widget,
[class*="card"],
[class*="Card"] {
  background-color: var(--yabaleli-bg) !important;
  border: 1px solid var(--yabaleli-border) !important;
  border-radius: var(--yabaleli-radius) !important;
  color: var(--yabaleli-text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.card a,
.entry a,
.post a,
.widget a,
[class*="card"] a,
.wp-block-group a {
  color: var(--yabaleli-primary) !important;
}

/* Card accent / left border – blue only, no red */
.card::before,
.entry::before,
.widget::before,
.page-box::before,
[class*="card"]::before,
[class*="border-left"] {
  border-left-color: var(--yabaleli-primary) !important;
  background-color: var(--yabaleli-primary) !important;
}

/* Widget blocks in sidebar – padded card look */
#secondary .widget,
#theme-sidebar .widget,
aside .widget {
  padding: 1rem 1.25rem !important;
  margin-bottom: 1rem !important;
}

/* ========== 3. Page title bar – compact like current (Astro) site, no black / no large image ========== */
/* Wrapper used on home/front page: no black, one slim blue bar */
.external-div {
  background: linear-gradient(
    to right,
    var(--yabaleli-primary),
    var(--yabaleli-primary-dark)
  ) !important;
  background-color: var(--yabaleli-primary) !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 2rem 1rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}

/* The page title area (when not inside .external-div): same compact blue bar */
.box-image-page {
  background: linear-gradient(
    to right,
    var(--yabaleli-primary),
    var(--yabaleli-primary-dark)
  ) !important;
  background-color: var(--yabaleli-primary) !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 2rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}

/* Hide the large image/background block – never show tall image header */
.box-image-page .single-page-img,
.external-div .single-page-img,
.header-img.single-page-img {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Collapse image area inside .external-div so it doesn’t create height */
.external-div .box-image-page {
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

/* Override theme media query that forces 250px height on small screens */
@media (max-width: 1000px) {
  .box-image-page .single-page-img,
  .header-img.single-page-img,
  .single-page-img,
  .external-div .single-page-img,
  .external-div .box-image-page img {
    height: 0 !important;
    min-height: 0 !important;
    display: none !important;
    background-image: none !important;
  }
  .external-div .box-image-page {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .box-image-page {
    padding: 1.5rem 1rem !important;
    min-height: 0 !important;
  }
  .external-div {
    padding: 1.5rem 1rem !important;
  }
}

/* Title text in the bar – white, centered (when inside .box-image-page) */
.box-image-page .box-text {
  position: relative !important;
  width: 100% !important;
  padding: 0 !important;
  background: none !important;
}
.box-image-page .box-text h2 {
  color: #fff !important;
  text-align: center !important;
  margin: 0 !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  background: none !important;
}

/* Title when .box-text is direct child of .external-div (e.g. home page) */
.external-div .box-text {
  position: relative !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  flex: 1 1 100% !important;
}
.external-div .box-text h2 {
  color: #fff !important;
  text-align: center !important;
  margin: 0 !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  background: none !important;
}

@media (min-width: 768px) {
  .box-image-page .box-text h2,
  .external-div .box-text h2 {
    font-size: 2.25rem !important;
  }
}

/* ========== 4. Hide theme header/title image everywhere (clean Yabaleli header) ========== */
.wp-custom-header,
.custom-header,
.header-image,
#masthead .header-image,
.site-header .header-image,
.site-header .wp-custom-header,
[class*="header-image"],
[class*="header-banner"] {
  display: none !important;
}

/* Hide banner / big image on front page only */
body.home .wp-custom-header,
body.home .header-image,
body.home .page-header,
body.home .banner,
body.home .hero-banner,
body.home .front-page-banner,
body.home .entry-header .post-thumbnail,
body.home .wp-block-cover,
body.home .has-post-thumbnail .post-thumbnail,
body.home figure.wp-block-image:first-of-type,
body.home .site-main > .wp-block-cover,
body.home .site-main > .alignwide img,
body.home .site-main > .alignfull img {
  display: none !important;
}

/* Hide first large image in main content on home */
body.home .site-main .wp-block-cover,
body.home .site-main .wp-block-image.alignfull {
  display: none !important;
}

/* Keep only one search (header). Hide search in footer and in sidebar */
.site-footer .search-form,
.site-footer .widget_search,
footer .search-form,
footer .widget_search,
#colophon .search-form,
#colophon .widget_search,
#secondary .search-form,
#secondary .widget_search,
aside .search-form,
aside .widget_search {
  display: none !important;
}

/* ========== Yabaleli footer (shortcode [yabaleli_footer]) ========== */
.yabaleli-footer {
  padding: 0.75rem 1rem;
  margin-top: 0;
  border-top: none;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--yabaleli-muted);
}

.yabaleli-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

@media (min-width: 768px) {
  .yabaleli-footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 0.5rem;
  }
}

.yabaleli-footer-copy {
  color: var(--yabaleli-text);
}

.yabaleli-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.25rem;
}

.yabaleli-footer-links a {
  color: var(--yabaleli-primary) !important;
  text-decoration: none;
}

.yabaleli-footer-links a:hover {
  text-decoration: underline;
}

/* Pipe separator instead of bullet */
.yabaleli-footer-sep {
  font-size: 0;
  margin: 0;
  user-select: none;
}
.yabaleli-footer-sep::after {
  content: " | ";
  font-size: 0.8125rem;
  color: var(--yabaleli-muted);
}