/* Skills & Techniques Driving School theme — development v0.2
   Standalone appearance layer; original styles and PHP logic remain intact.
   No third-party assets, trackers or web fonts. */
:root {
  --ink: #132e42;
  --muted: #5f7280;
  --primary: #087e84;
  --accent: #e7b95b;
  --soft: #f2f8f8;
  --line: #dde8eb;
  --white: #ffffff;
}
html { scroll-padding-top: 28px; }
body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 84% 12%, rgba(210,233,235,.38), transparent 37%),
    linear-gradient(180deg,#fff 0%,#f8fbfb 40%,#fff 100%);
}
h1, h2 { letter-spacing: -.045em; }
a:hover { color: #06747d; }
.site-header { background: rgba(255,255,255,.96); box-shadow: 0 1px 0 rgba(10,50,63,.03); }
.nav { min-height: 88px; }
.brand { gap: 13px; color: #132f43; min-width: 0; }
.brand:hover { color: #132f43; }
.brand-symbol {
  background: #fff;
  border: 2px solid #e1e7e8;
  border-radius: 11px;
  box-shadow: 0 3px 0 #e5ecee;
  color: #d31c30;
  flex: none;
  font: 900 1.85rem/1 system-ui, sans-serif;
  width: 47px;
  height: 47px;
  letter-spacing: -.06em;
  padding-right: 3px;
}
.brand-wordmark { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-wordmark strong { color: #173b49; font-size: 1.02rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.brand-wordmark small { font-size: .66rem; font-weight: 700; color: #57818b; letter-spacing: .095em; text-transform: uppercase; }
.nav nav { gap: 31px; font-size: .83rem; }
.nav nav a[aria-current="page"] { border-bottom-color: #d6a44e; }
.hero {
  min-height: 480px;
  margin: 54px 0 78px;
  grid-template-columns: minmax(0,1.19fr) minmax(330px,.81fr);
  gap: 54px;
  align-items: stretch;
}
.hero-copy { padding: 27px 0 0; }
.hero h1 {
  font-size: clamp(3.2rem,5.45vw,5.25rem);
  max-width: 690px;
  color: #153246;
  line-height: 1.07;
}
.hero h1 em { display: inline; font-weight: 400; color: #148c90; }
.hero p {
  font-size: 1.02rem;
  max-width: 520px;
  color: #59717d;
  margin: 23px 0 27px;
  line-height: 1.84;
}
.eyebrow, .kicker { color: #137d84; letter-spacing: .155em; }
.eyebrow { margin-bottom: 22px; }
.eyebrow-dot {
  background: #e9bc66;
  border-radius: 50%;
  width: 9px; height: 9px;
  box-shadow: 0 0 0 5px #f8efdc;
}
.button { border-radius: 10px; font-weight: 700; }
.button.primary { background: #0a7b83; box-shadow: 0 5px 10px rgba(11,93,102,.11); }
.button.primary:hover { background: #0b626c; color: #fff; }
.button.secondary { background: #f4f8f8; color: #184e58; }
.hero-note {
  color: #6a808a;
  margin-top: 21px;
  font-size: .79rem;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 10px;
}
.note-line { width: 22px; height: 2px; background: #e4b562; }
.hero-art {
  position: relative;
  min-height: 460px;
  padding: 0;
  border-radius: 24px;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(151,225,222,.29), transparent 37%),
    linear-gradient(140deg,#1f8c92 0%,#12636d 53%,#10394c 100%);
  box-shadow: 0 22px 48px rgba(18,81,94,.14);
}
.hero-art::before,.hero-art::after { display: none; }
.sky-orbit { position: absolute; z-index: -1; border: 1px solid rgba(244,255,255,.19); border-radius: 50%; pointer-events: none; }
.sky-orbit-outer { width: 530px; height: 530px; top: -280px; right: -200px; }
.sky-orbit-inner { width: 365px; height: 365px; top: -190px; right: -106px; }
.hero-topline {
  position: absolute;
  z-index: 4;
  left: 30px;
  right: 29px;
  top: 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.hero-overline { color: rgba(236,251,251,.91); letter-spacing: .17em; font-size: .69rem; font-weight: 800; }
.corner-arrow { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; font-size: 1.02rem; color: white; }
.art-road {
  position: absolute;
  right: -106px;
  top: 88px;
  width: 268px;
  height: 560px;
  transform: rotate(34deg);
  border-inline: 8px solid rgba(248,252,250,.65);
  border-radius: 130px 130px 0 0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.06),transparent 26%,transparent 74%,rgba(255,255,255,.03)),
    #153b4a;
  box-shadow: -22px 2px 1px rgba(32,114,120,.65), -38px 2px 0 rgba(232,248,246,.12);
  z-index: 0;
}
.art-road-centre {
  display: block; position: absolute; top: 0; bottom: 0; left: 50%;
  border-left: 5px dashed #e6c16d;
  transform: translateX(-50%);
}
.hero-learner { position: absolute; z-index: 3; left: 35px; top: 126px; display: flex; align-items: flex-start; flex-direction: column; }
.learner-plate {
  display: grid; place-items: center;
  height: 105px; width: 105px;
  background: #fff;
  border: 6px solid #f6f7f4;
  border-radius: 13px;
  color: #d42032;
  box-shadow: 0 13px 25px rgba(0,24,45,.19);
  font: 900 5.1rem/1 system-ui, sans-serif;
  transform: rotate(-7deg);
  padding: 0 8px 5px 0;
}
.learner-title {
  color: white;
  font: italic 2.05rem/1.22 Georgia,serif;
  margin-top: 23px;
  max-width: 290px;
  text-shadow: 0 2px 15px rgba(0,27,39,.24);
}
.hero-art-bottom {
  position: absolute; z-index: 4;
  left: 30px; bottom: 28px; right: 29px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 3px; padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.32);
}
.hero-art-bottom strong { color: white; font-size: .98rem; font-weight: 700; }
.hero-art-bottom span { color: #a7dcdf; font-size: .62rem; letter-spacing: .16em; font-weight: 800; }
.content-grid { grid-template-columns: minmax(0,1.45fr) minmax(320px,.91fr); gap: 50px; }
.section-heading { margin-bottom: 28px; }
.section-heading h2 { color: #1a3b50; }
.section-description { color: #647986; margin-top: 13px; font-size: .85rem; }
.count { background: #e3f1f1; color: #147a7d; padding: 6px 12px; }
.entry { border-top-color: #dce8ea; padding: 28px 0 30px; }
.avatar { background: #e1f0f0; color: #087e84; border-radius: 12px; font-weight: 700; }
.entry-meta h3 { color: #173649; }
.entry-meta p { color: #68808b; }
.entry-body { color: #4c6471; }
.owner-reply { border-left-color: #46a4a7; background: #eaf5f4; }
.owner-reply strong { color: #0b6f78; }
.form-panel {
  background: #fff;
  border: 1px solid #dce9ea;
  box-shadow: 0 18px 52px rgba(16,62,80,.075);
  border-radius: 19px;
  padding: 34px;
  position: relative;
}
.form-panel::before {
  content: "";
  position: absolute;
  right: 33px; top: 30px;
  width: 30px; height: 30px;
  border: 4px solid #e4f1f0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px white inset;
}
.form-panel h2 { font-size: 2.18rem; max-width: 280px; color: #193b50; }
.form-panel > p:not(.kicker) { color: #617c86; line-height: 1.74; }
form label:not(.checkbox-label) { color: #2b4956; }
input:not([type="checkbox"]), textarea { border-color: #d6e4e6; background: #fbfdfd; }
input:not([type="checkbox"]):hover, textarea:hover { border-color: #93babe; }
.checkbox-label { color: #45646d; }
.checkbox-label input { accent-color: #147f85; }
.fineprint { color: #768992; }
.empty-state { background: #f5fafa; border-color: #cadfe2; }
.admin-head h1 { color: #193b50; }
.admin-toolbar { background: #eaf4f3; }
.login-card { background: #f8fbfb; }
.footer {
  background: #f0f6f7;
  border-top: 1px solid #dce7e9;
  color: #517078;
}
.footer-inner { min-height: 90px; gap: 30px; }
.footer-signature { max-width: 65%; }
.footer-year { white-space: nowrap; margin-left: .45rem; }
.hosting-credit {
  color: #1b5963;
  white-space: nowrap;
  text-align: right;
  font-weight: 700;
  letter-spacing: .005em;
  margin-left: auto;
}
.hosting-credit:hover { color: #0c8b91; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1020px) {
  .hero { gap: 24px; grid-template-columns: minmax(0,1fr) 330px; }
  .hero h1 { font-size: clamp(3.05rem,5vw,4.4rem); }
  .content-grid { gap: 30px; }
  .hero-learner { left: 23px; }
  .learner-title { font-size: 1.8rem; }
}
@media (max-width: 920px) {
  .hero { grid-template-columns: minmax(0,1fr) minmax(250px,.7fr); }
  .hero-art { min-height: 405px; }
  .content-grid { grid-template-columns: minmax(0,1fr); }
  .form-panel { max-width: 680px; }
}
@media (max-width: 690px) {
  .nav { padding-top: 14px; padding-bottom: 14px; }
  .brand-wordmark strong { font-size: .94rem; }
  .nav nav { gap: 15px; font-size: .76rem; }
  .hero { display: grid; grid-template-columns: 1fr; gap: 25px; margin: 36px 0 52px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(2.75rem,9vw,3.8rem); max-width: 530px; }
  .hero p { font-size: .96rem; line-height: 1.75; }
  .hero-art { display: block; min-height: 310px; border-radius: 18px; }
  .hero-topline { top: 19px; left: 22px; right: 22px; }
  .hero-learner { top: 73px; left: 24px; }
  .learner-plate { width: 73px; height: 73px; font-size: 3.6rem; padding-right: 7px; border-width: 4px; }
  .learner-title { margin-top: 17px; font-size: 1.47rem; }
  .art-road { height: 400px; width: 190px; right: -60px; top: 50px; border-width: 6px; }
  .hero-art-bottom { bottom: 18px; left: 24px; right: 22px; padding-top: 10px; }
  .hero-art-bottom strong { font-size: .86rem; }
  .hero-art-bottom span { font-size: .55rem; }
  .section-heading { align-items: flex-start; }
  .section-heading h2 { font-size: 2rem; }
  .form-panel { padding: 25px; }
  .form-panel h2 { font-size: 2rem; }
  .footer-inner { flex-direction: column; gap: 9px; align-items: stretch; padding: 24px 0; }
  .footer-signature { max-width: 100%; }
  .hosting-credit { width: 100%; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}
/* Approval controls — only visible to signed-in administrators */
.admin-settings {
  background: #f4fafa;
  border: 1px solid #dce8eb;
  padding: 26px;
  border-radius: 17px;
  max-width: 740px;
  margin: 0 0 25px;
}
.admin-settings h2 { margin: 7px 0 12px; font-size: 2rem; color: #193b50; }
.admin-settings > p:not(.kicker) { font-size: .9rem; color: #607782; margin: 0 0 20px; }
.approval-options { margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
.approval-options legend { margin: 0 0 8px; font-size: .78rem; color: #325564; font-weight: 800; }
.approval-option {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: white;
  border: 1px solid #d7e5e8;
  border-radius: 11px;
  padding: 15px 17px;
  margin: 10px 0;
  cursor: pointer;
}
.approval-option:has(input:checked) { border-color: #0c8288; background: #ecf8f7; }
.admin-settings .approval-option input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 3px 0 0;
  padding: 0;
  accent-color: #0b7d84;
  background: transparent;
}
.approval-option span { display: flex; flex-direction: column; gap: 4px; }
.approval-option strong { font-size: .91rem; color: #213e4c; }
.approval-option small { font-size: .8rem; font-weight: 400; line-height: 1.45; color: #66808a; }
@media(max-width: 690px) {
  .admin-settings { padding: 20px; }
  .admin-settings h2 { font-size: 1.75rem; }
}

/* Live administrator password management */
.password-panel { margin-top: 10px; }
.password-fields { max-width: 540px; display: grid; gap: 14px; margin-bottom: 9px; }
.password-fields label { display: block; }
.password-fields input { width: 100%; margin-top: 6px; }
.password-hint { margin: 0 0 18px; color: #66808a; font-size: .81rem; }

/* Secure first-run administrator setup */
.setup-card { max-width: 560px; padding: 32px; }
.setup-card h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); margin: 9px 0 13px; }
.setup-card > p { margin: 0 0 16px; font-size: .9rem; color: #5a7580; }
.setup-card .setup-warning { border-left: 3px solid #c68934; background: #fff6e5; padding: 12px; color: #654d2e; border-radius: 0 9px 9px 0; }
.setup-card .setup-hint { font-weight: 700; }
.setup-card form label { margin-bottom: 7px; }
.setup-card form input { margin-bottom: 15px; }
.setup-card .password-hint { font-size: .78rem; color: #66808a; margin: 1px 0 16px; }
@media (max-width: 690px) { .setup-card { padding: 22px; } }