/* ============================================================
   AUTOTELIC OBJECTS — COMING SOON PATTERN STYLES
   Loaded on the site and inside the block editor (see functions.php),
   so the pattern looks the same while you edit it.
   Everything is scoped to .ao-coming-soon — it won't affect other pages.
============================================================ */

/* ---------- Fonts ----------
   Declared here so this file is self-contained: the pattern renders in the
   real typefaces whether or not style.css declares them. Paths are relative
   to this file, which sits in the theme root.

   Only two Futura weights exist: Light (300) and Regular (400), declared at
   their real weights. Tiempos Headline Medium is loaded for the heading only. */

@font-face {
  font-family: 'Futura LT';
  src: url('assets/fonts/futura-lt-regular.woff') format('woff'),
       url('assets/fonts/futura-lt-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Futura LT';
  src: url('assets/fonts/futura-lt-light.woff') format('woff'),
       url('assets/fonts/futura-lt-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tiempos Headline';
  src: url('assets/fonts/tiempos-headline-medium.woff') format('woff'),
       url('assets/fonts/tiempos-headline-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.ao-coming-soon {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: 0 clamp(24px, 4.5vw, 77px);
  background-color: #f7eded;
  color: #1a1a1a;
  font-family: 'Futura LT', sans-serif;
}

/* Storefront (a classic theme) makes WordPress add an extra
   <div class="wp-block-group__inner-container"> inside every Group block.
   That wrapper broke the centring grid. display: contents removes it from
   the layout, so the heading and text are laid out as intended. */
.ao-coming-soon .wp-block-group__inner-container {
  display: contents !important;
}

/* Stops the full-width breakout causing sideways scrolling */
body:has(.ao-coming-soon) {
  overflow-x: clip;
}

/* ---------- Background image: fixed, fits screen height ---------- */
/* !important so image settings changed in the editor can't override it */
.ao-coming-soon .ao-cs-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

.ao-coming-soon .ao-cs-bg img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: 0;
}

/* Phones and upright tablets: fit screen width instead */
@media (orientation: portrait) {
  .ao-coming-soon .ao-cs-bg img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ---------- Logo ---------- */
.ao-coming-soon .ao-cs-logo {
  position: absolute;
  top: clamp(32px, 7vh, 70px);
  left: clamp(24px, 4.5vw, 77px);
  z-index: 2;
  width: 183px;
  max-width: 45vw !important;
  margin: 0 !important;
}

.ao-coming-soon .ao-cs-logo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* ---------- Centred content ---------- */
.ao-coming-soon .ao-cs-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto 1fr;   /* equal space above and below the heading */
  justify-items: center;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0;
  text-align: center;
}

/* Everything under the heading */
.ao-coming-soon .ao-cs-lower {
  grid-row: 3;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(40px, calc(30vh - 150px), 147px) 0 clamp(16px, 4vh, 40px);
}

.ao-coming-soon .ao-cs-heading {
  grid-row: 2;
  align-self: center;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  font-family: 'Tiempos Headline', Georgia, 'Times New Roman', serif !important;
  font-weight: 500 !important;        /* Tiempos Headline Medium */
  font-size: clamp(1.75rem, 0.9rem + 2vw, 2.9rem);
  line-height: 1.12;
  /* Tiempos Headline is a display cut, already fitted tight — the negative
     tracking that suited Futura closes it up too far. */
  letter-spacing: 0;
  color: #1a1a1a;
  text-align: center;
}

.ao-coming-soon .ao-cs-text {
  align-self: center;
  width: 100%;
  max-width: 720px !important;
  margin: 0 auto clamp(24px, 4vh, 38px) !important;
  font-family: 'Futura LT', sans-serif;
  font-weight: 300;        /* Futura LT Light */
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #1a1a1a;
  text-align: center !important;
}

.ao-coming-soon .ao-cs-text a {
  color: inherit;
  text-decoration: none;
}

.ao-coming-soon .ao-cs-text a:hover,
.ao-coming-soon .ao-cs-text a:focus {
  text-decoration: underline;
}

/* Newsletter form width to match the reference */
.ao-coming-soon .newsletter-block {
  width: 100%;
  max-width: 525px;
}