/* ==========================================================================
   Reset and Base Styles
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100dvh;
  font-family: tahoma, 'lucida sans', arial, sans-serif;
  font-size: 12px;
  line-height: 24px;
  background: #fff;
  color: #5a5a5a;
  min-width: 375px;
}

/* Inline | http://localhost:8080/ */

body {
  display: flex;
  flex-direction: column;
}

input,
textarea {
  font-family: inherit;
  font-size: 16px;
}

img {
  border: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

p {
  line-height: 22px;
}

h2 {
  font-size: 14px;
}

h3 {
  font-size: 14px;
}

h4 {
  font-size: 12px;
  font-weight: bold;
}

h5,
h6 {
  font-size: 12px;
  font-weight: normal;
}

h1,
aside h2 {
  color: #083568;
  background-color: #e4f2fb;
  font-family: georgia, serif;
  font-size: 24px;
  font-style: italic;
  font-weight: normal;
  margin: 0;
  padding: 10px 15px;
}

article h2,
article h3,
article h4,
article h5,
article h6,
article ul {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
  text-decoration: none;
  color: #3c90d3;
}

a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.content-container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

/* ==========================================================================
   Layout - Header
   ========================================================================== */

body > header {
  height: 300px;
  position: relative;
  background-image:
    url('/assets/images/header_clouds.jpg'),
    linear-gradient(
      to bottom,
      #024880 0%,
      #024982 10%,
      #034c87 20%,
      #04508d 30%,
      #055696 40%,
      #065da1 50%,
      #0a66ad 60%,
      #0f71b9 70%,
      #1478c8 80%,
      #1986d4 90%,
      #2089d9 100%
    );
  background-size:
    auto 100%,
    100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
}

.logo-link {
  display: block;
  padding-top: 40px;
  position: relative;
  z-index: 1;
}

.logo-link img {
  max-width: min(510px, 100%);
  height: auto;
  display: block;
}

/* ==========================================================================
   Layout - Primary Navigation
   ========================================================================== */

.primary-navigation {
  height: 38px;
  margin-top: 1px;
  margin-bottom: 19px;
  border-top: 1px solid #b8d8ff;
  border-bottom: 1px solid #8eb4d9;
  background: linear-gradient(to bottom, #e9f2f9 0%, #dde6f8 22%, #d6e8f6 36%, #c5e0f3 50%, #b8daf3 64%, #9bcdf0 100%);
  box-shadow: 0 7px 2px 0 rgb(242 242 242 / 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}

.primary-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  align-items: center;
  line-height: 1;
}

.primary-navigation li {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 100%;
  position: relative;
  line-height: 12px;
  text-align: center;
}

.primary-navigation li::after,
.primary-navigation li:first-child::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 8px;
  border-top: 1px solid #f9fbff;
  border-left: 1px solid #fcffff;
  border-right: 1px solid #afb9bb;
  border-bottom: 1px solid #b0b4cf;
  background: linear-gradient(to bottom, #d2e3ed 0%, #c4def9 50%, #b0b4cf 100%);
  background-clip: padding-box;
}

.primary-navigation li::after {
  right: 0;
}

.primary-navigation li:first-child::before {
  left: 0;
}

.primary-navigation a {
  color: #031a48;
  font-weight: bold;
  text-transform: uppercase;
}

.primary-navigation a:hover {
  color: #3c90d3;
  text-decoration: none;
}

/* ==========================================================================
   Layout - Main Content
   ========================================================================== */

body > main {
  background-color: #fff;
  border-left: 1px solid #ebebeb;
  border-right: 1px solid #ebebeb;
  margin: 12px auto 0;
  padding-top: 12px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  min-height: 352px;
  flex: 0 0 auto;
}

main.homepage {
  justify-content: space-evenly;
  padding: 12px 10px;
  min-height: 356px;
}

main.homepage p {
  padding: 0 8px;
  line-height: 22px;
  margin: 10px 0;
}

body > main article {
  padding: 0 20px;
  flex: 2 1 278px;
  max-width: calc(960px - 300px - 2px);
  margin-bottom: 20px;
}

article.cleaning-services {
  min-height: 684px;
}

body > main aside {
  padding: 0 20px;
  border-left: 1px solid #ebebeb;
  flex: 1 1;
  min-width: 240px;
}

/* ==========================================================================
   Layout - Footer
   ========================================================================== */

body > footer {
  height: 356px;
  width: 100%;
  margin-top: 14px;
  background-color: #031a48;
  box-shadow: 0 -6px 8px 0 rgb(217 217 217);
  border-top: 2px solid;

  /* border-image: linear-gradient(to bottom, #6D92BF 0%, #7ae772 50%) 1; */
  border-image: repeating-linear-gradient(to bottom, #6d92bf, #6d92bf 2px, #72b1e7 2px, #72b1e7 100%) 4;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.footer-navigation {
  padding-top: 10px;
}

.footer-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  justify-content: space-evenly;
  gap: 16px;
}

.footer-navigation li {
  background-color: #1d315b;
  width: 216px;
  display: flex;
}

.footer-navigation a {
  padding: 8px;
  color: #fff;
  text-transform: uppercase;
  background-color: #1d315b;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-navigation a:hover {
  background-color: #3c90d3;
  text-decoration: none;
}

.footer-bottom-line {
  border-bottom: 1px solid #31456a;
  text-align: center;
  padding-top: 50px;
}

/* ==========================================================================
   Component - Homepage Welcome
   ========================================================================== */

.homepage-welcome,
.homepage-services {
  flex: 1 1;
  margin: 0 10px;
}

.homepage-welcome {
  display: flex;
}

/* The background image (163px wide) creates a decorative frame around the photo.
   Percentages are relative to the 180px flex-basis so both the frame and padding
   scale together when the container shrinks. */
.welcome-photo-container {
  flex: 0 2 180px;
  min-width: 100px;
  background-image: url('/assets/images/aboutme_photo_container.png');
  background-repeat: no-repeat;
  background-size: calc(163 / 180 * 100%) auto;
}

.welcome-photo-container img {
  width: 100%;
  height: auto;
  padding: calc(22 / 180 * 100%) calc(42 / 180 * 100%) calc(22 / 180 * 100%) calc(28 / 180 * 100%);
}

.welcome-content {
  flex: 1 1 270px;
  min-width: 220px;
}

/* ==========================================================================
   Component - Homepage Services
   ========================================================================== */

.homepage-services h2 {
  color: #083568;
  background-color: #e4f2fb;
  font-family: georgia, serif;
  font-size: 24px;
  font-style: italic;
  font-weight: normal;
  margin: 0;
  padding: 10px 15px;
}

.homepage-services ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none outside none;
  padding: 0;
  margin: 0;
  margin-top: 10px;
}

.homepage-services ul li {
  background-color: #ecf1f4;
  flex: 1 1 150px;
}

.homepage-services ul a {
  padding: 0 10px;
  min-height: 64px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.homepage-services ul a:hover {
  background-color: #e4f2fb;
  text-decoration: underline;
}

.homepage-services ul img {
  flex: 0 1 60px;
  width: 100%;
  margin-top: -4px;
  min-width: 15px;
}

.homepage-services ul .service-name {
  flex: 1 0 55px;
  margin-top: -7px;
}

/* ==========================================================================
   Component - Contact Info
   ========================================================================== */

.contact-info-list {
  list-style: square;
  margin-left: 1.3em;
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 0;
}

.contact-info-list li {
  line-height: 34px;
  display: list-item;
}

.contact-info-list li span {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.contact-info-list a {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.contact-info-list img {
  vertical-align: bottom;
  padding: 0 8px 0 4px;
  margin-right: 8px;
  border-right: 1px solid #ebebeb;
}

/* ==========================================================================
   Forms - Contact Form
   ========================================================================== */

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

form[name='contact'] {
  margin-top: 16px;
}

.form-field {
  margin-bottom: 12px;
}

.form-field label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
  color: #333;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  color: #333;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid #3c90d3;
  outline-offset: 1px;
  border-color: #3c90d3;
}

form[name='contact'] button[type='submit'] {
  margin-top: 8px;
  padding: 8px 24px;
  background-color: #083568;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

form[name='contact'] button[type='submit']:hover {
  background-color: #3c90d3;
}

form[name='contact'] button[type='submit']:focus-visible {
  outline: 2px solid #3c90d3;
  outline-offset: 2px;
}

form[name='contact'] button[type='submit']:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-status {
  margin-top: 16px;
  padding: 12px;
  border-radius: 3px;
  font-weight: bold;
}

.form-status.success {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.form-status.error {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}