/*
Theme Name: Kadence Child - Void Verses
Theme URI: https://voidverses.com
Description: Clean poetry blog with melancholic aesthetic - RESPONSIVE FIXES
Author: Andrei Alexandru Aldea
Template: kadence
Version: 3.2.1
License: GPL v2 or later
Text Domain: kadence-child
*/

/* ===== RESPONSIVE FOUNDATION ===== */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Prevent horizontal overflow */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  position: relative;
}

:root {
  --vv-bg: #F5F5F0;
  --vv-text: #3D3D3D;
  --vv-accent: #5D4E6D;
  --vv-accent-hover: #4A3E5B;
  --vv-border: #DCDCD6;
  --vv-muted: #8A8A8A;
  --vv-dark-bg: #1A1A1C;
  --vv-dark-text: #E6E6E6;
  --vv-dark-accent: #A192B5;
  --vv-dark-border: #2C2C2E;
}

@media (prefers-color-scheme: dark) {
  :root {
    --vv-bg: var(--vv-dark-bg);
    --vv-text: var(--vv-dark-text);
    --vv-accent: var(--vv-dark-accent);
    --vv-border: var(--vv-dark-border);
  }
}

.dark-mode {
  --vv-bg: var(--vv-dark-bg);
  --vv-text: var(--vv-dark-text);
  --vv-accent: var(--vv-dark-accent);
  --vv-border: var(--vv-dark-border);
}

/* ===== HIDE AUTHOR NAME (KEEP FOR SEO, HIDE VISUALLY) ===== */
.entry-meta .entry-author,
.entry-meta .author,
.entry-meta .posted-by,
.entry-meta .by-author,
.entry-meta .vcard,
.entry-meta .author.vcard,
.entry-meta a[rel="author"],
.post-author,
.entry-author-name,
.kadence-author-name,
span.author,
.author-name {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Hide "by" text that appears before author */
.entry-meta::before,
.entry-meta .by-text,
.entry-meta span:first-child:not(.entry-date):not(.posted-on) {
  display: none !important;
}

/* If there's a separator bullet before author, hide it */
.entry-meta > span:first-of-type + span::before {
  content: '' !important;
  display: none !important;
}

/* Clean up any orphaned bullets/separators */
.entry-meta .sep,
.entry-meta .separator {
  display: none !important;
}

/* Ensure date still shows properly */
.entry-meta .entry-date,
.entry-meta .posted-on,
.entry-meta time {
  display: inline !important;
  visibility: visible !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  margin: 0 !important;
}

/* If Kadence uses specific classes */
.entry-meta .kadence-updated-date,
.entry-meta .kadence-posted-on {
  display: inline !important;
}

/* Remove any leading/trailing spaces */
.entry-meta {
  white-space: nowrap;
}

.entry-meta > * {
  margin-left: 0 !important;
}

/* ===== HIDE UNCATEGORIZED CATEGORY TEXT ===== */
/* CSS fallback - hide any uncategorized category links */
a[href*="uncategorized"] {
    display: none !important;
}

/* Hide empty category containers and separators */
.cat-links:empty,
.post-categories:empty,
.entry-meta .cat-links:empty + .sep {
    display: none !important;
}

/* ===== CRITICAL LAYOUT FIXES ===== */

/* Force full-width containers to respect viewport */
.site-container,
#wrapper,
#inner-wrap,
.content-bg,
.site,
#main,
#main-content,
.entry-content-wrap,
.entry-content,
.wp-block-group,
.wp-block-columns,
.alignwide,
.alignfull {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Safe content container with responsive padding */
.site-container {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Ensure content doesn't overflow */
.entry-content * {
  max-width: 100% !important;
}

img, video, iframe, object, embed {
  max-width: 100%;
  height: auto;
}

/* Fix text overflow */
.entry-content p,
.entry-content li,
.entry-content dd,
.entry-content blockquote,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* ===== HIDE KADENCE ELEMENTS ===== */
.site-branding img,
.custom-logo,
img[src*="book"],
.icon-book,
.book-logo,
.kadence-svg-iconset,
.kb-svg-icon-wrap,
.entry-hero,
#main-header,
.site-header-row-layout-standard,
.site-header-upper-wrap {
  display: none !important;
}

/* ===== FORCE CLEAN BACKGROUNDS ===== */
html,
body,
.site,
#main-content,
.content-bg,
.site-container,
#inner-wrap,
#wrapper,
.entry-content-wrap {
  background-color: var(--vv-bg) !important;
  background: var(--vv-bg) !important;
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
html,
body,
.site,
.entry-content,
p,
li,
dd {
  font-family: 'Source Serif 4', serif !important;
  color: var(--vv-text) !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--vv-text) !important;
  font-weight: 600 !important;
  overflow-wrap: break-word;
}

/* Responsive font scaling */
h1, .entry-title { 
  font-size: clamp(1.8rem, 5vw, 2.2rem) !important; 
  line-height: 1.3 !important;
}
h2 { 
  font-size: clamp(1.4rem, 4vw, 1.6rem) !important; 
  line-height: 1.4 !important;
}
h3 { 
  font-size: clamp(1.2rem, 3vw, 1.25rem) !important; 
  line-height: 1.4 !important;
}

button,
.button,
.wp-block-button__link,
.kb-btn,
input[type="submit"] {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  background-color: var(--vv-accent) !important;
  background: var(--vv-accent) !important;
  color: var(--vv-bg) !important;
  border: 1px solid var(--vv-accent) !important;
}

button:hover,
.button:hover,
.wp-block-button__link:hover,
.kb-btn:hover {
  background-color: var(--vv-accent-hover) !important;
  background: var(--vv-accent-hover) !important;
  border-color: var(--vv-accent-hover) !important;
}

a {
  color: var(--vv-accent) !important;
  text-decoration: none;
}

a:hover {
  color: var(--vv-accent-hover) !important;
}

/* ===== CUSTOM HEADER - RESPONSIVE VERTICAL LAYOUT ===== */
.vv-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px 20px;
  background: var(--vv-bg);
  border-bottom: 1px solid var(--vv-border);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.vv-logo-wrap {
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
}

.vv-logo {
  width: min(220px, 70vw);
  height: auto;
  color: var(--vv-text);
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.vv-controls {
  display: flex;
  gap: clamp(12px, 3vw, 16px);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* MENU BUTTON - RESPONSIVE */
.vv-menu-btn {
  width: clamp(40px, 10vw, 44px);
  height: clamp(40px, 10vw, 44px);
  border: 1px solid var(--vv-border);
  border-radius: 6px;
  background: var(--vv-bg);
  color: var(--vv-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.vv-menu-btn:hover {
  color: var(--vv-accent-hover);
  border-color: var(--vv-accent-hover);
  transform: translateY(-2px);
}

.vv-menu-btn svg {
  width: clamp(16px, 4vw, 18px);
  height: clamp(12px, 3vw, 14px);
  display: block;
}

.vv-menu-btn svg rect {
  fill: currentColor;
}

/* LANGUAGE DROPDOWN - RESPONSIVE */
.vv-lang-dropdown {
  position: relative;
}

.vv-lang-btn {
  width: clamp(40px, 10vw, 44px);
  height: clamp(40px, 10vw, 44px);
  border: 1px solid var(--vv-border);
  border-radius: 6px;
  background: var(--vv-bg);
  color: var(--vv-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.vv-lang-btn:hover {
  color: var(--vv-accent-hover);
  border-color: var(--vv-accent-hover);
}

.vv-lang-btn svg {
  width: clamp(18px, 5vw, 20px);
  height: clamp(18px, 5vw, 20px);
  display: block;
}

.vv-lang-btn svg * {
  stroke: currentColor;
  fill: none;
}

.vv-lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--vv-bg);
  border: 1px solid var(--vv-border);
  border-radius: 6px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 1000;
  min-width: min(120px, 90vw);
  max-width: 200px;
}

.vv-lang-dropdown.open .vv-lang-menu {
  display: flex;
}

.vv-lang-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background 0.2s ease;
  text-decoration: none;
  color: var(--vv-text) !important;
  font-size: clamp(13px, 3vw, 14px);
  white-space: nowrap;
}

.vv-lang-menu a:hover {
  background: rgba(93,78,109,0.08);
}

.vv-lang-menu img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

/* DARK MODE TOGGLE - RESPONSIVE */
.vv-theme-toggle {
  width: clamp(40px, 10vw, 44px);
  height: clamp(40px, 10vw, 44px);
  border: 1px solid var(--vv-border);
  border-radius: 50%;
  background: var(--vv-bg);
  color: var(--vv-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
  padding: 0;
  flex-shrink: 0;
}

.vv-theme-toggle:hover {
  color: var(--vv-accent-hover);
  border-color: var(--vv-accent-hover);
  transform: rotate(8deg);
}

.theme-icon {
  width: clamp(20px, 5vw, 22px);
  height: clamp(20px, 5vw, 22px);
  display: block;
}

.theme-icon * {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-icon.sun {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.theme-icon.moon {
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s ease;
}

.dark-mode .theme-icon.sun {
  opacity: 0;
}

.dark-mode .theme-icon.moon {
  opacity: 1;
}

/* ===== RESPONSIVE DROPDOWN MENU PANEL ===== */
.vv-menu-panel {
  position: fixed;
  top: 0;
  left: -100%;
  width: min(300px, 85vw);
  height: 100vh;
  background: var(--vv-bg);
  border-right: 1px solid var(--vv-border);
  padding: 20px;
  transition: left 0.3s ease;
  z-index: 9999;
  overflow-y: auto;
}

.vv-menu-panel.open {
  left: 0;
}

.vv-menu-panel nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vv-menu-panel nav li {
  margin-bottom: 12px;
}

.vv-menu-panel nav a {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(15px, 4vw, 16px);
  color: var(--vv-text) !important;
  text-decoration: none;
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background 0.2s ease;
  overflow-wrap: break-word;
}

.vv-menu-panel nav a:hover {
  background: rgba(93,78,109,0.08);
}

.vv-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9998;
}

.vv-menu-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* ===== RESPONSIVE FOOTER SOCIAL ===== */
.vv-footer-social {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 3vw, 16px);
  padding: 30px 0;
  border-top: 1px solid var(--vv-border);
  margin-top: 40px;
  flex-wrap: wrap;
}

.vv-social-icon {
  width: clamp(36px, 10vw, 40px);
  height: clamp(36px, 10vw, 40px);
  border: 1px solid var(--vv-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vv-accent) !important;
  background: transparent;
  text-decoration: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.vv-social-icon:hover {
  background: var(--vv-accent-hover);
  color: var(--vv-bg) !important;
  border-color: var(--vv-accent-hover);
  transform: translateY(-2px);
}

.vv-social-icon svg {
  width: clamp(18px, 5vw, 20px);
  height: clamp(18px, 5vw, 20px);
  fill: currentColor;
}

/* ===== CRITICAL CONTENT AREA FIXES ===== */
.entry-content {
  max-width: min(650px, 95vw);
  margin: 0 auto;
  padding: clamp(20px, 5vw, 40px) clamp(15px, 4vw, 20px);
  width: 100%;
  overflow-wrap: break-word;
}

.entry-content .poem {
  white-space: pre-wrap;
  font-size: clamp(16px, 4vw, 18px);
  line-height: 1.8;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Fix for Kadence blocks and Gutenberg */
.wp-block-group,
.wp-block-columns,
.wp-block-column {
  max-width: 100% !important;
}

.alignwide {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 480px) {
  .site-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .vv-header {
    padding: 20px 15px 15px;
  }
  
  .vv-logo {
    width: min(180px, 65vw);
  }
  
  .vv-controls {
    gap: 10px;
  }
  
  .vv-menu-btn,
  .vv-lang-btn,
  .vv-theme-toggle {
    width: 38px;
    height: 38px;
  }
  
  .entry-content {
    padding: 15px 10px;
  }
  
  /* Ensure text doesn't overflow on tiny screens */
  body, .entry-content, p, li {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* ===== TABLET OPTIMIZATIONS ===== */
@media (min-width: 481px) and (max-width: 1024px) {
  .site-container {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  
  .vv-header {
    padding: 25px 25px 20px;
  }
  
  .vv-logo {
    width: min(200px, 60vw);
  }
  
  .entry-content {
    max-width: min(600px, 90vw);
    padding: 30px 25px;
  }
}

/* ===== DESKTOP OPTIMIZATIONS ===== */
@media (min-width: 1025px) {
  .site-container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  
  .entry-content {
    max-width: 650px;
  }
}

/* ===== SAFETY OVERRIDES ===== */
/* Prevent any element from causing horizontal scroll */
* {
  max-width: 100%;
}

/* Ensure smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
.vv-social-icon:focus-visible {
  outline: 2px solid var(--vv-accent);
  outline-offset: 2px;
}