/* ===== Print+Play — Subtle Sleek Gaming + Print Theme (v2) ===== */

/* Color & spacing system */
:root{
  --color-bg: #0F0F10;
  --color-card: #18181B;
  --color-elev: #1F2024;
  --color-text: #F5F5F5;
  --color-muted: #B8B8BF;
  --color-primary: #E60000; /* subtle gamer red */
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  --container: 1200px;
  --radius: 12px;

  /* spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;

  --navbar-height: 72px; /* Fallback */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  transition: background-color .3s ease; /* For nav overlay */
  padding-top: var(--navbar-height); /* Account for fixed navbar */
}
/* Dark overlay when nav is open */
body.nav-open{overflow:hidden}
body.nav-open::before{
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.5);
  z-index: 900;
}


/* Layout helpers */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s-6)}
.section{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.section.is-visible{opacity:1;transform:none}
.section.padded{padding: var(--s-11) 0}
.section.padded.alt{background: var(--color-card)}

.center{text-align:center}
.left-align{text-align:left}

/* Typography */
h1,h2,h3{font-family:'Audiowide', sans-serif; letter-spacing:.3px; text-transform:uppercase}
h1{font-size:clamp(2.0rem, 2.0rem + 2vw, 4rem); line-height:1.1} /* Reduced min size */
h2{font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); margin-bottom:var(--s-4); color:var(--color-primary)} /* Reduced margin */
h3{font-size:1.25rem; margin-bottom:var(--s-4)}
p{color:var(--color-muted); margin-bottom:var(--s-4)}
a{color:var(--color-primary); text-decoration:none}
a:hover{text-decoration:underline}

/* Section Header Spacing */
.section-head {
  margin-bottom: var(--s-8);
}
.section-lead, .location-subhead {
  margin-top: -16px; /* calc(var(--s-4) * -1) */
}
/* Re-add bottom margin for stand-alone subheads */
.location-subhead, .section-lead {
  margin-bottom: var(--s-8);
}
p.section-lead, p.location-subhead { 
  color: var(--color-muted); 
}

/* Mobile/Desktop Content Swapping */
.mobile-only { display: none; }
.desktop-only { display: inline-block; } /* Use inline-block to respect spacing */

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:var(--s-6);top:var(--s-6);width:auto;height:auto;background:#000;color:#fff;padding:var(--s-3) var(--s-4);z-index:999}

/* Navbar (alignment fixes) */
.navbar{
  position: fixed; /* Changed from sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(15,15,16,.85);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navbar .container{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-6)}
.nav-logo{display:flex;align-items:center;gap:var(--s-3);font-family:'Audiowide',sans-serif;font-size:1.25rem;color:#fff;text-decoration:none}
.nav-logo img{width:40px;height:40px}
.navbar nav ul{display:flex;align-items:center;gap:var(--s-5);list-style:none}
.navbar .nav-link{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 6px;color:#fff;font-family:'Audiowide',sans-serif;font-size:1rem;
}
.navbar .nav-link:hover{color:var(--color-primary);text-decoration:none}
.navbar .nav-button{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 18px;border-radius:999px;
  background:var(--color-primary); color:#fff; border:1px solid rgba(255,255,255,.08);
  font-family:'Audiowide',sans-serif; line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.navbar .nav-button:hover{background:#ff1a1a;color:#fff;text-decoration:none;transform:translateY(-1px)}
.navbar .nav-button:active{transform:translateY(0)}

/* Mobile Nav Toggle */
.nav-toggle{
  display:none; /* Hidden on desktop */
  background:transparent;
  border:none;
  cursor:pointer;
  padding: var(--s-2);
  z-index: 1001; /* Above nav */
}
.nav-toggle .line{
  display:block;
  width:24px;
  height:2px;
  background:#fff;
  margin:5px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] .line:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .line:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .line:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }


/* Hero */
.hero{min-height:72vh; display:flex; align-items:center; justify-content:center; background-size:cover;background-position:center}
.hero-overlay{
  width:100%;
  height:100%;
  background:linear-gradient( to top, rgba(15,15,16,.98), rgba(15,15,16,.75) ); /* Increased opacity */
  display:flex;
  align-items:center;
}
.hero-inner{padding: var(--s-11) 0; text-align:center}
.hero-subhead{max-width:860px;margin:var(--s-4) auto var(--s-6)}
.hero-cta{display:flex; gap:var(--s-4); justify-content:center}
.cta-button{display:inline-flex;align-items:center;justify-content:center;background:var(--color-primary);color:#fff;border-radius:10px;padding:14px 26px;font-family:'Audiowide',sans-serif;line-height:1}
.cta-button:hover{text-decoration:none;opacity:.92}
.cta-button.ghost{background:transparent;border:1px solid rgba(255,255,255,.18)}

.hero-tagalog{font-weight:700}

/* Cards */
.card{background:var(--color-elev);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:var(--s-8);box-shadow:var(--shadow)}
.card-title{font-family:'Audiowide',sans-serif;color:#fff;margin-bottom:var(--s-5)}

/* Printing Checklist */
.checklist, .specs{padding-left:1.2rem}
.checklist li, .specs li{margin:0 0 var(--s-3) 0; color:var(--color-text); list-style:disc; font-weight: 600;}
.checklist .rate-note { 
  color: var(--color-muted); 
  font-size: 0.95rem; 
  font-weight: 400;
  margin-left: var(--s-3); /* Increased from s-2 */
}
.specs li { color: var(--color-muted); font-weight: 400; } /* Keep specs muted */

.inline-cta{display:inline-block;margin-top:var(--s-5)}
.tiny-note{font-size:.95rem; font-style:italic}

/* Shop Features Section */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-6);
}
.feature-card {
  text-align: center;
  padding: var(--s-7);
}
.feature-card h3 {
  font-family: 'Audiowide', sans-serif;
  color: #fff;
  margin-bottom: var(--s-3);
  text-transform: uppercase;
}
.feature-card .feature-desc {
  margin-bottom: 0; /* remove default p margin */
  color: var(--color-muted);
}


/* Game Gallery */
.game-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-5);
}
.game-gallery-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.game-gallery-grid img:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}

/* Pricing */
.pricing-table{
  width:100%;
  margin:0 auto;
  border-collapse:collapse;
  background:var(--color-card);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08)
}
.pricing-table thead{background:var(--color-primary);color:#fff}
.pricing-table th{font-family:'Audiowide',sans-serif;text-align:left;padding:16px 18px}
.pricing-table td{padding:16px 18px;color:var(--color-muted);border-top:1px solid rgba(255,255,255,.06)}
.pricing-table td:first-child{color:#fff;font-weight:700}

/* Testimonials */
.testimonial-carousel {
  position: relative;
}
.testimonials-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-7);
}
.testimonial-card blockquote{
  font-size: 1.1rem;
  font-style: italic;
  border-left: 3px solid var(--color-primary);
  padding-left: var(--s-5);
  margin-bottom: var(--s-5);
  color: var(--color-text);
}
.testimonial-card cite{
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--color-muted);
}
/* Carousel buttons hidden on desktop */
.carousel-controls {
  display: none;
  justify-content: center;
  gap: var(--s-5);
  margin-top: var(--s-5);
}
.carousel-btn {
  display: none;
}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
.gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08)}

/* FAQ */
.faq-list{
  /* max-width: 900px; <-- Removed for symmetry */
  margin: 0 auto;
}
.faq-item{
  background: var(--color-card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  margin-bottom: var(--s-4);
  overflow: hidden; /* for border-radius */
}
.faq-item[open]{
  background: var(--color-elev);
}
.faq-question{
  padding: var(--s-5);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Override h1,h2,h3 styles */
  font-family: 'Montserrat', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1rem;
  color: #fff;
}
.faq-question::marker{ content: ''; } /* Hide default marker */
.faq-question::-webkit-details-marker{ display:none; } /* Hide default marker */
.faq-question:hover{ color: var(--color-primary); }
/* Custom icon */
.faq-question::after{
  content: '+';
  font-size: 1.5rem;
  color: var(--color-primary);
  font-family: monospace;
  transition: transform .2s ease;
}
.faq-item[open] .faq-question::after{
  content: '−';
  transform: rotate(180deg);
}
/* FAQ Answer Styling */
.faq-answer{
  padding: 0 var(--s-5) var(--s-5) var(--s-5);
}
.faq-answer p, .faq-answer ul {
  margin-bottom: 0; /* Reset */
}
.faq-answer p + p, 
.faq-answer p + ul, 
.faq-answer ul + p {
  margin-top: var(--s-4); /* Add space between elements */
}
.faq-answer ul {
  list-style: disc;
  padding-left: 1.2rem;
}
.faq-answer li {
  margin: 0 0 var(--s-3) 0;
  color: var(--color-muted);
}
.faq-answer li:last-child {
  margin-bottom: 0;
}


/* Location & contact */
.location-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s-8)}
.social-icons{display:flex;gap:var(--s-3);margin-top:var(--s-4)}
.social-icons a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:#0b0b0c;border:1px solid rgba(255,255,255,.08);color:#fff;font-family:'Audiowide',sans-serif}
.social-icons a:hover{opacity:.9}
.map-card{display:flex;align-items:center;justify-content:center;min-height:220px;overflow:hidden}
.map-card iframe{border:0; width:100%; height:360px}

/* Footer */
.footer{padding:var(--s-8) 0;border-top:1px solid rgba(255,255,255,.06);text-align:center}
.footer p{color:var(--color-muted);margin:0}

/* Responsive */
@media (max-width: 800px){
  .container{padding:0 var(--s-4)}
  .section.padded{padding: var(--s-9) 0} /* Less padding on mobile */

  /* Mobile/Desktop Content Swapping */
  .desktop-only { display: none; }
  .mobile-only { display: inline-block; }

  /* Mobile Nav */
  .navbar .container{padding: var(--s-4)}
  .nav-toggle{display:block}
  .navbar nav{
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 80vw;
    height: 100vh;
    background: var(--color-elev);
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding: var(--s-11) var(--s-7);
  }
  .navbar nav.is-open{
    transform: translateX(0);
    box-shadow: -10px 0 30px rgba(0,0,0,.5);
  }
  .navbar nav ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }
  .navbar .nav-link, .navbar .nav-button{
    height: auto;
    width: 100%;
    padding: var(--s-3) 0;
    text-align: left;
    font-size: 1.2rem;
  }
  .navbar .nav-button{
    margin-top: var(--s-4);
    text-align: center;
    padding: 14px 18px;
  }

  /* Hero */
  .hero-inner{
    padding: var(--s-9) var(--s-6); /* Reduced top/bottom, Added left/right */
  } 
  .hero h1 span { 
    display: block; /* Stack words vertically */
    line-height: 1.2; /* Adjust line height for stacked */
  }
  .hero-cta{
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
  }
  .cta-button{
    width: 90%;
    max-width: 320px;
    justify-content: center;
  }

  /* Pricing Table Wrapper */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
  }
  .pricing-table {
    border: none;
    border-radius: 0;
  }
  .pricing-table td, .pricing-table th {
    white-space: nowrap; /* Prevent line breaks */
  }

  /* Testimonials Carousel */
  .testimonial-carousel {
    overflow: hidden; /* Hide non-active cards */
  }
  .testimonials-grid {
    display: flex; /* Change from grid to flex */
    grid-template-columns: 1fr; /* clear grid */
    gap: 0; /* clear gap */
    transition: transform 0.4s ease-in-out;
  }
  .testimonial-card {
    flex: 0 0 100%; /* Each card is full width of container */
    box-sizing: border-box; /* Include padding in 100% width */
  }
  
  /* Carousel Controls */
  .carousel-controls {
    display: flex; /* Show on mobile */
  }
  .carousel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-elev);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity .2s ease, background .2s ease;
  }
  .carousel-btn:hover {
    opacity: 1;
    background: var(--color-elev);
  }

  /* Grids */
  .gallery-grid{grid-template-columns:1fr}
  .location-grid{grid-template-columns:1fr}
}