/*
 * The Schools Challenge: Contact page.
 * Load after screenNEW.css and home.css.
 * Scoped to body#contact; header, navigation and footer are untouched.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

body#contact > #container {
  --tsc-navy:#192b6d;
  --tsc-blue:#2f5caa;
  --tsc-sky:#91c5ed;
  --tsc-pale:#edf6fc;
  --tsc-ink:#172243;
  --tsc-muted:#5e6981;
  --tsc-line:rgba(25,43,109,.16);
  --tsc-serif:'Playfair Display',Georgia,serif;
  --tsc-sans:'DM Sans',Arial,sans-serif;
  box-sizing:border-box;
  width:min(1000px,calc(100% - 2*clamp(18px,4vw,56px)))!important;
  max-width:1000px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:clamp(42px,6vw,70px) 0 clamp(56px,8vw,88px)!important;
  background:transparent!important;
  color:var(--tsc-ink);
  font:400 16px/1.7 var(--tsc-sans);
  -webkit-font-smoothing:antialiased;
}

body#contact > #container::before {
  content:'';
  position:fixed;
  z-index:-2;
  inset:0;
  background:linear-gradient(180deg,var(--tsc-pale) 0,#fff 720px);
}

body#contact > #container *,
body#contact > #container *::before,
body#contact > #container *::after { box-sizing:border-box; }

body#contact > #container > h1 {
  margin:0 0 clamp(34px,5vw,52px)!important;
  padding:0!important;
  color:var(--tsc-navy)!important;
  font:500 clamp(2.45rem,5vw,4.15rem)/1.08 var(--tsc-serif)!important;
  letter-spacing:-.03em;
  text-align:center!important;
}

body#contact > #container > h1 br { display:none!important; }

body#contact > #container .contentfullwidth {
  display:grid!important;
  grid-template-columns:1fr;
  grid-template-areas:'main' 'hours' 'directions';
  align-items:start;
  gap:24px;
  float:none!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

body#contact #contactsleftcolumn {
  grid-area:main;
  float:none!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:clamp(25px,4vw,38px)!important;
  border:1px solid var(--tsc-line)!important;
  border-top:5px solid var(--tsc-navy)!important;
  background:#fff!important;
  box-shadow:0 11px 32px rgba(25,43,109,.07);
}

body#contact #contactsleftcolumn > h2:first-child {
  margin:0 0 20px!important;
  padding:0 0 15px!important;
  border-bottom:2px solid var(--tsc-sky)!important;
  color:var(--tsc-navy)!important;
  font:500 clamp(1.45rem,2.5vw,2rem)/1.25 var(--tsc-serif)!important;
  letter-spacing:-.02em;
  text-align:left!important;
}

body#contact #contactsleftcolumn > h2:first-child br { display:none!important; }

body#contact #contactsleftcolumn > p {
  margin:0 0 17px!important;
  padding:0!important;
  color:var(--tsc-muted)!important;
  font:400 15px/1.72 var(--tsc-sans)!important;
  text-align:left!important;
}

body#contact #contactsleftcolumn > p strong { color:var(--tsc-navy);font-weight:700; }
body#contact #contactsleftcolumn a { color:var(--tsc-blue)!important;font-weight:600;text-underline-offset:4px;overflow-wrap:anywhere; }
body#contact #contactsleftcolumn > br { display:none!important; }

/* Contact form */
body#contact #contactsleftcolumn > h2.centeredtext {
  margin:32px 0 0!important;
  padding:24px clamp(20px,3vw,30px) 10px!important;
  border:1px solid var(--tsc-line)!important;
  border-bottom:0!important;
  border-top:5px solid var(--tsc-blue)!important;
  background:var(--tsc-pale)!important;
  color:var(--tsc-navy)!important;
  font:500 clamp(1.55rem,2.7vw,2.1rem)/1.2 var(--tsc-serif)!important;
  text-align:center!important;
}

body#contact form#thecontactform {
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 36px!important;
  padding:10px clamp(20px,3vw,30px) 28px!important;
  overflow:hidden;
  border:1px solid var(--tsc-line)!important;
  border-top:0!important;
  background:var(--tsc-pale)!important;
}

body#contact table#emailform,
body#contact table#emailform tbody,
body#contact table#emailform tr,
body#contact table#emailform td { display:block!important;width:100%!important;max-width:none!important; }

body#contact table#emailform { margin:0!important;padding:0!important;border:0!important;background:transparent!important; }
body#contact table#emailform tr { margin:0!important;padding:0!important;border:0!important;background:transparent!important; }
body#contact table#emailform td { height:auto!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important; }

body#contact table#emailform td.col1,
body#contact table#emailform tr > td:not([class]):not([id]) {
  padding:14px 0 7px!important;
  color:var(--tsc-navy)!important;
  font:600 14px/1.4 var(--tsc-sans)!important;
}

body#contact #emailform input[type="text"],
body#contact #emailform input[type="email"],
body#contact #emailform input[type="tel"],
body#contact #emailform textarea {
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:12px 13px!important;
  border:1px solid rgba(25,43,109,.28)!important;
  border-radius:0!important;
  background:#fff!important;
  color:var(--tsc-ink)!important;
  font:400 16px/1.5 var(--tsc-sans)!important;
  box-shadow:none!important;
}

body#contact #emailform input[type="text"],
body#contact #emailform input[type="email"],
body#contact #emailform input[type="tel"] { height:48px!important; }

body#contact #emailform textarea { min-height:180px!important;resize:vertical; }
body#contact #emailform input:focus,
body#contact #emailform textarea:focus { border-color:var(--tsc-blue)!important;outline:3px solid rgba(145,197,237,.45)!important;outline-offset:1px; }

body#contact #emailform #captcha { padding:20px 0 8px!important;overflow:hidden;text-align:center!important; }
body#contact #emailform .g-recaptcha { width:304px!important;max-width:100%;margin:0 auto!important;transform-origin:center top; }
body#contact #emailform #submitrow { padding-top:18px!important;text-align:center!important; }
body#contact #emailform #submitrow > a { display:inline-block!important;width:auto;max-width:100%;margin:0 auto!important;text-decoration:none!important; }

body#contact #submitemail {
  width:auto!important;
  min-width:150px;
  margin:0!important;
  padding:13px 25px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--tsc-blue)!important;
  color:#fff!important;
  font:700 14px/1.3 var(--tsc-sans)!important;
  letter-spacing:.06em;
  text-align:center!important;
  box-shadow:0 7px 18px rgba(25,43,109,.16);
}

body#contact #submitrow > a:hover #submitemail { background:var(--tsc-navy)!important; }

/* Map */
body#contact #contactsleftcolumn > img[src*="mapmarker"] { display:inline-block!important;width:auto!important;max-width:25px!important;height:auto!important;margin:0 7px 12px 0!important;vertical-align:middle; }
body#contact #contactsleftcolumn > iframe#googlemap { display:block!important;width:100%!important;max-width:none!important;height:360px!important;margin:10px 0 15px!important;border:1px solid var(--tsc-line)!important; }
body#contact #contactsleftcolumn > h3 { margin:0!important;padding:0!important;font:600 14px/1.5 var(--tsc-sans)!important; }
body#contact #contactsleftcolumn > .clearallclass { display:none!important; }

/* Opening times */
body#contact #contactspagerightcolumn {
  grid-area:hours;
  float:none!important;
  width:100%!important;
  margin:0!important;
  padding:24px 20px!important;
  border:1px solid var(--tsc-line)!important;
  border-top:5px solid var(--tsc-blue)!important;
  background:var(--tsc-pale)!important;
  box-shadow:0 9px 27px rgba(25,43,109,.06);
  text-align:center!important;
  display:grid!important;
  grid-template-columns:max-content max-content;
  justify-content:center;
  gap:0 28px;
}

body#contact #contactspagerightcolumn h1 {
  grid-column:1/-1;
  margin:0 0 18px!important;
  padding:0 0 13px!important;
  border-bottom:2px solid var(--tsc-sky)!important;
  color:var(--tsc-navy)!important;
  font:500 1.55rem/1.2 var(--tsc-serif)!important;
  text-align:center!important;
}

body#contact #contactspagerightcolumn p { margin:0 0 15px!important;padding:0!important;color:var(--tsc-muted)!important;font:500 15px/1.55 var(--tsc-sans)!important;text-align:center!important; }
body#contact #contactspagerightcolumn p.days { margin-bottom:15px!important;color:var(--tsc-navy)!important;font-weight:700!important;text-align:right!important; }
body#contact #contactspagerightcolumn p:not(.days) { text-align:left!important; }
body#contact #contactspagerightcolumn br { display:none!important; }
body#contact #clearall1 { display:none!important; }

/* Directions */
body#contact #directions {
  grid-area:directions;
  float:none!important;
  width:100%!important;
  margin:16px 0 0!important;
  padding:clamp(26px,4vw,40px)!important;
  border:1px solid var(--tsc-line)!important;
  border-top:5px solid var(--tsc-navy)!important;
  background:#fff!important;
  box-shadow:0 10px 30px rgba(25,43,109,.055);
}

body#contact #directions > h1 { margin:0 0 24px!important;padding:0!important;color:var(--tsc-navy)!important;font:500 clamp(1.8rem,3.5vw,2.6rem)/1.15 var(--tsc-serif)!important;text-align:left!important; }
body#contact #directions > h1 br { display:none!important; }
body#contact #directions > h2.indent20 { margin:20px 0 0!important;padding:18px 20px 8px!important;background:var(--tsc-pale)!important;color:var(--tsc-navy)!important;font:600 1.2rem/1.3 var(--tsc-serif)!important;text-align:left!important; }
body#contact #directions > p.indent20 { margin:0!important;padding:0 20px 20px!important;background:var(--tsc-pale)!important;color:var(--tsc-muted)!important;font:400 14px/1.7 var(--tsc-sans)!important;text-align:left!important; }
body#contact #directions > p.indent20 br:last-child { display:none!important; }

@media (max-width:760px) {
  body#contact > #container { width:calc(100% - 30px)!important;padding:36px 0 56px!important; }
  body#contact > #container > h1 { font-size:2.4rem!important; }
  body#contact > #container .contentfullwidth { grid-template-columns:1fr;grid-template-areas:'main' 'hours' 'directions';gap:20px; }
  body#contact #contactspagerightcolumn { display:grid!important;grid-template-columns:1fr 1fr;gap:0 16px; }
  body#contact #contactspagerightcolumn h1 { grid-column:1/-1; }
  body#contact #directions { margin-top:0!important;padding:24px 18px!important; }
}

@media (max-width:390px) {
  body#contact #contactsleftcolumn { padding:24px 16px!important; }
  body#contact form#thecontactform { padding-left:15px!important;padding-right:15px!important; }
  body#contact #emailform .g-recaptcha { transform:scale(.84);margin-bottom:-12px; }
  body#contact #contactspagerightcolumn { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  body#contact > #container *,body#contact > #container *::before,body#contact > #container *::after { transition:none!important; }
}