/* ---------- root tokens ---------- */
:root{
  --accent:#00cec8;
  --bg:#fafafa;
  --nav-bg:#000;
  --text:#212121;
  --white:#fff;
  --border:#dcdcdc;
  --radius:4px;
  --height:40px;
  --gap:8px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
body{background:var(--bg);color:var(--text);}

/* ---------- top nav ---------- */
.top-nav{background:var(--nav-bg);display:flex;align-items:center;padding:4px 16px;}
.logo{height:80px;margin-right:auto;}
.nav-links{list-style:none;display:flex;gap:16px;}
.nav-links a{color:var(--white);text-decoration:none;padding:6px 10px;border-radius:var(--radius);}
.nav-links a.active{background:var(--accent);}

/* ---------- nav on phones ---------- */
@media (max-width: 600px) {
  .top-nav {
    flex-direction: column;          /* stack logo + links vertically */
    padding: 12px 16px;
    gap: 12px;
  }
  .logo {
    margin: 0 auto;                  /* centre the logo */
    height: 36px;
  }
  .nav-links {
    width: 100%;
    justify-content: space-around;   /* spread links evenly */
    gap: 0;
    font-size: 14px;
  }
  .nav-links a {
    padding: 8px 8px;   /* tighter tap-target */
    font-size: 12px;    /* smaller text */
    min-width: 48px;    /* guarantee a 48 px hit-area (WCAG) */
  }
}

/* ---------- home-page card ---------- */
.posts .card {
  border-radius: var(--radius);        /* 4 px to match selects */
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.posts .card:hover {
  transform: translateY(-4px);         /* gentle lift */
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.posts .card h2 {
  color: var(--accent);                /* match logo / buttons */
  font-weight: 600;
}

/* ---------- home page cards ---------- */
.home-main{padding:32px 16px;max-width:90%;margin:auto}
.posts{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--white);border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.card img{width:100%;height:auto}
.card h2{padding:12px;font-size:1.1rem}
.card p{padding:0 12px 12px}

/* ---------- filter bar – desktop ---------- */
.filter-main{padding:24px 16px;max-width:1200px;margin:auto}
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--gap);}
.filters label{display:flex;flex-direction:column;flex:0 1 auto;}
.filters .lbl{font-size:13px;margin-bottom:4px;color:var(--text);}
.filters select,.filters input[type=text]{
  height:var(--height);padding:0 12px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--white);font-size:14px;width:auto;min-width:8rem;
}
#showBtn{
  height:var(--height);padding:0 20px;border:none;border-radius:var(--radius);
  background:var(--accent);color:var(--white);font-size:14px;cursor:pointer;align-self:flex-end;
}
#showBtn:hover{opacity:.9;}

/* ---------- custom multiselect ---------- */
.multiselect-wrapper{position:relative;width:100%;min-width:300px;max-width:300px;min-height:20px;}
.custom-multiselect{
  height:var(--height);border:1px solid var(--border);border-radius:var(--radius);padding:0 12px;
  background:var(--white);display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:14px;
}
.custom-multiselect:hover{border-color:#de9714}
.custom-multiselect:focus{outline:none;border-color:var(--accent)}
.selected-items{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.dropdown-arrow{color:#666;font-size:12px;margin-left:8px;transition:transform .2s}
.multiselect-wrapper.open .dropdown-arrow{transform:rotate(180deg)}
.options-list{
  position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-top:none;
  border-radius:0 0 var(--radius) var(--radius);max-height:200px;overflow-y:auto;z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,.1);width:auto;min-width:100%;
}
@media (min-width:768px){.options-list{width:max-content;min-width:100%}}
.option-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f0f0;font-size:14px}
.option-item:hover{background:var(--accent);color:#fff}
.option-item.selected{background:var(--accent);color:#fff}
.option-item:last-child{border-bottom:none}

/* search box inside dropdown */
.multiselect-search{
  width:calc(100% - 24px);margin:8px 12px;padding:6px 8px;border:1px solid var(--border);
  border-radius:3px;font-size:13px;background:var(--white);box-sizing:border-box;
}
.multiselect-search:focus{outline:none;border-color:var(--accent)}

/* ---------- phone – ≤600 px ---------- */
@media (max-width:600px){
    .filters #board,
    .filters #year,
    .filters #session,
    .filters #paper {
        width: calc(50% - var(--gap)/2) !important; margin-right:auto;    /* take back control */
    }
    .filters #topic {width:95%; margin-right:auto;}
  .multiselect-wrapper{width:95%; margin-right:auto;}
   #showBtn{width:90%; margin-right:auto;}
}

/* ---------- card grid ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;padding:20px 0}
.qcard{background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden;display:flex;flex-direction:column}
.qcard img.thumb{width:100%;height:150px;object-fit:cover;background:#eee}
.qcard .info{padding:12px}
.qcard .title{font-size:1.05rem;font-weight:500;margin-bottom:6px}
.qcard .topics{color:#000;font-weight:500}
.qcard .subtopics{color:#666;font-size:.9rem;margin-bottom:8px}
.diff-bar{height:6px;border-radius:3px;background:#e0e0e0;overflow:hidden}
.diff-fill{height:100%;background:var(--accent)}
.diff-1{width:33%}.diff-2{width:66%}.diff-3{width:100%}

/* ---------- view button ---------- */
.view-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--accent, #007bff);
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 6px;
  text-align: center;
  font-weight: 500;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.view-btn:hover {
  background: #0056b3;
  transform: translateY(-2px);
}

.view-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/*-----Hover to show view button----*/

.qcard .view-btn {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.qcard:hover .view-btn {
  opacity: 1;
  transform: translateY(0);
}



footer{text-align:center;padding:24px;font-size:.9rem;color:#666}

/* ---------- card animation ---------- */
.fade-in{opacity:0;transform:translateY(15px);animation:fadeInUp .4s ease forwards}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}

.selected-items { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.tag             { background:#65ada4; padding:2px 6px; border-radius:1px; font-size:0.9em; }
.cross           { margin-left:4px; cursor:pointer; color:#141414; font-weight:bold; }
.cross:hover     { color:#c25446; }


/* ---------- let button grow with tags ---------- */
.custom-multiselect { min-height:var(--height); height:auto; max-height:40px; overflow-y:auto; }
.selected-items     { white-space:normal; overflow:auto; padding:6px; }

/* ---------- native dropdown theming ---------- */
.filters select {
  /* inherit existing sizes, then skin the panel */
  appearance: none;                 /* kill native arrow so we can add our own */
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
  padding-right: 28px;              /* make room for arrow */
  cursor: pointer;
  transition: border-color .2s;
}
.filters select:hover { border-color:#de9714; }
.filters select:focus { border-color: var(--accent); outline: none; }

/* ---------- optional: same shadow as multiselect when open ---------- */
.filters select:active,
.filters select:focus {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  
}





/* =====  THEME CONTROLS VIEWER  ==============================++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++===== */
:root{
  /* ---- palette ---- */
  --bg:#fafafa;                 /* page background */
  --text:#222;                  /* body text */
  --accent:#00cec8;             /* brand / active buttons */
  --accent-dark:#009da0;        /* hover / focus */
  --muted:#777;                 /* disabled text/borders */
  --header-bg:#000;             /* top bar */
  --header-text:#fff;

  /* ---- image ---- */
  --img-border:1px solid #bbb;
  --img-radius:6px;
  --img-shadow:0 4px 12px rgba(0,0,0,.12);
  --img-max-h:75vh;             /* keeps tall images on-screen */

  /* ---- buttons ---- */
  --btn-radius:4px;
  --btn-pad:8px 14px;
  --btn-gap:8px;                /* space between tab buttons */
  --font-size:15px;
}

/* ---- global resets ---- */
body{background:var(--bg);color:var(--text);font-size:var(--font-size);}

/* ---- header / nav ---- */
.viewer-header{background:var(--header-bg);color:var(--header-text);}
.viewer-header button{
  background:var(--accent);
  color:var(--header-text);
  border:none;
  padding:var(--btn-pad);
  border-radius:var(--btn-radius);
  cursor:pointer;
  transition:background .2s;
}
.viewer-header button:hover:not(:disabled){background:var(--accent-dark);}
.viewer-header button:disabled{opacity:.4;cursor:not-allowed;}

/* ---- tab buttons (Question / Mark Scheme / Answer) ---- */
.controls{display:flex;flex-wrap:wrap;gap:var(--btn-gap);}
.controls button{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
  padding:var(--btn-pad);
  border-radius:var(--btn-radius);
  cursor:pointer;
  transition:all .2s;
}

/* Hover effect */
.controls button:hover {
  background: var(--accent);
  color: #fff;
}

/* Clicked / selected button */
.controls button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}







/* ---- image ---- */
#img{
  max-width:100%;
  max-height:var(--img-max-h);
  object-fit:contain;          /* keeps aspect ratio */
  border:var(--img-border);
  border-radius:var(--img-radius);
  box-shadow:var(--img-shadow);
  display:block;               /* removes inline gap */
  margin:0 auto;               /* centre horizontally */
}

/* ---- title ---- */
#q-title{color:var(--header-text);}

/* ---- responsive tweaks ---- */
@media(max-width:600px){
  .controls{justify-content:center;}
}

/* ---------- viewer watermark ---------- */
#img-wrap {
  position:relative;
  display:inline-block;
  overflow:hidden;          /* << keeps everything inside */
  line-height:0;
}

#img-wrap::before {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: url("../images/watermark.png"); /* ✅ correct path */
  background-repeat: repeat;       /* tile pattern across image */
  background-position: center;
  background-size: 180px;          /* adjust watermark size */
  opacity: 0.1;                   /* adjust transparency (0.1–0.2 recommended) */
  pointer-events: none;
  z-index: 1;
  user-select: none;
  
  /* 🔹 Add this wrapper rotation effect */
  transform: rotate(-25deg);
  transform-origin: center;

}

#img-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* ---------- invisible overlay to block clicks ---------- */
#img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 2;
}

/* 1. clip anything that leaks out */
#img-wrap{
  overflow:hidden;          /* << hide overflow */
  display:inline-block;     /* you already had this */
  line-height:0;            /* removes descender gap */
}

/* 2. make the wrapper **exactly** the same size as the picture
      (so the rotated tile never gets bigger than the photo) */
#img-wrap img{
  width:100%;               /* let CSS do the measuring */
  height:auto;
  vertical-align:top;       /* kills inline spacing */
}