/*
Theme Name: Motive Child – nacestylevne
Theme URI: https://nacestylevne.cz/
Description: Bold deal-grid redesign for nacestylevne.cz, built as a proper child of Motive. Overrides styling only — every Bunyad sidebar, shortcode, menu and widget area from the parent theme keeps working unchanged.
Author: nacestylevne.cz
Template: motive
Version: 1.0.0
Text Domain: motive-child
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --ncl-navy: #0b2f52;
  --ncl-navy-ink: #0b1f33;
  --ncl-accent: #ff7a45;
  --ncl-bg: #f3f6f9;
  --ncl-card: #ffffff;
  --ncl-line: #dde5ec;
  --ncl-muted: #6b7d8f;
  --ncl-heading-font: 'Sora', Georgia, serif;
  --ncl-body-font: 'Work Sans', Arial, sans-serif;
}

/* ============================================================
   BASE / TYPOGRAPHY
   ============================================================ */
body {
  font-family: var(--ncl-body-font);
  background: var(--ncl-bg);
}

h1, h2, h3, h4, h5, h6,
.post-title, .archive-heading, .main-heading,
.widget-title, .comments-title {
  font-family: var(--ncl-heading-font) !important;
}

a { transition: opacity .15s ease, color .15s ease; }

/* recolor Motive's built-in accent system (was #b93434) */
.main-color { color: var(--ncl-accent) !important; }
.main-color-bg { background: var(--ncl-accent) !important; }
.image-overlay { background: var(--ncl-navy); }

/* ============================================================
   TOP BAR (native Motive region — partials/header/top-bar.php,
   toggle via the theme's own "Disable Top Bar" option)
   ============================================================ */
.top-bar {
  background: var(--ncl-navy-ink);
  color: #dce8f3;
}
.top-bar .trending-ticker .heading { color: var(--ncl-accent); font-weight: 700; }
.top-bar a { color: #dce8f3; }
.top-bar .search-box .query { font-family: var(--ncl-body-font); }

/* ============================================================
   HEADER
   ============================================================ */
#main-head {
  background: var(--ncl-navy);
  border-bottom: none;
}
#main-head .title a {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
}
#main-head .title img {
  max-height: 40px;
  width: auto;
  display: block;
}
#main-head .right,
#main-head .right a {
  color: #dce8f3;
}

nav.navigation {
  background: var(--ncl-navy);
  border-top: 1px solid rgba(255,255,255,.12);
}
nav.navigation > div > ul > li > a,
nav.navigation .mobile a {
  color: #ffffff !important;
  font-family: var(--ncl-body-font);
  font-weight: 700;
}
nav.navigation > div > ul > li > a:hover { opacity: .75; }
nav.navigation .sub-menu {
  background: var(--ncl-navy-ink);
}

/* ============================================================
   LAYOUT / POST GRID
   ============================================================ */
.wrap { max-width: 1320px; }

/* The actual post cards live one level deeper, in a .listing-classic
   wrapper inside .col-8.main-content — not as direct children of
   .main-content itself (confirmed against the live DOM). Grid that
   wrapper, not .main-content. */
.ts-row .col-8.main-content > .listing-classic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

/* first post on the homepage/archive reads as the day's deal */
.ts-row .col-8.main-content > .listing-classic > article:first-of-type {
  grid-column: 1 / -1;
  position: relative;
}
.ts-row .col-8.main-content > .listing-classic > article:first-of-type .featured {
  position: relative;
}
.ts-row .col-8.main-content > .listing-classic > article:first-of-type .featured img {
  height: 320px;
  object-fit: cover;
}
.ts-row .col-8.main-content > .listing-classic > article:first-of-type .post-header::before {
  content: "Nabídka dne";
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--ncl-accent);
  color: var(--ncl-navy-ink);
  font-family: var(--ncl-heading-font);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
}
.ts-row .col-8.main-content > .listing-classic > article:first-of-type .post-title { font-size: 30px; }

/* ============================================================
   DEAL CARDS
   ============================================================ */
article.post {
  background: var(--ncl-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11,31,51,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
article.post:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(11,31,51,.12);
}
article.post .post-header { padding: 0; }
article.post .featured { margin: 0; }
article.post .featured img { border-radius: 0; display: block; width: 100%; }
article.post .post-title {
  padding: 14px 16px 0;
  font-size: 18px;
  line-height: 1.3;
}
article.post .post-title a { color: var(--ncl-navy-ink); text-decoration: none; }
article.post .post-title a:hover { color: var(--ncl-accent); }
article.post .post-meta {
  padding: 6px 16px 16px;
  color: var(--ncl-muted);
  font-size: 13px;
}

/* the price JS (js/price-tag.js) wraps the "NNN Kč" run in post titles */
.price-tag {
  display: inline-block;
  background: var(--ncl-accent);
  color: var(--ncl-navy-ink);
  font-family: var(--ncl-heading-font);
  font-weight: 800;
  border-radius: 5px;
  padding: 1px 8px;
  margin-left: 4px;
}

/* ============================================================
   SIDEBAR — same motive-primary-sidebar, only reskinned.
   No widgets moved, added or removed.
   ============================================================ */
aside.sidebar { background: transparent; }
aside.sidebar > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
aside.sidebar .widget {
  background: var(--ncl-card);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(11,31,51,.06);
}
aside.sidebar .widget img { border-radius: 8px; max-width: 100%; height: auto; }
aside.sidebar h5.widget-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ncl-navy);
  margin: 0 0 12px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.main-footer.dark {
  background: var(--ncl-navy-ink);
}
.main-footer.dark a:hover { color: var(--ncl-accent); }
.main-footer .widget-title { color: #ffffff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 782px) {
  .ts-row .col-8.main-content > .listing-classic { grid-template-columns: 1fr; }
}