@import url("webfonts.css");

/* ============================================================================
   Santa Cruz Passages — design system extracted from the live Wix site
   Source: https://planetweaver.wixsite.com/santa-cruz-passages
   Captured: 2026-09-01

   Every value below was read from the rendered page (computed styles), not
   guessed. Wix's own token names are preserved as `scp-font-*` / `scp-color-*`
   so the migrated markup keeps a 1:1 relationship with the original.

   The original is a fixed 980px Wix canvas; this reproduces its typography,
   colour and chrome exactly, and makes the canvas fluid below 980px so the
   result is usable on phones (the Wix original merely scales down).
   ========================================================================= */

:root {
  /* -- type stacks (Wix's CJK fallbacks dropped; both are system fonts) -- */
  --scp-serif: georgia, palatino, "book antiqua", "palatino linotype", serif;
  --scp-sans:  arial, helvetica, sans-serif;

  /* -- palette, verbatim from the Wix theme -- */
  --scp-color-0:  rgb(255, 255, 255);
  --scp-color-1:  rgb(0, 0, 0);
  --scp-color-3:  rgb(253, 254, 253);
  --scp-color-5:  rgb(0, 136, 203);   /* button blue            */
  --scp-color-6:  rgb(255, 255, 255);
  --scp-color-16: rgb(50, 50, 50);
  --scp-color-17: rgb(101, 101, 101);
  --scp-color-28: rgb(214, 134, 36);  /* home CTA amber         */
  --scp-color-31: rgb(60, 52, 30);
  --scp-color-32: rgb(121, 105, 60);
  --scp-color-36: rgb(61, 44, 42);
  --scp-color-39: rgb(185, 133, 128);
  --scp-color-42: rgb(137, 92, 60);   /* warm brown, body accent*/
  --scp-color-44: rgb(71, 44, 12);
  --scp-color-45: rgb(254, 253, 253); /* near-white body text   */
  --scp-color-46: rgb(254, 253, 253);

  --scp-canvas: 980px;                /* original Wix canvas width */
}

/* ---------------------------------------------------------------- canvas */
.scp-page {
  position: relative;
  font-family: var(--scp-serif);
  font-size: 15px;
  line-height: 1.4em;
  color: var(--scp-color-45);
  background-color: #2b2b2b;          /* shows through while the photo loads */
}
.scp-page__bg {                        /* full-bleed section photograph */
  position: absolute;
  inset: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
.scp-page__inner {
  position: relative;
  z-index: 1;
  max-width: var(--scp-canvas);
  margin: 0 auto;
  padding: 40px 20px 60px;
}

/* per-section background photographs (see media-manifest.csv) */
.scp-bg--weddings     { background-image: url("../media/wp-uploads/section-bg-weddings-beach-stones.jpg"); }
.scp-bg--spirit-songs { background-image: url("../media/wp-uploads/section-bg-spirit-songs-corrina.jpg"); }
.scp-bg--breakthrough { background-image: url("../media/wp-uploads/section-bg-breakthrough-sunlit-water.jpg"); }
.scp-bg--home         { background-image: url("../media/wp-uploads/home-01.jpg"); }

/* ------------------------------------------------------------ typography */
.scp-page p { margin: 0 0 1em; }   /* flow variant keeps normal document rhythm */

/* Each Wix font token also carries a default colour. Text that needs a
   different colour wears an additional scp-color-* class, which wins. */
.scp-font-0  { font-family: var(--scp-sans);  font-size: 30px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-1  { font-family: var(--scp-serif); font-size: 13px; line-height: 1.4em; color: rgb(247, 178, 170); }
.scp-font-2  { font-family: var(--scp-serif); font-size: 33px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-3  { font-family: var(--scp-serif); font-size: 40px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-4  { font-family: var(--scp-serif); font-size: 35px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-5  { font-family: var(--scp-sans);  font-size: 30px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-6  { font-family: var(--scp-sans);  font-size: 21px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-7  { font-family: var(--scp-serif); font-size: 16px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-8  { font-family: var(--scp-serif); font-size: 15px; line-height: 1.4em; color: var(--scp-color-45); }
.scp-font-9  { font-family: var(--scp-serif); font-size: 11px; line-height: 1.4em; color: var(--scp-color-0); }
.scp-font-10 { font-family: var(--scp-sans);  font-size:  9px; line-height: 1.4em; color: var(--scp-color-45); }

.scp-color-1  { color: var(--scp-color-1); }
.scp-color-3  { color: var(--scp-color-3); }
.scp-color-5  { color: var(--scp-color-5); }
.scp-color-6  { color: var(--scp-color-6); }
.scp-color-16 { color: var(--scp-color-16); }
.scp-color-17 { color: var(--scp-color-17); }
.scp-color-28 { color: var(--scp-color-28); }
.scp-color-31 { color: var(--scp-color-31); }
.scp-color-32 { color: var(--scp-color-32); }
.scp-color-36 { color: var(--scp-color-36); }
.scp-color-39 { color: var(--scp-color-39); }
.scp-color-42 { color: var(--scp-color-42); }
.scp-color-44 { color: var(--scp-color-44); }
.scp-color-45 { color: var(--scp-color-45); }
.scp-color-46 { color: var(--scp-color-46); }

/* Wix's .bold / .italic / .underline classes are inert on the original site
   (measured: font-weight 400, font-style normal). Emphasis there comes from
   real <strong>/<em> tags and inline styles, which the markup keeps.
   Deliberately not re-implemented. */

/* Wix's align* classes are inert on the original site (they all compute to
   text-align:start); real alignment arrives as an inline style, which the
   converted markup preserves. Deliberately not re-implemented here. */

/* --------------------------------------------------------------- buttons */
.scp-button {
  display: inline-block;
  min-width: 165px;
  padding: 3px 10px;
  font-family: var(--scp-serif);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  text-decoration: none;
  color: var(--scp-color-3);
  background-color: rgba(0, 136, 203, .77);
  border: 1px solid var(--scp-color-3);
  border-radius: 0;
  margin: 0 6px 10px 0;
  transition: background-color .15s ease;
}
.scp-button:hover,
.scp-button:focus-visible { background-color: rgba(0, 136, 203, .92); color: var(--scp-color-3); }

/* the homepage splash uses the amber CTA instead of the blue one */
.scp-page--home .scp-button {
  background-color: rgba(214, 134, 36, .9);
  border: 0;
  min-width: 259px;
  padding: 7px 10px;
}
.scp-page--home .scp-button:hover { background-color: rgba(214, 134, 36, 1); }

/* ---------------------------------------------------------------- images */
.scp-image { margin: 0 0 16px; }
.scp-image img { display: block; max-width: 100%; height: auto; }
.scp-image figcaption {
  font-family: var(--scp-serif);
  font-size: 11px;
  color: var(--scp-color-45);
  padding-top: 6px;
}

.scp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
.scp-gallery__item { margin: 0; }
.scp-gallery__item img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
}

/* ----------------------------------------------------------------- rules */
.scp-rule {
  border: 0;
  border-top: 1px solid var(--scp-color-45);
  opacity: .6;
  margin: 18px 0;
}

/* ------------------------------------------------------------ form stub  */
.scp-form-placeholder {
  border: 1px dashed var(--scp-color-45);
  padding: 14px;
  font-family: var(--scp-sans);
  font-size: 12px;
  opacity: .85;
}

/* a link Wix rendered without an href — target lost, see migration-notes.md */
.scp-link-missing { text-decoration: underline dotted; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1020px) {
  .scp-page__inner { padding: 28px 16px 48px; }
}
@media (max-width: 600px) {
  .scp-page { font-size: 16px; }        /* 15px is below comfortable on phones */
  .scp-font-8 { font-size: 16px; }
  .scp-font-7 { font-size: 17px; }
  .scp-button { display: block; min-width: 0; width: 100%; margin-right: 0; }
  .scp-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ============================================================================
   FIXED-CANVAS LAYOUT  (pages only — blog posts use the flow styles above)

   Wix positions every element absolutely on a 980px canvas. These rules
   reproduce that canvas exactly, so desktop rendering is pixel-for-pixel.
   The canvas never shrinks: in a window narrower than 980px the page scrolls
   sideways and keeps its full height, exactly as the original Wix site does
   (measured at 900px and 600px: document width 980, height unchanged).
   ========================================================================= */
.scp-canvas-wrap {
  position: relative;
  width: 100%;
  min-width: 980px;                   /* narrower windows scroll, never scale */
  overflow: hidden;
  background: #2b2b2b;
  height: var(--scp-h, 1000px);       /* set inline, per page */
}
.scp-canvas-bg {
  position: absolute; inset: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
.scp-canvas {
  position: relative;
  width: 980px;
  height: var(--scp-h, auto);
  /* Centred in wide windows; in narrow ones the wrapper is min-width 980px,
     so the canvas sits at x=0 and the browser scrolls -- as on Wix. */
  margin: 0 auto;
  z-index: 1;
}
.scp-c { position: absolute; box-sizing: border-box; margin: 0; }
.scp-c--panel  { pointer-events: none; }
.scp-c--text   { font-family: var(--scp-serif); font-size: 15px; line-height: 1.4em; }
/* Wix renders every paragraph with margin:0 - vertical rhythm comes from
   deliberately empty paragraphs in the copy, which are preserved. Adding a
   margin here would push text out of its measured box. */
.scp-c--text p,
.scp-c--text h1, .scp-c--text h2, .scp-c--text h3,
.scp-c--text h4, .scp-c--text h5, .scp-c--text h6 { margin: 0; }
.scp-c--image img { display: block; }
.scp-c--btn {
  display: block; text-align: center; text-decoration: none;
  box-sizing: border-box; transition: filter .15s ease;
}
.scp-c--btn:hover { filter: brightness(1.12); }
.scp-c--line   { height: 0; }
.scp-c--gitem  { position: absolute; margin: 0; }
.scp-c--form   { display: flex; flex-direction: column; gap: 6px; font-family: var(--scp-sans); font-size: 12px; }
.scp-c--form label { display: flex; flex-direction: column; gap: 2px; color: var(--scp-color-45); }
.scp-c--form input { padding: 4px 6px; border: 1px solid rgba(0,0,0,.25); font: inherit; }
.scp-c--form button { align-self: flex-start; padding: 5px 14px; font: inherit; cursor: pointer; }

/* embedded players (YouTube / SoundCloud) */
.scp-c--embed { overflow: hidden; background: #000; }
.scp-c--embed iframe { display: block; }

/* ============================================================================
   Corrections — measured against the live site, 3 September 2026

   Four rendering defects found by comparing computed styles and rendered box
   geometry, element by element, against the original. All four are scoped to
   `.scp-canvas` / `.scp-c--*`, so the flowing `content/` variant is untouched.
   ========================================================================= */

/* 1. Headings rendered bold. The .scp-font-* classes set family, size,
      line-height and colour but never font-weight, so the browser's default
      `h1-h6 { bold }` came through. Every heading on the original computes
      400 / line-height normal (checked: all 4 that exist site-wide). Real
      emphasis still comes from <strong>/<em>/inline styles -- the same
      reasoning as note 12 about Wix's inert .bold class. */
.scp-canvas :is(h1, h2, h3, h4, h5, h6) { font-weight: 400; line-height: normal; }

/* 2. .scp-font-* bakes in line-height:1.4em, but the original only applies
      that where the markup carries it as an inline style (9 of 16 elements on
      wedding-home); elsewhere it computes `normal`. The class-level value
      inflated the rest -- one testimonial paragraph rendered 264px against the
      original's 197px. Inline line-height still wins where it is preserved. */
.scp-canvas [class*="scp-font-"] { line-height: normal; }

/* 3. Line-box strut. .scp-c--text sets 15px/1.4em, which paragraphs inherit as
      a fixed 21px. Where an inner span sets something smaller (.scp-font-9 at
      11px/15.4px) the 21px strut wins and every line box inflates: testimonial
      blocks came out 75px against the original's 58px, a 29% overrun that
      pushes text past its measured box. The original gives the paragraph a
      neutral 10px/normal strut so the inline spans always govern. Applied only
      where the paragraph carries its own sizing -- the 92 span-less
      paragraphs still need the 15px default. */
.scp-c--text p:has([class*="scp-font-"]) { font-size: 10px; line-height: normal; }

/* 4. The contact form placeholder used the sans stack at 12px. Measured on the
      original: labels Georgia 15px black, submit Georgia 16px near-white on the
      site blue. (The form still needs a real form plugin -- see note 4.) */
.scp-c--form        { font-family: var(--scp-serif); font-size: 15px; }
.scp-c--form label  { color: var(--scp-color-1); }
.scp-c--form button { font-family: var(--scp-serif); font-size: 16px;
                      color: var(--scp-color-45); background: rgba(0, 136, 203, .77);
                      border: 1px solid var(--scp-color-3); }

/* ============================================================================
   Mobile canvas — ported from the Wix mobile site, 3 September 2026

   Wix serves phones a completely separate design: a fixed 320px canvas with
   content stacked vertically and phone-sized type, not the desktop canvas
   scaled down. Both canvases ship in the page; this stylesheet picks one.

   Two departures from the original, deliberately:
     - the ~300px empty band under the Wix banner is gone (content is
       re-origined to the first real component)
     - components that Wix's auto-layout dropped on top of each other are
       separated -- on the home page the CTA buttons sat over the photographs
       and truncated
   ========================================================================= */

.scp-mcanvas-wrap { display: none; }

.scp-mcanvas-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* The mobile pages have a plain white page background -- measured on all
     four sampled pages. The desktop canvas sits on #2b2b2b because a
     full-bleed photograph covers it; mobile has no such photograph. */
  background: #fff;
  height: calc(var(--scp-mh, 1000px) * var(--scp-mscale, 1));
}
.scp-mcanvas-bg {
  position: absolute; inset: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}
.scp-mcanvas {
  position: relative;
  width: 320px;
  height: var(--scp-mh, auto);
  left: 50%;
  margin-left: -160px;
  transform-origin: top center;
  transform: scale(var(--scp-mscale, 1));
  z-index: 1;
}

.scp-mc          { position: absolute; box-sizing: border-box; margin: 0; }
.scp-mc--image   { overflow: hidden; }
.scp-mc--panel   { pointer-events: none; }
.scp-mc--embed   { overflow: hidden; background: #000; }
.scp-mc--embed iframe { display: block; }
.scp-mc--btn     { display: flex; align-items: center; justify-content: center;
                   text-align: center; text-decoration: none;
                   font-family: var(--scp-serif); font-size: 13px;
                   transition: filter .15s ease; }
.scp-mc--btn:hover { filter: brightness(1.12); }
.scp-mc--text    { font-family: var(--scp-serif); }
.scp-mc--text p, .scp-mc--text h1, .scp-mc--text h2, .scp-mc--text h3,
.scp-mc--text h4, .scp-mc--text h5, .scp-mc--text h6 {
  margin: 0; font-weight: inherit; font-size: inherit;
  line-height: inherit; color: inherit;
}

/* Below the breakpoint: hide the 980px canvas, show the 320px one and scale it
   up to the viewport. Capped at 1.5 so a small tablet does not get a comically
   magnified phone layout. */
:root { --scp-mscale: 1; }
@media (max-width: 767px) {
  .scp-canvas-wrap  { display: none; }
  .scp-mcanvas-wrap { display: block; }
}
/* Stepped rather than fluid: `calc(100vw / 320)` yields a length, which cannot
   be compared against a unitless cap in min(), so the whole declaration is
   invalid and silently falls back to 1. Steps approximate viewport/320,
   capped at 1.5 so a small tablet does not get a magnified phone layout.
   Narrowest last so it wins. */
@media (max-width: 767px) { :root { --scp-mscale: 1.50; } }  /* 480..767 */
@media (max-width: 479px) { :root { --scp-mscale: 1.34; } }  /* 431..479 */
@media (max-width: 430px) { :root { --scp-mscale: 1.29; } }  /* 414..430 */
@media (max-width: 413px) { :root { --scp-mscale: 1.25; } }  /* 401..413 */
@media (max-width: 400px) { :root { --scp-mscale: 1.21; } }  /* 390..400 */
@media (max-width: 389px) { :root { --scp-mscale: 1.17; } }  /* 375..389 */
@media (max-width: 374px) { :root { --scp-mscale: 1.12; } }  /* 360..374 */
@media (max-width: 359px) { :root { --scp-mscale: 1.00; } }  /* ..359     */