/* Basic CSS reset */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Custom font imports */

@font-face {
  font-family: "Futura-Oblique";
  src: url("../fonts/futura_obl.eot");
  src: url("../fonts/futura_obl.eot?#iefix") format("embedded-opentype"),
    url("../fonts/futura_obl.woff") format("woff"),
    url("../fonts/futura_obl.ttf") format("truetype"),
    url("../fonts/futura_obl.svg#webfont") format("svg");
}

@font-face {
  font-family: "Futura-Oblique";
  src: url("../fonts/futura_bold.eot");
  src: url("../fonts/futura_bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/futura_bold.woff") format("woff"),
    url("../fonts/futura_bold.ttf") format("truetype"),
    url("../fonts/futura_bold.svg#webfont") format("svg");
  font-weight: bold;
}

@font-face {
  font-family: "Futura-Oblique";
  src: url("../fonts/futura_italic.eot");
  src: url("../fonts/futura_italic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/futura_italic.woff") format("woff"),
    url("../fonts/futura_italic.ttf") format("truetype"),
    url("../fonts/futura_italic.svg#webfont") format("svg");
  font-style: italic;
}

/* Page animations */

@keyframes pageFadeUp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Custom properties / variables */

:root {
  --futura-fonts: "Futura-Oblique", system-ui, monospace;
  --futura-weight: 100;
  --section-overlay: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
}

/* Global styles for layout */

html {
  display: flex;
  justify-content: center;

  background-color: #000000;
  color: #FFFFFF;

  font-family: var(--futura-fonts);
  font-weight: var(--futura-weight);

  scroll-behavior: smooth;
}

body {
  /* For wider screens */
  max-width: 800px;

  /* For screen widths less than 800px */
  width: 100%;

  /* General content border */
  border: 1px solid #FFFFFF;

  /* Animate surrounding page content */
  animation: pageFadeUp 1s linear 0s 1 forwards;
}

a {
  /* Set custom link stylings */
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-thickness: 0.1rem;
}

a:visited {
  /* Make visited and unvisited links the same style */
  color: #FFFFFF;
}

/* Main header and logo */

header {
  /* Push content away from left and right edges */
  padding: 0 1rem;

  /* Add background image with gradient overlay */
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 0) 100%), url(../images/header.jpg);
  background-position: right;
  background-size: 65%;
  background-repeat: no-repeat;
}

h1 {
  /* Override the user agent stylesheet */
  font-family: var(--futura-fonts);
  font-weight: var(--futura-weight);

  /* Set font size and drop shadow */
  font-size: 6rem;
  text-shadow: 1px 1px 1px #000000;
}

.tagline {
  /* Override the user agent stylesheet */
  font-family: var(--futura-fonts);
  font-weight: var(--futura-weight);

  /* Set font size */
  font-size: 0.2em;

  /* Pull the tagline back towards the logo */
  margin-left: -1.25em;
}

/* Navigation bar */

.menu-open,
.menu-close {
  /* Remove default mobile button stylings */
  border: none;
  background: none;
  color: #FFFFFF;

  /* Set font to match rest of the menu */
  font-family: var(--futura-fonts);
  font-weight: var(--futura-weight);
  font-size: 1.75rem;
}

#menu-checkbox,
.menu-open,
.menu-close {
  /* Hide mobile menu items by default for wider screens */
  display: none;
}

nav {
  /* Fix menu to top of screen when scrolling */
  position: sticky;
  top: 0;

  /* Keep on top of any absolute-positioned elements */
  z-index: 1;

  /* Create solid background to prevent overlap */
  background-color: #000000;

  /* Add borders for section dividers */
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

nav ul {
  /* Remove default list styling */
  list-style: none;

  /* Convert list into a horizontal flex container */
  display: flex;
  justify-content: space-evenly;

  /* Set font properties */
  font-family: var(--futura-fonts);
  font-weight: var(--futura-weight);
  font-size: 1.75rem;
}

/* Main page content content */

main {
  /* Initially hide content */
  opacity: 0;

  /* Fade up after header and nav have appeared */
  animation: pageFadeUp 1s linear 1s 1 forwards;
}

/* Sections */

section {
  /* Add border for section division */
  border-bottom: 1px solid #FFFFFF;
}

section img {
  /* Allow all section images to use entirety of flex container */
  max-width: 100%;
}

section h2 {
  /* Override the user agent stylesheet */
  font-family: var(--futura-fonts);
  font-weight: var(--futura-weight);

  /* Use padding and margin hack for anchor links */
  padding-top: 2.25rem;
  margin-top: -2.25rem;
}

section p {
  /* Add buffer space above all section paragraphs */
  margin-top: 0.5rem;
}

/* Utility classes */

.two-col-container {
  /* Create a flex container to position objects side-by-sde */
  display: flex;

  /* Vertically center flex items within the container */
  align-items: center;

  /* Add surrounding padding without affecting backgrounds */
  padding: 0.5rem;
}

.two-col-image {
  /* Set the image container to use 1/3rd of page width */
  flex: 1;

  /* Vertically center images and captions within container using flex */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* Surround image and caption with border */
  border: 1px solid #FFFFFF;
}

.two-col-image p {
  /* Center caption and reduce size */
  text-align: center;
  font-size: 0.75rem;

  /* Remove margins */
  margin-top: 0;

  /* Add slight left/right padding */
  padding: 0 0.25rem;
}

.two-col-image .captioned {
  /* Add bottom border for division between image and caption */
  border-bottom: 1px solid #FFFFFF;
}

.two-col-text {
  /* Set the text container to use 2/3rd of page width */
  flex: 2;
}

.left {
  /* Re-order DOM element to deliberately float left */
  order: 1;

  /* Set custom margins to avoid using flex-gap */
  margin-right: 0.5rem;
}

.right {
  /* Re-order DOM element to deliberately float right */
  order: 2;
}

.one-col-container {
  /* Add surrounding padding without affecting backgrounds */
  padding: 0.5rem;
}

.one-col-container h2,
.one-col-container p {
  /* Center headings and paragraphs */
  text-align: center;
}

.about {
  /* Add background image with faded opacity */
  background: var(--section-overlay), url(../images/studio.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.services {
  /* Add background image with faded opacity */
  background: var(--section-overlay), url(../images/ronnies.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Image carousel */

@keyframes carouselCrossfade {

  /* 1s fade in/out, 3s hold per image, 5 images in cycle */
  0% {
    opacity: 0;
  }

  3.571% {
    opacity: 1;
  }

  14.286% {
    opacity: 1;
  }

  17.857% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.carousel {
  /* Set position to allow later absolute positioning */
  position: relative;
}

.carousel-bg {
  /* Set position to maintain flex container height */
  position: static;
}

.carousel-item {
  /* Apply animation to all carousel items */
  animation-name: carouselCrossfade;
  animation-duration: 28s;
  animation-iteration-count: infinite;

  /* Set initial pre-animation opacity to zero */
  opacity: 0;

  /* Remove all items from page flow to overlay on each other */
  position: absolute;
}

.carousel-item:nth-child(1) {
  animation-delay: 0s;
}

.carousel-item:nth-child(2) {
  animation-delay: 4s;
}

.carousel-item:nth-child(3) {
  animation-delay: 8s;
}

.carousel-item:nth-child(4) {
  animation-delay: 12s;
}

.carousel-item:nth-child(5) {
  animation-delay: 16s;
}

.carousel-item:nth-child(6) {
  animation-delay: 20s;
}

.carousel-item:nth-child(7) {
  animation-delay: 24s;
}

/* Quotations */

blockquote {
  /* Add buffer space above all quotations */
  margin-top: 0.5rem;

  /* Italicise and align left for main quote */
  font-style: italic;
  text-align: left;
}

address {
  /* Add buffer space above all quotation sources */
  margin-top: 0.5rem;

  /* Align right for quotation source */
  text-align: right;
}

/* Contact form */

form {
  /* Add space between intro and form*/
  margin-top: 0.5rem;
}

.form-top {
  /* N.B. This div is for form elements which wrap */

  /* Create a flex container which wraps when inputs are small */
  display: flex;
  flex-wrap: wrap;
}

.form-bottom {
  /* N.B. This div is for form elements which do not wrap */

  /* Create a flex container for textarea and button elements */
  display: flex;
  flex-direction: column;
}

.form-footer {
  /* Remove margin between button and footer */
  margin-top: 0;

  /* Match form footer font to page footer */
  font-size: 0.75rem;
}

.form-top label {
  /* Allow labels and inputs to flex to a maximum before wrapping */
  flex: 1 0 25ch;
}

.form-top label,
.form-bottom label {
  /* Add buffer between non-wrapped labels and inputs */
  margin: 0 0.5rem;
}

input,
textarea {
  /* Allow each form element to occupy all of its flexible width */
  width: 100%;

  /* Match form element text with the rest of the page */
  font-family: var(--futura-fonts);
  font-size: 1rem;

  /* Push form element text away from its side borders */
  padding: 0 0.25rem;

  /* Curve form element borders and remove visibility */
  border-radius: 5px;
  border: none;
}

input {
  /* Make each single-line form element a little more roomy */
  height: 2rem;
}

textarea {
  /* Prevent user resizability of textarea */
  resize: none;
}

#send-message {
  /* Match button text with the rest of the page */
  font-size: 1rem;
  font-family: var(--futura-fonts);

  /* Match button colour with the rest of the form elements */
  background-color: #FFFFFF;

  /* Override user agent stylesheet */
  color: #000000;

  /* Match margins with the rest of the form elements */
  margin: 0.5rem;

  /* Add space around the button text */
  padding: 0.25rem;

  /* Curve button border and remove visibility */
  border-radius: 5px;
  border: none;
}

#send-message:hover,
#send-message:focus {
  /* Adjust background colour on mouse over or tab focus */
  background-color: #EEEEEE;
}

/* Footer and image usage info */

footer {
  padding: 0.5rem;

  /* Add alignment and line spacing for footer content */
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.25rem;
}

/* Media queries for mobile devices */

@media screen and (max-width: 560px) {

  /* Main header and logo */

  header {
    padding: 0 0.5rem;

    /* Adjustments for better image visibility */
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 10%, rgba(255, 255, 255, 0) 100%), url(../images/header.jpg);
    background-size: 55%;
  }

  h1 {
    font-size: 3rem;
  }

  .tagline {
    font-size: 0.25em;

    margin-left: -1em;
  }

  /* Navigation bar */

  nav {
    /* Convert entire nav to a flex column for new menu elements */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  nav ul {
    /* Change list flex direction to a column for mobile and center */
    flex-direction: column;
    text-align: center;

    /* Adjust font properties for mobile usability */
    font-size: 1.5rem;

    /* Hide menu items for transitions */
    height: 0;
    opacity: 0;

    /* Set transitions with zero delays */
    transition: height 0.4s 0s, opacity 0.4s 0s;
  }

  nav ul li {
    /* Hide link items despite zero height and opacity */
    display: none;
  }

  .menu-open {
    /* Un-hide the open button */
    display: block;

    /* Adjust font properties for mobile usability */
    font-size: 1.5rem;

    /* Underline menu link on mobile */
    text-decoration: underline;
    text-decoration-thickness: 0.1rem;
  }

  .menu-close {
    /* Adjust font properties for mobile usability */
    font-size: 1.5rem;

    /* Underline menu link on mobile */
    text-decoration: underline;
    text-decoration-thickness: 0.1rem;
  }

  #menu-checkbox {
    /* Add the checkbox to the DOM and bring to the front */
    display: block;
    z-index: 1;

    /* Make the checkbox appear like a button on desktops */
    cursor: pointer;

    /* Manually overlay the checkbox with the menu button */
    position: absolute;
    height: 1.8rem;
    width: 3.5rem;

    /* Hide the checkbox from view */
    opacity: 0;
  }

  #menu-checkbox:checked {
    /* Resize the checkbox to overlay the close button */
    width: 7.5rem;
  }

  #menu-checkbox:checked~ul {
    /* Show the list of links */
    height: 10rem;
    opacity: 1;
  }

  #menu-checkbox:checked~ul li {
    /* Show link items */
    display: block;
  }

  #menu-checkbox:checked~.menu-close {
    /* Show the close button */
    display: block;
  }

  #menu-checkbox:checked~.menu-open {
    /* Hide the menu button */
    display: none;
  }

  /* Sections */

  section h2 {
    /* Adjust padding and margin hack for open mobile menu */
    padding-top: 12rem;
    margin-top: -12rem;
  }

  h2,
  p {
    /* Center text content within the containers */
    text-align: center;
  }

  /* Utility classes */

  .two-col-container {
    /* Change flex container to vertical layout */
    flex-direction: column;
  }

  .two-col-image {
    /* Add buffer space above image container in vertical layout */
    margin-top: 0.75rem;

    /* Restrict container width to size of images */
    width: 300px;
  }

  .two-col-image img {
    /* Resize images to rectangles for less vertical space */
    height: 200px;
    width: 300px;
    object-fit: cover;
  }

  .left,
  .right {
    /* Reset flex items to original DOM order */
    order: 1;

    /* Reset margins for centered content */
    margin-right: initial;
  }

}