@import url("https://fonts.googleapis.com/css?family=Cormorant%2C+serif&subset=all");  /* Colour-independent rules for this selector live in static/rsvp/styles/common.css */

	body, .page
	{
	background-color: rgb(201, 160, 95);background-image: url('https://static.anrsvp.com/images/background-images/gradient/background-brown.png');color: rgb(34, 34, 34);background-repeat: repeat-x;		font-size: 20px;
		font-family: Cormorant, serif;
		color: #624d04;
	}

    #homeFace:before, #insideFace:before {
      background-color: rgb(254, 252, 246);background-image: linear-gradient(135deg, rgba(255,255,255,0.4) 0%,rgba(240,240,240,0.4) 21%,rgba(234,234,234,0.4) 49%,rgba(240,240,240,0.4) 80%,rgba(255,255,255,0.4) 100%), url('https://static.anrsvp.com/images/background-images/gradient/background-white.png');color: rgb(80, 16, 0);background-repeat: repeat-x;content: '';top: 0;left: 0;position: absolute;width: 100%;height: 100%;z-index: -1;filter: blur(3px);clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);    }

	
    @supports (-ms-ime-align:auto) {
	    #homeFace.noblur:before, #insideFace.noblur:before {
	      filter: none;
	    }
    }

	input.submit, .button, h2, button, form button.btn, input[type=radio]
	{
		font-size: 20px;
		font-family: Cormorant, serif;
	}

	input.text, select, input.party-text, textarea
	{
		font-size: 18px;
	}

	form input[type=text], form .input textarea, textarea
	{
		padding: 8.75px;
	}

	input.text, input.party-text, select
	{
		border: 1px solid #624d04;
	}

	#homeFace h1,
	#homeFace h2,
	#homeFace h3,
	#homeFace h4,
	#homeFace h5,
	#insideFace h1,
	#insideFace h2,
	#insideFace h3,
	#insideFace h4,
	#insideFace h5,
	#thankWrapper h1,
	#thankWrapper h2,
	#thankWrapper h3,
	#thankWrapper h4,
	#thankWrapper h5,
	#homeFace p,
	#insideFace p,
	#thankWrapper p,
	#homeFace label,
	#insideFace label,
	#homeFace .input span,
	#insideFace .input span,
	#homeFace a,
	#insideFace a,
	#thankWrapper a,
	#thankWrapper .headerLight
	{
		color: #624d04 !important;
	}

	#homeFace a,
	#insideFace a,
	#thankWrapper a
	{
		border-bottom-color: #624d04 !important;
	}

	#homeFace h1,
	#insideFace h1
	{
		-webkit-text-fill-color: #624d04 !important;
	}

	/* Scoped to the classic card: the !important below would otherwise beat the
	   modern card's hairline `border-bottom: 1px solid rgba(fontColor, 0.4)` and
	   render a solid underline (see docs/modern-card.md). */
	.container:not(.card-modern) #homeFace input.text,
	.container:not(.card-modern) #homeFace input.party-text,
	.container:not(.card-modern) #homeFace select,
	.container:not(.card-modern) #homeFace form input[type=text],
	.container:not(.card-modern) #insideFace input.text,
	.container:not(.card-modern) #insideFace input.party-text,
	.container:not(.card-modern) #insideFace select,
	.container:not(.card-modern) #insideFace form input[type=text]
	{
		border-color: #624d04 !important;
	}

	h3
	{
		font-size: 27px;
		margin-top: 0.25em;
	}

	/* Colour-independent rules for this selector live in static/rsvp/styles/common.css */

	
/* ==========================================================================
   Modern card design
   ========================================================================== */
.card-modern #homeFace,
.card-modern #insideFace
{
  box-shadow: 0 2px 5px rgba(72, 48, 8, 0.10), 0 14px 32px rgba(72, 48, 8, 0.16);
}

.card-modern #homeFace:before,
.card-modern #insideFace:before
{
  clip-path: none;
  border-radius: 8px;
  border: 1px solid rgba(98, 77, 4, 0.25);
}

.card-modern #homeFace #rsvp
{
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 1.0;
  text-shadow: none;
  border-bottom: none;
  position: relative;
  left: 0;
  margin-bottom: 30px;
}

.card-modern #homeFace #rsvp:after
{
  content: '';
  position: absolute;
  left: 50%;
  bottom: -16px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: #624d04;
  opacity: 0.55;
}

.card-modern #homeFace #eventName
{
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: none;
  border-bottom: none;
  margin-bottom: 30px;
}

.card-modern #homeFace h2,
.card-modern #insideFace h2
{
  font-size: 17px;
  letter-spacing: 3px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  /* vFlip-card.css sets h2 width:80% on narrow screens; without width:auto the heading
     keeps that width and, with the margins below reset, sits left of centre. */
  width: auto;
  border-bottom: none;
  padding: 0;
  margin: 0 auto 22px auto;
}

.card-modern #homeFace h2:before,
.card-modern #homeFace h2:after,
.card-modern #insideFace h2:before,
.card-modern #insideFace h2:after
{
  content: none;
}

.card-modern #homeFace p.line
{
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

.card-modern #homeFace label
{
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 9px;
}

/* The classic guest layout left-packs two floated columns inside the card: a 110px
   .imageCol (+40px margin-right) then a 380px #content. With no occasion picture the
   image column is an empty float, so the text column ends up ~5px right of the card's
   centre (670px of content area, 530px of floated columns, 140px of trailing slack).
   Take that empty float out of the flow and let the content column centre itself.

   Two deliberate details: ':not(:has(> *))' instead of ':empty', because the template
   leaves whitespace inside the column and :empty would not match a div holding only a
   newline; and the centring is scoped to the .face, not the card, because each face has
   its own image column and an occasion with a picture on one face must keep the
   two-column float layout on that face. A browser without :has() keeps the old layout. */
.card-modern .imageCol:not(:has(> *))
{
  display: none;
}

.card-modern .face:not(:has(.imageCol > *)) #content
{
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.card-modern .imageCol img
{
  border: none;
  border-radius: 2px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

.card-modern #homeFace form input[type=text],
.card-modern #insideFace input.party-text,
.card-modern #insideFace select
{
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(98, 77, 4, 0.4);
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  padding: 12px 5px;
  min-height: 44px;
  box-sizing: border-box;
  font-family: Cormorant, serif;
  font-size: 18px;
  color: #624d04;
  -webkit-transition: border-color 0.25s ease, background-color 0.2s ease;
  -moz-transition: border-color 0.25s ease, background-color 0.2s ease;
  -o-transition: border-color 0.25s ease, background-color 0.2s ease;
  transition: border-color 0.25s ease, background-color 0.2s ease;
}

.card-modern #insideFace input.party-text,
.card-modern #insideFace select
{
  max-width: 450px;
}

.card-modern #homeFace form input[type=text]:hover,
.card-modern #insideFace input.party-text:hover,
.card-modern #insideFace select:hover
{
  border-bottom: 1px solid #624d04;
  background-color: rgba(98, 77, 4, 0.08);
}

.card-modern #homeFace form input[type=text]:focus,
.card-modern #insideFace input.party-text:focus,
.card-modern #insideFace select:focus
{
  border-bottom: 2px solid #624d04;
  background-color: rgba(98, 77, 4, 0.12);
  outline: 2px solid rgba(98, 77, 4, 0.6);
  outline-offset: 3px;
}

.card-modern #homeFace form
{
  width: min(100%, 360px);
  margin-left: auto;
  margin-right: auto;
}

.card-modern #homeFace form button.btn
{
  float: none;
  clear: both;
  display: block;
  width: 100%;
  margin: 24px auto 0 auto;
  padding: 14px 40px;
  min-height: 48px;
  box-sizing: border-box;
  background-color: #624d04;
  background-image: none;
  border: none;
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: 0 3px 8px rgba(98, 77, 4, 0.18);
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease, box-shadow 0.2s ease;
  -moz-transition: opacity 0.2s ease, box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.card-modern #homeFace form button.btn:hover
{
  filter: brightness(1.12);
  box-shadow: 0 4px 12px rgba(98, 77, 4, 0.45);
}

.card-modern #homeFace form button.btn:active
{
  transform: translateY(1px);
}

.card-modern #homeFace form button.btn:focus
{
  outline: 2px solid #624d04;
  outline-offset: 3px;
}

.card-modern #insideFace select
{
  cursor: pointer;
}

.card-modern #insideFace input.button
{
  float: none;
  display: inline-block;
  margin: 0 auto;
  padding: 14px 40px;
  min-height: 48px;
  box-sizing: border-box;
  background-color: transparent;
  background-image: none;
  border: 1px solid rgba(98, 77, 4, 0.4);
  border-radius: 3px;
  color: #624d04;
  font-family: Cormorant, serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: none;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  -moz-transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  -o-transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.card-modern #insideFace input.button:hover
{
  border-color: #624d04;
  background-color: rgba(98, 77, 4, 0.08);
}

.card-modern #insideFace input[type=submit].button
{
  background-color: #624d04;
  color: #fff;
  border: none;
  box-shadow: 0 3px 8px rgba(98, 77, 4, 0.18);
}

.card-modern #insideFace input[type=submit].button:hover
{
  filter: brightness(1.12);
  box-shadow: 0 4px 12px rgba(98, 77, 4, 0.45);
}

.card-modern #insideFace input[type=submit].button:active
{
  transform: translateY(1px);
}

/* Secondary & submit buttons: on-palette focus ring (keyboard-only, see below) */
.card-modern #insideFace input.button:focus,
.card-modern #insideFace input[type=submit].button:focus
{
  outline: 2px solid rgba(98, 77, 4, 0.6);
  outline-offset: 3px;
}

.card-modern .button-table2 tr + tr td
{
  padding-top: 12px;
}


/* ===== Radio buttons (RSVP answers) ===== */
.card-modern #insideFace input[type=radio]
{
  accent-color: #624d04;
  width: 18px;
  height: 18px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  position: relative;
  top: -2px;
  cursor: pointer;
  flex-shrink: 0;
}

.card-modern #insideFace label
{
  cursor: pointer;
  border-radius: 6px;
  padding: 8px 14px;
  margin: 6px 10px 6px 0;
  transition: background-color 0.2s ease;
}

.card-modern #insideFace label:hover
{
  background-color: rgba(98, 77, 4, 0.08);
}

.card-modern #insideFace input[type=radio]:focus-visible
{
  outline: 2px solid rgba(98, 77, 4, 0.6);
  outline-offset: 3px;
}

/* Keyboard-only focus ring: suppress the outline for mouse/touch activation in
   browsers that support :focus-visible. Older browsers ignore :focus-visible,
   so this rule is discarded and the ring stays visible on every focus. */
.card-modern #homeFace form input[type=text]:focus:not(:focus-visible),
.card-modern #homeFace form button.btn:focus:not(:focus-visible),
.card-modern #insideFace input.party-text:focus:not(:focus-visible),
.card-modern #insideFace select:focus:not(:focus-visible),
.card-modern #insideFace input.button:focus:not(:focus-visible),
.card-modern #insideFace input[type=submit].button:focus:not(:focus-visible),
.card-modern #insideFace input[type=radio]:focus:not(:focus-visible)
{
  outline: none;
}

@media (max-width: 600px)
{
  .card-modern #homeFace #rsvp
  {
    font-size: 34px;
    letter-spacing: 2px;
    margin-bottom: 24px;
  }

  .card-modern #homeFace #rsvp:after
  {
    width: 40px;
    bottom: -12px;
  }

  .card-modern #homeFace h2,
  .card-modern #insideFace h2
  {
    font-size: 16px;
    letter-spacing: 1px;
    margin: 0 auto 18px auto;
  }

  .card-modern #homeFace form button.btn
  {
    min-height: 48px;
    max-width: none;
  }

  .card-modern #content
  {
    width: min(100%, 300px);
    margin-left: auto;
    margin-right: auto;
  }

  .card-modern #homeFace form
  {
    width: 100%;
  }

  .card-modern #homeFace form .input
  {
    width: 100%;
    max-width: none;
  }
}

@media only screen and (max-width: 770px), only screen and (max-height: 580px)
{
  body:has(> .container.card-modern)
  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
  }

  .container.card-modern
  {
    margin: 0 auto;
    top: 0;
  }
}