/* DigitFMS Academy — portal components (needs brand.css). */

/* Page heading */
.dfa-pagehead { margin: 0 0 6px; }
.dfa-pagehead .dfa-h1 { margin-top: 6px; }
.dfa-pagehead .dfa-h1::after { content: ""; display: block; width: 44px; height: 4px; background: var(--dfa-red); margin-top: 14px; }

/* Sign in */
.dfa-auth { display: grid; grid-template-columns: minmax(280px, 42%) 1fr; min-height: 100vh; background: var(--dfa-white); }
.dfa-auth__brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background: var(--dfa-black); color: var(--dfa-white); padding: 48px 44px 32px; border-right: 6px solid var(--dfa-red); }
.dfa-auth__brand::after { content: ""; position: absolute; right: -90px; bottom: -70px; width: 420px; height: 420px; background: url("brand/d-icon-400.png") center / contain no-repeat; opacity: .08; pointer-events: none; }
.dfa-auth__brand-inner { position: relative; z-index: 1; margin-top: 18vh; }
.dfa-auth__headline { color: var(--dfa-white); font-size: clamp(38px, 5vw, 64px); margin-top: 10px; }
.dfa-auth__lead { max-width: 380px; margin: 18px 0 0; color: #CFCFCF; font-size: 17px; line-height: 1.5; }
.dfa-auth__entity { position: relative; z-index: 1; margin: 0; color: var(--dfa-grey); font-size: 13px; }
.dfa-auth__panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--dfa-grey-bg); }
.dfa-auth__box { width: 100%; max-width: 420px; background: var(--dfa-white); border: 1px solid var(--dfa-grey-line); border-top: 4px solid var(--dfa-red); padding: 34px 32px 28px; box-shadow: var(--dfa-shadow); }
.dfa-auth__logo { margin: 0 0 26px; }
.dfa-auth__title { font-size: 34px; margin: 0 0 20px; }
.dfa-auth__intro { margin: -8px 0 20px; color: var(--dfa-grey-text); }
.dfa-auth__form { margin: 0; }
.dfa-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: -2px 0 20px; font-size: 14px; }
.dfa-auth__row a { color: var(--dfa-grey-text); }
.dfa-auth__row a:hover { color: var(--dfa-red); }
.dfa-auth__or { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--dfa-grey); font-family: var(--dfa-font-head); font-weight: 700; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; }
.dfa-auth__or::before, .dfa-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--dfa-grey-line); }
.dfa-auth__help { margin: 20px 0 0; font-size: 13px; color: var(--dfa-grey-text); }
.dfa-pw { position: relative; }
.dfa-pw input { padding-right: 70px !important; }
.dfa-pw__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 34px; padding: 4px 10px; border: 0; background: none; color: var(--dfa-grey-text); font-family: var(--dfa-font-head); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.dfa-pw__toggle:hover { color: var(--dfa-red); }

/* Lock-up (logo + product tag) */
.dfa-lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.dfa-lockup__logo { display: block; height: 68px; width: auto; }
.dfa-lockup--large .dfa-lockup__logo { height: 84px; }
.dfa-lockup__icon { display: none; height: 40px; width: auto; }
.dfa-lockup__tag { display: inline-block; padding: 5px 10px 4px; background: var(--dfa-red); color: var(--dfa-white); font-family: var(--dfa-font-head); font-weight: 900; font-size: 15px; letter-spacing: .02em; line-height: 1; text-transform: uppercase; white-space: nowrap; }

/* Profile */
.dfa-profile__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.dfa-profile .dfa-h2 { margin-bottom: 18px; }
.dfa-profile__dl { margin-bottom: 8px; }
.dfa-profile__form { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--dfa-grey-line); }
.dfa-card > .dfa-profile__form:first-of-type { }
.dfa-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.dfa-table-wrap { overflow-x: auto; }

/* Certificates */
.dfa-cert-card { display: flex; flex-direction: column; background: var(--dfa-white); border: 1px solid var(--dfa-grey-line); box-shadow: var(--dfa-shadow); }
.dfa-cert-card__top { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: var(--dfa-black); color: var(--dfa-white); border-bottom: 4px solid var(--dfa-red); }
.dfa-cert-card__top .dfa-ico { width: 26px; height: 26px; color: var(--dfa-red); }
.dfa-cert-card__body { padding: 16px 18px 4px; flex: 1; }
.dfa-cert-card__dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0; font-size: 14px; }
.dfa-cert-card__dl dt { color: var(--dfa-grey-text); }
.dfa-cert-card__dl dd { margin: 0; }
.dfa-cert-card code, .dfa-verify code { font-size: 13px; background: var(--dfa-grey-bg); padding: 1px 6px; }
.dfa-verify__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; max-width: 640px; }
.dfa-verify__form .dfa-field { flex: 1 1 260px; margin: 0; }
.dfa-verify__result { max-width: 640px; }
.dfa-verify__result .dfa-h2 { margin-bottom: 16px; }
.dfa-verify__result.is-valid, .dfa-verify__result.is-expiring { border-top-color: var(--dfa-ok); }
.dfa-verify__result.is-valid .dfa-h2, .dfa-verify__result.is-expiring .dfa-h2 { color: var(--dfa-ok); }
.dfa-verify__result.is-expired .dfa-h2, .dfa-verify__result.is-revoked .dfa-h2 { color: var(--dfa-red); }

/* Course outline (lesson sidebar) */
.dfa-outline { font-family: var(--dfa-font); }
.dfa-outline__course { margin: 6px 0 12px; font-family: var(--dfa-font-head); font-weight: 800; font-size: 19px; line-height: 1.2; text-transform: uppercase; }
.dfa-outline__course a { color: var(--dfa-ink); text-decoration: none; }
.dfa-outline__course a:hover { color: var(--dfa-red); }
.dfa-outline__section { margin: 22px 0 6px; font-family: var(--dfa-font-head); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--dfa-grey-text); }
.dfa-outline__list { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: dfa-l; }
.dfa-outline__item { counter-increment: dfa-l; }
.dfa-outline__item a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 10px 10px 8px; border-left: 3px solid transparent; color: var(--dfa-ink); text-decoration: none; font-size: 15px; line-height: 1.35; }
.dfa-outline__item a:hover { background: var(--dfa-grey-bg); }
.dfa-outline__item.is-here a { border-left-color: var(--dfa-red); background: var(--dfa-red-tint); font-weight: 700; }
.dfa-outline__mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #CFCFCF; font-family: var(--dfa-font-head); font-weight: 700; font-size: 12px; color: var(--dfa-grey-text); }
.dfa-outline__mark:empty::before { content: counter(dfa-l); }
.dfa-outline__item.is-done .dfa-outline__mark { background: var(--dfa-black); border-color: var(--dfa-black); color: var(--dfa-white); }
.dfa-outline__item.is-done .dfa-outline__mark .dfa-ico { width: 14px; height: 14px; stroke-width: 3; }
.dfa-outline__item.is-here .dfa-outline__mark { border-color: var(--dfa-red); color: var(--dfa-red); }
.dfa-outline__tag { font-family: var(--dfa-font-head); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dfa-red); border: 1px solid var(--dfa-red); padding: 2px 5px; margin-top: 2px; }

/* Media in lessons */
.dfa-video { position: relative; margin: 0 0 1.5em; }
.dfa-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--dfa-black); }
.dfa-video figcaption, .dfa-audio figcaption { margin-top: 8px; font-size: 14px; color: var(--dfa-grey-text); }
.dfa-audio { margin: 1.4em 0; padding: 14px 16px; background: var(--dfa-grey-bg); border-left: 4px solid var(--dfa-red); }
.dfa-audio figcaption { margin: 0 0 8px; font-family: var(--dfa-font-head); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--dfa-ink); }
.dfa-audio audio { width: 100%; }
.dfa-image { margin: 1.4em 0; }
.dfa-image img { display: block; max-width: 100%; height: auto; border: 1px solid var(--dfa-grey-line); }
.dfa-filecard { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 1.2em 0; padding: 12px 14px; border: 1px solid var(--dfa-grey-line); border-left: 4px solid var(--dfa-red); background: var(--dfa-white); color: var(--dfa-ink) !important; text-decoration: none !important; }
.dfa-filecard:hover { background: var(--dfa-grey-bg); }
.dfa-filecard__ext { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 6px; background: var(--dfa-black); color: var(--dfa-white); font-family: var(--dfa-font-head); font-weight: 900; font-size: 13px; letter-spacing: .06em; }
.dfa-filecard__name { font-weight: 700; line-height: 1.3; }
.dfa-filecard__name small { display: block; font-weight: 400; font-size: 13px; color: var(--dfa-grey-text); margin-top: 2px; }
.dfa-filecard__go { font-family: var(--dfa-font-head); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--dfa-red); }
.dfa-datasaver { margin-top: 8px; padding: 6px 12px; border: 1px solid var(--dfa-grey); border-radius: 4px; background: var(--dfa-white); color: var(--dfa-ink); font: 600 13px var(--dfa-font-head); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.dfa-datasaver.is-on { background: var(--dfa-red); border-color: var(--dfa-red); color: var(--dfa-white); }
.dfa-locked { padding: 16px; border: 1px dashed var(--dfa-grey); margin: 0 0 1.5em; color: var(--dfa-grey-text); }
.dfa-docs { margin: 2em 0 0; padding-top: 1em; border-top: 1px solid var(--dfa-grey-line); }
.dfa-docs h3 { font-family: var(--dfa-font-head); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 18px; }
.dfa-docs ul { margin: 0; padding-left: 1.2em; }
.dfa-docs li { margin: .4em 0; }

/* Feedback */
.dfa-feedback { margin: 2em 0; }
.dfa-feedback .dfa-h3 { margin: 6px 0 14px; }
.dfa-rating { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin: 0 0 16px; padding: 0; border: 0; }
.dfa-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dfa-rating label { cursor: pointer; color: #CFCFCF; padding: 2px; }
.dfa-rating label .dfa-ico { width: 34px; height: 34px; }
.dfa-rating label:hover, .dfa-rating label:hover ~ label, .dfa-rating input:checked ~ label { color: var(--dfa-red); }
.dfa-rating label:hover .dfa-ico, .dfa-rating label:hover ~ label .dfa-ico, .dfa-rating input:checked ~ label .dfa-ico { fill: var(--dfa-red); }
.dfa-rating input:focus-visible + label { outline: 3px solid rgba(227, 34, 38, .35); }
.dfa-feedback__stars { display: flex; gap: 2px; color: #CFCFCF; margin: 0 0 10px; }
.dfa-feedback__stars .is-on { color: var(--dfa-red); }
.dfa-feedback__stars .is-on .dfa-ico { fill: var(--dfa-red); }
.dfa-feedback__comment { margin: 0 0 10px; padding: 10px 14px; border-left: 3px solid var(--dfa-grey); background: var(--dfa-grey-bg); }

/* Franchise team */
.dfa-team .dfa-table-wrap { overflow-x: auto; }
.dfa-team .dfa-button { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; background: var(--dfa-red); color: #fff; border-radius: 4px; text-decoration: none; font-family: var(--dfa-font-head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
.dfa-team h3 { font-family: var(--dfa-font-head); font-weight: 900; text-transform: uppercase; font-size: 26px; }
.dfa-team .dfa-table { width: 100%; border-collapse: collapse; background: #fff; }
.dfa-team .dfa-table th, .dfa-team .dfa-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--dfa-grey-line); }
.dfa-team .dfa-table th { background: var(--dfa-black); color: #fff; font-family: var(--dfa-font-head); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.dfa-team-filter select { min-height: 42px; }

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }

@media (max-width: 900px) {
	.dfa-auth { grid-template-columns: 1fr; }
	.dfa-auth__brand { display: none; }
	.dfa-auth__panel { align-items: flex-start; padding: 24px 16px 40px; min-height: 100vh; }
	.dfa-auth__box { padding: 26px 20px 22px; }
	.dfa-profile__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.dfa-lockup__logo { height: 68px; }
	.dfa-row2 { grid-template-columns: 1fr; }
	.dfa-team .dfa-table thead { display: none; }
	.dfa-team .dfa-table tr { display: block; border: 1px solid var(--dfa-grey-line); margin-bottom: 10px; }
	.dfa-team .dfa-table td { display: flex; justify-content: space-between; gap: 12px; }
	.dfa-team .dfa-table td::before { content: attr(data-label); font-weight: 700; }
}
