/* Look and feel follows the main college website (ipdentalcollege.com, ipdc-website-next):
   navy header and footer, sand page, white cards, gold pill buttons, Fraunces headings, Inter body text.
   Colours are the website's Tailwind @theme tokens (src/app/globals.css).
   Fonts are the website's own latin-subset files, self-hosted here because the app's CSP is default-src 'self'. */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/fraunces-latin.woff2") format("woff2");
}
/* Metric-matched fallbacks (same values as the website) so text doesn't jump when the fonts arrive. */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial");
    ascent-override: 90.44%;
    descent-override: 22.52%;
    line-gap-override: 0%;
    size-adjust: 107.12%;
}
@font-face {
    font-family: "Fraunces Fallback";
    src: local("Times New Roman");
    ascent-override: 84.71%;
    descent-override: 22.09%;
    line-gap-override: 0%;
    size-adjust: 115.45%;
}

:root {
    color-scheme: light;

    --ink: #0c1a2a;
    --ink-80: #3d4855;
    --muted: #555f6a;
    --line: rgba(12, 26, 42, .10);
    --line-strong: rgba(12, 26, 42, .15);

    --navy: #06172b;          /* brand-950 */
    --brand-50: #eef5fb;
    --brand-700: #173f69;
    --brand-800: #0f2f51;

    --clinic-50: #ebfaf8;
    --clinic-100: #cdf2ee;
    --clinic-600: #0f7d75;
    --clinic-700: #0e645e;
    --clinic-800: #0f504c;

    --gold-300: #f0c35a;
    --gold-400: #e9ad33;
    --gold-500: #d4911c;

    --sand-50: #faf8f4;
    --sand-100: #f3eee5;

    --error-bg: #fef2f2;
    --error-line: #fecaca;
    --error-text: #7f1d1d;

    --sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --display: "Fraunces", "Fraunces Fallback", ui-serif, Georgia, serif;
    --mono: ui-monospace, "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--sand-50);
    color: var(--ink);
    font: 16px/1.55 var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--gold-300); color: var(--navy); }
:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }

.wrap { width: 100%; max-width: 34rem; margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */

.top {
    background-color: var(--navy);
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 18px 18px;
    color: #fff;
    padding: 14px 0 38px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.crest {
    height: 46px;
    width: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.college {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.12rem;
    letter-spacing: -.01em;
}
.product {
    margin-top: 5px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-300);
}
@media (min-width: 36rem) {
    .crest { height: 52px; }
    .college { font-size: 1.25rem; }
}

/* ---------- Card ---------- */

main { flex: 1 0 auto; margin-top: -24px; }

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    box-shadow: 0 12px 32px -14px rgba(6, 23, 43, .22);
    padding: 24px 18px 26px;
    overflow-wrap: anywhere; /* long email addresses must not push the card wider than a phone */
}
@media (min-width: 36rem) { .card { padding: 32px 32px 34px; } }

/* ---------- Type ---------- */

h1, h2 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--ink);
    text-wrap: balance;
    /* Website house style: every word of a heading is capitalised. */
    text-transform: capitalize;
}
h1 { font-size: 1.65rem; margin: 0 0 10px; }
h2 { font-size: 1.28rem; margin: 30px 0 10px; }
@media (min-width: 36rem) { h1 { font-size: 1.9rem; } }

p { text-wrap: pretty; }
.lead { margin: 0 0 12px; color: var(--ink-80); font-size: 1.03rem; }
.small { color: var(--muted); font-size: .9rem; }

.ssid {
    font-family: var(--mono);
    font-size: .85em;
    letter-spacing: 0;
    text-transform: none;
    background: var(--brand-50);
    color: var(--brand-800);
    padding: .05em .4em;
    border-radius: .4em;
}

a {
    color: var(--clinic-700);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}
a:hover { color: var(--clinic-800); }

/* ---------- Forms ---------- */

label {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    margin: 18px 0 6px;
}
input {
    display: block;
    width: 100%;
    font: inherit;
    font-size: 16px; /* 16px stops iOS zooming into the field */
    padding: 12px 16px;
    border: 1px solid var(--line-strong);
    border-radius: .75rem;
    background: var(--sand-50);
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
input::placeholder { color: rgba(12, 26, 42, .38); }
input:focus {
    outline: none;
    border-color: var(--clinic-600);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(15, 125, 117, .15);
}

button {
    display: block;
    margin-top: 20px;
    width: 100%;
    min-height: 50px;
    font: inherit;
    font-weight: 600;
    padding: 13px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--gold-400);
    color: var(--navy);
    box-shadow: 0 10px 18px -8px rgba(212, 145, 28, .45);
    cursor: pointer;
    transition: background-color .2s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
button:hover { background: var(--gold-300); }
button:active { transform: scale(.98); }

/* ---------- Messages ---------- */

.error, .note {
    padding: 12px 14px;
    border-radius: 1rem;
    border: 1px solid;
    font-size: .95rem;
}
.error { background: var(--error-bg); border-color: var(--error-line); color: var(--error-text); }
.note { background: var(--clinic-50); border-color: var(--clinic-100); color: var(--clinic-800); }

/* ---------- Device instructions (expandable) ---------- */

details {
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #fff;
    margin: 10px 0;
    padding: 0 16px;
    transition: border-color .2s;
}
details[open] { border-color: var(--clinic-100); padding-bottom: 14px; }

summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    margin: 0 -16px;
    padding: 12px 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 1rem;
    -webkit-tap-highlight-color: transparent;
}
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--clinic-700); }
summary::after {
    content: "";
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    background-color: transparent;
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-size: 12px 2px, 2px 12px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .3s, background-color .3s, border-color .3s;
}
details[open] > summary::after {
    transform: rotate(45deg);
    background-color: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--navy);
}
details[open] > summary { border-bottom: 1px solid var(--line); border-radius: 1rem 1rem 0 0; margin-bottom: 4px; }
details p { margin: 10px 0 2px; }

/* Numbered steps with the number in a small brand-coloured disc. */
ol {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 12px 0 4px;
}
ol > li {
    counter-increment: step;
    position: relative;
    padding-left: 38px;
    margin: 10px 0;
    min-height: 26px;
}
ol > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: .8rem;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

/* ---------- Footer ---------- */

.foot {
    margin-top: 32px;
    background: var(--navy);
    color: rgba(255, 255, 255, .7);
    font-size: .9rem;
    padding: 22px 0 30px;
}
.foot p { margin: 6px 0; }
.foot strong { color: #fff; }
.foot a { color: var(--gold-300); }
.foot a:hover { color: #fff; }
.foot .foot-meta {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 16px;
    padding-top: 14px;
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}