/* Individual Guide Page CSS - GhettoScape RSPS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root {
  /* Main Colors */
  --bg-900: #0E0F12;
  --bg-800: #16181C;
  --bg-700: #1F2227;
  --bg-cobble: #131417;
  --stone-shadow: 0 2px 16px 0 rgba(0,0,0,0.7);
  /* Accent Colors */
  --cyan-glow: #FFC53D;
  --turquoise: #C9922B;
  --cyan-dark: #A87718;
  --cyan-light: #FFD968;
  --silver: #E7E9EC;
  --steel: #8A9099;
  --white: #f8fafc;
  /* Gradients */
  --glow-gradient: linear-gradient(90deg, #FFC53D 0%, #C9922B 100%);
  --stone-gradient: linear-gradient(135deg, rgba(12,8,8,0.80) 0%, rgba(30,21,21,0.80) 100%);
  /* Typography */
  --font-primary: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Poppins', 'Segoe UI', Arial, sans-serif;
  /* Spacing */
  --space-md: 0.6rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --container-max-width: 1300px;
  --header-height: 68px;
}

/* Reset and Base Styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{font-family:var(--font-primary);font-size:0.95rem;line-height:1.5;color:var(--silver);background:var(--stone-gradient),linear-gradient(180deg,#101216 0%,#0E0F12 100%)center/cover no-repeat fixed;background-blend-mode:overlay;min-height:100vh;overflow-x:hidden;}

/* Typography */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.15;color:var(--white);margin-bottom:var(--space-md);}
h1{font-size:clamp(2.2rem,4vw,2.9rem);font-weight:800;color:var(--white);letter-spacing:-0.01em;margin-bottom:var(--space-md);}
h2{font-size:clamp(1.1rem,3vw,1.7rem);font-weight:700;}
h3{font-size:clamp(1rem,2vw,1.2rem);font-weight:600;}
p{margin-bottom:var(--space-md);color:var(--silver);line-height:1.5;}

/* Layout Components */
.container{max-width:var(--container-max-width);margin:0 auto;padding:0 clamp(1rem,4vw,2rem);}
.main{margin-top:var(--header-height);padding:2rem 0;}

/* Section Headers */
.section-header{margin-bottom:3rem;}
.section-subtitle{color:var(--silver);font-size:1.1rem;}

/* Buttons */
.btn{display:inline-block;padding:0.7em 2em;border-radius:0.5rem;font-weight:700;font-family:var(--font-display);font-size:1rem;text-decoration:none;transition:150ms;cursor:pointer;border:none;}
.btn-secondary{background:var(--bg-800);color:var(--turquoise);border:1px solid var(--turquoise);}
.btn-secondary:hover{background:var(--turquoise);color:var(--bg-900);}

/* Guide Meta */
.guide-meta{margin-bottom:1.5rem;}
.guide-category-badge{background:var(--turquoise);color:var(--bg-900);border-radius:0.3rem;padding:0.2em 0.7em;font-size:0.9rem;margin-right:0.5em;font-weight:600;}
.guide-author{color:var(--silver);font-size:0.95rem;}

/* Guide Content */
.guide-full-content{background:var(--bg-800);border-radius:0.5rem;box-shadow:var(--stone-shadow);padding:2rem;line-height:1.7;}

/* Markdown Content Styles */
.guide-full-content h1{font-size:1.8rem;margin-top:2rem;margin-bottom:1rem;color:var(--white);}
.guide-full-content h2{font-size:1.5rem;margin-top:1.8rem;margin-bottom:0.8rem;color:var(--white);}
.guide-full-content h3{font-size:1.3rem;margin-top:1.5rem;margin-bottom:0.6rem;color:var(--white);}
.guide-full-content h4{font-size:1.1rem;margin-top:1.2rem;margin-bottom:0.5rem;color:var(--white);}
.guide-full-content h5{font-size:1rem;margin-top:1rem;margin-bottom:0.4rem;color:var(--white);}
.guide-full-content h6{font-size:0.95rem;margin-top:0.8rem;margin-bottom:0.3rem;color:var(--white);}

.guide-full-content p{margin-bottom:1rem;color:var(--silver);line-height:1.6;}

.guide-full-content ul,.guide-full-content ol{margin:1rem 0;padding-left:2rem;}
.guide-full-content ul li,.guide-full-content ol li{margin-bottom:0.5rem;color:var(--silver);}
.guide-full-content ul{list-style-type:disc;}
.guide-full-content ol{list-style-type:decimal;}

.guide-full-content blockquote{border-left:4px solid var(--turquoise);padding-left:1rem;margin:1.5rem 0;font-style:italic;color:var(--silver);background:var(--bg-700);padding:1rem;border-radius:0 0.3rem 0.3rem 0;}

.guide-full-content code{background:var(--bg-700);color:var(--turquoise);padding:0.2em 0.4em;border-radius:0.3rem;font-family:'Courier New',monospace;font-size:0.9em;}

.guide-full-content pre{background:var(--bg-700);padding:1rem;border-radius:0.5rem;overflow-x:auto;margin:1.5rem 0;border:1px solid var(--steel);}
.guide-full-content pre code{background:none;padding:0;color:var(--silver);}

.guide-full-content img{max-width:100%;height:auto;border-radius:0.5rem;margin:1rem 0;box-shadow:var(--stone-shadow);}

.guide-full-content a{color:var(--turquoise);text-decoration:underline;}
.guide-full-content a:hover{color:var(--cyan-glow);}

.guide-full-content table{width:100%;border-collapse:collapse;margin:1.5rem 0;background:var(--bg-700);border-radius:0.5rem;overflow:hidden;}
.guide-full-content th,.guide-full-content td{padding:0.8em 1em;text-align:left;border-bottom:1px solid var(--steel);}
.guide-full-content th{background:var(--bg-800);color:var(--white);font-weight:700;}
.guide-full-content tr:hover{background:var(--bg-800);}

.guide-full-content hr{border:none;height:1px;background:var(--steel);margin:2rem 0;}

/* Grid Layout */
.grid{display:grid;gap:2rem;}
.grid-3{grid-template-columns:repeat(3,1fr);}

/* Footer */
.footer{background:var(--bg-900);padding:2rem 0;color:var(--silver);margin-top:3rem;}
.footer h4{color:var(--white);margin-bottom:1rem;}
.footer ul{list-style:none;padding:0;}
.footer ul li{margin-bottom:0.5rem;}
.footer ul li a{color:var(--silver);text-decoration:none;}
.footer ul li a:hover{color:var(--turquoise);}
.footer-bottom{text-align:center;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--steel);}

/* Responsive Design */
@media (max-width:768px){
  .guide-full-content{padding:1.5rem;}
  .guide-full-content h1{font-size:1.5rem;}
  .guide-full-content h2{font-size:1.3rem;}
  .guide-full-content h3{font-size:1.1rem;}
  .grid-3{grid-template-columns:1fr;}
} 
/* === FLUID HEADINGS & 4K SCALING === */
h1 { font-size: clamp(1.6rem, 4vw, 2.8rem) !important; }
@media (max-width: 560px) {
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .card { padding: 1.2rem; }
  .section { padding: 1.5rem 0; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
}
@media (min-width: 1920px) {
  :root { --container-max-width: 1600px; }
  html { font-size: 18px; }
}
@media (min-width: 2560px) {
  :root { --container-max-width: 2100px; }
  html { font-size: 20px; }
}

/* iOS Safari mishandles background-attachment:fixed (sizes bg to the whole
   document, not the viewport) - use normal scroll attachment on mobile */
@media (max-width: 820px){ body { background-attachment: scroll; } }