/* Choose your level (choose-level.html / choose-level.js). Light only, like the whole site; the word check's look
   (word-check.css) and the homepage's three level colours (bronze, silver, gold). */
:root{
  --cl-bg:#F2F8FC; --cl-panel:#FBFDFE; --cl-ink:#24262B; --cl-soft:#5B6672;
  --cl-brand:#A9532F; --cl-brand-deep:#6B3420; --cl-tint:#EFE1D3;
  --cl-border:#C3D8E3; --cl-border-soft:#DCE9F0; --cl-radius:12px; --cl-focus:#1F5F99; --cl-err:#A23B32;
  --cl-lv1:#B26A2E; --cl-lv1-d:#7A4418; --cl-lv1-t:#F3E2D0;
  --cl-lv2:#8C98A6; --cl-lv2-d:#566170; --cl-lv2-t:#E7EBF0;
  --cl-lv3:#D2A21F; --cl-lv3-d:#8A6609; --cl-lv3-t:#FAEFC6;
}
*{box-sizing:border-box;}
body.cl-body{background:var(--cl-bg); color:var(--cl-ink); font-family:'Karla',sans-serif; margin:0; padding:0 0 64px;}
.cl-page{max-width:980px; margin:0 auto; padding:24px 16px 0;}
.cl-page:focus{outline:none;}
.cl-card{background:var(--cl-panel); border:1px solid var(--cl-border-soft); border-radius:var(--cl-radius); padding:24px 22px; margin:0 auto 18px; max-width:680px;}
.cl-page [hidden]{display:none !important;}   /* .cl-btn's display:inline-flex must never show a hidden part */

/* the top */
.cl-intro{text-align:center; border-top:4px solid var(--cl-brand); padding:30px 22px 24px;}
.cl-eyebrow{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--cl-brand-deep); background:var(--cl-tint);
  border-radius:100px; padding:5px 14px; margin:0 0 14px;}
.cl-intro h1{font-family:'Lora',Georgia,serif; font-size:32px; line-height:1.2; color:var(--cl-brand-deep); margin:0 auto 12px; font-weight:600;}
.cl-lead{font-size:16px; line-height:1.55; margin:0 auto; max-width:32em;}
.cl-teacher{font-size:14px; color:var(--cl-soft); margin:12px auto 0; max-width:32em;}
.cl-done{text-align:left; margin:18px auto 0; max-width:32em; padding:12px 16px; background:var(--cl-bg); border:1px solid var(--cl-border-soft); border-radius:10px;}
.cl-done-h{font-size:14px; font-weight:700; color:var(--cl-soft); margin:0 0 6px;}
.cl-done ul{margin:0; padding:0 0 0 18px;}
.cl-done li{font-size:15px; line-height:1.5; margin:2px 0;}

/* a student; enrolment closed */
.cl-member, .cl-closed{text-align:center;}
.cl-member-line{font-size:17px; margin:0 0 14px;}
.cl-closed h2{font-family:'Lora',Georgia,serif; font-size:22px; color:var(--cl-brand-deep); margin:0 0 8px; font-weight:600;}
.cl-closed p{font-size:16px; line-height:1.55; margin:0 auto 16px; max-width:30em;}

/* buttons */
.cl-btn{display:inline-flex; align-items:center; justify-content:center; min-height:46px; font-family:'Karla',sans-serif; font-weight:700; font-size:16px;
  background:var(--cl-brand); color:#fff; border:1px solid var(--cl-brand); border-radius:100px; padding:10px 24px; cursor:pointer; text-decoration:none; text-align:center;}
.cl-btn:hover{background:var(--cl-brand-deep); border-color:var(--cl-brand-deep); color:#fff;}
.cl-btn:disabled{opacity:.65; cursor:default;}
.cl-btn:focus-visible, .cl-page a:focus-visible, .cl-opt input:focus-visible, .cl-row input:focus-visible, .cl-row textarea:focus-visible{outline:3px solid var(--cl-focus); outline-offset:2px;}

/* the levels */
.cl-levels{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; margin:0 0 20px;}
.cl-level{--tc:var(--cl-lv1); --tcd:var(--cl-lv1-d); --tct:var(--cl-lv1-t);
  display:flex; flex-direction:column; text-align:center; background:linear-gradient(180deg, var(--tct), var(--cl-panel) 42%); border:2px solid var(--tc);
  border-radius:16px; padding:24px 18px 20px; min-width:0;}
.cl-lv-2{--tc:var(--cl-lv2); --tcd:var(--cl-lv2-d); --tct:var(--cl-lv2-t);}
.cl-lv-3{--tc:var(--cl-lv3); --tcd:var(--cl-lv3-d); --tct:var(--cl-lv3-t);}
.cl-lv-name{font-size:14px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--tcd); margin:0;}
.cl-lv-weeks{font-family:'Lora',Georgia,serif; font-size:19px; font-weight:700; margin:4px 0 0;}
.cl-lv-price{margin:12px 0 0; display:flex; flex-direction:column; align-items:center; gap:2px;}
.cl-lv-amount{font-family:'Lora',Georgia,serif; font-size:40px; font-weight:600; line-height:1.1;}
.cl-lv-rate{font-size:14px; color:var(--cl-soft);}
.cl-lv-cov{font-size:14.5px; line-height:1.5; margin:12px 0 0; flex:1;}
.cl-choose{margin-top:16px; width:100%;}

/* the form */
.cl-form-box h2, .cl-sent h2{font-family:'Lora',Georgia,serif; font-size:22px; color:var(--cl-brand-deep); margin:0 0 4px; font-weight:600;}
.cl-form-box h2:focus, .cl-sent h2:focus, .cl-closed h2:focus{outline:none;}
.cl-sent h2{overflow-wrap:anywhere;}   /* the first word of the name they typed: a long one (an email typed into Name) wraps inside the card */
.cl-chosen{font-size:15px; color:var(--cl-soft); margin:0 0 14px; min-height:1.2em;}
.cl-hp{position:absolute; left:-9999px;}
.cl-weeks{border:1px solid var(--cl-border-soft); border-radius:10px; padding:10px 14px 12px; margin:0 0 14px;}
.cl-weeks legend{font-weight:700; font-size:15px; padding:0 4px;}
.cl-opt{display:flex; align-items:center; gap:10px; min-height:44px; font-size:16px; cursor:pointer;}
.cl-opt input{width:20px; height:20px; margin:0; accent-color:var(--cl-brand); flex:none;}
.cl-row{margin:0 0 14px;}
.cl-row label{display:block; font-weight:700; font-size:15px; margin:0 0 6px;}
.cl-optional{font-weight:400; color:var(--cl-soft);}
.cl-row input, .cl-row textarea{display:block; width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--cl-border); border-radius:8px; background:#fff;
  font:16px/1.4 'Karla','Amiri',sans-serif; color:var(--cl-ink);}   /* 16px: iPhone Safari doesn't zoom on focus */
.cl-row textarea{resize:vertical;}
.cl-submit{width:100%; margin-top:4px;}
.cl-form-error{color:var(--cl-err); font-size:15px; line-height:1.5; margin:12px 0 0;}
.cl-form-error a{color:var(--cl-err); font-weight:700;}
.cl-sent p{font-size:16px; line-height:1.55; margin:10px 0 0;}
.cl-small{font-size:14px; line-height:1.5; color:var(--cl-soft); margin:12px 0 0;}
.cl-small a, .cl-page p a{color:var(--cl-brand-deep); font-weight:700;}
.cl-questions{text-align:center;}

/* the skip link (keyboard users): off screen until it has the focus */
.cl-body .skip-link{position:absolute; left:12px; top:-120px; z-index:60; background:var(--cl-brand-deep); color:#fff; font-weight:700; font-size:15px;
  padding:10px 16px; border-radius:8px; text-decoration:none;}
.cl-body .skip-link:focus{top:12px;}

@media (max-width:760px){
  .cl-levels{grid-template-columns:minmax(0, 1fr); max-width:460px; margin-left:auto; margin-right:auto;}
}
@media (max-width:520px){
  .cl-page{padding:16px 16px 0;}
  .cl-card{padding:20px 16px;}
  .cl-intro h1{font-size:27px;}
  .cl-lv-amount{font-size:36px;}
}