/* ═══════════════════════════════════════════════════
   Webdazy Custom CSS  v2.1
   Brand: Yellow #FFD000 / #FFB700  |  Dark #0F0F0F / #2A2929 / #444342
         Light #FDFDFD / #EFEFEF
═══════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────── */
:root {
  --primary:       #FFD000;
  --primary-dark:  #FFB700;
  --primary-light: #FFE14D;
  --dark-900:      #0F0F0F;
  --dark-800:      #1A1A1A;
  --dark-700:      #2A2929;
  --dark-600:      #444342;
  --dark-500:      #5A5958;
  --light-100:     #FDFDFD;
  --light-200:     #EFEFEF;
  --light-300:     #E0E0E0;
  --text-dark:     #0F0F0F;
  --text-muted:    #6B6A69;
}

/* ── Fonts ──────────────────────────────────────── */
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif; }

/* ── Selection ──────────────────────────────────── */
::selection { background: #FFD000; color: #0F0F0F; }

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #FFD000; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #FFB700; }

/* ── Smooth dark-mode transitions ───────────────── */
*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: 200ms;
  transition-timing-function: ease;
}
button, a { transition: all 0.2s ease; }

/* ══════════════════════════════════════════════════
   PROSE / Blog
══════════════════════════════════════════════════ */
.prose h2 { margin-top: 2rem; margin-bottom: 1rem; font-size: 1.5rem; }
.prose h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; font-size: 1.25rem; }
.prose ul  { list-style-type: disc; padding-left: 1.5rem; }
.prose ol  { list-style-type: decimal; padding-left: 1.5rem; }
.prose li  { margin-bottom: 0.4rem; }
.prose blockquote { border-left-color: #FFD000 !important; }
.dark .prose p, .dark .prose li { color: #A09F9E; }

/* ══════════════════════════════════════════════════
   LINE-CLAMP UTILITIES
══════════════════════════════════════════════════ */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ══════════════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════════════ */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}
.marquee-track { animation: marquee 22s linear infinite; }

/* ══════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════ */
.page-numbers {
  display: inline-flex; align-items: center; gap: 0.5rem;
  list-style: none; padding: 0; margin: 0; flex-wrap: wrap; justify-content: center;
}
.page-numbers li a,
.page-numbers li span {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  font-size: 0.875rem; font-weight: 600; color: #444342;
  border: 1.5px solid #E0E0E0; transition: all 0.2s; text-decoration: none;
}
.dark .page-numbers li a,
.dark .page-numbers li span { color: #A09F9E; border-color: #444342; background-color: #2A2929; }
.page-numbers li a:hover { color: #0F0F0F; background-color: #FFD000; border-color: #FFD000; }
.page-numbers li span.current { color: #0F0F0F; background-color: #FFD000; border-color: #FFD000; }
.page-numbers li .prev,
.page-numbers li .next { width: auto; padding: 0 1rem; font-size: 0.8rem; }

/* ══════════════════════════════════════════════════
   WP COMMENTS
══════════════════════════════════════════════════ */
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .comment { margin-bottom: 1.5rem; }
.comment-author .avatar { border-radius: 8px; }
.comment-content p { font-size: 0.95rem; color: #6B6A69; line-height: 1.7; }
.dark .comment-content p { color: #A09F9E; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  width: 100%; padding: 0.75rem 1rem;
  border: 1.5px solid #EFEFEF; border-radius: 10px;
  font-size: 0.95rem; background: #FDFDFD; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s; margin-bottom: 0.75rem;
}
.dark .comment-form input[type="text"],
.dark .comment-form input[type="email"],
.dark .comment-form textarea {
  background: #2A2929; border-color: #444342; color: #EFEFEF;
}
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: #FFD000; box-shadow: 0 0 0 3px rgba(255,208,0,0.15);
}
.comment-form input[type="submit"] {
  background: #FFD000; color: #0F0F0F;
  font-weight: 700; padding: 0.75rem 2rem;
  border: none; border-radius: 10px; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.comment-form input[type="submit"]:hover { background: #FFB700; transform: translateY(-1px); }

/* ══════════════════════════════════════════════════
   CF7 OVERRIDES
══════════════════════════════════════════════════ */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%; padding: 0.75rem 1rem;
  border: 1.5px solid #EFEFEF; border-radius: 10px;
  font-size: 0.95rem; background: #FDFDFD;
  margin-bottom: 0.75rem; outline: none;
  transition: border-color 0.2s; color: #0F0F0F;
}
.dark .wpcf7-form input,
.dark .wpcf7-form select,
.dark .wpcf7-form textarea { background: #2A2929; border-color: #444342; color: #EFEFEF; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus { border-color: #FFD000; box-shadow: 0 0 0 3px rgba(255,208,0,0.15); }
.wpcf7-form input[type="submit"] {
  background: #FFD000; color: #0F0F0F;
  font-weight: 700; padding: 0.875rem 2rem;
  border: none; border-radius: 10px; cursor: pointer;
  width: 100%; transition: background 0.2s, transform 0.2s; font-size: 0.95rem;
}
.wpcf7-form input[type="submit"]:hover { background: #FFB700; transform: translateY(-1px); }
.wpcf7-not-valid-tip { color: #ef4444; font-size: 0.8rem; margin-top: 0.25rem; display: block; }
.wpcf7-response-output { padding: 0.75rem 1rem; border-radius: 8px; margin-top: 1rem; font-size: 0.875rem; font-weight: 500; }
.wpcf7-mail-sent-ok { background: #d1fae5; color: #065f46; }
.wpcf7-mail-sent-ng { background: #fee2e2; color: #991b1b; }

/* ══════════════════════════════════════════════════
   SCREEN READER
══════════════════════════════════════════════════ */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal !important;
}