:root {
  --pico-typography-spacing-vertical: 1.5rem;
  --pico-form-element-spacing-vertical: 1rem;
  --pico-form-element-spacing-horizontal: 1.25rem;
}

/* Title and Tagline ---------------------------------------------------------------------------- */
/* ============================================================================================== */

hgroup {
  text-align: center;
}

.event-name,
.event-tagline {
  color: var(--pico-h1-color);
  font-weight: var(--pico-font-weight);
  font-size: var(--pico-font-size);
  line-height: var(--pico-line-height);
  font-family: var(--pico-font-family);
}

.event-name {
  --pico-font-size: 2rem;
  --pico-line-height: 1.125;
  --pico-typography-spacing-top: 3rem;
}

.event-tagline {
  --pico-line-height: 1.15;
  --pico-typography-spacing-top: 2.625rem;

  color: var(--pico-muted-color);
  font-size: 1rem;
}

/* Unset input defaults so they match the display versions. */
input.event-name,
input.event-tagline {
  text-align: center;
  margin-bottom: unset;
  height: unset;
  padding: unset;
}


/* Styling for the Pell Editor ------------------------------------------------------------------ */
/* ============================================================================================== */

/* Remove existing styling */
* [class^="pell-"] {
  all: revert;
}

/* Match the dark/light mode bg color */
.pell-actionbar {
  background-color: var(--pico-form-element-background-color) !important;
}

#editor .description {
  --pico-background-color: var(--pico-form-element-background-color);
  --pico-border-color: var(--pico-form-element-border-color);
  --pico-color: var(--pico-form-element-color);

  margin-bottom: var(--pico-spacing);
  border: var(--pico-border-width) solid var(--pico-border-color);
  border-radius: var(--pico-border-radius);

  min-height: 20rem;
  padding: 5px;
  resize: vertical;
}

/* General Layout Stuff ------------------------------------------------------------------------- */
/* ============================================================================================== */

article {
  border: 2px solid var(--pico-color);
}

button {
  --pico-font-weight: 700;
}

.owner-controls {
  text-align: right
}

/* For when and Where spacing */
h3 {
  margin-bottom: 0px;
}

img {
  height: 20rem;
  /* fiddle with this */
  /* center horizontally */
  display: block;
  margin: auto;
}

.grid.no-row-gap {
  --pico-grid-row-gap: 0;
}

/* Utility Classes ------------------------------------------------------------------------------ */
/* ============================================================================================== */

.hidden {
  display: none;
}

.hint {
  color: var(--pico-muted-color);
}

.phone-number-consent {
  color: var(--pico-muted-color);
  font-size: 0.65em;
  line-height: 0.75em;
}

/* RSVP List ------------------------------------------------------------------------------------ */
/* ============================================================================================== */

#rsvp-list ul {
  padding: 0;
  /* Remove padding */
  margin: 0;
  /* Remove margins */
}

#rsvp-list ul li {
  list-style: none;
  /* Remove bullets */
}

.rsvp-comment {
  padding-top: 0rem;
  padding-bottom: 0rem;
  padding-left: 1.1rem;
  margin-top: 0.25rem;
  margin-left: 1.3rem;
  margin-bottom: 0.25rem;
  font-size: calc(var(--pico-font-size) * 0.75);
  color: var(--pico-muted-color);
}

/* Map ------------------------------------------------------------------------------------------ */
/* ============================================================================================== */

.map-container {
  margin-bottom: var(--pico-spacing);
}

#map-iframe {
  width: 100%;
  height: 25rem;
  border: 2px solid var(--pico-color);
}

/* emoji-picker {
  width: 100%;
  --emoji-padding: 0.25rem;
  --background: var(--pico-form-element-background-color) !important;
  --border-color: var(--pico-form-element-border-color) !important;
  --input-border-color: var(--pico-form-element-border-color) !important;
  --input-font-color: var(--pico-form-element-font-color) !important;
} */

/* Container Widths ----------------------------------------------------------------------------- */
/* ============================================================================================== */

@media (min-width: 576px) {
  .container {
    max-width: 510px;
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 700px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 700px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 700px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 700px;
  }
}

/* Themes --------------------------------------------------------------------------------------- */
/* ============================================================================================== */

@property --scroll-offset {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

/* Background Themes */
/* ============================================================================================== */

:root.blue-snow {
  background-image: url(../img/blue-snow.webp);
  background-repeat: repeat;
}

:root.circles-and-roundabouts {
  background-image: url(../img/circles-and-roundabouts.webp);
  background-repeat: repeat;
}

:root.dot-grid {
  background-image: url(../img/dot-grid.webp);
  background-repeat: repeat;
}

:root.email-pattern {
  background-image: url(../img/email-pattern.webp);
  background-repeat: repeat;
}

:root.gaming-pattern {
  background-image: url(../img/gaming-pattern.webp);
  background-repeat: repeat;
}

:root.geometric-leaves {
  background-image: url(../img/geometric-leaves.webp);
  background-repeat: repeat;
}

:root.hotel-wallpaper {
  background-image: url(../img/hotel-wallpaper.webp);
  background-repeat: repeat;
}

:root.leaves-pattern {
  background-image: url(../img/leaves-pattern.webp);
  background-repeat: repeat;
}

:root.let-there-be-sun {
  background-image: url(../img/let-there-be-sun.webp);
  background-repeat: repeat;
}

:root.logo_x_pattern {
  background-image: url(../img/logo_x_pattern.webp);
  background-repeat: repeat;
}

:root.memphis-colorful {
  background-image: url(../img/memphis-colorful.webp);
  background-repeat: repeat;
}

:root.palm-leaf {
  background-image: url(../img/palm-leaf.webp);
  background-repeat: repeat;
}

:root.pow-star {
  background-image: url(../img/pow-star.webp);
  background-repeat: repeat;
}

:root.regal {
  background-image: url(../img/regal.webp);
  background-repeat: repeat;
}

:root.sports {
  background-image: url(../img/sports.webp);
  background-repeat: repeat;
}

:root.trees {
  background-image: url(../img/trees.webp);
  background-repeat: repeat;
}

:root.watercolor {
  background-image: url(../img/watercolor.webp);
  background-repeat: repeat;
}

:root.triangles-grid {
  --s: 200px; /* control the size*/
  --c1: #dc9d37;
  --c2: #fed450;
  --c3: #125c65;
  --c4: #bc4a33;
  --c5: #ffffff;
  
  --_g: var(--c1) 25%,var(--c2) 0 50%,#0000 0;
  --_l1: var(--c5) 0 1px,#0000 0 calc(25% - 1px),var(--c5) 0 25%;
  --_l2: var(--c5) 0 1px,#0000 0 calc(50% - 1px),var(--c5) 0 50%;
  background:
    repeating-linear-gradient( 45deg,var(--_l1)),
    repeating-linear-gradient(-45deg,var(--_l1)),
    repeating-linear-gradient(  0deg,var(--_l2)),
    repeating-linear-gradient( 90deg,var(--_l2)),
    conic-gradient(from 135deg at 25% 75%,var(--_g)),
    conic-gradient(from 225deg at 25% 25%,var(--_g)),
    conic-gradient(from  45deg at 75% 75%,var(--_g)),
    conic-gradient(from -45deg at 75% 25%,var(--_g)),
    repeating-conic-gradient(var(--c3) 0 45deg,var(--c4) 0 90deg);  
  background-size: var(--s) var(--s);
}

:root.wavy-lines {
  --s: 140px; /* control the size*/
  --c1: #ab3e5b;
  --c2: #ffbe40;
  --c3: #accec0;
  --c4: #61a6ab;
  
  --_g: 
    #0000 25%,#0008 47%,var(--c1)  53% 147%,var(--c2) 153% 247%,
    var(--c1) 253% 347%,var(--c2) 353% 447%,var(--c1) 453% 547%,#0008 553%,#0000 575%;
  --_s: calc(25%/3) calc(25%/4) at 50%; 
  background:
    radial-gradient(var(--_s) 100%,var(--_g)),
    radial-gradient(var(--_s) 100%,var(--_g)) calc(var(--s)/2) calc(3*var(--s)/4),
    radial-gradient(var(--_s) 0   ,var(--_g)) calc(var(--s)/2) 0,
    radial-gradient(var(--_s) 0   ,var(--_g)) 0                calc(3*var(--s)/4),
    repeating-linear-gradient(90deg,var(--c3) calc(25%/-6) calc(25%/6),var(--c4) 0 calc(25%/2));
  background-size: var(--s) calc(3*var(--s)/2)
}

:root.nested-triangles {
  --s: 162px; /* control the size*/
  --c1: #cd2942;
  --c2: #62928c;
  --c3: #e8cba9;
  --c4: #33152e;
  --c5: #414352;
  
  --_g: conic-gradient(from 30deg at 50% 25%,#0000 300deg,var(--c1) 0);
  background:
    var(--_g) calc(0.2885*var(--s)) calc(7*var(--s)/12),
    var(--_g) 0 calc(var(--s)/12),
    conic-gradient(from 120deg at 50% calc(250%/3),var(--c2) 120deg,#0000 0),
    repeating-conic-gradient(from 30deg,#0000 0 60deg,var(--c3) 0 120deg),
    repeating-conic-gradient(var(--c4) 0 60deg,var(--c2) 0 120deg,var(--c5) 0 180deg);
  background-size: calc(0.577*var(--s)) var(--s);
}

/* Font Themes ---------------------------------------------------------------------------------- */
/* ============================================================================================== */

:root.sacramento {
  --pico-font-family-sans-serif: "Sacramento", cursive;
  --pico-font-family-monospace: "Sacramento", cursive;
  --pico-font-family: "Sacramento", cursive;

  .event-name,
  .event-tagline {
    --pico-font-weight: 400;
    --pico-typography-spacing-vertical: 0.5rem;

    font-style: italic;
  }

  .rsvp-name {
    font-weight: bold;
  }

  .rsvp-attending {
    font-style: italic;
  }
}

:root.indie-flower {
  --pico-font-family-sans-serif: "Indie Flower", cursive;
  --pico-font-family-monospace: "Indie Flower", cursive;
  --pico-font-family: "Indie Flower", cursive;

  .event-name,
  .event-tagline {
    --pico-font-weight: 400;
    --pico-typography-spacing-vertical: 0.5rem;
  }

  .rsvp-name {
    font-weight: bold;
  }

  .rsvp-attending {
    text-decoration: green wavy underline;
  }
}

:root.permanent-marker {
  --pico-font-family-sans-serif: "Permanent Marker", cursive;
  --pico-font-family-monospace: "Permanent Marker", cursive;
  --pico-font-family: "Permanent Marker", cursive;

  .event-name,
  .event-tagline {
    --pico-font-weight: 400;
    --pico-typography-spacing-vertical: 0.5rem;
  }

  .rsvp-name {
    font-weight: bold;
  }

  .rsvp-attending {
    text-decoration: green wavy underline;
  }
}

:root.chakra-petch {
  --pico-font-family-sans-serif: "Chakra Petch", sans-serif;
  --pico-font-family-monospace: "Chakra Petch", sans-serif;
  --pico-font-family: "Chakra Petch", sans-serif;

  .event-name,
  .event-tagline {
    --pico-font-weight: 400;
    --pico-typography-spacing-vertical: 0.5rem;
  }

  .rsvp-name {
    font-weight: bold;
  }

  .rsvp-attending {
    text-decoration: underline;
  }
}

:root.pacifico {
  .event-name,
  .event-tagline {
    --pico-font-weight: 400;
    --pico-typography-spacing-vertical: 0.5rem;
    font-family: "Pacifico", cursive;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: "Pacifico", cursive;
  }

  .rsvp-name {
    font-style: bold;
  }
}

:root.victor-mono {
  --pico-font-family-sans-serif: "Victor Mono", monospace;
  /* --pico-font-family-monospace: "Victor Mono", monospace;
  --pico-font-family: "Victor Mono", monospace; */

  .event-name,
  .event-tagline {
    --pico-font-weight: 400;
    --pico-typography-spacing-vertical: 0.5rem;

    font-style: italic;
  }

  .rsvp-name {
    font-weight: bold;
  }

  .rsvp-attending {
    font-style: italic;
  }
}

:root.libre-bakerville {
  --pico-font-family: "Libre Baskerville", serif;

  .event-name,
  .event-tagline {
    --pico-font-weight: 400;
    --pico-typography-spacing-vertical: 0.5rem;
  }

  .rsvp-name {
    font-weight: bold;
  }

  .rsvp-attending {
    font-style: italic;
  }
}

:root.kurale {
  --pico-font-family: "Kurale", serif;

  .event-name,
  .event-tagline {
    --pico-font-weight: 400;
    --pico-typography-spacing-vertical: 0.5rem;

    --pico-font-family: "Kurale", serif;
  }

  .rsvp-name {
    font-weight: bold;
  }

  .rsvp-attending {
    font-style: italic;
  }
}

/* Dark Mode ------------------------------------------------------------------------------------ */
/* ============================================================================================== */

@media (prefers-color-scheme: dark) {
  .map {
    filter: invert(92%) contrast(83%) brightness(108%) grayscale(80%);
  }

  img {
    filter: invert(1);
    /* TODO: Remove me! */
  }

  body.radials {
    background-color: #3b2f2f;
    background-blend-mode: lighten;
  }

  body.picnic {
    background-color: darkslategray;

  }

  body.dots {
    background-color: #3b2f2f;
    background-blend-mode: difference;
  }

  body.table-cloth {
    background-color: peru;
  }

  body.gradient {
    --color-1: #155415;
    --color-2: #375560;
    --color-3: #A35233;
  }
}