/*
Theme Name: Kadence ComptaLegal
Template: kadence
Description: ComptaLegal branded child theme
Version: 1.0.4
Text Domain: kadence-comptalegal
*/

/* ── Cairo Font ── */
@font-face { font-family: 'Cairo'; src: url('./assets/fonts/Cairo-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cairo'; src: url('./assets/fonts/Cairo-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cairo'; src: url('./assets/fonts/Cairo-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Cairo'; src: url('./assets/fonts/Cairo-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

/* ── CSS Variables — matches marketing site globals.css ── */
:root {
  --cl-teal: #00a99d;
  --cl-teal-deep: #008a80;
  --cl-indigo: #2f3061;
  --cl-indigo-deep: #232550;
  --cl-charcoal: #333333;
  --cl-slate: #6b7080;
  --cl-bg: #ffffff;
  --cl-surface: #f4f5fa;
  --cl-mist: #ebedf5;
  --cl-fog: #d5d8e3;
  --cl-text: #333333;
  --cl-text-muted: #6b7080;
  --cl-border: #d5d8e3;
  --cl-card-bg: #ffffff;
}

/* ── Override Kadence palette for dark mode ──
   html.dark:root has specificity (0,2,0) which beats Kadence's
   inline :root (0,1,0), ensuring our dark values aren't overridden */
html.dark:root {
  --cl-teal: #33c4b8;
  --cl-teal-deep: #5cded3;
  --cl-bg: #0f1119;
  --cl-surface: #1a1b2e;
  --cl-mist: #242540;
  --cl-fog: #2e3052;
  --cl-text: #e1e2e8;
  --cl-text-muted: #9a9cd4;
  --cl-border: #3a3c5c;
  --cl-card-bg: #1a1b2e;
  --cl-indigo: #8385c2;
  --cl-charcoal: #e1e2e8;

  /* Override Kadence's own palette variables so all Kadence components respect dark mode */
  --global-palette1: #33c4b8;
  --global-palette2: #5cded3;
  --global-palette3: #e1e2e8;
  --global-palette4: #c8c9d4;
  --global-palette5: #9a9cd4;
  --global-palette6: #7a7ca0;
  --global-palette7: #242540;
  --global-palette8: #1a1b2e;
  --global-palette9: #0f1119;
  --global-palette9rgb: 15, 17, 25;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Cairo', system-ui, -apple-system, sans-serif !important;
  background-color: var(--cl-bg) !important;
  color: var(--cl-text) !important;
  margin: 0;
  transition: background-color 0.2s, color 0.2s;
}
html[dir="rtl"] body { font-size: 18px; line-height: 1.9; }
html[dir="ltr"] body { font-size: 17px; line-height: 1.7; }

a { color: var(--cl-teal); text-decoration: none; }
a:hover { color: var(--cl-teal-deep); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cairo', system-ui, sans-serif !important;
  color: var(--cl-indigo) !important;
  font-weight: 700;
}

/* ── Remove Kadence branding ── */
.kadence-starter-templates-notice,
.site-footer .site-info,
.powered-by-kadence,
.kadence-starter-templates,
a[href*="kadencewp.com"],
.site-footer-wrap .footer-widget-area .site-info {
  display: none !important;
}

/* ══════════════════════════════════════
   DARK MODE — Force Kadence elements
   ══════════════════════════════════════ */

/* Kadence body/site background */
html.dark body,
html.dark .site {
  background-color: #0f1119 !important;
  color: #e1e2e8 !important;
}

/* Kadence content background (boxed style) */
html.dark .content-bg,
html.dark body.content-style-unboxed .site,
html.dark body.content-style-boxed .site,
html.dark .content-wrap,
html.dark .site-container,
html.dark .content-container {
  background: #0f1119 !important;
}

/* Loop entry parent (has content-bg class) — make transparent so
   child entry-content-wrap's rounded corners show cleanly */
.entry.loop-entry.content-bg {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 1rem;
  overflow: hidden;
}

/* Single entry parent — same treatment */
.entry.single-entry.content-bg {
  border-radius: 1rem;
  overflow: hidden;
}
html.dark .entry.single-entry.content-bg {
  background: transparent !important;
  box-shadow: none !important;
}

/* Single entry & entry content wrap (the boxed card around article) */
html.dark .entry.single-entry .entry-content-wrap,
html.dark .entry-content-wrap,
html.dark .entry.loop-entry .entry-content-wrap {
  background: #1a1b2e !important;
  border-color: #3a3c5c !important;
}

/* All text elements inside content */
html.dark .entry-content,
html.dark .entry-content p,
html.dark .entry-content li,
html.dark .entry-content td,
html.dark .entry-content th,
html.dark .entry-content span,
html.dark .entry-content div,
html.dark .entry-summary,
html.dark .entry-summary p {
  color: #e1e2e8 !important;
}

/* Headings in content */
html.dark .entry-content h1,
html.dark .entry-content h2,
html.dark .entry-content h3,
html.dark .entry-content h4,
html.dark .entry-content h5,
html.dark .entry-content h6 {
  color: #8385c2 !important;
}

/* Entry title (single post and archive) */
html.dark .entry-title,
html.dark .entry-title a,
html.dark .loop-entry .entry-title a {
  color: #e1e2e8 !important;
}
html.dark .loop-entry .entry-title a:hover { color: #33c4b8 !important; }

/* Entry meta (date, author, categories) */
html.dark .entry-meta,
html.dark .entry-meta a,
html.dark .entry-meta span,
html.dark .posted-on,
html.dark .byline,
html.dark .cat-links {
  color: #9a9cd4 !important;
}
html.dark .entry-meta a:hover { color: #33c4b8 !important; }

/* Breadcrumbs */
html.dark .kadence-breadcrumbs,
html.dark .kadence-breadcrumbs a,
html.dark .kadence-breadcrumbs span {
  color: #9a9cd4 !important;
}
html.dark .kadence-breadcrumbs a:hover { color: #33c4b8 !important; }

/* Hero/title area */
html.dark .entry-hero,
html.dark .entry-hero .entry-hero-container-inner,
html.dark .page-hero-section {
  background: #0f1119 !important;
}
html.dark .entry-hero .entry-title,
html.dark .hero-title {
  color: #e1e2e8 !important;
}

/* Sidebar */
html.dark .primary-sidebar,
html.dark .widget {
  background: #1a1b2e !important;
  border-color: #3a3c5c !important;
}
html.dark .widget-title {
  color: #e1e2e8 !important;
}
html.dark .widget a {
  color: #9a9cd4 !important;
}
html.dark .widget a:hover { color: #33c4b8 !important; }

/* Blockquote */
html.dark .entry-content blockquote {
  border-inline-start-color: #33c4b8 !important;
  color: #9a9cd4 !important;
}

/* Code */
html.dark .entry-content code {
  background: #242540 !important;
  color: #e1e2e8 !important;
}
html.dark .entry-content pre {
  background: #1a1b2e !important;
  border-color: #3a3c5c !important;
  color: #e1e2e8 !important;
}

/* Comments */
html.dark .comments-area {
  background: #1a1b2e !important;
  border-color: #3a3c5c !important;
  color: #e1e2e8 !important;
}
html.dark .comment-author,
html.dark .comment-content,
html.dark .comment-content p {
  color: #e1e2e8 !important;
}

/* Pagination */
html.dark .navigation.pagination .page-numbers {
  color: #e1e2e8 !important;
  border-color: #3a3c5c !important;
}
html.dark .navigation.pagination .page-numbers:hover,
html.dark .navigation.pagination .page-numbers.current {
  background: #33c4b8 !important;
  color: white !important;
  border-color: #33c4b8 !important;
}

/* Archive page title */
html.dark .archive-title,
html.dark .page-title,
html.dark .search-title {
  color: #e1e2e8 !important;
}
html.dark .archive-description,
html.dark .archive-description p {
  color: #9a9cd4 !important;
}

/* Forms */
html.dark input,
html.dark textarea,
html.dark select {
  background: #1a1b2e !important;
  border-color: #3a3c5c !important;
  color: #e1e2e8 !important;
}

/* Links inside content */
html.dark .entry-content a {
  color: #33c4b8 !important;
}
html.dark .entry-content a:hover {
  color: #5cded3 !important;
}

/* Table */
html.dark .entry-content table {
  border-color: #3a3c5c !important;
}
html.dark .entry-content table th {
  background: #242540 !important;
}
html.dark .entry-content table td,
html.dark .entry-content table th {
  border-color: #3a3c5c !important;
}

/* Post navigation (prev/next links) */
html.dark .post-navigation,
html.dark .posts-navigation {
  border-color: #3a3c5c !important;
}
html.dark .post-navigation a,
html.dark .posts-navigation a {
  color: #e1e2e8 !important;
}
html.dark .post-navigation a:hover,
html.dark .posts-navigation a:hover {
  color: #33c4b8 !important;
}

/* Tag cloud */
html.dark .tagcloud a {
  background: #242540 !important;
  color: #9a9cd4 !important;
  border-color: #3a3c5c !important;
}
html.dark .tagcloud a:hover {
  background: #33c4b8 !important;
  color: white !important;
}

/* ══════════════════════════════════════
   NAVBAR — matches marketing Navbar.tsx
   ══════════════════════════════════════ */
.cl-navbar {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 50;
  border-bottom: 1px solid var(--cl-border);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html.dark .cl-navbar {
  background: rgba(15,17,25,0.8);
  border-bottom-color: rgba(58,60,92,0.5);
}
.cl-navbar-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 1rem;
}
@media (min-width: 640px) { .cl-navbar-inner { padding: 0 1.5rem; } }

/* Logo */
.cl-logo { display: flex; align-items: center; gap: 0.5rem; }
.cl-logo img { height: 28px; width: auto; }
.cl-logo-light { display: block; }
.cl-logo-dark { display: none; }
html.dark .cl-logo-light { display: none; }
html.dark .cl-logo-dark { display: block; }

/* Nav links */
.cl-nav-links {
  display: none;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 768px) { .cl-nav-links { display: flex; } }
.cl-nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cl-charcoal);
  transition: color 0.15s;
  text-decoration: none;
}
.cl-nav-link:hover { color: var(--cl-teal); }

/* Right side */
.cl-nav-right { display: flex; align-items: center; gap: 0.75rem; }

/* Language switcher */
.cl-lang-switcher { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 640px) { .cl-lang-switcher { display: flex; } }
.cl-lang-btn {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cl-text-muted);
  transition: all 0.15s;
  text-decoration: none;
}
.cl-lang-btn:hover { color: var(--cl-text); }
.cl-lang-btn.active {
  background: var(--cl-mist);
  color: var(--cl-teal);
}

/* Theme toggle */
.theme-toggle {
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: var(--cl-text);
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.theme-toggle:hover { background: var(--cl-mist); }
.theme-toggle svg { width: 20px; height: 20px; }
.icon-moon { display: block; }
.icon-sun { display: none; }
html.dark .icon-moon { display: none; }
html.dark .icon-sun { display: block; }

/* Hamburger */
.cl-hamburger {
  display: flex;
  padding: 8px;
  border-radius: 8px;
  background: none;
  border: none;
  color: var(--cl-text);
  cursor: pointer;
}
@media (min-width: 768px) { .cl-hamburger { display: none; } }

/* Mobile menu */
.cl-mobile-menu {
  border-top: 1px solid var(--cl-border);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
html.dark .cl-mobile-menu {
  background: rgba(15,17,25,0.95);
}
@media (min-width: 768px) { .cl-mobile-menu { display: none !important; } }
.cl-mobile-link {
  display: block;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cl-text);
  text-decoration: none;
  transition: background 0.15s;
}
.cl-mobile-link:hover { background: var(--cl-mist); }
.cl-mobile-langs {
  display: flex; gap: 0.5rem;
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px solid var(--cl-border);
}

/* ══════════════════════════════════════
   FOOTER — matches marketing Footer.tsx
   ══════════════════════════════════════ */
.cl-footer {
  border-top: 1px solid var(--cl-border);
  background: var(--cl-bg);
}
html.dark .cl-footer {
  background: #0f1119;
  border-top-color: rgba(58,60,92,0.3);
}
.cl-footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 3rem 1rem 3rem;
}
@media (min-width: 640px) { .cl-footer-inner { padding: 4rem 1.5rem; } }
.cl-footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cl-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cl-footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.cl-footer-brand { grid-column: span 1; }
@media (min-width: 640px) and (max-width: 1023px) { .cl-footer-brand { grid-column: span 2; } }

.cl-footer-tagline {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--cl-text-muted);
}
.cl-social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.cl-social-links a {
  color: var(--cl-text-muted);
  transition: color 0.15s;
}
.cl-social-links a:hover { color: var(--cl-teal); }

.cl-footer-heading {
  font-size: 0.875rem !important;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--cl-text) !important;
}
.cl-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cl-footer-links a {
  font-size: 0.875rem;
  color: var(--cl-text-muted);
  transition: color 0.15s;
  text-decoration: none;
}
.cl-footer-links a:hover { color: var(--cl-teal); }

.cl-footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cl-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cl-footer-bottom p {
  font-size: 0.75rem;
  color: var(--cl-text-muted);
  margin: 0;
}
.cl-footer-bottom-langs { display: flex; align-items: center; gap: 0.5rem; }
.cl-footer-bottom-langs a {
  font-size: 0.75rem;
  color: var(--cl-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.cl-footer-bottom-langs a:hover { color: var(--cl-text); }
.cl-footer-bottom-langs a.active {
  font-weight: 500;
  color: var(--cl-teal);
}

/* ══════════════════════════════════════
   BLOG CONTENT — article cards + single post
   ══════════════════════════════════════ */

/* Hide Kadence default header/footer wrappers */
.site-header-wrap,
.site-footer-wrap { display: none !important; }

/* Archive — post cards */
.loop-entry .entry-content-wrap,
.entry-summary {
  background: var(--cl-card-bg);
  border: 1px solid var(--cl-border);
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.loop-entry .entry-content-wrap:hover {
  border-color: var(--cl-teal);
  transform: translateY(-2px);
}
.loop-entry .post-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 1rem 1rem 0 0;
}
.loop-entry .entry-title a {
  color: var(--cl-text) !important;
  font-weight: 700;
  text-decoration: none;
}
.loop-entry .entry-title a:hover { color: var(--cl-teal) !important; }

/* Category badges */
.entry-taxonomies a,
.post-categories a {
  background: var(--cl-teal);
  color: white !important;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

/* Single post */
.single .entry-content {
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--cl-text);
}
html[dir="rtl"] .single .entry-content { font-size: 1.15rem; line-height: 2; }

.single .entry-content blockquote {
  border-inline-start: 4px solid var(--cl-teal);
  padding-inline-start: 1.5rem;
  margin-inline-start: 0;
  color: var(--cl-text-muted);
  font-style: italic;
}
.single .entry-content code {
  background: var(--cl-mist);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}
.single .entry-content pre {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  overflow-x: auto;
}

/* Reading time */
.reading-time {
  font-size: 0.8rem;
  color: var(--cl-text-muted);
}

/* Sidebar widgets */
.widget {
  background: var(--cl-card-bg);
  border: 1px solid var(--cl-border);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.widget-title {
  font-size: 1rem !important;
  font-weight: 700;
  color: var(--cl-text) !important;
  margin-bottom: 1rem;
}

/* Pagination */
.navigation.pagination .nav-links {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.navigation.pagination .page-numbers {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cl-text);
  border: 1px solid var(--cl-border);
  text-decoration: none;
  transition: all 0.15s;
}
.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers.current {
  background: var(--cl-teal);
  color: white;
  border-color: var(--cl-teal);
}

/* Search form */
.search-form input[type="search"] {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--cl-text);
  font-family: 'Cairo', sans-serif;
}
.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--cl-teal);
}

/* Comments */
.comments-area {
  background: var(--cl-card-bg);
  border: 1px solid var(--cl-border);
  border-radius: 1rem;
  padding: 2rem;
  margin-top: 2rem;
}

/* ── Kadence content area overrides ── */
.site { background: var(--cl-bg) !important; }
.content-wrap { background: transparent !important; }
.site-main { padding-top: 2rem; }