/* Grays Point Preschool website styles.
   Sizes, colours and positions are copied from the old Wix site so the pages look the same.
   Desktop values are in px. Phone values use --u, which is 1/320th of the screen width
   (the old site laid phones out at 320px wide and scaled them up). */

:root {
  --green: #2a7c6f;       /* main text */
  --green-2: #298d74;     /* coloured sections, some headings */
  --green-3: #2c8d7e;     /* menu hover / current page */
  --cream: #fffefc;       /* page background */
  --avenir: Avenir, "Nunito Sans", "Avenir Next", sans-serif;
  --brandon: "Red Hat Display", "Avenir Next", sans-serif;
  --playfair: "Playfair Display", Georgia, serif;
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-width: 980px;
  background: var(--cream); color: var(--green);
  font-family: var(--avenir); font-weight: 300;
  font-size: 15px; line-height: 28.125px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; font-weight: 300; }
h1, h2 { font-family: var(--brandon); }
a { color: inherit; text-decoration: none; }
img { display: block; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 2000; background: var(--green); color: var(--cream); padding: 6px 12px; }

section, header, footer { position: relative; }
.clip { overflow: hidden; }
.cover { position: absolute; object-fit: cover; }

/* ===== Header ===== */
.hd { height: 266px; }
.hd-logo { position: absolute; top: 21px; left: 50%; margin-left: -40px; width: 80px; height: 80px; }
.hd-logo img { width: 100%; height: 100%; }
.hd-name {
  position: absolute; top: 113px; left: 0; right: 0; text-align: center;
  font-family: var(--brandon); font-weight: 300; font-size: 40px; line-height: 54px;
}
.hd-ack {
  position: absolute; top: 167px; left: 50%; width: 980px; margin-left: -490px;
  text-align: center; white-space: nowrap;
  font-family: var(--playfair); font-style: italic; font-weight: 400;
  font-size: 13px; line-height: 19px; letter-spacing: 0.08em;
}
.hd-line { position: absolute; top: 194px; left: 50%; margin-left: -470px; width: 940px; border-top: 1px solid rgba(42, 124, 111, 0.85); }
.hd-nav { position: absolute; top: 206px; left: 0; right: 0; }
.hd-nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.hd-nav a { display: block; padding: 0 10px; font-size: 14px; line-height: 30px; transition: color 0.4s ease; }
.hd-nav a:hover, .hd-nav a[aria-current="page"] { color: var(--green-3); }
.hb { display: none; }
.mnav { display: none; }

/* ===== Home ===== */
.hero { height: 980px; }
.hero img { left: 0; top: 0; width: 100%; height: 100%; will-change: transform; }
.hero h1 {
  position: absolute; top: 353px; left: 50%; width: 820px; margin-left: -410px;
  text-align: center; color: var(--cream); font-size: 72px; line-height: 90px;
}
.band { background: var(--green-2); color: var(--cream); }
.home-band { height: 720px; }
.home-band .txt { position: absolute; top: 120px; left: 50%; width: 780px; margin-left: -390px; text-align: center; }
.home-band h2 { font-size: 40px; line-height: 54px; }
.home-band .tagline { margin-top: 41px; font-size: 18px; line-height: 31.5px; }
.home-band .tagline + p { margin-top: 31px; }
.txt p + p { margin-top: 28.125px; }
.home-band .tagline + p { margin-top: 31px; }

.strip { height: 480px; background: var(--green); }
.strip img { left: 0; top: 0; width: 100%; height: 100%; opacity: 0.75; object-position: 50% 41.7%; }
.strip h2 {
  position: absolute; top: 182px; left: 50%; width: 940px; margin-left: -470px;
  text-align: center; color: var(--cream); font-size: 28px; line-height: 38.5px;
}
.pics { height: 1120px; }
.pics img { left: 50%; margin-left: -470px; width: 940px; height: 440px; }
.pics .i1 { top: 120px; }
.pics .i2 { top: 620px; }

/* ===== Footer ===== */
.ft { height: 160px; }
.ft p { position: absolute; top: 103px; left: calc(50% - 195px); width: 399px; text-align: center; font-size: 14px; line-height: 25px; }

/* ===== About ===== */
.ab-split { height: 740px; }
.ab-split img { left: 0; top: 0; width: 50%; height: 100%; object-position: 0% 50%; }
.ab-split .txt { position: absolute; top: 147px; left: calc(50% + 90px); width: 460px; }
.ab-split h1 { font-size: 40px; line-height: 54px; color: var(--green-2); }
.ab-split h1 + p { margin-top: 28px; }
.ab-band { height: 1700px; }
.ab-band .txt { position: absolute; top: 120px; left: 50%; width: 780px; margin-left: -470px; }
.ab-band h2 { font-size: 40px; line-height: 54px; }
.ab-band h2 + p { margin-top: 27px; }
.ab-band .robot { top: 1044px; left: 50%; margin-left: -470px; width: 940px; height: 540px; }

/* Photo strip */
.gal { height: 600px; }
.gal-track { height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-inner { position: relative; height: 100%; width: 3219px; }
.gal-inner a {
  position: absolute; overflow: hidden; cursor: pointer;
  left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
}
.gal-inner img { width: 100%; height: 100%; object-fit: cover; }
.gal-arrow {
  position: absolute; top: 50%; margin-top: -19.5px; width: 23px; height: 39px; padding: 0;
  border: 0; background: none; cursor: pointer; opacity: 0.9; color: var(--cream);
}
.gal-arrow svg { width: 100%; height: 100%; display: block; }
.gal-arrow.prev { left: 23px; }
.gal-arrow.next { right: 23px; }
.gal-arrow[hidden] { display: none; }

/* Full-screen photo viewer */
.viewer { position: fixed; inset: 0; z-index: 3000; background: var(--cream); display: none; }
.viewer.open { display: block; }
.viewer img { position: absolute; top: 91px; bottom: 91px; left: 90px; right: 90px; width: calc(100% - 180px); height: calc(100% - 182px); object-fit: contain; }
.viewer button { position: absolute; border: 0; background: none; padding: 0; cursor: pointer; color: var(--green); }
.viewer .v-close { top: 30px; right: 5px; width: 38px; height: 44px; }
.viewer .v-prev, .viewer .v-next { top: 50%; margin-top: -25px; width: 50px; height: 50px; }
.viewer .v-prev { left: 20px; }
.viewer .v-next { right: 20px; }
.viewer svg { width: 100%; height: 100%; display: block; }

/* ===== Opening hours ===== */
.oh-banner { height: 480px; }
.oh-banner img { left: 0; top: 0; width: 100%; height: 100%; }
.oh { height: 524px; }
.oh-col { position: absolute; top: 122px; width: 300px; }
.oh-col.c1 { left: calc(50% - 410px); }
.oh-col.c2 { left: calc(50% - 50px); width: 460px; }
.oh h1, .oh h2 { font-size: 22px; line-height: 31px; color: var(--green-2); }
.oh .big { font-size: 18px; line-height: 31.5px; margin-top: 50px; }
.oh .big + .big { margin-top: 0; }
.oh .note { margin-top: 32px; }
.oh .note + .note { margin-top: 28.125px; }

/* ===== Contact ===== */
.ct { height: 920px; }
.ct img.cover { left: 50%; top: 0; width: 50%; height: 100%; }
.ct .txt { position: absolute; top: 114px; left: 90px; width: 460px; text-align: center; }
.ct h1 { font-size: 40px; line-height: 54px; color: var(--green-2); letter-spacing: -0.02em; }
.ct .email { position: relative; left: -5px; }
.ct p a[target], .oh .note a { text-decoration: underline; text-underline-offset: 2px; }
.ct h1 + p { margin-top: 9px; }
.ct h1.second { margin-top: 95px; }
.ct h1.second + p { margin-top: 0; }
.ct .line { margin-top: 5px; }
.ct .fb { display: inline-block; margin-top: 23px; line-height: 26px; position: relative; left: -5px; vertical-align: top; }
.ct .fb img { display: block; width: 26px; height: 26px; object-fit: contain; }

/* Narrower laptop screens: keep the side-by-side text inside the window */
@media (min-width: 768px) and (max-width: 1199px) {
  .ab-split .txt { left: calc(50% + 40px); width: calc(50% - 60px); }
  .ct .txt { left: 40px; width: calc(50% - 80px); }
}

/* ===== Phones (old site's mobile layout, 320 units wide) ===== */
@media (max-width: 767px) {
  :root { --u: calc(100vw / 320); }
  body { min-width: 0; font-size: calc(15 * var(--u)); line-height: calc(28.125 * var(--u)); }

  .hd { height: calc(132 * var(--u)); }
  .hd-logo { top: calc(7 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin-left: calc(-20 * var(--u)); }
  .hd-name { top: calc(53 * var(--u)); left: calc(16 * var(--u)); right: auto; width: calc(271 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(27 * var(--u)); }
  .hd-ack { top: calc(86 * var(--u)); left: calc(9 * var(--u)); margin-left: 0; width: calc(300 * var(--u)); white-space: normal; text-align: left; font-size: calc(8 * var(--u)); line-height: calc(11.5 * var(--u)); }
  .hd-line { top: calc(115 * var(--u)); left: calc(10 * var(--u)); margin-left: 0; width: calc(300 * var(--u)); }
  .hd-nav { display: none; }

  .hb {
    display: block; position: absolute; z-index: 1001; top: calc(22 * var(--u)); left: calc(265 * var(--u));
    width: calc(40 * var(--u)); height: calc(40 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer;
  }
  .hb span {
    position: absolute; left: calc(9 * var(--u)); width: calc(22 * var(--u)); height: calc(2 * var(--u));
    border-radius: 2px; background: var(--green); transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
  }
  .hb span:nth-child(1) { top: calc(10 * var(--u)); }
  .hb span:nth-child(2) { top: calc(19 * var(--u)); }
  .hb span:nth-child(3) { top: calc(28 * var(--u)); }
  .menu-open .hb { position: fixed; }
  .menu-open .hb span:nth-child(1) { transform: translateY(calc(9 * var(--u))) rotate(45deg); }
  .menu-open .hb span:nth-child(2) { opacity: 0; }
  .menu-open .hb span:nth-child(3) { transform: translateY(calc(-9 * var(--u))) rotate(-45deg); }
  .menu-open { overflow: hidden; }

  .mnav { position: fixed; inset: 0; z-index: 1000; background: var(--cream); display: block; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
  .menu-open .mnav { opacity: 1; visibility: visible; }
  .mnav ul { list-style: none; margin: 0; padding: 0; position: absolute; top: calc(75 * var(--u)); left: calc(66 * var(--u)); width: calc(188 * var(--u)); }
  .mnav a { display: block; text-align: center; font-size: calc(20 * var(--u)); line-height: calc(50 * var(--u)); }
  .mnav a[aria-current="page"] { color: var(--green-2); }

  .hero { height: calc(980 * var(--u)); }
  .hero img { transform: none !important; }
  .hero h1 { top: calc(352 * var(--u)); left: 0; margin-left: 0; width: 100%; padding: 0 calc(3 * var(--u)); box-sizing: border-box; font-size: calc(41 * var(--u)); line-height: calc(51.25 * var(--u)); }

  .home-band { height: calc(900 * var(--u)); }
  .home-band .txt { top: calc(45 * var(--u)); left: 0; margin-left: 0; width: 100%; }
  .home-band h2 { font-size: calc(30 * var(--u)); line-height: calc(40.5 * var(--u)); }
  .home-band h2, .home-band .tagline { position: relative; left: calc(-5 * var(--u)); }
  .home-band .tagline { margin-top: calc(22 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(31.5 * var(--u)); }
  .home-band .tagline + p { margin-top: calc(22 * var(--u)); }
  .txt p + p { margin-top: calc(28.125 * var(--u)); }

  .strip { height: calc(485 * var(--u)); }
  .strip h2 { top: calc(185 * var(--u)); left: 0; margin-left: 0; width: 100%; padding: 0 calc(4 * var(--u)); box-sizing: border-box; font-size: calc(26 * var(--u)); line-height: calc(35.75 * var(--u)); }
  .pics { height: calc(1240 * var(--u)); }
  .pics img { left: 0; margin-left: 0; width: 100%; height: calc(440 * var(--u)); }
  .pics .i1 { top: calc(120 * var(--u)); }
  .pics .i2 { top: calc(680 * var(--u)); }

  .ft { height: calc(100 * var(--u)); }
  .ft p { top: calc(39 * var(--u)); left: calc(10 * var(--u)); width: calc(300 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(21.5 * var(--u)); }
  .strip img { object-position: 23% 50%; }

  .ab-split { height: auto; }
  .ab-split img { position: static; width: 100%; height: auto; aspect-ratio: 1600 / 1193; }
  .ab-split .txt { position: static; width: auto; padding: calc(54 * var(--u)) calc(8 * var(--u)) calc(77 * var(--u)) calc(6 * var(--u)); }
  .ab-split h1 { width: calc(282 * var(--u)); font-size: calc(30 * var(--u)); line-height: calc(40.5 * var(--u)); }
  .ab-split h1 + p { margin-top: calc(29 * var(--u)); }
  .ab-band { height: calc(2311 * var(--u)); }
  .ab-band .txt { top: calc(120 * var(--u)); left: calc(20 * var(--u)); margin-left: 0; width: calc(282 * var(--u)); }
  .ab-band h2 { font-size: calc(30 * var(--u)); line-height: calc(40.5 * var(--u)); }
  .ab-band h2 + p { margin-top: calc(27 * var(--u)); }
  .ab-band .robot { top: calc(1737 * var(--u)); left: 0; margin-left: 0; width: 100%; height: calc(540 * var(--u)); }

  .gal { height: calc(600 * var(--u)); }
  .gal-inner { width: calc(3216 * var(--u)); }
  .gal-inner a { left: calc(var(--mx) * var(--u)); top: calc(var(--my) * var(--u)); width: calc(var(--mw) * var(--u)); height: calc(var(--mh) * var(--u)); }
  .gal-arrow { width: calc(23 * var(--u)); height: calc(39 * var(--u)); margin-top: calc(-19.5 * var(--u)); }
  .gal-arrow.prev { left: calc(23 * var(--u)); }
  .gal-arrow.next { right: calc(23 * var(--u)); }
  .viewer img { top: 70px; bottom: 70px; left: 10px; right: 10px; width: calc(100% - 20px); height: calc(100% - 140px); }
  .viewer .v-prev { left: 0; }
  .viewer .v-next { right: 0; }
  .viewer .v-prev, .viewer .v-next { top: auto; bottom: 10px; margin-top: 0; }

  .oh-banner { height: calc(480 * var(--u)); }
  .oh { height: calc(704 * var(--u)); padding: calc(18 * var(--u)) 0 0 calc(16 * var(--u)); box-sizing: border-box; }
  .oh-col, .oh-col.c1, .oh-col.c2 { position: static; width: calc(300 * var(--u)); }
  .oh .note + .note { margin-top: calc(28.125 * var(--u)); }
  .oh h1, .oh h2 { font-size: calc(22 * var(--u)); line-height: calc(31 * var(--u)); }
  .oh .big { font-size: calc(18 * var(--u)); line-height: calc(31.5 * var(--u)); margin-top: calc(9 * var(--u)); }
  .oh .c2 { margin-top: calc(14.5 * var(--u)); }
  .oh .c2 .big { margin-top: 0; }
  .oh .note { margin-top: calc(8.5 * var(--u)); padding-left: calc(4 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28.125 * var(--u)); }

  .ct { height: auto; padding-bottom: calc(70 * var(--u)); }
  .ct img.cover { position: static; margin-top: calc(27 * var(--u)); width: 100%; height: auto; aspect-ratio: 1600 / 1197; }
  .ct .txt { position: static; margin-top: calc(17 * var(--u)); width: 100%; }
  .ct h1 { font-size: calc(30 * var(--u)); line-height: calc(40.5 * var(--u)); }
  .ct h1 + p { margin-top: 0; }
  .ct h1.second { margin-top: calc(17 * var(--u)); }
  .ct h1.second + p { margin-top: calc(13 * var(--u)); }
  .ct .line { margin-top: 0; position: relative; left: calc(-4 * var(--u)); }
  .ct .fb { margin-top: calc(11 * var(--u)); line-height: calc(26 * var(--u)); left: calc(-4 * var(--u)); }
  .ct .fb img { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
}