/* ===== Local fonts ===== */
@font-face{font-family:"Euclid Circular A";src:url("../font/EuclidCircularA-Medium.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Euclid Circular A";src:url("../font/EuclidCircularA-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Baskerville Custom";src:url("../font/baskervi.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Baskerville Custom";src:url("../font/BaskervilleBoldItalicBT.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap;}

/* ===== Theme ===== */
:root{
  --page-bg:#fffbf5;
  --brand:#c79a5a;      /* pills, accents */
  --theme:#a95917;      /* headings */
  --text:#1d1d1f;
  --muted:#6a6a6a;
  --side-gap:clamp(16px,6vw,5rem);
  --nav-h:88px;
  --ease:cubic-bezier(.22,1,.36,1);
  --yellow:#fbf7ba;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--text);
  font-family:"Euclid Circular A", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===== Page frame ===== */
main{padding-left:var(--side-gap);padding-right:var(--side-gap);padding-top:clamp(16px,3vw,28px);padding-bottom:64px;}
#navbar-placeholder, #footer-placeholder{min-height:1px}

/* ===== Title ===== */
.page-title{
  margin:18px 0 8px;
  font-size:clamp(28px,4.6vw,44px);
  letter-spacing:.02em;
  color:var(--theme);
  font-weight:700;
  line-height:1.1;
  font-family:"Baskerville";
  font-style:italic;
}
.page-sub{
  margin:0 0 22px;
  color:var(--muted);
  font-size:14px;
}

/* ===== Tabs ===== */
.tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:18px;
}
.tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  font-size:14px;
  border:1.6px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  transition:background .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.tab:focus-visible{outline:2px solid var(--brand)}
.tab.active{
  background:var(--brand);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  transform:translateY(-1px);
}

/* ===== Accordion ===== */
.faq-group{display:none}
.faq-group.active{display:block}
.faq{
  border-top:1px solid rgba(0,0,0,.08);
}
.faq:last-child{border-bottom:1px solid rgba(0,0,0,.08)}

.faq-btn{
  width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:18px 6px;
  background:transparent; border:0; cursor:pointer;
}
.faq-q{
  font-size:clamp(14px,2.0vw,18px);
  font-weight:500;
  letter-spacing:.02em;
  font-family:"Euclid Circular A", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#a95917;
}
.faq-icon{
  flex:0 0 auto;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff;
  color:#999;
  border:1.5px solid rgba(0,0,0,.12);
  transition:transform .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.faq-btn:hover .faq-icon{color:var(--theme);border-color:var(--theme)}
.faq.open .faq-icon{background:var(--theme); color:#fff; border-color:var(--theme); transform:rotate(180deg)}

.faq-a-wrap{
  overflow:hidden;
  transition:max-height .35s var(--ease);
  max-height:0;
}
.faq-a{
  padding:0 6px 18px 6px;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  letter-spacing:.01em;
}
.faq-a a{color:var(--theme); text-underline-offset:2px}

/* ===== Fullscreen Help Section ===== */
.help-full {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url('../FAQ-img/faq.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.help-overlay { position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:1; }
.help-content { position:relative; z-index:2; color:#fff; max-width:900px; padding:0 20px; animation: fadeUp 1.4s var(--ease) forwards; }
.help-content h2 { 
  font-family: "Baskerville Custom", serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  margin-bottom: 12px;
  color: var(--yellow);
} 
.help-content p {   
  font-family: 'Euclid Circular A', sans-serif;
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: 2px;
  margin-bottom: 22px;
  color: var(--yellow);}

.help-desc{
  font-family: 'Euclid Circular A', sans-serif;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(255, 251, 245, 0.9);
  max-width: 480px;
  margin: 0 auto;
  text-align: justify;
  margin-bottom: 1rem;
}

@media(max-width:900px){
  .help-content h2{
    font-size: 35px;
  }

  .help-content p{
    font-size: 18px;
  }

  .help-desc{
    font-size: 13px;
    padding-left: 2rem; 
    padding-right: 2rem;
  }
}

.help-btn { display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px; background:#25D366; color:#fff; font-weight:600; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:all .25s var(--ease); }
.help-btn:hover { filter:brightness(1.1); transform:translateY(-2px); }
.help-btn i { font-size:20px; }
@keyframes fadeUp { from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }

.page-header {
  padding: 20px;
  text-align: left; /* force left alignment */
}

.animate-title {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: titleFadeUp 1.3s var(--ease) forwards;
  text-align: left; /* ensure the text doesn’t center */
}

@keyframes titleFadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
    letter-spacing: 0.04em;
  }
  60% {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 0.02em;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: normal;
  }
}

/* Gold underline accent (animation) */
.animate-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--brand), #e8c08f);
  animation: underlineSlide 1.8s 0.8s ease-out forwards;
  border-radius: 999px;
}

@keyframes underlineSlide {
  to { width: 100%; }
}

/* Font setup */
.brand-title {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 700;
  color: var(--theme);
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 6px;
  font-style: italic;
}

.subnote {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .02em;
  text-align: left; /* also align subtext left */
}