/* ======================================================
   Rocheston Roxy — Candidate Page (Gruvbox V3, roomy)
   ====================================================== */

:root{
  --bg:#1d2021;
  --surface:#242829;
  --surface2:#2a2f31;
  --surface3:#31373a;
  --fg:#ebdbb2;
  --muted:#c7bfa2;
  --line:#4f5456;

  --yellow:#fabd2f;
  --green:#8ec07c;
  --blue:#83a598;
  --orange:#fe8019;
  --red:#fb4934;
  --purple:#d3869b;

  --radius-xl:24px;
  --radius-lg:16px;
  --radius-md:12px;

  --shadow-1:0 10px 26px rgba(0,0,0,.35), 0 3px 9px rgba(0,0,0,.25);
  --shadow-2:0 22px 50px rgba(0,0,0,.46), 0 10px 24px rgba(0,0,0,.32);

  --btn-h:64px;     /* bigger base */
  --btn-minw:232px;

  /* gradients for buttons */
  --grad-yellow: #fe8019;
  --grad-green:  #83a598;
  --grad-blue:   #8ec07c;
  --grad-purple: #b16286;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at -10% -15%, rgba(250,189,47,.07), transparent 60%),
    radial-gradient(1000px 650px at 110% 10%, rgba(131,165,152,.06), transparent 55%),
    var(--bg);
  color:var(--fg);
  font-family:'Fira Sans', system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  font-size:20px; line-height:1.45;
}

/* Color links, no underline */
a{
  color:var(--yellow);
  text-decoration:none;
  transition:filter .15s ease, opacity .15s ease;
}
a:hover{ filter:saturate(110%); opacity:.95 }

.wrap{ max-width:1240px; margin:0 auto; padding:34px }

/* ================= Title bar ================= */
.titlebar{
  display:grid;
  grid-template-columns: 1fr auto; /* brand | actions */
  align-items:center; gap:18px;
  padding:22px; margin-bottom:40px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--surface2);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1);
}
.brand{ display:flex; align-items:center; gap:16px; min-width:0 }
.brand img{
  width:84px; height:84px; object-fit:contain; border-radius:14px;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
  border:none;
}
.title{ display:grid; gap:6px; min-width:0; padding:8px 12px; border-radius:12px; }
.title .t1{
  font-weight:900; font-size:36px; letter-spacing:.2px; color:var(--yellow);
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.title .t2{ color:var(--muted); font-weight:700 }
.pill{
  display:inline-block; padding:6px 12px; border-radius:999px; font-weight:900; font-size:14px;
  background:var(--surface3); border:1px solid var(--line); color:var(--fg)
}
.title-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end }

/* ================= Buttons (bigger + gradients) ================= */
.btn{
  height:var(--btn-h);
  min-width:var(--btn-minw);
  padding:0 22px;
  border:0;
  border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:18px; letter-spacing:.2px;
  cursor:pointer;
  color:#1d2021;
  background:var(--grad-yellow);
  box-shadow:0 14px 30px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.25);
  transition:transform .08s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}
.btn:hover{ transform:translateY(-1px) scale(1.015); filter:saturate(108%); }
.btn:active{ transform:translateY(0) scale(0.995); opacity:.95; }

.btn--ok{   background:var(--grad-green);  color:#1d2021; }
.btn--warn{ background:var(--grad-yellow); color:#1d2021; }
.btn--alt{  background:var(--grad-purple); color:#1d2021; }

/* Ghost with gradient border */
.btn--ghost{
  background:
    linear-gradient(var(--surface3), var(--surface3)) padding-box,
    var(--grad-blue) border-box;
  border:2px solid transparent;
  color:var(--fg);
  box-shadow:0 10px 24px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.22);
}
.btn.same{ min-width:240px }
.btn--sm{  min-width:180px; height:56px; font-size:16px; }

/* Inputs (match button height) */
.select{
  height:var(--btn-h);
  min-width:220px;
  border-radius:16px;
  font-size:18px;
  padding:0 16px;
  appearance:none;
  background:var(--surface3);
  color:var(--fg);
  border:1px solid var(--line);
}

/* ================= Layout ================= */
.grid{
  display:grid;
  grid-template-columns: 1.6fr .9fr;
  gap:40px;
  align-items:stretch;
}
.stack{ display:grid; gap:40px }

/* Make the right Issuer card the same height as the two left sections */
.card--issuer{
  grid-row: span 2;          /* spans two implicit rows to match left stack height */
  display:flex;
  flex-direction:column;     /* keep inner content stacked nicely */
}

/* Cards */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%), var(--surface2);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-xl);
  padding:28px;
  box-shadow:var(--shadow-2);
}

/* Alternate tile shades per section */
.card--candidate{ background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%), var(--surface) ; border-left:7px solid var(--green) }
.card--verify   { background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%), var(--surface3); border-left:7px solid var(--blue) }
.card--issuer   { background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%), var(--surface) ; border-left:7px solid var(--purple) }
.card--cert     { background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%), var(--surface) ; border-left:7px solid var(--yellow) }
.card--share    { background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%), var(--surface3); border-left:7px solid var(--orange) }

.section-title{
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
  font-size:24px; font-weight:700; color:var(--green)
}
.card--verify .section-title{ color:var(--blue) }
.card--issuer .section-title{ color:var(--purple) }
.card--cert .section-title{ color:var(--yellow) }
.card--share .section-title{ color:var(--orange) }

/* Candidate header */
.header-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-bottom:12px;
}
.hero-name{ font-size:54px; font-weight:900; letter-spacing:.2px; margin:0 }
.course{ font-size:30px; font-weight:800; color:#f2e5bc; margin:8px 0 14px }

.status-dot{
  width:72px; height:72px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:36px; font-weight:900; color:#1d2021;
  background:var(--green); box-shadow:var(--shadow-1);
}
.status-dot.bad{ background:var(--red) }

.badges{ display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 16px }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; font-size:18px; font-weight:900;
  background:var(--surface3); border:1px solid var(--line)
}
.badge.ok{ background:var(--green); color:#1d2021; border-color:transparent }
.badge.warn{ background:var(--orange); color:#1d2021; border-color:transparent }
.badge.bad{ background:var(--red); color:#1d2021; border-color:transparent }

.row{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.item{ display:grid; gap:8px }
.label {
    color: #fb4934;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: .2px;
}.value{ font-weight:800; font-size:24px }
.mono {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  word-break: break-all;
  font-size: 22px;
}

.hr{ height:1px; background:rgba(0,0,0,.12); margin:22px 0; border-radius:1px }

/* Verify logo */
.verify-logo-wrap{
  display:flex;
  justify-content:center;
  margin: 8px 0 14px;
}
.verify-logo{
  width: 320px;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}

/* Share & actions */
.actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:14px }
.btn.same{ min-width:240px }

/* Footnote */
.small{ color:var(--muted); font-size:14px; margin-top:8px }

/* Confetti */
.confetti{
  position:fixed; top:-10px; width:8px; height:14px; opacity:.95;
  transform:translateY(-20px) rotate(0deg);
  animation:fall 1600ms linear forwards;
  border-radius:2px;
}
@keyframes fall{
  to { transform:translateY(120vh) rotate(720deg); opacity:.9; }
}

/* --------- Section-accented buttons (same style as candidate + colored border) --------- */
.card--candidate .btn { /* base candidate buttons stay as-is */ }

.card--verify .btn,
.card--issuer .btn,
.card--cert .btn,
.card--share .btn {


  border:2px solid transparent;
}

.card--verify .btn { border-color: var(--blue); }
.card--issuer .btn { border-color: var(--purple); }
.card--cert  .btn { border-color: var(--yellow); }
.card--share .btn { border-color: var(--orange); }

.card--verify .btn:hover,
.card--issuer .btn:hover,
.card--cert  .btn:hover,
.card--share .btn:hover { filter:saturate(112%); }

.card--verify .btn:active,
.card--issuer .btn:active,
.card--cert  .btn:active,
.card--share .btn:active { opacity:.95; }

/* Optional: give ghost buttons accent borders in each section */
.card--verify .btn--ghost { border-color: var(--blue); }
.card--issuer .btn--ghost { border-color: var(--purple); }
.card--cert  .btn--ghost  { border-color: var(--yellow); }
.card--share .btn--ghost  { border-color: var(--orange); }

/* Responsive */
@media (max-width: 1180px){
  .titlebar{ grid-template-columns: 1fr; row-gap:16px }
  .title-actions{ justify-content:flex-start }
}
@media (max-width: 1080px){
  .grid{ grid-template-columns:1fr }
  .row{ grid-template-columns:1fr }
  .brand img{ width:72px; height:72px }
  .title .t1{ font-size:30px }
  .hero-name{ font-size:44px }
  .course{ font-size:26px }
  /* On mobile, let issuer drop back to normal flow */
  .card--issuer{ grid-row:auto; }
}

/* --- Uniform ghost buttons (match screenshot) --- */
.btn{
  height:var(--btn-h);
  min-width:var(--btn-minw);
  padding:0 24px;
  border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  font-weight:900; font-size:18px; letter-spacing:.2px;
  cursor:pointer;

  /* look */
  color:var(--fg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%),
    var(--surface3);
  border:2px solid var(--green);
  box-shadow:0 14px 30px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.25);

  /* feel */
  transition:transform .08s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}
.btn:hover{ transform:translateY(-1px) scale(1.015); filter:saturate(110%); }
.btn:active{ transform:translateY(0) scale(0.995); opacity:.95; }

/* small variant keeps the same style */
.btn.same{ min-width:240px }
.btn--sm{ min-width:180px; height:56px; font-size:16px }

/* kill old gradient variants – make them all identical */
.btn--ok,
.btn--warn,
.btn--alt,
.btn--ghost{
  background:inherit !important;
  color:inherit !important;
  border-color:inherit !important;
  box-shadow:inherit !important;
}

/* force ANY section button to use the same border color */
.card--candidate .btn,
.card--verify .btn,
.card--issuer .btn,
.card--cert .btn,
.card--share .btn{
  border-color: var(--green) !important;
}

/* focus ring for accessibility */
.btn:focus-visible{
  outline: 3px solid rgba(142,192,124,.35);
  outline-offset: 2px;
}


#c_issued, #c_valid {
    font-size: 24px;
}





/* Make the issuer status use the same font as the certificate line */
#card_issuer #c_issuer strong{
  font-family: 'Fira Sans', system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
  /* size & color already set inline in JS */
}

#embed_code { background: var(--surface3); color: var(--fg); border:1px solid var(--line); }


/* === RCCE Gruvbox audio (single rounded, taller) === */
.rcce-audio__player{
  width:100%;
  height:56px;                 /* taller */
  display:block;
  background:var(--surface2);
  border:2px solid var(--green);
  border-radius:14px;          /* single rounded edge */
  box-shadow:0 6px 14px rgba(0,0,0,.28);
  overflow:hidden;             /* hide inner corners to avoid double rounding */
}

/* WebKit (Chrome/Edge/Brave/Opera/Safari) */
.rcce-audio__player::-webkit-media-controls-enclosure{
  background:transparent;
  border-radius:0;             /* kill inner rounding */
  box-shadow:none;
}

.rcce-audio__player::-webkit-media-controls-panel{
  background:transparent;      /* let our surface show through */
  color:var(--fg);
  border-radius:0;             /* no inner rounding */
}

/* Buttons */
.rcce-audio__player::-webkit-media-controls-play-button,
.rcce-audio__player::-webkit-media-controls-mute-button{
  background-color:var(--green);
  border-radius:50%;
}
.rcce-audio__player::-webkit-media-controls-play-button:hover,
.rcce-audio__player::-webkit-media-controls-mute-button:hover{
  background-color:var(--yellow);
}

/* Time text */
.rcce-audio__player::-webkit-media-controls-current-time-display,
.rcce-audio__player::-webkit-media-controls-time-remaining-display{
  color:var(--fg);
  font-weight:900;
}

/* Timeline & volume bars */
.rcce-audio__player::-webkit-media-controls-timeline,
.rcce-audio__player::-webkit-media-controls-volume-slider{
  background-color:#2b3a33;    /* subtle dark green track */
  border-radius:6px;
}

/* Firefox fallbacks (limited styling hooks) */
.rcce-audio__player::-moz-volume-bar,
.rcce-audio__player::-moz-time-bar{
  background-color:#2b3a33;
  border-radius:6px;
}

/* Optional: caption style under cover art */
.rcce-audio__caption{
  color:var(--muted);
  font-weight:800;
  font-size:14px;
}



/* ===== Samples Modal ===== */
.modal[hidden]{ display:none }
.modal{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
}
.modal__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.modal__dialog{
  position:relative;
  width:min(1100px, 92vw);
  max-height:86vh;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%), var(--surface2);
  border:0;
  border-radius:20px;
  box-shadow: var(--shadow-2);
  padding:18px 18px 22px;
  overflow:auto;
}
.modal__header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:12px; position:sticky; top:0; background:inherit; padding-bottom:8px;
}
.modal__title{ font-weight:900; font-size:22px; color:var(--yellow) }
.modal__close{
  height:38px; min-width:auto; padding:0 12px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface3);
  color:var(--red);
  border:1px solid var(--red);
  cursor:pointer; font-weight:900;
}

.samples-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:36px 24px; /* row-gap | column-gap */
}
@media (max-width: 1000px){ .samples-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .samples-grid{ grid-template-columns: 1fr; } }

.sample-card{
  display:grid; gap:10px; padding:0;
  background: transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  cursor: pointer;
}
.sample-card img{
  width:100%; height:auto; display:block; box-shadow: var(--shadow-1);
  background:#111; object-fit:cover;
}
.sample-card__caption{
  font-weight:900; font-size:24px; text-align:center; color:var(--fg);
}