/* -- Definitions for core elements --*/
/*test*/
html, body * {
    height: 100%;
    font-family: 'Josefin Sans', sans-serif;
    scroll-behavior: smooth;
    color: #d4af37;
}

body {
	background-color: black;
}

a {
  text-decoration: underline;
}

a:hover {
  color: grey;
}

p {
  padding: 0.5rem 0rem 0.5rem 0rem;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.2rem;
  text-align: left;
  padding: 1rem;
}

/* -- Info page section styling -- */

#title{
  padding: 0.5rem;
}

#hero {
  padding: 1rem;
}

.divider {
  padding: 2rem;
}

.parchment {
  background-image: url("../assets/images/paper.jpg");
  padding: 1rem;
}

.parchment p{
  padding-bottom: 0.5rem;
  color: #555;
}

.parchment li{
  color: #555;
  margin: 0 2rem 0 2rem;
  text-align: left;
}

.parchment h2{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* -- Navbar styling -- */

#nav {
  padding: 0.5rem;
}

#nav ul {
  list-style-type: none;
  margin: 0;
}

#nav li {
  display: inline;
  padding: 0 0.5rem 0 0.5rem;
}

#nav a {
  text-decoration: none;
}



/* -- Save the Date class -- */

.std h1 {
	font-size: 3rem;
  padding: 0.5rem;
}

.std h2 {
  padding: 0.5rem;
  font-size: 2rem;
  text-align: center;
}

.std h3 {
  padding: 0.5rem;
  font-size: 1.5rem;
}

.std p {
  padding: 0.5rem;
}

/* -- Grid layout classes -- */

.std-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(20px,auto) minmax(30px,120px) minmax(100px,400px) minmax(50px,200px) minmax(20px,auto) ;
  grid-template-rows: minmax(20px,auto) minmax(20px,auto) max-content minmax(20px,auto) minmax(10px,auto);
}

.background {
  background-image: url("../assets/images/background-tile.jpg");
  background-size: 50%;
  grid-column: 3 / 5;
  grid-row: 2 / 5;
}

.white {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-image: url("../assets/images/paper.jpg");
  grid-column: 2 / 4;
  grid-row: 3 / 3;
}

.footer {
  font-size: 0.75rem;
  text-align: center;
}

@media (min-width: 801px)
{
	:root { font-size: 18px; }
}

@media (max-width: 800px)
{
	:root { font-size: 16px; }
}

/* -- Flex container classes -- */

.flex-std {
  display: flex;
  justify-content: center;
  align-content: center;
  text-align: center;
  padding: 0.5rem;
  width: 60%;
  height: auto;
}

.flex {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  text-align: center;
  padding: 0.5rem;
  height: auto;
}

.child {
  width: 90%;
  align-self: center;
  max-width: 800px;
}

.holding-wrap {
  display: flex;
  justify-content: center;
  align-content: center;
  text-align: center;
  width: 100%;
  height: auto;
}

.holding-item {
  padding-top: 2rem;
  padding-bottom: 2rem;
  width: 70%;
}

/* -- Form definitions -- */

.addressform {
  padding: 0.5rem;
  width: 90%;
  height: auto;
  display: grid;
  grid-template-rows: 1fr max-content 1fr 1fr 1fr 1fr 1fr;
}

.rsvpform {
  padding: 0.5rem;
  width: 90%;
  height: auto;
  display: grid;
  grid-template-rows: 1fr max-content max-content;
}

.naform {
  padding: 0.5rem;
  width: 90%;
  height: auto;
  display: grid;
  grid-template-rows: 1fr max-content 1fr;
}

.login {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr max-content 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.login-std {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr max-content 1fr;
  grid-template-rows: 1px 1px 1fr;
}

input, button, textarea, select {
	color: black;
	border-radius: 0.25rem;
	border: 2px solid black;
  font-size: 0.75rem;
  padding: 0.5rem;
  background-color: white;
  margin: 0.25rem auto 0.25rem auto;
  height: 1rem;
  width: 70%
}

.std-button {
  background-color: #d4af37;
  color: white;
}

button:hover {
	background-color: grey;
	color: white;
	cursor: pointer;
}

input[type=submit] {
	padding: 0.5rem;
  background-color: white;
}

input:hover[type=submit] {
  background-color: #d4af37;
  color: white;
  cursor: pointer;
}

input:not(:placeholder-shown):invalid {
    border: 2px solid red;
}

.indicates-required {
	font-size: 0.75rem;
  padding-bottom: 0.25rem;
  flex-basis: 100%;
  height: min-content;
}

#email {
  grid-row: 1;
  grid-column: 2;
}

#password {
  grid-row: 2;
  grid-column: 2;
}

#quickstart-sign-in {
  grid-row: 3;
  grid-column: 2;
}

#name {
  grid-row: 1;
}

#address {
  height: 3rem;
  vertical-align: top;
  grid-row: 2;
  margin-top: 0.5rem;
}

#city {
  grid-row: 3;
}

#county {
  grid-row: 4;
}

#country {
  grid-row: 5;
}

#postcode {
  grid-row: 6;
}

#submit {
  grid-row: 7;
}

#naName {
  grid-row: 1;
}

#naMessage {
  height: 3rem;
  vertical-align: top;
  grid-row: 2;
  margin-top: 0.5rem;
}

#naSubmit {
  grid-row: 3;
  white-space: normal;
}

/*-- Styling collapsible form --*/

.wrap-collabsible {
  margin-bottom: 0.5rem;
  padding: 0 2rem 0 2rem;
  display: grid;
}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: inline-block;

  text-align: center;
  padding: 0.5rem 0.5rem 0 0.5rem;

  color: white;
  background: #d4af37;

  cursor: pointer;

  border-radius: 7px;
  transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
  color: #7C5A0B;
}

.lbl-toggle::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform 0.25s ease-out;
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .25s ease-in-out;
  margin-top: 0.5rem;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 100vh;
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
  background: rgba(250, 224, 66, .2);
  border-bottom: 1px solid rgba(250, 224, 66, .45);
}

/* Second collapsable form */

.wrap-collabsible2 {
  margin-bottom: 0.5rem;
  padding: 0 2rem 0 2rem;
  display: grid;
}

.lbl-toggle2 {
  display: inline-block;

  text-align: center;
  padding: 0.5rem 0.5rem 0 0.5rem;

  color: white;
  background: #d4af37;

  cursor: pointer;

  border-radius: 7px;
  transition: all 0.25s ease-out;
}

.lbl-toggle2:hover {
  color: #7C5A0B;
}

.lbl-toggle2::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform 0.25s ease-out;
}

.toggle2:checked + .lbl-toggle2::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content2 {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .25s ease-in-out;
  margin-top: 0.5rem;
}

.toggle2:checked + .lbl-toggle2 + .collapsible-content2 {
  max-height: 100vh;
}

.toggle2:checked + .lbl-toggle2 {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.collapsible-content2 .content-inner2 {
  background: rgba(250, 224, 66, .2);
  border-bottom: 1px solid rgba(250, 224, 66, .45);
}