/* Main site stylesheet (renamed from styles.css to styles_main.css)
   This file contains the primary site-wide styles. */
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa7b6;
  --accent:#e67e22;
  --accent-2:#f7c873;
  --text:#e6eef6;
  --max-width:1100px;
  --footer-height:86px;
}

*{box-sizing:border-box}
/* Allow pages to scroll when needed but keep a flexible layout so the footer
   can snap to the bottom on short pages. */
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:linear-gradient(180deg,var(--bg) 0%, #071022 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:auto;
  /* Reserve space at the bottom so a fixed footer won't overlap content. */
  padding-bottom: calc(var(--footer-height) + 8px);
}
.container{width:90%;max-width:var(--max-width);margin:0 auto;padding:3rem 0}

.site-header{border-bottom:1px solid rgba(255,255,255,0.04);background:transparent;height:56px}
.site-header .container{padding:0}
.header-inner{display:flex;align-items:center;justify-content:flex-start;padding:0 0.75rem;height:56px}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:0.6px}

/* Logo image sizing */
.site-logo{height:25px;display:block}
.logo a{display:inline-block}

/* Background image (blurred) - replace or adjust the file extension if needed. */
body{position:relative;overflow-x:hidden}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image: url('assets/bg.png');
  background-size:cover;
  background-position:center;
  filter: blur(8px) brightness(0.45);
  transform: scale(1.03);
  z-index:-1;
}

.container{width:90%;max-width:var(--max-width);margin:0 auto;padding:3rem 0;position:relative;z-index:1}

/* Ensure main grows to push the footer to the bottom on short pages */
main{flex:1}

/* Landing hero */
.landing-hero{min-height:calc(100vh - 92px);display:flex;align-items:center;justify-content:center;padding:0}
.hero-content{text-align:center;color:var(--text);max-width:820px}
.gday{font-family:'Rajdhani', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight:700;font-size:clamp(2.5rem,8vw,5rem);line-height:0.95;margin:0}
.lead{color:var(--muted);max-width:780px;margin:1rem auto 1.6rem;font-size:1.05rem}

.actions{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.25rem}
.btn{font-family:'Rajdhani', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;display:inline-block;background:rgba(255,255,255,0.08);color:var(--text);padding:0.75rem 1.1rem;border-radius:8px;text-decoration:none;font-weight:700;border:1px solid rgba(255,255,255,0.06);position:relative}
.btn:hover{background:rgba(255,255,255,0.11)}

/* Disabled state for buttons that are not active yet */
.btn.disabled, .btn[aria-disabled="true"]{
  background:rgba(255,255,255,0.03);
  /* Darker, more readable muted text for inactive buttons */
  color:#7f8a95;
  border-color:rgba(255,255,255,0.02);
  opacity:1;
  /* Allow pointer events so hover (tooltip) can appear; link remains non-focusable via tabindex in HTML. */
  pointer-events:auto;
  cursor:default;
}

/* Tooltip for disabled buttons (appears on hover) */
.btn.disabled::after, .btn[aria-disabled="true"]::after{
  content: "Work In Progress";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  top: calc(100% + 8px);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  z-index: 10000;
}
.btn.disabled:hover::after, .btn[aria-disabled="true"]:hover::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.site-footer, .thin-footer{
  border-top:1px solid rgba(255,255,255,0.04);
  background:transparent;
  color:var(--muted);
  font-size:0.95rem;
  /* Fix footer to viewport bottom so it's always visible and doesn't push page height */
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
}

/* A simple, robust footer layout that uses padding instead of strict height
   so content won't be clipped even when pages change document flow. */
.site-footer .container, .thin-footer .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  /* Reduce top padding so text sits higher (prevents clipping on small viewports) */
  padding:8px 0 6px;
  min-height:var(--footer-height);
}

.site-footer small{line-height:1.25}

@media (min-width:800px){
  .gday{font-size:5rem}
  .lead{font-size:1.125rem}
}

/* Mobile: prevent the whole page from scrolling — keep footer fixed and
   content sized to the remaining viewport so the user doesn't see page scroll. */
@media (max-width:800px){
  html, body {
    height:100%;
    overflow:hidden; /* disable document scrolling on small viewports */
  }

  /* Reserve space for header (56px) and footer (var(--footer-height)) so
     main fits exactly in the remaining viewport space. */
  /* Keep main as normal flow so pages like Contact stack vertically.
     Landing hero will still be centered by its own rule below. */
  main{
    height: calc(100vh - 56px - var(--footer-height));
    min-height: 0;
    overflow:auto;
    display:block;
  }

  /* Ensure hero fills the main area without causing extra scroll */
  .landing-hero{
    min-height:0;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
  }
}

/* Small-screen override to ensure simple pages like `contact.html` stack
   their content vertically. This forces a single-column layout for the
   main > section and ensures article cards take full width. */
@media (max-width:800px){
  /* Force heading, intro and contact section to be single-column and
     occupy full width so nothing can sit side-by-side. Applies up to
     800px to cover most phone/tablet narrow layouts. */
  main > h1, main > p, main > section{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    clear:both !important;
  }

  main > section{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  main > section > article{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
}

/* Small utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* FAQ page: ensure readable left-aligned content (overrides centered hero layout) */
.faq-page .hero-content {
  text-align: left;
}

.faq-page .hero-content .lead,
.faq-page .hero-content h1,
.faq-page .hero-content h2,
.faq-page .hero-content p,
.faq-page .hero-content ul,
.faq-page .hero-content li {
  text-align: left;
}

/* FAQ card styles */

.faq-card{
  /* Dark, semi-transparent rounded card for stronger contrast */
  background: linear-gradient(180deg, rgba(6,10,20,0.88), rgba(8,12,22,0.76));
  border: 1px solid rgba(255,255,255,0.04);
  padding: 1.25rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: 0 10px 30px rgba(2,6,23,0.7);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.faq-card:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(2,6,23,0.78)}
.faq-question{font-weight:700;margin:0 0 8px 0;color:var(--text);font-size:1.02rem}
.faq-answer{color:var(--muted);margin:0;line-height:1.5}

.section-divider{border:0;border-top:1px solid rgba(255,255,255,0.06);margin:1.5rem 0}

/* Ensure the FAQ page scrolls as a normal document on small screens */
@media (max-width:800px){
  .faq-page main{height:auto !important; min-height:0 !important; overflow:visible !important}
  .faq-container{padding:1.25rem}
}

/* FAQ page: make footer participate in document flow (not fixed to viewport) */
.faq-page .site-footer,
.faq-page .thin-footer{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
}

/* Remove the site-wide bottom padding reserved for the fixed footer on this page */
.faq-page{padding-bottom:0 !important}

/* Ensure main doesn't flex on FAQ pages so footer follows content */
.faq-page main{
  flex: 0 0 auto !important;
}

/* Small spacing so footer doesn't sit flush to cards */
.faq-page .site-footer, .faq-page .thin-footer{margin-top:24px}