/* =========================================================
   URBAN TUTOR SITE
   GLOBAL HEADER
   ========================================================= */

:root {

  --header-bg: #050505;

  --header-text: #ffffff;

  --header-muted: #999999;

  /* Site accent - brand wordmark, focus rings */
  --header-green: #16a34a;

  /* Secondary accent - the circular login button */
  --header-blue: #2563eb;

  --header-border:
    rgba(255, 255, 255, 0.08);

}


/* =========================================================
   HEADER
   ========================================================= */

/* The header looks the same on every page: its own font (the device's - only the homepage loads the
   Inter web font, which made the name thinner there) and its own line height (a page's own made it taller) */
.site-header {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: normal;


  width: 100%;

  background:
    var(--header-bg);

  color:
    var(--header-text);

  border-bottom:
    1px solid
    var(--header-border);

  position: relative;

  z-index: 1000;

}


/* =========================================================
   HEADER INNER
   ========================================================= */

/* One header on every page, placed by the SCREEN's width: the Home page and
   Admin Panel are drawn 1200px wide and scaled to fit, other pages use the
   real width - 93.334% (= 1120 of 1200) puts the logo and the Login button
   at the same spot on all of them. (".site-header" so no page CSS overrides it.) */
.site-header .header-inner {

  width: min(
    1440px,
    93.334%
  );

  min-height: 76px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: relative;

}


/* =========================================================
   BRAND
   ========================================================= */

.site-logo {

  display: inline-flex;

  align-items: center;

  font-size: 24px;

  font-weight: 850;

  line-height: 1;

  letter-spacing: -0.8px;

  text-decoration: none;

  white-space: nowrap;

  transition:
    transform 0.2s ease;

}


/* The logo before the name (the Infinity Learning Path mark, a transparent PNG) - as tall as the
   profile circle on the right; the silver one on the dark header, the black one on a light header */

.site-logo-mark {

  width: auto;

  height: 46px;

  flex: none;

  margin-right: 10px;

  /* the ball and the cap stand above the loop: lift the picture by half their height so the
     name sits level with the middle of the infinity loop, not of the whole picture */
  margin-top: -9px;

  object-fit: contain;

  display: block;

}

.site-logo-mark.is-light { display: none; }

html[data-theme="light"] .site-logo-mark.is-dark { display: none; }

html[data-theme="light"] .site-logo-mark.is-light { display: block; }


/* Urban */

.brand-urban {

  color: #ffffff;

}


/* TutorSite */

.brand-tutorsite {

  color: var(--header-green);

  margin-left: 0.28em;   /* "Urban Tutor Site" - a space before Tutor Site */
}


/* Brand hover */

.site-logo:hover {

  transform:
    translateY(-1px);

}


/* =========================================================
   CIRCULAR LOGIN BUTTON
   ========================================================= */

.header-login {

  position: relative;

  width: 46px;

  height: 46px;

  flex: 0 0 46px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:
    #101010;

  border:
    1px solid
    rgba(37, 99, 235, 0.45);

  color:
    var(--header-blue);

  text-decoration: none;

  box-shadow:
    0 5px 18px
    rgba(0, 0, 0, 0.25);

  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;

}


/* =========================================================
   LOGIN ICON
   ========================================================= */

.header-login-icon {

  width: 22px;

  height: 22px;

  display: block;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

}


/* =========================================================
   LOGIN HOVER
   ========================================================= */

.header-login:hover {

  color:
    #050505;

  background:
    var(--header-blue);

  border-color:
    var(--header-blue);

  transform:
    translateY(-2px);

  box-shadow:
    0 8px 25px
    rgba(37, 99, 235, 0.18);

}


/* =========================================================
   LOGIN ACTIVE
   ========================================================= */

.header-login:active {

  transform:
    translateY(0);

}


/* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

.header-login:focus-visible,
.site-logo:focus-visible {

  outline:
    2px solid
    var(--header-green);

  outline-offset:
    4px;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 699px) {

  .site-header .header-inner {

    width:
      calc(100% - 28px);

    min-height:
      68px;

  }


  .site-logo {

    font-size:
      20px;

    letter-spacing:
      -0.6px;

  }


  .site-logo-mark {

    height:
      42px;

    margin-right:
      8px;

    margin-top:
      -8px;

  }


  .header-login {

    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;

  }


  .header-login-icon {

    width:
      20px;

    height:
      20px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .site-logo,
  .header-login {

    transition:
      none;

  }

}



/* =========================================================
   NEW: "LOGIN" INSIDE THE ROUND BUTTON WHILE NOBODY IS LOGGED IN
   (once logged in it shows the initials / photo instead)
   ========================================================= */

.header-login-label { display: none; }

.header-login:not(.has-initials):not(.header-login-static) .header-login-icon { display: none; }

/* a solid blue circle with white "Login" */
.header-login:not(.has-initials):not(.header-login-static) {
  background: var(--header-blue);
  border-color: var(--header-blue);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

.header-login:not(.has-initials):not(.header-login-static):hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
}

.header-login:not(.has-initials):not(.header-login-static) .header-login-label {
  display: inline;
  font-size: 11.5px;
  font-weight: 900;
  /* a little thicker than the font's own boldest (the page does not load Inter's heaviest weights) */
  -webkit-text-stroke: 0.45px currentColor;
  letter-spacing: 0.03em;
  line-height: 1;
}

@media (max-width: 699px) {
  .header-login:not(.has-initials):not(.header-login-static) .header-login-label { font-size: 10.5px; }
}


/* =========================================================
   NEW: LOGGED-IN USER INITIALS
   ========================================================= */

.header-initials {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--header-blue);
}

.header-login.has-initials {
  border-color: var(--header-blue);
}

.header-login.has-initials:hover .header-initials {
  color: #050505;
}


/* Admin Panel: "AD" badge - a label, not a button */
.header-login.header-login-static,
.header-login.header-login-static:hover {
  cursor: default;
  transform: none;
  box-shadow: none;
  background: #101010;
  border-color: var(--header-blue);
}

.header-login.header-login-static:hover .header-initials {
  color: var(--header-blue);
}


/* =========================================================
   NEW: SUBSCRIPTION-STATUS VERIFIED BADGE
   ========================================================= */

.header-sub-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 17px;
  height: 17px;
  color: #6f6f6f;
}

.header-sub-badge svg {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}

.header-sub-badge svg path { fill: currentColor; }
/* the tick is see-through in the seal; black shows through it */
.header-sub-badge svg path.badge-tick { fill: #000000; }

.header-sub-badge[data-tone="paid"]    { color: #16a34a; }
.header-sub-badge[data-tone="partial"] { color: #ffa15c; }
.header-sub-badge[data-tone="unpaid"]  { color: #ff6868; }


/* =========================================================
   NEW: LOGIN MENU  (Student / Tutor) - a small card under the profile button
   ========================================================= */

.login-menu {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  width: 190px;
  padding: 7px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)), #0c0c0c;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  z-index: 1001;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.login-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* the small pointer up to the round button (as on the Admin Panel's tutor status pop-up) */
.login-menu-arrow {
  position: absolute;
  top: -8px;
  right: 16px;
  width: 14px;
  height: 14px;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 0;
  border-right: 0;
  border-radius: 3px 0 0 0;
  transform: rotate(45deg);
}

@media (max-width: 699px) {
  .login-menu-arrow { right: 14px; }
}

.login-option {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px 8px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.login-option + .login-option { margin-top: 4px; }

.login-option-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #ffffff;
  transition: transform 0.18s ease;
}

.login-option-student .login-option-icon {
  background: linear-gradient(145deg, #22c55e, #15803d);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35);
}

.login-option-tutor .login-option-icon {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.login-option-icon svg,
.login-option-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-option-icon svg { width: 18px; height: 18px; }

.login-option-title {
  flex: 1 1 auto;
  font-size: 14.5px;
  font-weight: 700;
}

.login-option-arrow {
  width: 16px;
  height: 16px;
  color: var(--header-muted);
  opacity: 0.6;
  transition: transform 0.18s ease, opacity 0.18s ease, color 0.18s ease;
}

/* highlight: the option under the mouse (real mouse only, so a tap never leaves one looking chosen),
   the one reached by keyboard, and the one being tapped right now */
.login-option:focus { outline: none; }

.login-option:focus-visible,
.login-option:active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.login-option-student:focus-visible .login-option-arrow,
.login-option-student:active .login-option-arrow { color: #22c55e; opacity: 1; transform: translateX(2px); }

.login-option-tutor:focus-visible .login-option-arrow,
.login-option-tutor:active .login-option-arrow { color: #60a5fa; opacity: 1; transform: translateX(2px); }

@media (hover: hover) {
  .login-option:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .login-option:hover .login-option-icon { transform: scale(1.06); }
  .login-option-student:hover .login-option-arrow { color: #22c55e; opacity: 1; transform: translateX(2px); }
  .login-option-tutor:hover .login-option-arrow { color: #60a5fa; opacity: 1; transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .login-menu, .login-option, .login-option-icon, .login-option-arrow { transition: none; }
}

/* the logged-in circle (initials / photo): no border - a soft blue fill instead */
.header-login.has-initials,
.header-login.header-login-static,
.header-login.header-login-static:hover {
  border-color: transparent;
  background: rgba(37, 99, 235, 0.16);
}


/* =========================================================
   PAGES  (Find a Tutor · Tuition Jobs · Where We Are · About Us)
   and the DARK / LIGHT button - not on the Admin Panel
   ========================================================= */

.site-header .header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto 0 40px;
}

.header-nav a {
  position: relative;
  padding: 9px 14px;
  border-radius: 999px;
  color: #d4d4d8;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}

.header-nav a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); }

/* the page this is: white, a green line under it at the header's bottom edge */
.header-nav a[aria-current="page"] { color: #ffffff; }
.header-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -18px;
  height: 2px;
  border-radius: 2px;
  background: #22c55e;
}

.header-nav a:focus-visible,
.header-theme:focus-visible { outline: 2px solid var(--header-green); outline-offset: 2px; }

.header-theme {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin-right: 12px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #e5e5e5;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.header-theme:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); }

.header-theme svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* dark now: the sun (to go light); light now: the moon */
.header-theme .ico-moon { display: none; }
html[data-theme="light"] .header-theme .ico-sun { display: none; }
html[data-theme="light"] .header-theme .ico-moon { display: block; }

/* a phone with the page at its own width (Tuition Jobs, the login pages): the pages go
   on a second line under the logo, side by side, sliding if they do not fit */
@media (max-width: 760px) {
  .site-header .header-inner { flex-wrap: wrap; }
  .site-header .header-nav {
    order: 3;
    width: 100%;
    margin: 0 0 8px;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .header-nav::-webkit-scrollbar { display: none; }
  .site-header .header-nav { justify-content: space-between; }
  .header-nav a { padding: 7px 6px; font-size: 13px; }
  .header-nav a[aria-current="page"]::after { left: 6px; right: 6px; }
  .header-nav a[aria-current="page"]::after { bottom: 1px; }
  .header-theme { margin-left: auto; margin-right: 10px; width: 38px; height: 38px; flex-basis: 38px; }
}


/* =========================================================
   LIGHT MODE  (html[data-theme="light"], js/theme.js)
   ========================================================= */

html[data-theme="light"] .site-header {
  --header-bg: #ffffff;
  --header-text: #111111;
  --header-border: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .brand-urban { color: #111111; }
html[data-theme="light"] .header-nav a { color: #3f3f46; }
html[data-theme="light"] .header-nav a:hover { color: #111111; background: rgba(0, 0, 0, 0.05); }
html[data-theme="light"] .header-nav a[aria-current="page"] { color: #111111; }
html[data-theme="light"] .header-nav a[aria-current="page"]::after { background: #16a34a; }
html[data-theme="light"] .header-theme { border-color: rgba(0, 0, 0, 0.14); color: #27272a; }
html[data-theme="light"] .header-theme:hover { background: rgba(0, 0, 0, 0.05); }

html[data-theme="light"] .login-menu { background: #ffffff; border-color: rgba(0, 0, 0, 0.10); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14); }
html[data-theme="light"] .login-menu-arrow { background: #ffffff; border-color: rgba(0, 0, 0, 0.10); }
html[data-theme="light"] .login-option { color: #111111; }
html[data-theme="light"] .login-option:focus-visible,
html[data-theme="light"] .login-option:active { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.06); }
@media (hover: hover) {
  html[data-theme="light"] .login-option:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.06); }
}
html[data-theme="light"] .header-login.has-initials,
html[data-theme="light"] .header-login.header-login-static { background: rgba(37, 99, 235, 0.10); }
/* pages that paint the header themselves (the login pages): white in light mode too */
html[data-theme="light"] .site-header { background: #ffffff; border-bottom-color: rgba(0, 0, 0, 0.08); }

/* =========================================================
   DARK / LIGHT SWITCH  - a pill with the sun and the moon, a round knob that slides
   (dark: the knob on the moon; light: on the sun). Nobody logged in: it stands where
   the round Login button was - that button only shows once someone is logged in.
   ========================================================= */

.site-header.is-guest .header-login { display: none; }

.site-header .header-theme {
  width: auto;
  height: auto;
  flex: none;
  margin-right: 14px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  transform: none;
}
.site-header.is-guest .header-theme { margin-right: 0; }
.site-header .header-theme:hover { background: transparent; transform: none; }

.ht-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 72px;
  height: 38px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 999px;
  background: linear-gradient(180deg, #17171b, #0d0d10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: background 0.35s ease, border-color 0.35s ease;
}
.ht-track svg { position: relative; z-index: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ht-sun { color: #71717a; }
.ht-moon { color: #e5e7eb; }

.ht-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4ade80, #16a34a 70%);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.45);
  transform: translateX(34px);
  transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.35s ease;
}
/* the icon under the knob shows on top of it, dark on the green */
.header-theme .ht-moon { z-index: 1; color: #04160b; }

.header-theme:hover .ht-track { border-color: rgba(34, 197, 94, 0.55); }
.header-theme:focus-visible { outline: none; }
.header-theme:focus-visible .ht-track { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.45); }

html[data-theme="light"] .ht-track { background: linear-gradient(180deg, #ffffff, #eef0f3); border-color: rgba(0, 0, 0, 0.12); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .ht-knob { transform: translateX(0); background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 72%); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6); }
html[data-theme="light"] .header-theme .ht-moon { z-index: 0; color: #9ca3af; }
html[data-theme="light"] .header-theme .ht-sun { z-index: 1; color: #422006; }
html[data-theme="light"] .header-theme:hover .ht-track { border-color: rgba(245, 158, 11, 0.6); }

@media (max-width: 760px) {
  .site-header .header-theme { width: auto; height: auto; margin-left: auto; }
  .ht-track { width: 64px; height: 34px; padding: 0 9px; }
  .ht-knob { width: 26px; height: 26px; transform: translateX(30px); }
  html[data-theme="light"] .ht-knob { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .ht-knob, .ht-track { transition: none; } }

/* the switch, a little sky: night (deep blue, stars, a silver moon) and day (light blue, a warm sun);
   no border, a soft inner shadow */
.ht-track {
  border: 0;
  background: linear-gradient(135deg, #1e1b4b, #0b1026 70%);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(148, 163, 255, 0.18);
  overflow: hidden;
}
.ht-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.2px 1.2px at 14px 10px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 24px 26px, #e0e7ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 9px 22px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30px 13px, #c7d2fe 50%, transparent 51%);
  opacity: 0.9;
  transition: opacity 0.35s ease;
}
.ht-sun { color: #a5b4fc; opacity: 0.55; }
.ht-knob {
  background: radial-gradient(circle at 35% 30%, #ffffff, #cbd5e1 70%);
  box-shadow: 0 0 14px rgba(199, 210, 254, 0.75), inset -3px -3px 0 rgba(148, 163, 184, 0.35);
}
.header-theme .ht-moon { color: #334155; }
.header-theme:hover .ht-track { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(165, 180, 252, 0.45); }
.header-theme:focus-visible .ht-track { box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.6); }

html[data-theme="light"] .ht-track {
  background: linear-gradient(135deg, #bae6fd, #7dd3fc 70%);
  box-shadow: inset 0 2px 5px rgba(2, 132, 199, 0.25), 0 0 0 1px rgba(2, 132, 199, 0.18);
}
html[data-theme="light"] .ht-track::before { opacity: 0; }
html[data-theme="light"] .ht-knob {
  background: radial-gradient(circle at 35% 30%, #fff7cc, #fbbf24 72%);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.85), inset -2px -2px 0 rgba(217, 119, 6, 0.25);
}
html[data-theme="light"] .header-theme .ht-sun { color: #78350f; opacity: 1; }
html[data-theme="light"] .header-theme .ht-moon { color: #0369a1; opacity: 0.6; }
html[data-theme="light"] .header-theme:hover .ht-track { box-shadow: inset 0 2px 5px rgba(2, 132, 199, 0.25), 0 0 0 1px rgba(2, 132, 199, 0.45); }

/* going from page to page on the site: a soft cross-fade (Chrome, Edge, Safari 18+) instead of a blank blink */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }

/* =========================================================
   THE PAGES IN THE HEADER - in three groups (parents · tutors · about us), in the middle of the header;
   the page you are on is a soft green pill
   ========================================================= */
.site-header .header-nav { margin: 0 auto; gap: 2px; padding: 4px; border-radius: 999px; }
.header-nav .hn-sep { width: 1px; height: 18px; margin: 0 10px; background: rgba(255, 255, 255, 0.14); flex: none; }
html[data-theme="light"] .header-nav .hn-sep { background: rgba(0, 0, 0, 0.12); }

.header-nav a { padding: 9px 15px; transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
.header-nav a[aria-current="page"]::after { display: none; }
.header-nav a[aria-current="page"] {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.14);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
}
.header-nav a[aria-current="page"]:hover { background: rgba(34, 197, 94, 0.2); color: #86efac; }
html[data-theme="light"] .header-nav a[aria-current="page"] { color: #15803d; background: #dcfce7; box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.2); }
html[data-theme="light"] .header-nav a[aria-current="page"]:hover { background: #bbf7d0; color: #14532d; }

@media (max-width: 760px) {
  .header-nav .hn-sep { margin: 0 2px; height: 14px; }
  .header-nav a { padding: 6px 7px; }
}
@media (max-width: 760px) {
  .header-nav .hn-sep { display: none; }
  .header-nav a { padding: 6px 7px; font-size: 12.5px; }
}

/* =========================================================
   ONE HEADER ON EVERY PAGE - the same height and width as on Tuition Jobs / Join as a Tutor, whatever a page's own
   css says (no browser margin round the page either); the page you are on: a soft green pill, no border
   ========================================================= */
html, body { margin: 0; }
@media (min-width: 761px) {
  .site-header .header-inner, html body[data-page="admin"] .site-header .header-inner { width: min(1440px, 93.334%); min-height: 76px; }
}
.header-nav a[aria-current="page"], html[data-theme="light"] .header-nav a[aria-current="page"] { box-shadow: none; border: 0; }

/* phones draw the pages 1440px wide: the browser must not blow up the letters on its own (it did on About Us, where
   the long text made the Beta strip and the header sit lower than on every other page) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* moving between pages: the header and the Beta strip stay still - only the page under them cross-fades (the logo
   used to dim for a moment while the new page's copy of it came in) */
.site-header { view-transition-name: ut-header; }
#beta-strip { view-transition-name: ut-beta; }
#utTabBar { view-transition-name: ut-tabbar; }
::view-transition-group(ut-header), ::view-transition-group(ut-beta), ::view-transition-group(ut-tabbar) { animation: none; }
/* the next page's own header (and bottom menu) straight away, drawn over the last page's - which stays under it, so if
   the next page shows before its header is in place there is no blank moment where the header was */
::view-transition-old(ut-header), ::view-transition-old(ut-beta), ::view-transition-old(ut-tabbar) { animation: none; opacity: 1; }
::view-transition-new(ut-header), ::view-transition-new(ut-beta), ::view-transition-new(ut-tabbar) { animation: none; opacity: 1; }

/* going from page to page without a blink: the page that is leaving stays as it is until the new one is ready, then
   the new one is there at once - no fade (a fade showed both pages' words over each other for a moment) */
::view-transition-old(root) { animation: none !important; }
::view-transition-new(root) { animation: none !important; }
@keyframes ut-vt-in { from { opacity: 0; } to { opacity: 1; } }

/* a tap on the logo, a page or a button: no dark box behind it on phones */
.site-header a, .site-header button { -webkit-tap-highlight-color: transparent; }
.site-logo:focus:not(:focus-visible) { outline: none; }

/* the pages: bolder; the one you are on a clear, solid green pill */
.header-nav a { font-weight: 700; }
.header-nav a[aria-current="page"], html[data-theme="light"] .header-nav a[aria-current="page"] { color: #ffffff; background: #16a34a; box-shadow: none; }
.header-nav a[aria-current="page"]:hover, html[data-theme="light"] .header-nav a[aria-current="page"]:hover { color: #ffffff; background: #15803d; }

/* the pages: the same space between each, and a thin line between every two that show (js/header-early.js marks the
   first one that shows - it has no line before it) */
@media (min-width: 761px) {
  .site-header .header-nav { gap: 25px; }
  .header-nav .hn-sep { display: none !important; }
  .header-nav a::before { content: ""; position: absolute; left: -13px; top: 50%; width: 1px; height: 18px; margin-top: -9px; background: rgba(255, 255, 255, 0.18); pointer-events: none; }
  html[data-theme="light"] .header-nav a::before { background: rgba(0, 0, 0, 0.16); }
  .header-nav a.hn-first::before { display: none; }
}

/* =========================================================
   ADMIN PANEL HEADER - like every page's: the logo on the left; on the right the employee's name and,
   beside it, their initials (js/header.js)
   ========================================================= */
.header-admin-name { margin-left: auto; margin-right: 12px; font: 600 15px/1.2 Inter, -apple-system, "Segoe UI", sans-serif; color: #f5f5f5; white-space: nowrap; }
html[data-theme="light"] .header-admin-name { color: #111418; }
/* the employee's category in the middle of the header (its colours: css/pages/admin.css .admin-role-pill) */
body[data-page="admin"] .site-header .header-inner { position: relative; }
.header-admin-role { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 7px 16px !important; font-size: 12.5px !important; white-space: nowrap; }


/* a profile opened inside the Admin Panel (js/header-early.js): no strip, header, footer or floating buttons - the
   panel's own bar is above it */
html.in-admin #beta-strip, html.in-admin #site-header, html.in-admin .site-header, html.in-admin #site-footer,
html.in-admin .site-footer, html.in-admin .floating-contact { display: none !important; }

/* Admin Panel: the employee's name in two colours, the same type as "Urban Tutor Site" by the logo */
.header-admin-name { font: 850 22px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: -0.7px; }
.header-admin-name .han-a { color: #ffffff; }
.header-admin-name .han-b { color: var(--header-green, #16a34a); margin-left: 0.28em; }
html[data-theme="light"] .header-admin-name .han-a { color: #111111; }


/* the Student / Tutor profile on a phone: only the logo (no name), no theme switch or profile circle on the right -
   the pages sit beside the logo on the same line */
@media (max-width: 760px) {
  body[data-page="tutorprofile"] .site-header .header-inner, body[data-page="studentprofile"] .site-header .header-inner { flex-wrap: nowrap; gap: 6px; }
  body[data-page="tutorprofile"] .site-logo .brand-urban, body[data-page="tutorprofile"] .site-logo .brand-tutorsite,
  body[data-page="studentprofile"] .site-logo .brand-urban, body[data-page="studentprofile"] .site-logo .brand-tutorsite { display: none; }
  body[data-page="tutorprofile"] .header-theme, body[data-page="tutorprofile"] #headerLogin, body[data-page="tutorprofile"] .login-menu,
  body[data-page="studentprofile"] .header-theme, body[data-page="studentprofile"] #headerLogin, body[data-page="studentprofile"] .login-menu { display: none !important; }
  body[data-page="tutorprofile"] .site-header .header-nav, body[data-page="studentprofile"] .site-header .header-nav { order: 2; flex: 1 1 auto; width: auto; min-width: 0; margin: 0 0 0 4px; justify-content: space-between; gap: 0; }
  body[data-page="tutorprofile"] .header-nav a, body[data-page="studentprofile"] .header-nav a { padding: 7px 5px; font-size: 12.5px; white-space: nowrap; }
  body[data-page="tutorprofile"] .site-logo, body[data-page="studentprofile"] .site-logo { flex: none; }
  body[data-page="tutorprofile"] .site-logo-mark, body[data-page="studentprofile"] .site-logo-mark { width: 50px; height: auto; }
}

/* =========================================================
   PHONES: THE HEADER IS THE LOGO (left) AND DARK / LIGHT (right); THE PAGES ARE IN THE MENU ALONG THE BOTTOM OF
   THE SCREEN (js/header.js - setupTabBar_): Home, two pages, Profile / Login and More (a sheet with the rest).
   Desktop: the pages in the header, no menu at the bottom.
   ========================================================= */
.header-burger { display: none !important; }
.ut-tabbar, .ut-more { display: none; }
@media (min-width: 761px) { .header-nav .hn-me { display: none !important; } }

@media (max-width: 760px) {
  body:not([data-page="admin"]) .site-header { position: relative; z-index: 900; }
  /* as tall as the logo and the switch need, no more */
  body:not([data-page="admin"]) .site-header .header-inner { position: relative; flex-wrap: nowrap; gap: 10px; min-height: 0; padding-top: 7px; padding-bottom: 7px; }
  body:not([data-page="admin"]) .site-header .site-logo { flex: none; margin-right: auto; }
  body:not([data-page="admin"]) .site-header .site-logo .brand-urban,
  body:not([data-page="admin"]) .site-header .site-logo .brand-tutorsite { display: none; }
  body:not([data-page="admin"]) .site-header .site-logo-mark { width: 48px; height: auto; }
  /* the logo in the middle of the header, top to bottom (its box as tall as the picture) */
  body:not([data-page="admin"]) .site-header .site-logo { height: auto; align-self: center; align-items: center; line-height: 0; }
  body:not([data-page="admin"]) .site-header .site-logo-mark { display: block; margin: 0; }
  html[data-theme="light"] body:not([data-page="admin"]) .site-header .site-logo-mark.is-dark,
  html:not([data-theme="light"]) body:not([data-page="admin"]) .site-header .site-logo-mark.is-light { display: none; }
  body:not([data-page="admin"]) .site-header .header-theme { display: grid !important; margin: 0; }
  body:not([data-page="admin"]) .site-header .ht-track { width: 56px; height: 30px; padding: 0 8px; }
  body:not([data-page="admin"]) .site-header .ht-track svg { width: 14px; height: 14px; }
  body:not([data-page="admin"]) .site-header .ht-knob { width: 22px; height: 22px; transform: translateX(26px); }
  html[data-theme="light"] body:not([data-page="admin"]) .site-header .ht-knob { transform: translateX(0); }
  body:not([data-page="admin"]) .site-header #headerLogin, body:not([data-page="admin"]) .login-menu,
  body:not([data-page="admin"]) .site-header .header-nav { display: none !important; }

  /* the menu along the bottom */
  body.has-tabbar { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .ut-tabbar {
    position: fixed; z-index: 950; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 9, 10, 0.92); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.8);
  }
  .ut-tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 0; height: 50px; padding: 0 2px;
    border: 0; border-radius: 16px; background: none; color: #9ca3af; font: 600 10.5px/1.1 Inter, -apple-system, "Segoe UI", sans-serif;
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease, background 0.2s ease;
  }
  .ut-tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
  .ut-tab.is-on { color: #22c55e; }
  .ut-tab.is-on svg { transform: translateY(-2px); filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.45)); }
  /* logged in: Profile is the header's avatar - the name letters (or the photo) and the subscription seal */
  .ut-tab-ava { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box;
    border: 1.5px solid currentColor; background: #101010; transition: transform 0.2s ease; }
  .ut-tab-ava > b { font-size: 11px; font-weight: 800; letter-spacing: 0.02em; line-height: 1; }
  .ut-tab-ava > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .ut-tab .ut-tab-ava > svg { width: 18px; height: 18px; }
  .ut-tab-ava .header-sub-badge { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; z-index: 2; }
  .ut-tab .ut-tab-ava .header-sub-badge svg { width: 100%; height: 100%; stroke: none; transform: none; filter: none; }
  .ut-tab.is-on .ut-tab-ava { transform: translateY(-2px); box-shadow: 0 0 10px rgba(34, 197, 94, 0.45); }
  html[data-theme="light"] .ut-tab-ava { background: #ffffff; }
  /* the page you are on: a small green dot under its icon */
  /* (the tab of the page you are on: its colour only - no dot under it) */
  .ut-tab.is-on::after { content: none; }
  .ut-tab:active { background: rgba(255, 255, 255, 0.06); }

  /* More: the other pages, in a sheet that rises from the bottom (over the page, above the menu) */
  .ut-more { position: fixed; z-index: 940; inset: 0; display: block; background: rgba(0, 0, 0, 0); transition: background 0.24s ease; }
  .ut-more[hidden] { display: none; }
  .ut-more.is-open { background: rgba(0, 0, 0, 0.5); }
  .ut-more-panel {
    position: absolute; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px 12px; border-radius: 24px 24px 0 0; background: #0d0f10; border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -24px 40px -20px rgba(0, 0, 0, 0.7); transform: translateY(16px); opacity: 0; transition: transform 0.24s ease, opacity 0.24s ease;
  }
  .ut-more.is-open .ut-more-panel { transform: none; opacity: 1; }
  .ut-more-grip { align-self: center; width: 38px; height: 4px; margin: 0 0 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); }
  .ut-more-link { display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 14px; color: #f3f4f6; font: 600 15.5px/1.2 Inter, -apple-system, "Segoe UI", sans-serif; text-decoration: none; }
  .ut-more-link svg { flex: none; width: 22px; height: 22px; fill: none; stroke: #22c55e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ut-more-link span { flex: 1; }
  .ut-more-link i { font-style: normal; font-size: 20px; color: #6b7280; }
  .ut-more-link.is-on, .ut-more-link:active { background: rgba(34, 197, 94, 0.1); }

  html[data-theme="light"] .ut-tabbar { background: rgba(255, 255, 255, 0.94); border-top-color: rgba(0, 0, 0, 0.08); box-shadow: 0 -12px 30px -20px rgba(15, 23, 42, 0.25); }
  html[data-theme="light"] .ut-tab { color: #6b7280; }
  html[data-theme="light"] .ut-tab.is-on { color: #16a34a; }
  html[data-theme="light"] .ut-tab:active { background: rgba(0, 0, 0, 0.05); }
  html[data-theme="light"] .ut-more-panel { background: #ffffff; border-top-color: rgba(0, 0, 0, 0.08); box-shadow: 0 -24px 40px -24px rgba(15, 23, 42, 0.3); }
  html[data-theme="light"] .ut-more-grip { background: rgba(0, 0, 0, 0.15); }
  html[data-theme="light"] .ut-more-link { color: #111827; }
  html[data-theme="light"] .ut-more-link svg { stroke: #16a34a; }
  html[data-theme="light"] .ut-more-link i { color: #9ca3af; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .ut-more, .ut-more-panel, .ut-tab, .ut-tab svg { transition: none; }
}
/* Chrome on an iPhone: its own toolbar covers the bottom of the page - the menu's icons sit above it (js/header.js) */
@media (max-width: 760px) {
  /* Chrome on an iPhone keeps the page above its own toolbar (measured: the page's height is what is seen), so the
     menu needs no extra lift there - only a little room under the icons */
  html.ut-crios-bar body.has-tabbar { padding-bottom: 68px; }
  html.ut-crios-bar .ut-tabbar { padding-bottom: 8px; }
  html.ut-crios-bar .ut-more-panel { bottom: 64px; }
  /* an iPhone's WebKit could leave the icons of a blurred, fixed bar unpainted: a solid bar there */
  html.ut-crios-bar .ut-tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #08090a; }
  html.ut-crios-bar[data-theme="light"] .ut-tabbar { background: #ffffff; }
}


/* =========================================================
   A SHORT PAGE: THE FOOTER BELOW THE FIRST SCREEN
   The page's main part is at least the screen's height under the header (js/footer.js measures the header into
   --ut-head-h), so on a page with little in it the footer does not come up into the middle of the screen.
   ========================================================= */
@media (max-width: 760px) {
  body:has(#site-footer) main:not(main main) {
    min-height: calc(100vh - var(--ut-head-h, 0px));
    min-height: calc(100svh - var(--ut-head-h, 0px));
  }
}


/* =========================================================
   A NARROWER COMPUTER WINDOW, AN iPAD, A PHONE HELD SIDEWAYS (761 - 1299px): the logo, all the pages and dark / light
   still on one line inside the screen - a little closer together and smaller, then (under 1100px) the logo's mark
   only. (They used to run off the right edge, and a phone held sideways then showed the whole page shrunk.)
   ========================================================= */
@media (min-width: 761px) and (max-width: 1399px) {
  body:not([data-page="admin"]) .site-header .header-inner { width: calc(100% - 40px); }
  body:not([data-page="admin"]) .site-header .header-nav { gap: 13px; margin-left: 18px; }
  body:not([data-page="admin"]) .header-nav a { padding: 8px 10px; font-size: 14px; }
  body:not([data-page="admin"]) .header-nav a::before { left: -7px; }
}
@media (min-width: 761px) and (max-width: 1199px) {
  body:not([data-page="admin"]) .site-logo .brand-urban, body:not([data-page="admin"]) .site-logo .brand-tutorsite { display: none; }
  body:not([data-page="admin"]) .site-header .header-nav { gap: 6px; margin-left: 10px; }
  body:not([data-page="admin"]) .header-nav a { padding: 7px 8px; font-size: 13px; }
  body:not([data-page="admin"]) .header-nav a::before { left: -3px; height: 14px; margin-top: -7px; }
}
@media (min-width: 761px) and (max-width: 899px) {
  body:not([data-page="admin"]) .site-header .header-inner { width: calc(100% - 24px); }
  body:not([data-page="admin"]) .site-header .header-nav { gap: 3px; margin-left: 6px; }
  body:not([data-page="admin"]) .header-nav a { padding: 6px 6px; font-size: 12.5px; }
  body:not([data-page="admin"]) .header-nav a::before { display: none; }
}

/* =========================================================
   THE HEADER'S ROOM BEFORE IT IS DRAWN (a first visit: it is fetched, not drawn from this device's copy): kept at
   its height, so what is under it - the login in the middle of the screen - does not jump down when it comes
   ========================================================= */
body:not([data-page="admin"]) #site-header:empty { display: block; height: 77px; }
@media (max-width: 760px) { body:not([data-page="admin"]) #site-header:empty { height: 49px; } }

/* =========================================================
   PHONES: THE HEADER ALWAYS EXACTLY 49px (48 + its line). Its height used to come from the logo picture - set by its
   width, and the picture's own shape (252 x 180) is a hair different from the size written on it (64 x 46), so the
   header was 49.5px till the picture came, then 49.3px: the page under it moved by a pixel. Now the logo has a set
   height (the picture fitted inside it) and the header a set height.
   ========================================================= */
@media (max-width: 760px) {
  body:not([data-page="admin"]) .site-header .header-inner { height: 48px; min-height: 48px; box-sizing: border-box; }
  body:not([data-page="admin"]) .site-header .site-logo-mark { width: 48px; height: 34px; object-fit: contain; }
  body[data-page="tutorprofile"] .site-header .site-logo-mark, body[data-page="studentprofile"] .site-header .site-logo-mark { width: 50px; height: 34px; object-fit: contain; }
}

/* =========================================================
   PHONES: the bottom menu with each page's name under its icon
   ========================================================= */
@media (max-width: 760px) {
  .ut-tabbar { padding-top: 5px; padding-left: 2px; padding-right: 2px; }
  .ut-tab { height: 52px; gap: 3px; padding: 0 1px; }
  .ut-tab svg { width: 22px; height: 22px; }
  .ut-tab .ut-tab-ava { width: 24px; height: 24px; }
  .ut-tab .ut-tab-ava > b { font-size: 9.5px; }
  .ut-tab-name { display: block; max-width: 100%; font-size: 10px; font-weight: 600; line-height: 1.15; letter-spacing: -0.1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ut-tab.is-on svg, .ut-tab.is-on .ut-tab-ava { transform: none; }

}
@media (max-width: 350px) {
  .ut-tab-name { font-size: 9.5px; }
}

/* =========================================================
   PHONES: THE HEADER - the logo with Urban Tutor Site on the left, the dark / light switch on the right (as before)
   ========================================================= */
@media (max-width: 760px) {
  body:not([data-page="admin"]) .site-header .site-logo { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
  body:not([data-page="admin"]) .site-header .site-logo-mark { width: 40px; }
  body:not([data-page="admin"]) .site-header .site-logo .brand-urban,
  body:not([data-page="admin"]) .site-header .site-logo .brand-tutorsite { display: inline; font-size: 19px; line-height: 1; white-space: nowrap; }
  body:not([data-page="admin"]) .site-header .site-logo .brand-tutorsite { margin-left: -2px; }
}
@media (max-width: 350px) {
  body:not([data-page="admin"]) .site-header .site-logo .brand-urban,
  body:not([data-page="admin"]) .site-header .site-logo .brand-tutorsite { font-size: 17px; }
  body:not([data-page="admin"]) .site-header .site-logo-mark { width: 36px; }
}