:root{
  --bg:#111;
  --line:#2a2a2a;
  --text:#eaeaea;

  --accent:#27b7c7;
  --donate:#ff3b5c;
  --hero-tint: rgba(130, 40, 55, 0.55);
}

*{ box-sizing:border-box; }
html, body { height: 100%; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* Roboto for header/footer text only */
.site-header, .site-footer{
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

main{
  flex:1;
  display:flex;
}

/* HEADER */
.site-header{
  background:#1a1a1a;
  border-bottom: none;
}

/* ✅ EDGE-TO-EDGE HEADER INNER (ONLY CHANGE) */
.header-inner{
  height:74px;
  width:100%;
  max-width:none;            /* was 1200px */
  margin:0;                  /* was auto */
  padding:0 60px;            /* edge-to-edge look like screenshot */
  display:flex;
  align-items:center;
}

/* LEFT: logo + PAWS */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
  flex: 0 0 auto;
}
.brand-mark{ width:34px; height:34px; display:grid; place-items:center; }
.brand-text{ font-weight:900; letter-spacing:1px; }

/* RIGHT: nav takes remaining space */
.nav{
  flex: 1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:28px;
  margin-left: 24px;
}

.nav-link{
  color:#dcdcdc;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  letter-spacing:.6px;
}
.nav-link.is-active{ color:#fff; }

.icon-btn{
  margin-left:18px;
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#202020;
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.logo-svg{
  width:28px;
  height:auto;
  display:block;
}

/* HERO */
.hero{
  position: relative;
  flex: 1;                /* 🔥 makes it fill remaining space */
  min-height: 520px;
  overflow: hidden;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  display: flex;
}

.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url("../img/index.png") center/cover no-repeat;

  transform-origin:center;
  will-change: transform, filter;

  animation: heroAlive 18s ease-in-out infinite;
}

@keyframes heroAlive{
  0%{
    transform: scale(1.05) translateY(0px) translateX(0px);
    filter: brightness(1) contrast(1);
  }

  25%{
    transform: scale(1.08) translateY(-10px) translateX(-6px);
    filter: brightness(1.03) contrast(1.02);
  }

  50%{
    transform: scale(1.12) translateY(-4px) translateX(6px);
    filter: brightness(1.05) contrast(1.03);
  }

  75%{
    transform: scale(1.09) translateY(-12px) translateX(-4px);
    filter: brightness(1.03) contrast(1.02);
  }

  100%{
    transform: scale(1.05) translateY(0px) translateX(0px);
    filter: brightness(1) contrast(1);
  }
}

.hero-overlay{ position:absolute; inset:0; background: var(--hero-tint); }

.hero-content{
  position:relative;
  z-index:2;
  height:100%;
  max-width:980px;
  margin:0 auto;
  padding:80px 18px 0;
  text-align:center;
}

.hero-title{
  margin:0 0 18px;
  font-size:38px;
  font-weight:700;
}

.hero-subtitle{
  margin:0 auto;
  max-width:860px;
  font-size:13px;
  line-height:1.6;
  color:#f0f0f0;
}

.hero-actions{
  margin-top:42px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:56px;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:6px;
  padding:10px 18px;
  font-weight:700;
  font-size:11px;
  letter-spacing:.6px;
  border:1px solid transparent;
}

.btn-dark{
  background:#111;
  border-color:#111;
  color:#fff;
}

.btn-pill{
  background:#fff;
  color:#d14d60;
  border-color:#fff;
  border-radius:999px;
  padding:14px 70px;
  font-size:14px;
  letter-spacing:1px;
}

.btn-donate{
  background:var(--donate);
  border-color:var(--donate);
  color:#111;
  padding:10px 26px;
  border-radius:4px;
}

/* FOOTER */
.site-footer{
  background:#1a1a1a;
  border-top:1px solid var(--line);
}

/* prevent purple visited links in footer */
.site-footer a:link,
.site-footer a:visited{
  color:#cfcfcf;
  text-decoration:none;
}
.site-footer a:hover{
  color:#ffffff;
}

/* ✅ EDGE-TO-EDGE FOOTER INNER (ONLY CHANGE) */
.footer-inner{
  width:100%;
  max-width:none;           /* was 1200px */
  margin:0;                 /* was auto */
  padding:18px 60px;        /* edge-to-edge look like screenshot */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* LEFT: logo + PAWS below */
.footer-logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  color:#fff;
  text-decoration:none;
}
.footer-logo-mark{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
}
.footer-logo-text{
  font-weight:900;
  letter-spacing:1px;
  color:#fff;
}

/* CENTER */
.footer-center{
  flex:1;
  text-align:center;
  color:#cfcfcf;
}

.footer-cta-title{
  font-weight:900;
  letter-spacing:1px;
  font-size:12px;
  color:#fff;
}

.footer-cta-link{
  display:inline-block;
  margin-top:6px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.7px;
  color:var(--donate) !important;
  text-decoration:none;
}

.footer-links{
  margin-top:10px;
}

.footer-link{
  margin:0 10px;
  font-size:12px;
  color:#cfcfcf;
}

.footer-copy{
  margin-top:8px;
  font-size:11px;
  color:#a9a9a9;
}

/* RIGHT: socials far right */
.footer-right{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

.social{
  width:28px; height:28px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#202020;
  color:#fff !important;
  display:grid;
  place-items:center;
  text-decoration:none;
  font-weight:800;
  font-size:12px;
}

@media (max-width: 900px){
  .nav{ display:none; }
  .hero-actions{ gap:18px; flex-wrap:wrap; }
  .btn-pill{ padding:14px 46px; }
  .footer-inner{ flex-direction:column; padding:18px 20px; } /* keep readable on mobile */
  .footer-right{ justify-content:center; }
  .footer-logo{ align-items:center; }
}

/* keep your existing classes */
.nav-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:20px;
}

.disabled{
  opacity:.35;
  pointer-events:none;
}

.login-popup{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
}

.login-popup.show{
  display: flex;
}

.login-popup-box{
  width: min(360px, 92vw);
  background: rgba(26,26,26,0.95);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}

.login-popup-title{
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 14px;
  margin-bottom: 6px;
  color: #fff;
}

.login-popup-msg{
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.80);
  margin-bottom: 12px;
}

.login-popup-btn{
  width: 100%;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 900;
  letter-spacing: .6px;
  cursor: pointer;
  background: #202020;
  color: #fff;
}

/* ✅✅✅ ADD ONLY: BURGER MENU (MOBILE) */
.burger{
  display:none;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#202020;
  color:#fff;
  cursor:pointer;
  position:relative;
}

.burger span{
  position:absolute;
  left:50%;
  width:18px;
  height:2px;
  background:#fff;
  transform:translateX(-50%);
  transition:transform 200ms ease, opacity 200ms ease, top 200ms ease;
}

.burger span:nth-child(1){ top:14px; }
.burger span:nth-child(2){ top:20px; }
.burger span:nth-child(3){ top:26px; }

.mobile-nav{
  display:none;
}

@media (max-width: 900px){
  .burger{
    display:block;
  }

  .mobile-nav{
    display:block;
    position:fixed;
    top:74px;
    left:0;
    right:0;
    background:#1a1a1a;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:12px 20px;
    transform:translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition:opacity 200ms ease, transform 200ms ease;
    z-index:9998;
  }

  body.nav-open .mobile-nav{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .mobile-nav a{
    display:block;
    padding:12px 8px;
    border-radius:10px;
  }

  body.nav-open .burger span:nth-child(1){
    top:20px;
    transform:translateX(-50%) rotate(45deg);
  }

  body.nav-open .burger span:nth-child(2){
    opacity:0;
  }

  body.nav-open .burger span:nth-child(3){
    top:20px;
    transform:translateX(-50%) rotate(-45deg);
  }
}

/* ✅✅✅ FIXED ADD ONLY: burger on the RIGHT CORNER + hide header profile icon on mobile */
@media (max-width: 900px){

  /* hide the top-right profile icon when burger is used */
  .nav-right .icon-btn{
    display:none;
  }

  /* make burger go to the far right */
  .burger{
    margin-left:auto;
  }

}

/* ✅✅✅ ADD ONLY: burger to the MOST RIGHT CORNER on mobile */
@media (max-width: 900px){

  /* remove big left/right padding on mobile so corners are real corners */
  .header-inner{
    padding: 0 16px;
  }

  /* hide the top-right profile icon when burger is used */
  .nav-right .icon-btn{
    display:none;
  }

  /* push burger to the extreme right */
  .burger{
    margin-left:auto;
  }

}

/* ✅✅✅✅✅ FINAL ADD ONLY OVERRIDE: THIS MAKES IT 100% CORNER RIGHT */
@media (max-width: 900px){

  /* IMPORTANT: remove nav-right space so burger can reach the corner */
  .nav-right{
    display:none;
  }

  /* true corner padding */
  .header-inner{
    padding: 0 12px;
  }

  /* push burger to the far right */
  .burger{
    margin-left:auto;
  }

}

/* ✅✅✅ ADD ONLY: DESKTOP HARD RESET (fixes layout breaking after BOOK click) */
@media (min-width: 901px){

  .mobile-nav{
    display:none !important;
  }

  .nav-right{
    display:flex !important;
  }

  .nav{
    display:flex !important;
  }

  .burger{
    display:none !important;
  }

  .header-inner{
    padding:0 60px !important;
  }

}