/* ===================================================
   RAD5 Tech Hub – Main Stylesheet
   Loaded after Tailwind CDN. Only non-Tailwind rules.
   =================================================== */

/* --- Brand CSS variables -------------------------------------------------- */
:root {
  --rad5-blue: #0A2D62;
  --rad5-red:  #D62828;
}

/* --- Custom logo sizing --------------------------------------------------- */
/* Constrain logo image to nav height everywhere it appears */
.custom-logo-link,
a.custom-logo-link {
  display: inline-flex;
  align-items: center;
}
.custom-logo-link img,
.custom-logo {
  height: 48px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain;
}
/* Footer logo: slightly smaller */
#global-footer .custom-logo-link img,
#global-footer .custom-logo {
  height: 36px !important;
  max-width: 140px !important;
}

/* --- Smooth scroll -------------------------------------------------------- */
html { scroll-behavior: smooth; }

/* --- [x-cloak] hide Alpine elements before init -------------------------- */
[x-cloak] { display: none !important; }

/* --- Custom scrollbar ----------------------------------------------------- */
::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(10,45,98,.2); border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb  { background: rgba(214,40,40,.2); }
::-webkit-scrollbar-thumb:hover  { background: rgba(10,45,98,.45); }

/* --- Glassmorphism cards -------------------------------------------------- */
.glass-panel {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
}
html:not(.dark) .glass-panel {
  background: rgba(255,255,255,.75);
  border-color: rgba(10,45,98,.06);
}

.glass-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.glass-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
html:not(.dark) .glass-card {
  background: rgba(255,255,255,.7);
  border-color: rgba(10,45,98,.06);
  box-shadow: 0 8px 32px rgba(10,45,98,.04);
}
html:not(.dark) .glass-card:hover {
  background: rgba(255,255,255,.9);
  border-color: rgba(10,45,98,.1);
  box-shadow: 0 12px 36px rgba(10,45,98,.08);
}

/* --- Glow orb decorations ------------------------------------------------- */
.glow-orb {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
  filter: blur(120px);
  will-change: transform;
}

/* --- Prose / blog content ------------------------------------------------- */
.prose-brand {
  color: #374151;
  line-height: 1.85;
}
.dark .prose-brand {
  color: #d1d5db;
}
.prose-brand h2,
.prose-brand h3,
.prose-brand h4 {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--rad5-blue);
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: .6em;
}
.dark .prose-brand h2,
.dark .prose-brand h3,
.dark .prose-brand h4 {
  color: #fff;
}
.prose-brand a {
  color: var(--rad5-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose-brand a:hover { opacity: .8; }
.prose-brand blockquote {
  border-left: 4px solid var(--rad5-red);
  background: rgba(214,40,40,.04);
  padding: .75rem 1.25rem;
  border-radius: 0 .5rem .5rem 0;
  font-style: italic;
  color: #6b7280;
}
.prose-brand code {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(10,45,98,.06);
  color: var(--rad5-blue);
  padding: .15em .35em;
  border-radius: .25rem;
  font-size: .875em;
}
.dark .prose-brand code {
  background: rgba(255,255,255,.08);
  color: #e2e8f0;
}
.prose-brand pre {
  background: #0d1117;
  color: #e2e8f0;
  border-radius: .75rem;
  padding: 1.25rem;
  overflow-x: auto;
}
.prose-brand pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.prose-brand img {
  border-radius: .75rem;
  margin: 1.5rem auto;
}
.prose-brand ul { list-style: disc; padding-left: 1.5rem; }
.prose-brand ol { list-style: decimal; padding-left: 1.5rem; }
.prose-brand li { margin-bottom: .4rem; }
.prose-brand table { width: 100%; border-collapse: collapse; }
.prose-brand th, .prose-brand td {
  border: 1px solid #e5e7eb;
  padding: .6rem .8rem;
  font-size: .875rem;
}
.dark .prose-brand th, .dark .prose-brand td { border-color: #374151; }
.prose-brand th { background: rgba(10,45,98,.04); font-weight: 600; }

/* --- WordPress pagination -------------------------------------------------- */
.rad5-pagination .page-numbers,
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0 .5rem;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  transition: all .2s;
  background: #fff;
}
.dark .rad5-pagination .page-numbers,
.dark .nav-links .page-numbers {
  background: #111827;
  border-color: #374151;
  color: #d1d5db;
}
.rad5-pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
  border-color: var(--rad5-blue);
  color: var(--rad5-blue);
}
.dark .rad5-pagination .page-numbers:hover,
.dark .nav-links .page-numbers:hover {
  border-color: var(--rad5-red);
  color: var(--rad5-red);
}
.rad5-pagination .page-numbers.current,
.nav-links .page-numbers.current {
  background: var(--rad5-blue);
  border-color: var(--rad5-blue);
  color: #fff;
}
.dark .rad5-pagination .page-numbers.current,
.dark .nav-links .page-numbers.current {
  background: var(--rad5-red);
  border-color: var(--rad5-red);
}
.rad5-pagination .page-numbers.dots,
.nav-links .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}
.nav-links { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center; }

/* --- WordPress widget styles ---------------------------------------------- */
.widget { margin-bottom: 2rem; }
.widget-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rad5-blue);
  margin-bottom: 1rem;
}
.dark .widget-title { color: #fff; }

.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li {
  padding: .4rem 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: .875rem;
}
.dark .widget ul li { border-color: #1f2937; }
.widget ul li a { color: #6b7280; text-decoration: none; }
.widget ul li a:hover { color: var(--rad5-red); }

/* --- Comments ------------------------------------------------------------- */
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .comment { padding: 1.25rem 0; border-bottom: 1px solid #f3f4f6; }
.dark .comment-list .comment { border-color: #1f2937; }
.comment-author { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.comment-author img { border-radius: 9999px; }
.comment-author .fn { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .875rem; }
.comment-meta { font-size: .75rem; color: #9ca3af; }
.comment-content p { font-size: .9rem; color: #4b5563; line-height: 1.7; margin-top: .5rem; }
.dark .comment-content p { color: #9ca3af; }
.comment-reply-link {
  font-size: .75rem;
  font-weight: 600;
  color: var(--rad5-blue);
  text-decoration: none;
}
.dark .comment-reply-link { color: var(--rad5-red); }

/* Comment form */
.comment-form input,
.comment-form textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .6rem .9rem;
  font-size: .875rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  background: #fff;
  color: #111827;
  transition: border-color .2s;
}
.dark .comment-form input,
.dark .comment-form textarea {
  background: #0f172a;
  border-color: #1f2937;
  color: #f9fafb;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--rad5-blue); }
.dark .comment-form input:focus,
.dark .comment-form textarea:focus { border-color: var(--rad5-red); }
.comment-form .submit {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--rad5-blue);
  color: #fff;
  border: none;
  border-radius: .5rem;
  padding: .65rem 1.5rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}
.comment-form .submit:hover { opacity: .88; }

/* --- Search widget -------------------------------------------------------- */
.search-form { display: flex; gap: .5rem; }
.search-field {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  outline: none;
}
.dark .search-field { background: #0f172a; border-color: #1f2937; color: #f9fafb; }
.search-submit {
  background: var(--rad5-blue);
  color: #fff;
  border: none;
  border-radius: .5rem;
  padding: .5rem .9rem;
  cursor: pointer;
  font-size: .875rem;
}

/* --- Page link pagination (multi-page posts) ------------------------------ */
.rad5-page-links {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  align-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .8rem;
  font-weight: 600;
}
.rad5-page-links a {
  padding: .25rem .6rem;
  border: 1px solid #e5e7eb;
  border-radius: .375rem;
  color: #374151;
  text-decoration: none;
}
.rad5-page-links a:hover { border-color: var(--rad5-blue); color: var(--rad5-blue); }

/* --- Transitions for Alpine.js -------------------------------------------- */
.slide-enter { opacity: 0; transform: translateY(8px); }
.slide-enter-active { transition: opacity .3s ease, transform .3s ease; }
.fade-enter { opacity: 0; }
.fade-enter-active { transition: opacity .3s ease; }

/* --- Line-clamp utility (for older browsers) ------------------------------ */
.line-clamp-2  { -webkit-line-clamp: 2;  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3  { -webkit-line-clamp: 3;  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4  { -webkit-line-clamp: 4;  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }