/* Mobile-first custom styles for SonetOps */
:root{--brand-start:#4f46e5;--brand-end:#06b6d4;  --main-color-one: #0d7ceb;
  --main-color-one-rgb: 13, 124, 235;
  --main-gradient-one: linear-gradient(90deg, rgba(var(--main-color-one-rgb), .6) 0%, rgba(var(--main-color-one-rgb), 1) 100%);
  --main-gradient-one-reverse: linear-gradient(-90deg, rgba(var(--main-color-one-rgb), .6) 0%, rgba(var(--main-color-one-rgb), 1) 100%);
  --secondary-color: #495C83;
  --secondary-color-rgb: 255, 165, 0;
  --bg-gradient: linear-gradient(90deg, #fef0db 0%, #fefbf6 50%, #ecf8f0 100%);
  --section-bg-base: #6176f6;
  --section-bg-1: #f7f8ff;
  --section-bg-2: #F5F5F5;
  --section-bg-3: #495C83;
  --footer-bg-1: #020418;
  --footer-bg-2: #1E84FE;
  --copyright-bg-1: #323336;
  --heading-color: #1D2635;
  --shadow-color: #f3f3f3;
  --border-color: #EAECF0;
  --border-color-2: #ddd;
  --paragraph-color: #666;
  --body-color: #999;
  --active-color: #00C897;
  --active-color-rgb: 0, 200, 151;
  --success-color: #65c18c;
  --success-color-rgb: 101, 193, 140;
  --danger-color: #f53a3a;
  --danger-color-rgb: 245, 58, 58;
  --heading-font: "Inter", sans-serif;
  --body-font: "Open Sans", sans-serif;
  --inter-font: "Inter", sans-serif;
  --openSans-font: "Open Sans", sans-serif;
  --promo-one: #e3e1ff;
  --promo-two: #ffe6d3;
  --promo-three: #dbf3ff;
  --promo-four: #efffe6;
  --promo-five: #ffc9c9;
  --promo-six: #ceffda;
  --promo-seven: #b2ccfd;
  --promo-eight: #f0bcff;}
html,body{height:100%}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial}
.brand-gradient{background-image:linear-gradient(90deg,var(--brand-start),var(--brand-end));}
.logo-mark{width:38px;height:38px}

/* Ensure header and footers are easy to use on mobile */
/* header spacing and responsive container */
/* header spacing: slightly taller for better presence */
header{padding-top:0.75rem;padding-bottom:0.75rem}
header .container-inner{max-width:100%}

/* Navigation links */
.nav-links{display:flex;gap:0.9rem;align-items:center}
.nav-links a{color:var(--text, #111827);padding:0.45rem 0.8rem;border-radius:0.5rem;text-decoration:none;font-size:0.95rem}
.nav-links a:hover{background:rgba(15,23,42,0.04)}
.nav-links .badge{font-size:0.75rem;padding:0.25rem 0.6rem;background:rgba(79,70,229,0.08);color:var(--brand-start);border-radius:9999px}

/* Search input sizing so nav doesn't feel cramped on desktop */
.search-input{max-width:520px}
.search-input input{width:100%}

/* Mobile header adjustments */
.mobile-menu{display:none;color:var(--text,#111827);font-size:1.2rem;padding:0.25rem;border-radius:0.35rem}
.mobile-menu:hover{background:rgba(15,23,42,0.04)}

@media(max-width:767px){
  /* hide full nav on small screens */
  .nav-links{display:none}
  .mobile-menu{display:inline-flex}
  /* make header slightly taller but compact layout */
  header{padding-top:0.6rem;padding-bottom:0.6rem}
  .search-input{max-width:220px}
  .featured-card .content{left:0.75rem;right:0.75rem;bottom:0.75rem}
}

/* Make header visually separated on scroll area */
header.sticky-surface{background:rgba(255,255,255,0.95);backdrop-filter:blur(6px)}

main{min-height:60vh}

/* Recent post cards (mobile compact) */
.post-card{display:flex;flex-direction:row;gap:0.75rem;align-items:flex-start;padding:0.75rem;border-radius:0.75rem;background:white;box-shadow:0 6px 18px rgba(15,23,42,0.06)}
.post-card .meta{font-size:0.75rem;color:#6b7280}

/* subtle hover lift for cards */
.post-card{transition:transform .18s ease, box-shadow .18s ease}
.post-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(15,23,42,0.08)}

/* Thumbnail-specific styles */
.post-card img{border-radius:0.5rem}
.post-card .w-24{width:96px}
.post-card .h-16{height:64px}

/* On very small screens, make thumbnail smaller and stack if needed */
@media(max-width:420px){
  .post-card{gap:0.5rem;padding:0.6rem}
  .post-card{align-items:center}
  .post-card img{width:72px;height:48px;object-fit:cover}
}

/* Prose style for detail page */
.prose{line-height:1.6}
.prose h1{font-size:1.5rem;margin-top:0}
.prose h2{font-size:1.15rem;margin-top:0.75rem}

/* nicer card shadow for index grid items when using Tailwind utility classes */
.card-hover{transition:transform .18s ease, box-shadow .18s ease}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(15,23,42,0.08)}

/* Featured card for homepage */
.featured-card{position:relative;overflow:hidden;border-radius:0.9rem;background:#111827;color:white}
.featured-card .cover{height:320px;background-position:center;background-size:cover}
.featured-card .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.45) 60%)}
.featured-card .meta-row{display:flex;align-items:center;gap:0.75rem;margin-top:0.75rem}
.avatar{width:36px;height:36px;border-radius:9999px;overflow:hidden;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.featured-card .content{position:absolute;left:1rem;right:1rem;bottom:1rem;color:white}
.featured-card h2{font-size:1.4rem;margin:0 0 0.25rem 0}
.featured-card p{opacity:0.95}

@media(min-width:768px){
  .featured-card .cover{height:420px}
  .featured-card h2{font-size:1.8rem}
}

/* Tighter grid spacing for main area */
.main-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:1024px){.main-grid{grid-template-columns:2fr 1fr;gap:1.25rem}}

@media(min-width:768px){
  .logo-mark{width:44px;height:44px}
  .post-card{padding:1rem}
}

@media(min-width:1024px){
  .logo-mark{width:56px;height:56px}
}

/* Index list style */
.list-container{display:flex;flex-direction:column;gap:0.5rem}
.list-item{display:flex;gap:0.75rem;align-items:flex-start;padding:0.75rem;background:white;border-radius:0.75rem;box-shadow:0 6px 18px rgba(15,23,42,0.04)}
.list-item img{width:96px;height:64px;object-fit:cover;border-radius:0.5rem}
.list-item .info{flex:1}
.list-item .title{font-weight:600}
.list-item .snippet{color:#6b7280;font-size:0.95rem}

@media(min-width:768px){
  .list-item img{width:140px;height:90px}
}

/* Pagination style */
.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  list-style: none;
  margin: 0;
}

.pagination .disabled {
  cursor: -webkit-grab;
  cursor: grab;
}

.pagination .disabled a {
  cursor: -webkit-grab;
  cursor: grab;
  color: var(--border-color);
  border-color: var(--border-color);
}

.pagination .disabled a:hover {
  background-color: unset;
  color: var(--border-color);
  border-color: var(--border-color);
}

.pagination li.active>span {
  background-color: var(--main-color-one);
  color: #fff;
}

.pagination li>a,.pagination li>span {
  display: inline-block;
  font-size: 16px;
  color: var(--main-color-one);
  border: 1px solid var(--main-color-one);
  background-color: #fff;
  line-height: 1;
  padding: 9px 15px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 5px;
}

.pagination li>a:hover {
  background-color: var(--main-color-one);
  color: #fff;
}

/* Code blocks styling */
.prose pre {
  position: relative;
  background-color: #1e1e1e;
  border-radius: 0.5rem;
  padding: 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.prose pre code {
  background-color: transparent;
  color: #d4d4d4;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.prose code {
  background-color: #f3f4f6;
  color: #e11d48;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.prose pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
}

/* Mermaid diagrams */
.mermaid, .mermaid-diagram {
  background-color: white;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  overflow-x: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mermaid-diagram svg {
  max-width: 100%;
  height: auto;
}

/* Prose content styling */
.prose {
  color: #374151;
  max-width: none;
}

.prose h1 {
  color: #111827;
  font-weight: 800;
  font-size: 2.25rem;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.prose h2 {
  color: #111827;
  font-weight: 700;
  font-size: 1.875rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.prose h3 {
  color: #111827;
  font-weight: 600;
  font-size: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.prose p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.75;
}

.prose a {
  color: #4f46e5;
  text-decoration: underline;
  font-weight: 500;
}

.prose a:hover {
  color: #4338ca;
}

.prose strong {
  color: #111827;
  font-weight: 600;
}

.prose ul, .prose ol {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.prose li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.prose img {
  border-radius: 0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.prose blockquote {
  border-left: 4px solid #4f46e5;
  padding-left: 1rem;
  font-style: italic;
  color: #6b7280;
  margin: 1.5rem 0;
}

.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.prose th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.prose th {
  background-color: transparent;
  color: white;
  padding: 1rem 0.75rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
}

.prose tbody tr {
  background-color: white;
  transition: all 0.2s ease;
}

.prose tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

.prose tbody tr:hover {
  background-color: #f3f4f6;
  transform: scale(1.01);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.prose td {
  padding: 0.875rem 0.75rem;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
}

.prose tbody tr:last-child td {
  border-bottom: none;
}

.prose td:first-child,
.prose th:first-child {
  padding-left: 1.5rem;
}

.prose td:last-child,
.prose th:last-child {
  padding-right: 1.5rem;
}

/* Responsive table wrapper */
.prose .table-wrapper {
  overflow-x: auto;
  margin: 1.5rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Mobile responsive */
@media (max-width: 640px) {
  .prose table {
    font-size: 0.875rem;
  }
  
  .prose th,
  .prose td {
    padding: 0.5rem;
  }
  
  .prose td:first-child,
  .prose th:first-child {
    padding-left: 0.75rem;
  }
  
  .prose td:last-child,
  .prose th:last-child {
    padding-right: 0.75rem;
  }
}

pre code.hljs {
  color: #F5F5F5
}

/* Hostinger-style layout enhancements */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Smooth hover effects for cards */
article.group:hover img {
  transform: scale(1.05);
}

/* Purple gradient navigation */
nav.bg-gradient-to-r {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Featured story badge animation */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
  }
}

.bg-purple-600 {
  animation: pulse-glow 2s infinite;
}

/* Responsive navigation */
@media (max-width: 1024px) {
  nav.bg-gradient-to-r .flex {
    overflow-x: auto;
    scrollbar-width: none;
  }
  
  nav.bg-gradient-to-r .flex::-webkit-scrollbar {
    display: none;
  }
}

/* Card shadow enhancements */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Gradient overlays for images */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

nav {
  top: 90px
}

.prose pre {
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-family: 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-x: auto;
  tab-size: 2;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Line numbers */
.prose pre[class*="language-"] {
  counter-reset: line;
}

.prose pre code {
  display: block;
  counter-increment: line;
  padding-left: 1rem;
  position: relative;
}

.prose pre code:before {
  content: counter(line);
  position: absolute;
  left: -2rem;
  color: #64748b;
  text-align: right;
  width: 1.5rem;
  user-select: none;
}

/* Syntax highlighting colors */
.prose pre .token.comment,
.prose pre .token.prolog,
.prose pre .token.doctype,
.prose pre .token.cdata {
  color: #94a3b8;
  font-style: italic;
}

.prose pre .token.punctuation {
  color: #e2e8f0;
}

.prose pre .token.property,
.prose pre .token.tag,
.prose pre .token.boolean,
.prose pre .token.number,
.prose pre .token.constant,
.prose pre .token.symbol,
.prose pre .token.deleted {
  color: #f472b6;
}

.prose pre .token.selector,
.prose pre .token.attr-name,
.prose pre .token.string,
.prose pre .token.char,
.prose pre .token.builtin,
.prose pre .token.inserted {
  color: #34d399;
}

.prose pre .token.operator,
.prose pre .token.entity,
.prose pre .token.url,
.prose pre .language-css .token.string,
.prose pre .style .token.string {
  color: #f59e0b;
}

.prose pre .token.atrule,
.prose pre .token.attr-value,
.prose pre .token.keyword {
  color: #60a5fa;
}

.prose pre .token.function,
.prose pre .token.class-name {
  color: #818cf8;
}

/* Hover effect */
.prose pre:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Scrollbar styling */
.prose pre::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.prose pre::-webkit-scrollbar-track {
  background: #1e293b;
  border-radius: 4px;
}

.prose pre::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

.prose pre::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}