/*
Theme Name: Lovable Onepage
Theme URI: https://liveinsandton.dev
Author: Live in Sandton
Author URI: https://liveinsandton.dev
Description: Minimal theme that serves a static Lovable export as the WordPress front page.
Version: 1.1.0
License: GPL-2.0-or-later
Text Domain: lovable-onepage
*/

/* --------------------------------------------------------------
   1. HEADER VISIBILITY CONTROL
   - SPA header shows ONLY on homepage (/)
   - WP (black) header shows on all sub-pages
-------------------------------------------------------------- */

/* --- Sub-pages: hide Lovable SPA header completely --- */
body:not(.home) #root header,
body:not(.home) #root .header,
body:not(.home) #root [data-spa-header],
body:not(.home) #root [class*="Header"] {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --- Homepage: show Lovable SPA header --- */
body.home #root header,
body.home #root .header,
body.home #root [data-spa-header],
body.home #root [class*="Header"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: sticky;
  top: 0;
  z-index: 1200;
}

/* --- Homepage: hide the WP PHP header/footer to avoid duplicates --- */
body.home .site-header,
body.home .site-footer {
  display: none !important;
}

/* --- Sub-pages: show black WP header, sticky --- */
body:not(.home) .site-header {
  display: block !important;
  position: sticky;
  top: 0;
  z-index: 1100;
}

/* --- Safety: remove top gaps if SPA adds one --- */
body:not(.home) #root {
  padding-top: 0 !important;
}
body:not(.home) #root > *:first-child {
  margin-top: 0 !important;
}

/* --------------------------------------------------------------
   2. GLOBAL SPA HOUSEKEEPING
-------------------------------------------------------------- */
#root header a,
#root header nav a {
  color: #ffffff !important;
  text-decoration: none;
}
#root header nav a:hover {
  opacity: 0.9;
}

#root footer a,
#root footer a:visited {
  color: #8fb7ff !important;
  text-decoration: none;
}
#root footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

#root .btn,
#root a.btn,
#root .button,
#root a.button,
#root .cta,
#root a.cta {
  color: #ffffff !important;
}

/* --------------------------------------------------------------
   3. TEMP FALLBACK (if SPA navbar missing)
-------------------------------------------------------------- */
body.home .site-header {
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1300;
}
body.home #root {
  margin-top: 64px !important;
}

/* --------------------------------------------------------------
   4. TIKTOK SECTION (WordPress-injected)
-------------------------------------------------------------- */
.section--tiktok {
  background: linear-gradient(to bottom, #f4f4f4 0%, #1a1a1a 100%) !important;
  color: #fff !important;
  padding: 60px 0 !important;
  text-align: center;
}
.section--tiktok .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.section--tiktok * {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}
.section--tiktok h1,
.section--tiktok h2,
.section--tiktok h3,
.section--tiktok h4,
.section--tiktok p,
.section--tiktok li {
  color: #fff !important;
}
.section--tiktok a,
.section--tiktok a:visited {
  color: #8fb7ff !important;
  text-decoration: none;
}
.section--tiktok a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}
.section--tiktok .sbtt-feed,
.section--tiktok .sbtt-feed * {
  color: #fff !important;
}
.section--tiktok .sbtt-feed {
  margin-top: 20px;
}
#below-hero-slot > #tiktok-feed {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------
   5. WORDPRESS SKIN (Blog / Pages)
-------------------------------------------------------------- */
.wp-skin body {
  color: #1a1a1a;
  background: #ffffff;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
.wp-skin img {
  max-width: 100%;
  height: auto;
  display: block;
}
.wp-skin .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.wp-skin .py-lg {
  padding: 48px 0;
}

/* --- Header / Footer (sub-pages) --- */
.site-header {
  background: #000;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: auto;
  padding: 12px 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand__title {
  font-family: "Playfair Display", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}
.brand__tag {
  font-size: 11px;
  color: #cfcfcf;
  letter-spacing: 0.06em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
}
.site-nav a {
  color: #fff;
  text-decoration: none;
}
.site-nav a:hover {
  opacity: 0.9;
}
.nav-contacts {
  display: flex;
  gap: 14px;
  align-items: center;
  color: #bbb;
}
.nav-contact {
  color: #bbb;
  text-decoration: none;
  font-weight: 600;
}
.nav-contact:hover {
  opacity: 0.9;
}
.site-footer {
  background: #000;
  color: #ccc;
}

/* --------------------------------------------------------------
   6. BLOG CARDS
-------------------------------------------------------------- */
.blog-index .page-hero--short {
  padding: 64px 0 32px;
  background: #0a0a0a;
  color: #fff;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
  margin: 32px auto 48px;
}
.post-card {
  background: #111;
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}
.post-card__thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.post-card__body {
  padding: 18px;
}
.post-card__title {
  font-size: 1.1rem;
  line-height: 1.2;
  margin: 0 0 6px;
}
.post-card__title a {
  color: #fff;
  text-decoration: none;
}
.post-card__title a:hover {
  opacity: 0.9;
}
.post-card__meta {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0 0 10px;
}
.post-card__excerpt {
  margin: 0 0 14px;
  opacity: 0.9;
}
.post-card__cta {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  text-decoration: none;
  font-weight: 600;
}
.pagination {
  margin: 12px 0 24px;
}
.pagination .page-numbers {
  color: #fff;
  margin-right: 8px;
  text-decoration: none;
}
.pagination .current {
  font-weight: 700;
}

/* --------------------------------------------------------------
   7. LOGO SCALE
-------------------------------------------------------------- */
#root header img,
.site-header img,
header img.custom-logo {
  transform: scale(1.25);
  transform-origin: center;
}
#root footer img,
.site-footer img {
  transform: scale(1.25);
  transform-origin: center;
}
#root header img,
#root footer img {
  display: inline-block;
  transition: transform 0.3s ease;
}
#root header img:hover,
#root footer img:hover {
  transform: scale(1.3);
}

/* --------------------------------------------------------------
   8. ABOUT PAGE CLEANUP
-------------------------------------------------------------- */
.page-hero--short {
  padding: 64px 0 32px;
  background: #0a0a0a;
  color: #fff;
}
.page-section {
  padding: 40px 0;
}
.page .container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Kill stray duplicate WP headers or white strips */
.page-template-about .site-header + .site-header,
.page-template-about .site-header + div[style*="background:#fff"],
.page-template-about .site-header + div[style*="background-color:#fff"] {
  display: none !important;
}

/* Shorter hero if a SPA section leaks in */
.page-template-about #root section:first-of-type {
  min-height: 56vh !important;
  padding-top: 48px !important;
}

/* Clean white background */
.page-template-about {
  background: #fff !important;
}

/* SAFE HOTFIX: On non-home pages, render #root's children, but hide SPA chrome */
body:not(.home) #root { 
  display: contents !important;   /* keeps inner content visible */
}

/* …and kill the SPA header/hero/watermark that leak in */
body:not(.home) #root header,
body:not(.home) #root .header,
body:not(.home) #root nav,
body:not(.home) #root [data-spa-header],
body:not(.home) #root [class*="Header"],
body:not(.home) #root [class*="Masthead"],
body:not(.home) #root [class*="Hero"],
body:not(.home) #root [class*="Watermark"] {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* insurance: remove any top gap that SPA might add */
body:not(.home) #root > *:first-child { margin-top: 0 !important; }