/* =========================================
   With Rashid — Visual Enhancements
   Adds polish on top of the existing cyber theme
   ========================================= */

/* Root variables — fine-tuned cyber palette */
:root {
  --cyber-accent: #00f2ff;
  --cyber-accent-secondary: #0066ff;
  --cyber-dark: #0a0a0f;
  --cyber-card: rgba(15, 15, 22, 0.7);
  --cyber-glass: rgba(20, 20, 30, 0.55);
  --cyber-border: rgba(0, 242, 255, 0.18);
}

/* Smooth global transitions */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* ===== Hero section refinements ===== */
.hero-gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #00f2ff 45%, #0066ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #c7c7d4;
  max-width: 640px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(0, 242, 255, 0.25);
  background: rgba(0, 242, 255, 0.08);
  color: #00f2ff;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  backdrop-filter: blur(8px);
}

/* ===== Glass header ===== */
.cyber-header-glass {
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 242, 255, 0.12);
}

/* ===== Card enhancements ===== */
.cyber-card {
  position: relative;
  overflow: hidden;
  background: rgba(15, 15, 22, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cyber-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, transparent, rgba(0, 242, 255, 0.15), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cyber-card:hover::before {
  opacity: 1;
}

.cyber-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 242, 255, 0.4);
  box-shadow: 0 20px 40px -10px rgba(0, 242, 255, 0.12);
}

/* ===== Button refinements ===== */
.cyber-btn-primary {
  position: relative;
  overflow: hidden;
}

.cyber-btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.cyber-btn-primary:hover::after {
  transform: translateX(100%);
}

/* ===== Section spacers ===== */
.cyber-section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.35), transparent);
  margin: 3rem 0;
  border: none;
}

/* ===== Logo polish ===== */
.cyber-logo-img {
  filter: drop-shadow(0 0 12px rgba(0, 242, 255, 0.35));
  transition: filter 0.4s ease, transform 0.4s ease;
}

.cyber-logo-img:hover {
  filter: drop-shadow(0 0 20px rgba(0, 242, 255, 0.6));
  transform: scale(1.03);
}

/* ===== Utility: gradient text ===== */
.text-cyber-gradient {
  background: linear-gradient(135deg, #fff 0%, #00f2ff 50%, #0066ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Subtle page entrance ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.cyber-fade-in {
  animation: fadeInUp 0.7s ease-out both;
}

/* ===== Mobile fine-tuning ===== */
@media (max-width: 640px) {
  .hero-subtitle { font-size: 1rem; }
  .cyber-card { border-radius: 0.75rem; }
}

/* ===== Print ===== */
@media print {
  .cyber-card { background: white !important; color: black !important; }
}

/* ===== Home hero: remove empty gaps above/below, let photo fill the side ===== */
@media (min-width: 1024px) {
  main > section:first-of-type > div.relative.z-10 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  main > section:first-of-type > div.relative.z-10 > div.absolute {
    top: 0 !important;
    bottom: 0 !important;
  }
  main > section:first-of-type > div.relative.z-10 > div.absolute > div[class*="bottom-0"][class*="h-1/4"] {
    height: 12% !important;
  }
  main > section:first-of-type > div.relative.z-10 > div.max-w-xl > p:first-child {
    margin-top: 0 !important;
  }
}
@media (max-width: 1023px) {
  main > section:first-of-type > div.relative.z-10 { padding-bottom: 3rem !important; }
}

/* ===== Home page section order: Hero > About > Tech stack > Banner > Contact CTA ===== */
main:has(> section[aria-label="Brand collaborations"]) {
  display: flex;
  flex-direction: column;
}
main:has(> section[aria-label="Brand collaborations"]) > :nth-child(1) { order: 0; }
main:has(> section[aria-label="Brand collaborations"]) > :nth-child(2) { order: 1; } /* hero */
main:has(> section[aria-label="Brand collaborations"]) > :nth-child(6) { order: 2; } /* about */
main:has(> section[aria-label="Brand collaborations"]) > :nth-child(3) { order: 3; } /* tech stack */
main:has(> section[aria-label="Brand collaborations"]) > :nth-child(4) { order: 4; } /* banner */
main:has(> section[aria-label="Brand collaborations"]) > :nth-child(7) { order: 5; border-top: 0; } /* contact CTA */
main:has(> section[aria-label="Brand collaborations"]) > :nth-child(5) { display: none; } /* old template collaborations */
main:has(> section[aria-label="Brand collaborations"]) > :nth-child(6) { border-bottom: 1px solid var(--border); }

/* Safety net: scroll-reveal blocks on the home page must never stay invisible (blank gaps) */
main > section [style*="opacity:0"],
main > section [style*="opacity: 0"] {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.6s ease;
}

/* ===== Site shows only what Rashid can do: hide partner/collab content ===== */
a[data-nav-link][href="collabs.html"] { display: none !important; }
main:has(> section[aria-label="Brand collaborations"]) dl.grid { display: none; }
main:has(> section[aria-label="Brand collaborations"]) > :nth-child(6) ul.grid { margin-top: 0; }

/* ===== Professional polish ===== */
li:has(> a[data-track-event="social_click_newsletter"]) { display: none; }
@media (min-width: 768px) {
  main div[class*="md:items-center"] { align-items: start !important; }
}

/* ===== Tighten vertical spacing: no big empty gaps ===== */
main > div[class*="pt-20"] { padding-top: 1.5rem !important; }
main > section[class*="py-20"] { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
main > section[class*="py-20"][class*="pt-12"] { padding-top: 1rem !important; }
main > section[aria-label="Brand collaborations"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
main > section[class*="py-10"] { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
@media (min-width: 1024px) {
  main > section:first-of-type > div.relative.z-10 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

/* about & contact pages: sections sit inside a wrapper div */
main > div > div[class*="pt-20"] { padding-top: 0.5rem !important; }
main > div > section[class*="py-20"] { padding-top: 2.5rem !important; padding-bottom: 3rem !important; }
main > div > section[class*="py-20"][class*="pt-12"] { padding-top: 1.5rem !important; }

/* contact cards: 3 + 2 filling the full row, no empty slot */
#how-i-help ul { grid-template-columns: 1fr !important; }
@media (min-width: 900px) {
  #how-i-help ul { grid-template-columns: repeat(6, 1fr) !important; }
  #how-i-help li:nth-child(-n+3) { grid-column: span 2; }
  #how-i-help li:nth-child(n+4) { grid-column: span 3; }
}

/* mobile: focus tiles no taller than their content */
@media (max-width: 1023px) {
  main ul.grid[class*="auto-rows-fr"] { grid-auto-rows: auto !important; }
  main ul.grid[class*="auto-rows-fr"] > li { padding: 1rem 1.25rem !important; }
}

/* Projects grid: no empty slot in the last row (works for any number of cards) */
#projects div[style*="display:grid"] { grid-template-columns: 1fr !important; }
@media (min-width: 640px) and (max-width: 999px) {
  #projects div[style*="display:grid"] { grid-template-columns: repeat(2, 1fr) !important; }
  #projects article:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  #projects div[style*="display:grid"] { grid-template-columns: repeat(6, 1fr) !important; }
  #projects article { grid-column: span 2; }
  #projects article:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  #projects article:nth-last-child(2):nth-child(3n+1),
  #projects article:last-child:nth-child(3n+2) { grid-column: span 3; }
}

/* Technologies grid: 10 tiles = 2 even rows, no empty slot */
section[aria-label="Brand collaborations"] ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 900px) {
  section[aria-label="Brand collaborations"] ul { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* header: longer brand name must not collide with the menu */
@media (min-width:1024px){
 header > div.lg\:grid{grid-template-columns:auto 1fr auto !important}
 header > div.lg\:grid > nav.lg\:flex{justify-self:center;gap:1.75rem}
}
@media (min-width:1024px) and (max-width:1180px){
 header > div.lg\:grid > nav.lg\:flex{gap:1.1rem}
}
@media (min-width:1024px){
 header > div.lg\:grid > a.group{margin-right:2rem;white-space:nowrap}
}
@media (min-width:1024px) and (max-width:1199px){
 header > div.lg\:grid{padding-left:1rem;padding-right:1rem}
 header > div.lg\:grid > a.group{margin-right:.75rem}
 header > div.lg\:grid > a.group span{font-size:1.15rem}
 header > div.lg\:grid > nav.lg\:flex{gap:.8rem}
 header > div.lg\:grid > nav.lg\:flex a{font-size:.875rem}
 header > div.lg\:grid > div:last-child{gap:.5rem}
 header > div.lg\:grid > div:last-child a{padding-left:1rem;padding-right:1rem;font-size:.8rem}
}

/* brand name: a little smaller so "Tech With Rashid" fits neatly */
header a.group span.font-display{font-size:1.1rem !important;letter-spacing:-.01em}
@media (min-width:640px){header a.group span.font-display{font-size:1.2rem !important}}
@media (min-width:1024px) and (max-width:1199px){header a.group span.font-display{font-size:1.05rem !important}}
footer p.font-display.text-lg{font-size:1rem !important}

/* ===== Mobile & Tablet fit ===== */
html, body { overflow-x: hidden !important; }

/* Constrain marquee track to viewport width on small screens */
.animate-marquee {
  max-width: 100vw !important;
  overflow: hidden !important;
}

/* Shrink marquee text on mobile/tablet so it doesn't overflow */
.marquee-text {
  font-size: 1rem !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}
@media (min-width: 640px) {
  .marquee-text { font-size: 1.125rem !important; }
}
@media (min-width: 1024px) {
  .marquee-text { font-size: 1.5rem !important; }
}

/* Brand name: never wrap/overflow the header on small screens */
header a.group span.font-display {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 160px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Hero heading: scale down on mobile/tablet */
h1[data-glitch="true"],
.hero h1,
main section:first-of-type h1 {
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
}
@media (min-width: 640px) {
  h1[data-glitch="true"], .hero h1, main section:first-of-type h1 { font-size: 2.25rem !important; }
}
@media (min-width: 1024px) {
  h1[data-glitch="true"], .hero h1, main section:first-of-type h1 { font-size: 3rem !important; }
}

/* Section spacing: tighter on mobile/tablet */
main > section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
@media (min-width: 1024px) {
  main > section { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

/* Images never exceed container */
img { max-width: 100% !important; height: auto !important; display: block !important; }

/* CTA buttons: full width on mobile */
main .inline-flex.h-12,
main .inline-flex.h-10 {
  width: 100% !important;
  justify-content: center !important;
}
@media (min-width: 640px) {
  main .inline-flex.h-12,
  main .inline-flex.h-10 { width: auto !important; }
}
/* ===== Code blocks: wrap long commands on mobile/tablet ===== */
pre.kb-code code,
pre.kb-code,
code {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  overflow-x: auto !important;
  max-width: 100% !important;
  display: block !important;
  font-size: 0.85rem !important;
}
@media (min-width: 640px) {
  pre.kb-code code, pre.kb-code, code { font-size: 0.9rem !important; }
}