/* ===========================================================================
   No1 Princess — Locations / Map page (Figma 425-1151)
   Layered on home.css (tokens + shared nav/drawer/form/footer).
   Sizes follow the 1512px Figma frame and scale down with the viewport.
   =========================================================================== */

.np-loc-page { background: var(--c-dark); }

/* Nav colour variant (dark/"ink") is handled centrally by header.php/header.css. */

/* ---- Locations section (cream, rounded bottom) ------------------------ */
.np-loc {
  background: var(--c-cream);
  color: var(--c-dark);
  padding-top: clamp(118px, 10.8vw, 163px);
  padding-bottom: clamp(64px, 15.9vw, 240px);
  border-radius: 0 0 clamp(28px, 3.84vw, 58px) clamp(28px, 3.84vw, 58px);
}
.np-loc__title {
  font-family: var(--font-display); font-weight: 400; text-align: center;
  font-size: clamp(54px, 8.47vw, 128px); line-height: 1; letter-spacing: -0.1em;
  text-transform: uppercase; margin: 0;
}

/* ---- The location: name, phone, live map ------------------------------- */
.np-loc__place { margin-top: clamp(40px, 6vw, 91px); }
.np-loc__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 3.77vw, 57px); line-height: 0.81; letter-spacing: -0.1em;
  text-transform: uppercase; margin: 0;
}
.np-loc__phone {
  margin: 20px 0 0; text-align: center;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(16px, 1.32vw, 20px); line-height: 1.6;
}
.np-loc__phone a { color: inherit; transition: color .2s ease; }
.np-loc__phone a:hover { color: var(--c-red); }

/* Figma: a 1380 x 770 map box, square corners. The embed centres on its pin,
   so the iframe is oversized and offset to put the pin where the design has
   it (47% across, 21% down) — which also keeps Google's info card (top-left
   of the embed) out of view. The zoom controls land in the bottom-right. */
.np-loc__map {
  position: relative; overflow: hidden;
  margin-top: 16px;
  aspect-ratio: 1380 / 770; min-height: 360px;
  background: #e5e3df;
}
.np-loc__map-frame {
  position: absolute; left: -6%; top: -58%;
  width: 106%; height: 158%;
  max-width: none; /* the theme caps iframes at 100%, which left a grey strip */
  border: 0; display: block;
}