* { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; }
h1 { font-size: clamp(1.875rem, 4vw, 2.25rem); }  /* text-3xl → text-4xl */
h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }   /* text-2xl → text-3xl */
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }  /* text-xl → text-2xl */
h4 { font-size: clamp(1.125rem, 2vw, 1.25rem); }  /* text-lg → text-xl */
h5 { font-size: clamp(1rem, 1.5vw, 1.125rem); }   /* text-base → text-lg */
h6 { font-size: clamp(0.875rem, 1.25vw, 1rem); }  /* text-sm → text-base */

/* Nav */
nav {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    padding: 0.25rem;
}
nav ul {
    align-items: center;
}
.avatar-circle {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: 50%;
}

/* Layout */
body { min-height: 100vh; display: flex; flex-direction: column; }
header, main { max-width: 90vw; width: 100%; margin-left: auto; margin-right: auto; padding: 2rem 1rem; }
main { flex: 1; }
main .issuer, main .certificate, main .buttons { margin-bottom: 2rem; }
pagination { display: flex; justify-content: center; margin-bottom: 2rem; }

.controls { display: flex; margin-bottom: 1rem; gap: 1rem; align-items: center; }

/* Card */
.card { width: clamp(20rem, 90vw, 50rem); }
.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;    
}
.card-body {
    display: flex;
    flex-direction: column;
}

/* Standard */
.justify-end { justify-content: flex-end; }
.mb-3 { margin-bottom: 3rem; }

/* Table */
.table-wrapper {
    overflow-x: auto;
    border: 1px solid color-mix(in oklch, var(--color-base-content) 5%, transparent);
    border-radius: var(--rounded-box, 1rem);
    background-color: var(--color-base-100);
    margin-bottom: 1rem;
}
.datetime {
    display: flex;
    align-items:center;
    gap:4px;
    white-space:nowrap;
}

/* Header */
header img { width: clamp(5rem, 7vw, 60rem); height: auto; }
header h1 { font-size: 2.25rem; font-weight: 700; margin-bottom: 0.25rem; }
header p { font-size: 0.75rem; font-weight: 700; }

/* Alert */
main div.alert { margin-bottom: 2rem; }

/* Buttons and badges */
div.buttons { display: flex; gap: 2rem; justify-content: center; }
.badge-pdf { background:#8B2500; color:#fff; }
.badge-svg { background:#3D6B35; color:#fff; }
.badge-jpg { background:#5C4A1E; color:#fff; }
.badge-zip { background:#2B4A6B; color:#fff; }

.btn:has(~ *):nth-child(1):hover, 
button[onclick*="svg"]:hover { background: #3D6B35; color: #fff; border-color: #3D6B35; }
button[onclick*="pdf"]:hover { background: #8B2500; color: #fff; border-color: #8B2500; }
button[onclick*="jpg"]:hover { background: #5C4A1E; color: #fff; border-color: #5C4A1E; }
button[onclick*="zip"]:hover { background: #2B4A6B; color: #fff; border-color: #2B4A6B; }

/* Form */
.form-inputs {
    width: clamp(20rem, 50vw, 90rem);
    margin-left: auto;
    margin-right: auto;
}
.form-inputs fieldset,
.form-inputs label,
.form-inputs input,
.form-inputs select,
.form-inputs textarea {
    width: 100%;
    box-sizing: border-box;
}
.input-ico { height: 1em; width: 1em; opacity: 0.5; }

/* Footer */
footer { padding: 1rem; text-align: center; }