/* The student area's shell: the bar across the top, the menu down the side,
   and the space the page sits in.

   Loaded after main.css and deliberately additive, so removing one <link> in
   inc/header.php puts the old look back. main.css is shared with pages that
   have not been touched since 2005 and is left alone.

   The one idea: the amber line. It is already on the site, under the banner,
   and it is the same amber as a lane marking, which is what this school
   teaches people to drive between. It runs under the header, marks the page
   you are on in the menu, and appears nowhere else. Everything else is quiet:
   green belongs to things you can press. */

:root {
  --ez-ink: #17241d;
  --ez-muted: #5f7167;
  --ez-green: #07794f;
  --ez-green-dark: #05603e;
  --ez-green-deep: #08462f;
  --ez-green-wash: #edf5f0;
  --ez-amber: #e6ad00;
  /* The banner is the school's own green, sampled from the home page, with the
     gold rule the site has always had under it. The student area had drifted to
     a darker green of its own, which made signing in feel like a different
     website. */
  --ez-banner: #0b9569;
  --ez-banner-rule: #d7a50b;
  --ez-line: #dfe6e1;
  --ez-paper: #fff;
  --ez-wash: #f5f8f6;
  --ez-shell: min(1180px, calc(100% - 40px));
}

/* ------------------------------------------------------------ the top bar */
/* Was 150px of solid green with a 60px serif wordmark, which left no room for
   the page itself above the fold. The wordmark is the school's own and stays
   serif; it is simply no longer shouting. */
.top1 {
  padding: 0;
  background: var(--ez-banner);
  border-bottom: 5px solid var(--ez-banner-rule);
  text-align: left;
  font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
}
.top1 .ez-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  width: var(--ez-shell);
  margin: 0 auto;
  min-height: 64px;
  padding: 11px 0;
}
.top1-1 {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
}
.top1-1 a, .top1-1 a:link, .top1-1 a:visited { color: #fff; text-decoration: none; }
.top1-2 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: #fff;
  font-size: 14px;
}
.top1-2 span { margin: 0; }
.top1-2 a, .top1-2 a:link, .top1-2 a:visited {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 34px;
  padding: 0 13px;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 8px;
  color: #fff;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}
.top1-2 a:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.top1-3 { flex: 0 0 auto; display: flex; align-items: center; }

/* Google's translate widget arrives as a raw <select> with its own pale green
   skin and a colour logo underneath, which on a dark bar looks like a form
   control someone dropped there by accident. Google injects real elements
   rather than an iframe, so it can simply be dressed to match: the same
   height, border and radius as Sign out beside it. The "Powered by" line goes;
   the attribution stays in the widget's own menu. */
.top1 #google_translate_element { position: static; width: auto; top: auto; right: auto; }
.top1 .goog-te-gadget {
  margin: 0;
  color: transparent;
  font-size: 0;
  line-height: 0;
}
.top1 .goog-te-gadget img,
.top1 .goog-logo-link-wrapper,
.top1 .goog-te-gadget > span { display: none !important; }
/* style_admin.css pins every select to height:30px, and a select counts its
   padding inside that, so the old 7px top and bottom left 14px for 13.5px text
   and cut the tail off the g. Both controls now share one explicit height and
   centre their text in it, so they line up and nothing is clipped. */
.top1 .goog-te-combo {
  box-sizing: border-box;
  height: 34px;
  margin: 0;
  padding: 0 30px 0 12px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, .06);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px 8px;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  line-height: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
.top1 .goog-te-combo:hover { background-color: rgba(255, 255, 255, .12); }
.top1 .goog-te-combo:focus-visible { outline: 2px solid var(--ez-amber); outline-offset: 2px; }
/* The open menu is drawn by the operating system, so it needs its own colours. */
.top1 .goog-te-combo option { background: #fff; color: var(--ez-ink); }

/* The name reads as a label, not a thing to press, so it stays quiet. */
.top1-2 span { color: rgba(255, 255, 255, .92); font-size: 13.5px; }

/* -------------------------------------------------------------- the frame */
/* One container holds the menu and the page, so they share a left and right
   edge with the bar above. Centring the content inside its own column, as it
   used to, put it half a menu to the right of the wordmark. */
.row {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  width: var(--ez-shell);
  margin: 0 auto;
  padding: 26px 0 40px;
}
.column_left {
  flex: 0 0 218px;
  float: none;
  width: auto;
  padding: 0;
  position: static;
  top: auto;
}
.column_center {
  flex: 1 1 auto;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  color: var(--ez-ink);
}
.column_right { display: none; }

/* --------------------------------------------------------------- the menu */
/* Was a stack of full-bleed green bars running into the edge of the screen.
   Green now means "press this", so the menu is quiet and the page you are on
   is marked with the amber line. */
#menu { font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif; }
#menu .catbox {
  padding: 0;
  border: 1px solid var(--ez-line);
  border-radius: 12px;
  background: var(--ez-paper);
  overflow: hidden;
  list-style: none;
  margin: 0;
}
#menu .catbox a, #menu .catbox a:visited { color: var(--ez-ink) !important; text-decoration: none; }
#menu .catboxitem {
  position: relative;
  padding: 11px 14px 11px 17px;
  border: 0;
  border-bottom: 1px solid #eef2ef;
  background: transparent;
  font-size: 14px;
  line-height: 1.35;
}
#menu .catbox a:last-child .catboxitem { border-bottom: 0; }
#menu .catboxitem:hover { background: var(--ez-wash); }
#menu .catboxitem.ez-here { background: var(--ez-green-wash); font-weight: 600; }
#menu .catboxitem.ez-here::before {
  content: "";
  position: absolute;
  top: 7px; bottom: 7px; left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ez-amber);
}
#menu .catboxitem.ez-quit { color: var(--ez-muted); }

/* ------------------------------------------------------------ small screen */
@media (max-width: 900px) {
  :root { --ez-shell: calc(100% - 28px); }
  .row { flex-direction: column; gap: 0; padding: 16px 0 30px; }
  .column_left, .column_center { flex: 1 1 auto; width: 100%; }
  .column_left { margin-bottom: 20px; }
  .top1 .ez-bar { flex-wrap: wrap; gap: 10px 14px; min-height: 0; }
  .top1-1 { font-size: 20px; }
  .top1-2 { font-size: 13px; }
  .top1-2 a { padding: 0 11px; }
}
@media (max-width: 767px) {
  #menu { display: none; }              /* the hamburger takes over */
  .top1-1 { font-size: 17px !important; }
  /* The hamburger bar is the top of the page here, so the heading needs air
     under it rather than sitting on the rule. */
  .column_left { margin-bottom: 22px; }
}

/* ---------------------------------------------------------- the phone menu */
/* The old responsive menu slid in from off-screen at a fixed 42px offset. On a
   short page that left it floating over the footer with the page showing round
   its edges. It opens in the flow instead now: the page moves down, which is
   what a phone menu is expected to do, and nothing can overlap anything.

   Everything here is scoped under .minimal-menu-container on purpose.
   responsive-menu.css is linked from inside the sidebar include, so it loads
   after this file and would win every tie; the extra class wins them back
   without a single !important. */
@media (max-width: 767px) {
  .column_left .minimal-menu-container {
    position: static;
    height: auto;
    margin: 0 0 20px;
    border: 1px solid var(--ez-line);
    border-radius: 12px;
    background: var(--ez-paper);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(20, 45, 32, .07);
  }
  .minimal-menu-container label.minimal-menu-button {
    display: flex;
    align-items: center;
    gap: 11px;
    position: static;
    top: auto; left: auto; right: auto; bottom: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 13px 15px;
    border: 0;
    border-radius: 0;
    background: var(--ez-wash);
    color: var(--ez-ink);
    font-size: 14px;
    font-weight: 600;
    text-indent: 0;
    cursor: pointer;
  }
  /* The old icon was drawn with an absolutely positioned pseudo-element and
     double borders. Left alone it floats to the top of the page, so every one
     of those properties is put back to nothing before the new one is drawn. */
  .minimal-menu-container label.minimal-menu-button::before {
    content: "";
    flex: none;
    transition: transform .26s ease, height .26s ease;
    position: static;
    top: auto; left: auto;
    border: 0;
    z-index: auto;
    box-sizing: border-box;
    width: 17px;
    height: 12px;
    background:
      linear-gradient(currentColor, currentColor) top/100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) bottom/100% 2px no-repeat;
  }
  .minimal-menu-container label.minimal-menu-button::after { content: none; }
  .minimal-menu-container label.minimal-menu-button span { display: inline; }
  .minimal-menu-container label.minimal-menu-button { transition: background .2s ease, color .2s ease; }
  .minimal-menu-container label.minimal-menu-button:hover { background: #eaeeeb; }
  /* Open: the bar turns green and the bars become a cross, so it is obvious
     that the list below belongs to it and that pressing again closes it. */
  .minimal-menu-container #mobile-nav:checked + label.minimal-menu-button {
    background: var(--ez-green);
    color: #fff;
  }
  .minimal-menu-container #mobile-nav:checked + label.minimal-menu-button::before {
    height: 17px;
    background:
      linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
    transform: rotate(45deg);
  }

  /* Shut unless the box is ticked. Position is no longer what hides it, so the
     old left:-100% and opacity tricks are taken out of the picture; it is the
     height that opens and closes, which is a thing that can be animated.
     display:none cannot, which is why it is not used.

     visibility carries no delay on the way in and the full delay on the way
     out, so the list is reachable the moment it starts opening and out of the
     tab order the moment it has finished closing. */
  .minimal-menu-container .minimal-menu,
  .minimal-menu-container .minimal-menu.clr-blue {
    display: block;
    position: static;
    top: auto; left: auto; right: auto; bottom: auto;
    width: auto;
    height: auto;
    max-height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    transform: translateY(-6px);
    transition: max-height .26s ease, opacity .2s ease, transform .26s ease,
                visibility 0s linear .26s;
  }
  .minimal-menu-container #mobile-nav:checked ~ .minimal-menu {
    max-height: 85vh;
    opacity: 1;
    visibility: visible;
    overflow: auto;
    transform: translateY(0);
    transition: max-height .3s ease, opacity .24s ease, transform .3s ease,
                visibility 0s;
  }
  .minimal-menu-container .minimal-menu .catbox {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  /* Open, the list is the school's green with white on it. White on a white
     page, separated by one hairline, did not read as a menu sitting over the
     page at all. */
  .minimal-menu-container .minimal-menu .catboxitem {
    position: relative;
    padding: 13px 15px 13px 18px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    background: var(--ez-green-deep);
    color: #fff;
    font-size: 15px;
    line-height: 1.35;
  }
  .minimal-menu-container .minimal-menu .catbox a:first-child .catboxitem { border-top: 0; }
  .minimal-menu-container .minimal-menu .catboxitem:hover { background: #0a523a; }
  .minimal-menu-container .minimal-menu .catbox a,
  .minimal-menu-container .minimal-menu .catbox a:visited {
    display: block;
    padding: 0;
    color: #fff !important;
    text-decoration: none;
  }
  .minimal-menu-container .minimal-menu .catboxitem.ez-here { background: var(--ez-green); font-weight: 600; }
  .minimal-menu-container .minimal-menu .catboxitem.ez-here::before {
    content: "";
    position: absolute;
    top: 8px; bottom: 8px; left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ez-amber);
  }
  .minimal-menu-container .minimal-menu .catboxitem.ez-quit { color: rgba(255, 255, 255, .7); }

  /* Anyone who has asked their phone to stop moving things about gets the
     menu appearing and disappearing, and nothing sliding. */
  @media (prefers-reduced-motion: reduce) {
    .minimal-menu-container .minimal-menu,
    .minimal-menu-container #mobile-nav:checked ~ .minimal-menu,
    .minimal-menu-container label.minimal-menu-button,
    .minimal-menu-container label.minimal-menu-button::before { transition: none; transform: none; }
  }
}

/* ------------------------------------------------ a plain page of choices */
/* Most of the student area is a heading and a list of links. They were built
   as tables with a cyan bar for a title and default blue underlined links.
   This is the one treatment they all use now, so a new page is a heading, a
   sentence, and a list. */
.ez-page { max-width: 730px; color: var(--ez-ink); font-family: "IBM Plex Sans", Arial, Helvetica, sans-serif; text-align: left; }
.ez-page h1 { margin: 0 0 10px; color: var(--ez-ink); font-size: 27px; font-weight: 600; letter-spacing: -.015em; text-align: left; }
.ez-page .ez-lede { margin: 0 0 24px; max-width: 46em; color: var(--ez-muted); font-size: 15px; line-height: 1.5; }
.ez-page h2 { margin: 26px 0 10px; color: var(--ez-ink); font-size: 17px; font-weight: 600; text-align: left; }

.ez-rows { border: 1px solid var(--ez-line); border-radius: 13px; background: var(--ez-paper); overflow: hidden; }
.ez-page .ez-rows a, .ez-page .ez-rows a:link, .ez-page .ez-rows a:visited {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 17px;
  border-bottom: 1px solid #eef2ef;
  color: var(--ez-ink);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
}
.ez-page .ez-rows a:last-child { border-bottom: 0; }
.ez-page .ez-rows a:hover { background: var(--ez-wash); color: var(--ez-green-dark); }
.ez-page .ez-rows a:focus-visible { outline: 2px solid var(--ez-amber); outline-offset: -2px; }
/* The numbers are the DMV handbook's own section numbers, not decoration. */
.ez-rows .ez-num { flex: none; min-width: 2.4em; color: var(--ez-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ez-rows .ez-hint { margin-left: auto; flex: none; color: var(--ez-muted); font-size: 13px; white-space: nowrap; }

/* A quiet link back to where this page came from. The :link has to be in the
   selector: main.css underlines and blackens every a:link, and a bare class
   loses that tie. */
.ez-back, .ez-back:link, .ez-back:visited {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--ez-green);
  font-size: 14px;
  text-decoration: none;
}
.ez-back:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .ez-page h1 { font-size: 23px; }
  .ez-page .ez-rows a { padding: 13px 14px; font-size: 14.5px; }
  .ez-rows .ez-hint { display: none; }
}

/* --------------------------------------------- the pages not rewritten yet */
/* The course outline, My Account and the registration card are real working
   pages built out of tables, inline colours and default form controls. They
   are not restructured here, only dressed, so their logic is untouched:
   the cyan title bar becomes a heading, links stop being blue and underlined,
   and the mint-green inputs become ordinary ones.

   Only links that carry no class of their own. A legacy page that already
   styles a link -- the green Unlock button on the course page, the booking
   buttons -- has decided how it should look, and colouring it here turned its
   white label into dark green on green. */
.column_center a:not([class]):link,
.column_center a:not([class]):visited { color: var(--ez-green); }
.column_center a:not([class]):hover { color: var(--ez-green-dark); }

/* The title bar was <tr bgcolor="#0099CC"> with white <font> inside it. */
.column_center tr[bgcolor="#0099CC"] { background: transparent !important; }
.column_center tr[bgcolor="#0099CC"] td { padding: 0 0 14px; }
.column_center tr[bgcolor="#0099CC"] div[align="center"] { text-align: left !important; }
.column_center tr[bgcolor="#0099CC"] font[color="white"],
.column_center tr[bgcolor="#0099CC"] .style1 {
  color: var(--ez-ink) !important;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.015em;
}

/* Never inside a popup: popup.css draws those, and :where() keeps these rules
   no stronger than they were. */
.column_center input[type="text"]:where(:not(.ez-popup *)),
.column_center input[type="password"]:where(:not(.ez-popup *)),
.column_center input[type="email"]:where(:not(.ez-popup *)),
.column_center input[type="tel"]:where(:not(.ez-popup *)),
.column_center input[type="number"]:where(:not(.ez-popup *)),
.column_center select:where(:not(.ez-popup *)),
.column_center textarea:where(:not(.ez-popup *)) {
  padding: 7px 10px;
  border: 1px solid var(--ez-line);
  border-radius: 8px;
  background: var(--ez-paper);
  color: var(--ez-ink);
  font-family: inherit;
  font-size: 14px;
  /* style_admin.css pins every input and select to height:30px. A select is
     sized border-box, so the 30px had to swallow the padding and the border
     too and left 14px for a 14px font, which cut the tail off a g or a y.
     Letting the height follow the text and holding a floor instead keeps
     every field the same size and gives the descenders their room. */
  box-sizing: border-box;
  height: auto;
  min-height: 36px;
  line-height: 1.35;
}
.column_center input:focus-visible:where(:not(.ez-popup *)),
.column_center select:focus-visible:where(:not(.ez-popup *)),
.column_center textarea:focus-visible:where(:not(.ez-popup *)) { outline: 2px solid var(--ez-amber); outline-offset: 1px; }
.column_center input[type="submit"]:where(:not(.ez-popup *)),
.column_center input[type="button"]:where(:not(.ez-popup *)),
.column_center button:not(.sm-go):where(:not(.ez-popup *)) {
  padding: 9px 17px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--ez-green);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.column_center input[type="submit"]:hover:where(:not(.ez-popup *)),
.column_center input[type="button"]:hover:where(:not(.ez-popup *)),
.column_center button:not(.sm-go):hover:where(:not(.ez-popup *)) { background: var(--ez-green-dark); }