/*
Theme Name: Second Exodus
Theme URI: https://secondexodus.com
Author: Built for Second Exodus Worship
Description: A block theme for Second Exodus Worship. Deep ocean and gold, built around live photography, with a booking-first homepage. All content is edited with core blocks — no page builder required.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: second-exodus
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-logo, wide-blocks
*/

/* ==========================================================================
   Notes for whoever maintains this later
   --------------------------------------------------------------------------
   Colours, fonts, spacing and heading styles all live in theme.json, NOT here.
   Change those in Appearance > Editor > Styles, or by editing theme.json.
   This file only holds the handful of components that theme.json can't
   describe: gradient scrims, the video play button, and the bordered grid.
   ========================================================================== */

:root {
  --se-line: rgba(212, 163, 67, 0.28);
}

body { -webkit-font-smoothing: antialiased; }

/* --- Sticky header ------------------------------------------------------ */
.se-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(4, 34, 44, 0.93);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--se-line);
}
.se-header .wp-block-navigation { font-size: 0.9rem; }
.se-header .wp-block-navigation a { color: var(--wp--preset--color--muted); text-decoration: none; }
.se-header .wp-block-navigation a:hover { color: var(--wp--preset--color--gold-light); }
.se-mark img { width: 25px; height: auto; }

/* --- Hero --------------------------------------------------------------- */
/* Replaces the Cover block's flat dim with a directional scrim so the text
   stays readable on the left while the photo stays bright on the right. */
.se-hero .wp-block-cover__background {
  background: linear-gradient(to right, rgba(4,34,44,.93) 0%, rgba(4,34,44,.55) 42%, rgba(4,34,44,.12) 72%),
              linear-gradient(to top, rgba(4,34,44,.85), rgba(4,34,44,0) 45%) !important;
  opacity: 1 !important;
}
.se-hero .wp-block-cover__image-background { object-position: 50% 42%; }

/* Outline buttons: gold hairline on the dark palette. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--gold-light);
  border: 1px solid var(--wp--preset--color--gold);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: rgba(212,163,67,.13);
  color: var(--wp--preset--color--gold-light);
}
.se-hero .wp-block-cover__inner-container { width: 100%; }

/* Logo sits as its own layer over the photo, so it never gets cropped with it. */
.se-hero-logo { margin: 0; }
.se-hero-logo img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

@media (max-width: 900px) {
  .se-hero { min-height: 74vh !important; }
  .se-hero-logo img { max-width: 172px; }
  .se-hero .wp-block-cover__image-background { object-position: 55% 40%; }
  .se-hero .wp-block-cover__background {
    background: linear-gradient(to top, rgba(4,34,44,.95) 22%, rgba(4,34,44,.3) 70%) !important;
  }
}

/* --- Section rules ------------------------------------------------------ */
.se-section { border-top: 1px solid rgba(212,163,67,0.16); }

/* --- Portrait ----------------------------------------------------------- */
/* The About portrait is a pre-masked circle with its own gold ring, so it
   needs no frame here — just sizing. */
.se-portrait img { width: 100%; height: auto; }

/* --- Name credits ------------------------------------------------------- */
.se-names { display: flex; gap: 38px; flex-wrap: wrap; }
.se-names > * { border-left: 2px solid var(--wp--preset--color--gold); padding-left: 15px; }
.se-names strong {
  display: block;
  font-family: var(--wp--preset--font-family--cinzel);
  color: var(--wp--preset--color--gold-light);
  letter-spacing: 0.05em;
  font-weight: 600;
}
.se-names span { font-size: 0.93rem; color: var(--wp--preset--color--muted); }

/* --- Pull quote --------------------------------------------------------- */
.se-pullquote {
  border-left: 2px solid var(--wp--preset--color--gold);
  padding: 4px 0 4px 22px;
  margin: 2.4rem 0 0;
}
.se-pullquote p {
  font-family: var(--wp--preset--font-family--cinzel);
  font-size: 1.12rem;
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: var(--wp--preset--color--gold-light);
  margin: 0;
}

/* --- Sand banner -------------------------------------------------------- */
.se-sand img {
  width: 100%;
  height: clamp(150px, 22vw, 270px);
  object-fit: cover;
  object-position: center 62%;
}
.se-sand { position: relative; line-height: 0; }
.se-sand::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(4,34,44,.55), rgba(4,34,44,.25));
  pointer-events: none;
}

/* --- Video cards -------------------------------------------------------- */
/* Applied to a Group wrapping an Embed. The embed itself is a real YouTube
   player — this only styles the frame around it. */
.se-video { position: relative; }
.se-video .wp-block-embed { margin: 0; }
.se-video figcaption {
  margin: 0.6rem 0 0;
  font-size: 0.87rem;
  color: var(--wp--preset--color--muted);
  text-align: left;
}

/* Poster-style link cards, used where a still stands in for an embed */
.se-poster { position: relative; display: block; overflow: hidden; line-height: 0; }
.se-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: opacity .25s; }
.se-poster:hover img, .se-poster:focus-visible img { opacity: .85; }
.se-poster::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border: 1.5px solid var(--wp--preset--color--gold-light);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, transparent 41%);
}
.se-poster-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px; line-height: 1.4;
  background: linear-gradient(to top, rgba(4,34,44,.94), transparent);
}

/* --- Event-type grid ---------------------------------------------------- */
.se-offer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--se-line);
  border: 1px solid var(--se-line);
}
.se-offer > * { background: var(--wp--preset--color--deep); padding: 28px 26px; margin: 0; }
.has-sea-background-color .se-offer > * { background: var(--wp--preset--color--sea); }
.se-offer h3 { margin: 0 0 9px; }
.se-offer p { margin: 0; font-size: 0.97rem; }

/* --- Events / credibility loop ------------------------------------------ */
.se-events .wp-block-post-template { gap: 0; }
.se-event-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 2.4fr;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(212,163,67,0.18);
  align-items: start;
}
.se-event-row .wp-block-post-date {
  font-family: var(--wp--preset--font-family--cinzel);
  color: var(--wp--preset--color--gold-light);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}
.se-event-row .wp-block-post-title { margin: 0 0 4px; font-size: 1.15rem; }

/* --- Press kit box ------------------------------------------------------ */
.se-kit { border: 1px solid var(--se-line); padding: 22px 24px; }

/* --- Forms -------------------------------------------------------------- */
.se-form input[type="text"],
.se-form input[type="email"],
.se-form input[type="date"],
.se-form select,
.se-form textarea {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(212,163,67,.35);
  color: var(--wp--preset--color--shell);
  padding: 11px 13px;
  font-family: inherit;
  font-size: 16px; /* stops iOS zooming on focus */
  width: 100%;
  border-radius: 0;
}
.se-form label { font-size: 0.9rem; color: var(--wp--preset--color--muted); }

/* --- Accessibility ------------------------------------------------------ */
:focus-visible { outline: 2px solid var(--wp--preset--color--gold-light); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .se-offer { grid-template-columns: 1fr; }
  .se-event-row { grid-template-columns: 1fr; gap: 10px; }
  .se-names { gap: 22px; }
}

/* ==========================================================================
   Live-site refinements — folded in from Additional CSS so they survive
   staging pushes, backups and theme switches.
   ========================================================================== */

/* --- Sticky header ------------------------------------------------------ */
/* The template-part wrapper must be the sticky element. A sticky rule on the
   inner group does nothing, because its parent is exactly as tall as it is. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* --- Floating booking button on phones ---------------------------------- */
@media (max-width: 900px) {
  /* backdrop-filter makes the header a containing block for fixed children,
     which would trap the button inside it. Solid background instead. */
  .se-header { backdrop-filter: none; background: #04222C; }
  .se-header .wp-block-buttons {
    position: fixed; bottom: 16px; right: 16px; left: auto; z-index: 60; margin: 0;
  }
  .se-header .wp-block-buttons .wp-block-button__link {
    box-shadow: 0 6px 20px rgba(0,0,0,.45);
    padding: 0.85rem 1.4rem;
  }
}

/* --- Hero logo as its own layer ----------------------------------------- */
@media (min-width: 901px) {
  /* Core sets these position:relative, which would anchor the logo to the
     narrow text column instead of the full-width cover. */
  .se-hero .wp-block-cover__inner-container,
  .se-hero .wp-block-cover__inner-container > .wp-block-group { position: static; }
  .se-hero .wp-block-cover__inner-container > .wp-block-group > *:not(.se-hero-logo) {
    position: relative;
    z-index: 1;
  }
  .se-hero .wp-block-cover__inner-container .se-hero-logo {
    position: absolute;
    top: 48%;
    right: 15%;
    left: auto;
    width: auto;
    transform: translateY(-50%);
    margin: 0;
    z-index: 3;
  }
  /* Capped by height as well as width. Without the vh cap the logo grows
     taller than the hero on shorter windows and clips at the top. */
  .se-hero .wp-block-cover__inner-container .se-hero-logo img {
    max-width: 660px;
    max-height: 56vh;
    width: auto;
    height: auto;
  }
}
@media (max-width: 900px) {
  .se-hero .wp-block-cover__image-background { object-position: 45% 38%; }
  .se-hero-logo img { max-width: 190px; }
}

/* --- Slow drift on the hero photo --------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .se-hero .wp-block-cover__image-background {
    transform-origin: 50% 45%;
    animation: se-drift 30s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes se-drift {
    from { transform: scale(1); }
    to   { transform: scale(1.10); }
  }
}

/* --- About pull quote --------------------------------------------------- */
.se-pullquote {
  border-left: 2px solid var(--wp--preset--color--gold);
  padding: 4px 0 4px 22px;
  margin: 2.4rem 0 0;
  font-family: var(--wp--preset--font-family--cinzel);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--wp--preset--color--gold-light);
}

/* Circle portrait: no rectangular frame around a round image */
.se-framed img { box-shadow: none; }

/* --- Sand banner -------------------------------------------------------- */
/* Feather into the page colour, but keep the sand lettering (which sits at
   70-90% of the image height) fully opaque. */
.se-sand::after { display: none; }
.se-sand img {
  height: clamp(240px, 32vw, 460px);
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,.55) 9%, #000 26%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,.55) 9%, #000 26%, #000 96%, transparent 100%);
}

/* --- Event-type grid ---------------------------------------------------- */
/* WordPress adds block-gap margins between children; inside a CSS grid those
   leave the gold gap colour showing above each cell. */
.se-offer > * { margin: 0 !important; align-self: stretch; }

/* --- Fluent Forms ------------------------------------------------------- */
.se-form .ff-el-group { margin-bottom: 1.1rem; }
.se-form .ff-el-input--label label {
  font-family: var(--wp--preset--font-family--karla);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--wp--preset--color--muted);
  margin-bottom: 5px;
}
.se-form .ff-el-input--label label span.ff-el-is-required { color: var(--wp--preset--color--gold); }
.se-form .ff-el-form-control {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(212,163,67,.35) !important;
  color: var(--wp--preset--color--shell) !important;
  border-radius: 0 !important;
  padding: 11px 13px !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
.se-form .ff-el-form-control:focus { border-color: var(--wp--preset--color--gold) !important; }
.se-form .ff-el-form-control::placeholder { color: rgba(242,237,227,.38); }
.se-form select.ff-el-form-control option { background: #0A3B4A; color: #F2EDE3; }
.se-form .ff-btn-submit,
.se-form button.ff-btn.ff-btn-submit {
  background: var(--wp--preset--color--gold) !important;
  background-image: none !important;
  color: #04222C !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--wp--preset--font-family--karla) !important;
  font-weight: 700 !important;
  padding: 0.8rem 1.5rem !important;
  box-shadow: none !important;
}
.se-form .ff-btn-submit:hover { background: var(--wp--preset--color--gold-light) !important; }

/* Email address in the body font, not the display serif */
.wp-block-column p a[href^="mailto:"] {
  font-family: var(--wp--preset--font-family--karla) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* --- FooGallery: modern treatment --------------------------------------- */
.foogallery {
  max-width: 1180px !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: auto !important;
  transform: none !important;
  position: relative !important;
}

/* No boxy hairline; photos sit edge to edge with a whisper of rounding */
.foogallery .fg-item-inner,
.foogallery .fg-thumb {
  border: 0 !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}
.foogallery .fg-item-inner { position: relative; }

/* Slow zoom on hover */
.foogallery .fg-item img {
  transition: transform .55s cubic-bezier(.2,.7,.3,1), filter .35s ease;
  will-change: transform;
}
.foogallery .fg-item:hover img,
.foogallery .fg-item:focus-within img {
  transform: scale(1.07);
  filter: saturate(1.06) brightness(1.04);
}

/* Wash that fades in under the cursor */
.foogallery .fg-item-inner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,34,44,.55), rgba(4,34,44,0) 55%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
}
.foogallery .fg-item:hover .fg-item-inner::after { opacity: 1; }

/* Gold rule that draws in along the bottom edge */
.foogallery .fg-item-inner::before {
  content: "";
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--wp--preset--color--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
  z-index: 3;
}
.foogallery .fg-item:hover .fg-item-inner::before { transform: scaleX(1); }

/* Photos rise into view on scroll. Scroll-driven animations are ignored by
   browsers that don't support them, so nothing breaks. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .foogallery .fg-item {
      animation: se-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes se-rise {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* Lightbox chrome in brand colours */
.foogallery .fg-loader { border-top-color: var(--wp--preset--color--gold) !important; }
.foogallery .fg-paging-container .fg-dot { background: rgba(242,237,227,.28) !important; }
.foogallery .fg-paging-container .fg-dot.fg-selected,
.foogallery .fg-paging-container .fg-dot:hover { background: var(--wp--preset--color--gold) !important; }

/* --- Header wordmark ---------------------------------------------------- */
/* The header shows the wide horizontal lockup; the footer keeps the stacked
   logo from Site Logo settings. Done here rather than in header.html because
   template parts are static HTML and cannot resolve a theme path. Anchored to
   .se-mark, which always exists, rather than the site-logo block, which
   renders nothing when no logo has been set. */
.se-header .se-mark {
  width: 250px;
  height: 32px;
  background: url("assets/images/logo-wide.png") no-repeat left center;
  background-size: contain;
  flex: 0 0 auto;
}
.se-header .se-mark > * { display: none !important; }

@media (max-width: 900px) {
  .se-header .se-mark { width: 178px; height: 23px; }
}

/* --- Header spacing ----------------------------------------------------- */
/* Group the wordmark and nav together on the left; the button stays right.
   Without this, space-between pushes the nav to the far edge and leaves a
   large gap next to the logo on wide screens. */
@media (min-width: 901px) {
  .se-header > .wp-block-group {
    justify-content: flex-start;
    gap: 44px;
  }
  .se-header .wp-block-navigation { margin-right: auto; }
}

/* --- Gallery section band ----------------------------------------------- */
/* Give whichever top-level section holds the gallery the same treatment as
   the other sections, without needing a custom class added by hand. */
.wp-block-post-content > .wp-block-group:has(.foogallery),
.wp-block-post-content > section:has(.foogallery) {
  background: var(--wp--preset--color--sea);
  border-top: 1px solid rgba(212,163,67,0.16);
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--60);
}

/* --- Gallery heading alignment ------------------------------------------ */
/* The gallery is capped at the wide width (1180px) but a default heading is
   constrained to the content width (780px), leaving it indented 200px from
   the photos below. Match them so the left edges line up. */
.se-gallery > .wp-block-heading,
.se-gallery > h2 {
  max-width: 1180px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}

/* --- Gallery overflow guard --------------------------------------------- */
/* FooGallery's justified layout sizes tiles in JavaScript from the container
   width it measures at load. If that measurement ever comes out wider than
   the cap, this stops the excess from pushing the whole page sideways. */
.se-gallery { overflow-x: clip; }
.se-gallery .foogallery,
.se-gallery .fg-justified,
.se-gallery .foogallery > div {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Watch section ------------------------------------------------------ */
/* Featured video across the top, three beneath. Framed with depth and a
   lift on hover, matching the gallery treatment. */
#watch .se-video .wp-block-embed__wrapper {
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
#watch .se-video:hover .wp-block-embed__wrapper {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
#watch .se-video figcaption,
#watch .wp-element-caption {
  margin-top: .7rem;
  padding-left: 12px;
  border-left: 2px solid var(--wp--preset--color--gold);
  font-size: .85rem;
  line-height: 1.4;
  color: var(--wp--preset--color--muted);
  text-align: left;
}
#watch .wp-block-embed { margin: 0; }

/* Social icons sized and spaced to sit as a quiet footer to the section */
#watch .wp-block-social-links .wp-social-link { width: 30px; height: 30px; }
#watch .wp-block-social-links .wp-social-link:hover { transform: translateY(-2px); }

@media (max-width: 780px) {
  #watch .wp-block-columns { gap: 16px; }
}

/* --- Social buttons with icons ------------------------------------------ */
/* Icons drawn as CSS masks so they inherit the button's gold text colour and
   need no extra markup in the editor. */
.se-btn-youtube .wp-block-button__link,
.se-btn-facebook .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.se-btn-youtube .wp-block-button__link::before,
.se-btn-facebook .wp-block-button__link::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.se-btn-youtube .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M23%2012s0-3.8-.5-5.6a2.9%202.9%200%200%200-2-2C18.7%204%2012%204%2012%204s-6.7%200-8.5.4a2.9%202.9%200%200%200-2%202C1%208.2%201%2012%201%2012s0%203.8.5%205.6a2.9%202.9%200%200%200%202%202C5.3%2020%2012%2020%2012%2020s6.7%200%208.5-.4a2.9%202.9%200%200%200%202-2C23%2015.8%2023%2012%2023%2012zM9.8%2015.4V8.6l5.9%203.4-5.9%203.4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M23%2012s0-3.8-.5-5.6a2.9%202.9%200%200%200-2-2C18.7%204%2012%204%2012%204s-6.7%200-8.5.4a2.9%202.9%200%200%200-2%202C1%208.2%201%2012%201%2012s0%203.8.5%205.6a2.9%202.9%200%200%200%202%202C5.3%2020%2012%2020%2012%2020s6.7%200%208.5-.4a2.9%202.9%200%200%200%202-2C23%2015.8%2023%2012%2023%2012zM9.8%2015.4V8.6l5.9%203.4-5.9%203.4z%22%2F%3E%3C%2Fsvg%3E");
}
.se-btn-facebook .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M22%2012a10%2010%200%201%200-11.6%209.9v-7H7.9V12h2.5V9.8c0-2.5%201.5-3.9%203.8-3.9%201.1%200%202.2.2%202.2.2v2.5h-1.3c-1.2%200-1.6.8-1.6%201.6V12h2.8l-.4%202.9h-2.3v7A10%2010%200%200%200%2022%2012z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M22%2012a10%2010%200%201%200-11.6%209.9v-7H7.9V12h2.5V9.8c0-2.5%201.5-3.9%203.8-3.9%201.1%200%202.2.2%202.2.2v2.5h-1.3c-1.2%200-1.6.8-1.6%201.6V12h2.8l-.4%202.9h-2.3v7A10%2010%200%200%200%2022%2012z%22%2F%3E%3C%2Fsvg%3E");
}