/* ==========================================================================
   Percoid Academy — Certificate Verification
   Colors, type and radii are pulled straight from the site's own :root
   design tokens (--color-navy, --color-blue, --color-accent, --font-heading,
   --font-ui, --radius-*, --shadow-*) with safe fallbacks in case this file
   is ever previewed outside the theme. No colors are hard-coded here that
   aren't already part of the Percoid Academy palette.
   ========================================================================== */

.pc-verify {
	/* ---- mapped straight from the theme's :root ---- */
	--pc-navy:          var(--color-navy, #002d61);
	--pc-blue:          var(--color-blue, #1470ae);
	--pc-blue-light:    var(--color-blue-light, #e8f0fb);
	--pc-accent:        var(--color-accent, #ffcc00);
	--pc-paper:         var(--color-white, #ffffff);
	--pc-bg:            var(--off-white, #f7f9fc);
	--pc-ink:           var(--color-text, #333333);
	--pc-ink-soft:      var(--color-muted, #64748b);
	--pc-border:        var(--color-border, #e2e8f0);
	--pc-success:       var(--color-success, #22c55e);

	--pc-font-heading:  var(--font-heading, 'Lora', serif);
	--pc-font-body:     var(--font-body, 'Lora', serif);
	--pc-font-ui:       var(--font-ui, 'Montserrat', sans-serif);

	--pc-radius-lg:     var(--radius-lg, 12px);
	--pc-radius-md:     var(--radius-md, 8px);
	--pc-radius-sm:     var(--radius-sm, 4px);
	--pc-radius-full:   var(--radius-full, 50px);

	--pc-shadow-sm:     var(--shadow-sm, 0 2px 8px rgba(0,34,68,0.07));
	--pc-shadow-md:     var(--shadow-md, 0 8px 32px rgba(0,34,68,0.12));
	--pc-shadow-lg:     var(--shadow-lg, 0 20px 60px rgba(0,34,68,0.15));

	--pc-transition:    var(--transition, 0.3s cubic-bezier(0.4,0,0.2,1));

	/* ---- verify-page-only semantics (kept separate from brand palette) ---- */
	--pc-error: #c0392b;
	--pc-error-bg: #fdeeec;

	font-family: var(--pc-font-body);
	color: var(--pc-ink);
	background: var(--pc-bg);
}

.pc-verify * { box-sizing: border-box; }

.pc-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px;
}

.pc-page-intro { padding-top: 40px; }

/* -------------------------------------------------------------------- */
/* Hero                                                                  */
/* -------------------------------------------------------------------- */

.pc-verify__hero {
	background:
		radial-gradient(1100px 420px at 15% -10%, rgba(20,112,174,0.12), transparent 60%),
		linear-gradient(180deg, #ffffff 0%, var(--pc-bg) 100%);
	border-bottom: 1px solid var(--pc-border);
	padding: 72px 0 48px;
	text-align: center;
}

.pc-eyebrow {
	display: inline-block;
	font-family: var(--pc-font-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-navy);
	background: var(--pc-blue-light);
	padding: 6px 16px;
	border-radius: var(--pc-radius-full);
	margin-bottom: 24px;
}

.pc-verify__title {
	font-family: var(--pc-font-heading);
	font-weight: var(--h1-below-weight, 700);
	font-size: clamp(28px, 4vw, var(--h1-below-size, 40px));
	line-height: var(--h1-below-line-height, 1.2);
	margin: 0 0 16px;
	color: var(--pc-navy);
}

.pc-verify__subtitle {
	max-width: 620px;
	margin: 0 auto 32px;
	font-family: var(--pc-font-body);
	font-size: var(--p-size, 18px);
	font-weight: var(--p-weight, 400);
	line-height: var(--p-line-height, 1.5);
	color: var(--pc-ink-soft);
}

.pc-verify__form {
	display: flex;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: center;
}

.pc-verify__field { flex: 1 1 320px; }

.pc-verify__field input {
	width: 100%;
	padding: 15px 20px;
	font-size: var(--p-sm-size, 16px);
	font-family: var(--pc-font-ui);
	border: 1.5px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	background: var(--pc-paper);
	color: var(--pc-ink);
	transition: border-color var(--pc-transition), box-shadow var(--pc-transition);
}

.pc-verify__field input:focus {
	outline: none;
	border-color: var(--pc-blue);
	box-shadow: 0 0 0 4px var(--pc-blue-light);
}

.pc-verify__hint {
	margin: 18px 0 0;
	font-family: var(--pc-font-ui);
	font-size: 13px;
	color: var(--pc-ink-soft);
}

/* -------------------------------------------------------------------- */
/* Buttons                                                               */
/* -------------------------------------------------------------------- */

.pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--pc-font-ui);
	font-weight: var(--h3-btn-weight, 600);
	font-size: var(--h3-btn-size, 15px);
	line-height: var(--h3-btn-line-height, 1.4);
	padding: 15px 28px;
	border-radius: 16px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow var(--pc-transition), background var(--pc-transition);
	white-space: nowrap;
}

.pc-btn--primary {
	background: var(--pc-blue);
	color: #fff;
	box-shadow: var(--pc-shadow-sm);
	border-radius: 16px;

}
.pc-btn--primary:hover { background: var(--pc-navy); transform: translateY(-1px); box-shadow: var(--pc-shadow-md); }
.pc-btn--primary:disabled { opacity: .7; cursor: default; transform: none; }

.pc-btn--ghost {
	background: transparent;
	color: var(--pc-navy);
	border: 1.5px solid var(--pc-border);
	border-radius: var(--pc-radius-full);
}
.pc-btn--ghost:hover { border-color: var(--pc-blue); background: var(--pc-blue-light); }

.pc-btn__spinner {
	display: none;
	width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pc-spin .7s linear infinite;
}
.pc-btn.is-loading .pc-btn__spinner { display: inline-block; }
.pc-btn.is-loading .pc-btn__label { opacity: .85; }

@keyframes pc-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------- */
/* Result area                                                          */
/* -------------------------------------------------------------------- */
/* .pc-verify-result { padding: 48px 0 80px; min-height: 20px; } */

.pc-result { text-align: center; animation: pc-fade-up .35s ease both; }

@keyframes pc-fade-up {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.pc-result--error {
	max-width: 480px;
	margin: 0 auto;
	background: var(--pc-error-bg);
	border: 1px solid #f3c9c2;
	border-radius: var(--pc-radius-lg);
	padding: 40px 28px;
}

.pc-result__icon {
	width: 52px; height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #fff;
	color: var(--pc-error);
	font-size: 22px;
	font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--pc-error);
}

.pc-result--error h2 {
	font-family: var(--pc-font-heading);
	font-size: var(--h3-size, 20px);
	margin: 0 0 10px;
	color: var(--pc-ink);
}

.pc-result__message {
	font-family: var(--pc-font-body);
	color: var(--pc-ink-soft);
	line-height: 1.6;
	margin: 0 0 22px;
	font-size: var(--p-sm-size, 14.5px);
}

.pc-result__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--pc-font-ui);
	font-weight: 600;
	font-size: 14px;
	color: var(--pc-navy);
	background: var(--pc-blue-light);
	border: 1px solid var(--pc-blue);
	padding: 9px 20px;
	border-radius: var(--pc-radius-full);
	margin: 28px 0;
}

.pc-result__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 30px;
}

/* -------------------------------------------------------------------- */
/* The digital certificate card                                         */
/* -------------------------------------------------------------------- */


.pc-cert__brand-name img {
    max-height: 40px;
    width: auto;
    display: block;
}

.pc-cert {
	max-width: 720px;
	margin: 0 auto;
	background: var(--pc-paper);
	border-radius: var(--pc-radius-lg);
	overflow: hidden;
	box-shadow: var(--pc-shadow-lg);
	text-align: left;
	border: 1px solid var(--pc-border);
	position: relative;
}

.pc-cert__band {
	background: linear-gradient(135deg, var(--pc-navy) 0%, var(--pc-blue) 100%);
	color: #fff;
	padding: 30px 34px 26px;
	position: relative;
}

.pc-cert__band-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 20px;
}

.pc-cert__brand { display: flex; align-items: center; gap: 10px; }

.pc-cert__brand-mark {
	width: 26px; height: 26px;
	border-radius: 7px;
	background: #fff;
	display: inline-block;
	position: relative;
}
.pc-cert__brand-mark::after {
	content: "";
	position: absolute; inset: 6px;
	border-radius: 3px;
	background: var(--pc-accent);
}

.pc-cert__brand-name {
	font-family: var(--pc-font-ui);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
}

.pc-cert__no {
	text-align: right;
	font-family: var(--pc-font-ui);
	font-size: 11px;
	line-height: 1.5;
	opacity: .9;
}
.pc-cert__no strong { display: block; font-size: 13px; letter-spacing: .03em; }

.pc-cert__heading {
	font-family: var(--pc-font-heading);
	font-weight: 700;
	font-size: clamp(26px, 4vw, var(--h2-size, 34px));
	line-height: 1.14;
	margin: 0 0 14px;
	color: white;
}

.pc-cert__awarded {
	margin: 0;
	font-family: var(--pc-font-ui);
	font-size: 13.5px;
	font-weight: 600;
	opacity: .92;
	letter-spacing: .01em;
}

/* Gold seal — the one deliberate signature flourish on the certificate,
   nodding to a wax/foil seal on a physical document. Uses the theme's
   own accent yellow so it stays on-brand rather than introducing a new
   color. */
.pc-cert__seal {
	position: absolute;
	right: 34px;
	bottom: -30px;
	width: 60px; height: 60px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff6d8, var(--pc-accent) 65%);
	border: 3px solid var(--pc-paper);
	box-shadow: var(--pc-shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pc-font-ui);
	font-weight: 700;
	font-size: 9px;
	letter-spacing: .04em;
	color: var(--pc-navy);
	text-align: center;
	line-height: 1.2;
}

.pc-cert__body { padding: 40px 34px 34px; }

.pc-cert__student {
	font-family: var(--pc-font-heading);
	font-size: clamp(24px, 3.4vw, var(--h2-size, 30px));
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--pc-navy);
}

.pc-cert__desc {
	font-family: var(--pc-font-body);
	font-size: var(--p-sm-size, 14.5px);
	line-height: 1.75;
	color: var(--pc-ink-soft);
	margin: 0 0 32px;
	max-width: 560px;
}
.pc-cert__desc strong { color: var(--pc-ink); }

.pc-cert__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px dashed var(--pc-border);
	padding-top: 22px;
	flex-wrap: wrap;
}

.pc-cert__sign, .pc-cert__date { text-align: center; min-width: 130px; }

.pc-cert__sign-script {
	display: block;
	font-family: 'Brush Script MT', cursive;
	font-size: 24px;
	color: var(--pc-blue);
	margin-bottom: 4px;
}

.pc-cert__date span:first-child {
	display: block;
	font-family: var(--pc-font-ui);
	font-weight: 600;
	font-size: 14px;
	color: var(--pc-ink);
	margin-bottom: 4px;
}

.pc-cert__sign-title {
	display: block;
	font-family: var(--pc-font-ui);
	font-size: 11px;
	color: var(--pc-ink-soft);
	border-top: 1.5px solid var(--pc-ink);
	padding-top: 6px;
	margin-top: 2px;
}

.pc-cert__qr img {
	display: block;
	border-radius: var(--pc-radius-sm);
	border: 1px solid var(--pc-accent);
	padding: 3px;
}

.pc-cert__notice {
	font-size: smaller;
	align-self: center;
	justify-content: center;
	padding: 0 30px 0;

}

/* -------------------------------------------------------------------- */
/* Responsive                                                            */
/* -------------------------------------------------------------------- */

@media (max-width: 560px) {
	.pc-verify__hero { padding: 52px 0 36px; }
	.pc-cert__band, .pc-cert__body { padding-left: 22px; padding-right: 22px; }
	.pc-cert__footer { justify-content: center; text-align: center; }
	.pc-cert__seal { right: 22px; }
	.pc-verify__form { flex-direction: column; }
	.pc-btn { width: 100%; }
}

/* -------------------------------------------------------------------- */
/* Print                                                                 */
/* -------------------------------------------------------------------- */

@media print {
	.pc-verify__hero, .pc-result__badge, .pc-result__actions,
	.site-header, .site-footer, header, footer { display: none !important; }
	.pc-cert { box-shadow: none; border: none; }
	body * { visibility: hidden; }
	.pc-cert, .pc-cert * { visibility: visible; }
	.pc-cert { position: absolute; left: 0; top: 0; width: 100%; }
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}




/* New Styles for the certificate page  */


/* ==========================================================================
   Hero Banner Styles (Percoid Academy Theme Alignment)
   ========================================================================== */

.pc-verify__hero {
  position: relative;
  width: 100%;
  padding: 151px 20px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  overflow: hidden;
  text-align: center;
}

/* Gradient Overlay for Optimal Contrast and Percoid Brand Tone */
.pc-verify__hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 25, 47, 0.88) 0%,
    rgba(13, 71, 161, 0.82) 100%
  );
  z-index: 1;
}

/* Bring Content Above Overlay */
.pc-verify__hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.pc-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #e2e8f0;
  backdrop-filter: blur(4px);
}

.pc-verify__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.2;
}

.pc-verify__subtitle {
  font-size: 1.1rem;
  color: #cbd5e1;
  margin-bottom: 32px;
  line-height: 1.6;
}

/* Form Styles */
.pc-verify__form {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  max-width: 560px;
  margin: 0 auto 16px auto;
}

.pc-verify__field {
  flex: 1;
}

.pc-verify__field input[type="text"] {
  width: 100%;
  padding: 14px 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.95);
  color: #1e293b;
  font-size: 1rem;
  outline: none;
  transition: all 0.2s ease;
}

.pc-verify__field input[type="text"]:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
  background: #ffffff;
}

.pc-btn--primary {
  padding: 14px 28px;
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  white-space: nowrap;
}

.pc-btn--primary:hover {
  background-color: #1d4ed8;
  transform: translateY(-1px);
}

.pc-verify__hint {
  font-size: 0.875rem;
  color: #94a3b8;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .pc-verify__hero {
    padding: 50px 16px;
  }

  .pc-verify__title {
    font-size: 1.85rem;
  }

  .pc-verify__form {
    flex-direction: column;
  }

  .pc-btn--primary {
    width: 100%;
  }
}