/*
Theme Name: Margot's
Author: Netphobia
Description: WordPress theme for Margot's Reigate, including an assignable Holding Page template.
Version: 2.0.1
Text Domain: margots
*/

:root {
  --blue: #A6BBB9;
  --blue-deep: #95AEAC;
  --burgundy: #4E1D12;
  --burgundy-dark: #38140C;
  --paper: #FBFAEE;
  --sand: #E7E3C6;
  --ink: #4E1D12;
  --line: rgba(78, 29, 18, 0.18);
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--blue);
  color: var(--burgundy);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
button, input, textarea, select { font: inherit; }
a { color: inherit; }

.site-shell {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
}
.optional { font-weight: normal; font-style: italic; }
.standard-header {
  padding: 30px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
}

.standard-header .brand-wordmark {
  display: inline-block;
  line-height: 0;
}

.standard-header .brand-wordmark img {
  display: block;
  width: clamp(190px, 24vw, 280px);
  height: auto;
}

.standard-nav {
  margin-top: 22px;
}

.standard-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  padding: 0;
  margin: 0;
}

.standard-nav a {
  color: var(--burgundy);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 700;
}

.standard-nav a:hover,
.standard-nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.standard-content {
  width: min(calc(100% - 48px), 820px);
  margin: 0 auto;
  padding: clamp(70px, 10vh, 120px) 0 100px;
  color: var(--burgundy);
}

.standard-content article {
  text-align: left;
}

.standard-content h1,
.standard-content h2,
.standard-content h3,
.standard-content h4,
.standard-content h5,
.standard-content h6 {
  color: var(--burgundy);
  font-family: Iowan Old Style, Baskerville, Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
}

.standard-content h1 {
  margin: 0 0 34px;
  font-size: clamp(3rem, 7vw, 5.8rem);
}

.standard-content h2 {
  margin: 2.2em 0 .7em;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.standard-content h3 {
  margin: 2em 0 .65em;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.standard-content .entry-content {
  font-size: 1rem;
  line-height: 1.75;
}

.standard-content .entry-content > :first-child {
  margin-top: 0;
}

.standard-content .entry-content > :last-child {
  margin-bottom: 0;
}

.standard-content p,
.standard-content li {
  color: var(--burgundy);
}

.standard-content a {
  color: var(--burgundy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.standard-content a:hover,
.standard-content a:focus-visible {
  text-decoration-thickness: 2px;
}

.standard-content blockquote {
  margin: 2em 0;
  padding: 0 0 0 22px;
  border-left: 1px solid rgba(78,29,18,.4);
  font-family: Iowan Old Style, Baskerville, Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
}

.standard-content input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.standard-content textarea,
.standard-content select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(78,29,18,.6);
  border-radius: 0;
  background: transparent;
  color: var(--burgundy);
  padding: 12px 2px;
}

.standard-content button,
.standard-content input[type="submit"],
.standard-content .wp-element-button {
  border: 1px solid var(--burgundy);
  border-radius: 999px;
  background: var(--burgundy);
  color: var(--paper);
  padding: 13px 24px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.standard-content hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 42px 0;
}

.standard-footer {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding: 24px 0 30px;
  color: var(--burgundy);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Holding Page */
body.page-template-template-holding-page {
  background: var(--blue);
}

.holding-page {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 15%, rgba(251,250,238,.28), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}

.holding-page .site-header {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 30px 0 0;
  display: flex;
  justify-content: center;
}
.brand-wordmark {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
}
.holding-page .brand-wordmark img {
  display: block;
  width: clamp(190px, 24vw, 280px);
  height: auto;
}

.hero {
  width: min(calc(100% - 48px), 900px);
  min-height: 77vh;
  margin: 0 auto;
  padding: clamp(60px, 10vh, 120px) 0 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.eyes-wrap {
  width: min(500px, 78vw);
  margin-bottom: 44px;
}
.eyes-gif {
  display: block;
  width: 100%;
  height: auto;
}
.eyebrow,
.section-kicker {
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .72rem;
  font-weight: 700;
}
.hero h1,
.form-copy h2 {
  margin: 0;
  font-family: Iowan Old Style, Baskerville, Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.045em;
}
.hero h1 {
  font-size: clamp(3.4rem, 9vw, 7.3rem);
  max-width: 820px;
}
.holding-page-content {
  width: min(100%, 620px);
  margin: 28px auto 0;
  font-family: Iowan Old Style, Baskerville, Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
}
.holding-page-content > :first-child { margin-top: 0; }
.holding-page-content > :last-child { margin-bottom: 0; }
.opening {
  margin: 24px 0 34px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 700;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--burgundy);
  border-radius: 999px;
  padding: 14px 24px;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  font-weight: 700;
  text-decoration: none;
}
.button:hover { transform: translateY(-1px); }
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(78, 29, 18, .22);
  outline-offset: 4px;
}
.button-primary {
  background: var(--burgundy);
  color: var(--paper);
}
.button-primary:hover { background: var(--burgundy-dark); }

.reveal-panel { width: 100%; margin-top: 58px; }
.reveal-panel[hidden] { display: none; }
.form-card {
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 50px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(36px, 7vw, 88px);
}
.form-copy h2 { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.form-copy p:last-child { max-width: 390px; }

/* Contact Form 7 integration */
.membership-form .wpcf7 { width: 100%; }
.membership-form .wpcf7 p { margin: 0 0 18px; }
.membership-form .wpcf7 label {
  display: block;
  font-size: .88rem;
  font-weight: 700;
}
.membership-form .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.membership-form .wpcf7 textarea,
.membership-form .wpcf7 select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(78,29,18,.6);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 12px 2px;
  margin-top: 8px;
}
.membership-form .wpcf7 textarea { resize: vertical; }
.membership-form .wpcf7 input[type="checkbox"],
.membership-form .wpcf7 input[type="radio"] { accent-color: var(--burgundy); }
.membership-form .wpcf7 input[type="submit"] {
  appearance: none;
  border: 1px solid var(--burgundy);
  border-radius: 999px;
  background: var(--burgundy);
  color: var(--paper);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 13px 24px;
}
.membership-form .wpcf7 input[type="submit"]:hover,
.membership-form .wpcf7 input[type="submit"]:focus-visible {
  background: var(--burgundy-dark);
}
.membership-form .wpcf7-not-valid-tip,
.membership-form .wpcf7-response-output { font-size: .85rem; }
.form-unavailable { margin: 0; }

.contact-details {
  width: min(calc(100% - 48px), 900px);
  margin: 0 auto;
  padding: 72px 0 64px;
  text-align: center;
}
.contact-details .section-kicker { margin-bottom: 14px; }
.contact-address,
.contact-email {
  margin: 0;
  line-height: 1.6;
}
.contact-email { margin-top: 12px; }
.contact-email a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.contact-email a:hover,
.contact-email a:focus-visible { text-decoration-thickness: 2px; }

.holding-page .site-footer {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 24px 0 30px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.holding-page .site-footer nav { display: flex; gap: 18px; align-items: center; }
.holding-page .site-footer a { text-decoration: none; }
.holding-page .site-footer a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .standard-header {
    padding-top: 22px;
    flex-direction: column;
  }
  .standard-nav {
    margin-top: 14px;
  }
  .standard-nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  .holding-page .site-header { padding-top: 22px; }
  .hero {
    min-height: auto;
    padding-top: 56px;
    padding-bottom: 78px;
  }
  .eyes-wrap {
    width: min(420px, 82vw);
    margin-bottom: 30px;
  }
  .form-card { grid-template-columns: 1fr; }
  .holding-page .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}