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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

.visible-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  color: #aa7b51;
  padding: 1rem;
  margin-left: 15rem;
  font-size: 1.5rem;
}

.visible-hidden:focus {
  clip: auto;
  height: auto;
  overflow: auto;
  position: absolute;
  width: auto;
}

.h-flex {
  display: flex;
  /*flex-wrap:wrap;*/
  flex-direction: column;
  justify-content: space-between;
  padding-inline: 1rem;
  text-align: center;

}

.flex {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  gap: 1rem;
  /*outline: 4px solid red;*/
}

.h-flex ul li {
  list-style-type: none;
}

.h-flex ul li a {
  text-decoration: none;
}

@media (min-width:30rem) {
  .h-flex {
    flex-direction: row;
  }

  .flex {
    display: flex;
    flex-direction: row;
    gap: 1rem;

  }
}

.none {
  text-decoration: none;
}

header,
footer,
.youtube-short {
  background-color: #000;
  color: #aa7b51;
  font-size: 1.2rem;
  font-weight: 600;
}

.contact-btn {

  /*I am putting this class on a link instead of button 
  and going to try to keep same css*/
  display: inline-block;
  color: #fff;
  background-color: #5f3868;
  /*padding: .25rem .5rem;*/
  padding: .30rem .55rem;
  font-weight: 500;
  font-size: 1.5rem;
  margin-top: 1rem;
  margin-inline: auto;
}


.main-hero-text,
.padding-one,
.middle {
  padding: 1rem;
}

h1,
h2 {
  text-align: center;
  color: #5f3868;
}

#about {
  padding-block: 1rem;
}

.my-shop-days {
  padding-bottom: 1rem;
  text-align: center;
  color: #5f3868;
  font-weight: 700;
}

.margin-bottom {
  margin-bottom: 1rem;
}

.map-container {
  position: relative;
  /* this was missing and I 
  thought the iframe needed to be positioned
  absolute in the relative container so 
  why isn't it working
  outline: 4px red solid;*/
  overflow: hidden;
  padding-bottom: 56.25%;
  width: 100%;
  height: 0;
}

.map-container iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.youtube-short {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.youtube-short iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hidden {
  display: none
}

.form {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  margin-inline: auto;
  color: #5f3868;
  font-weight: 600;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form button {
  color: #fff;
  background-color: #5f3868;
  padding: .5rem 1.75rem;
}

footer {
  padding: 1rem;
  text-align: center;
}

footer .flex li {
  list-style-type: none;
}

footer .flex {
  justify-content: center;
  text-align: center;
  padding-left: 0;
  /* it's not centering at 300px+ something px */
}

.brandclr a {
  color: #aa7b51;
}

/*@media (min-width:410px) {
  footer .flex {
    justify-content: center;
    /* the inspect keeps showing this rule
    crossed out I tried to make it more 
    specific by adding .flex but nothing 
  }
}*/
/* probably add a max width below too because at 
some point want as three grid*/
@media(min-width:500px) {
  .three-grid img {
    margin-inline: auto;

  }
}

/* trying to fox cta link that looks like button*/
@media(max-width:685px) {
  a.none.contact-btn.medium-fs {
    text-align: center;


  }
}

.center-cta {
  text-align: center;
}

/*everything working now trying to do the following 
so if breaks it starts here so far nothing is changing
by this media query below??*/
@media (min-width:686px) {

  /*.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
  }*/
  .middle {
    margin-top: 0;
  }

  .split-ch {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .split-ch img {
    flex: 1;
    width: 100%;
    object-fit: cover;
    background-size: cover;
    min-height: 100%;
  }

  /* maybe swap out better images for size issues
  where the photo doesn't look
  right with a media query for
  min-width and max-width combined
  it's mainly 687 to 1100 range where
  some of the photos have problems that are compressed
for performance like th logo one
so it doesn't cut off letters, maybe I can crop via css*/
  @media (min-width:1100px) {
    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 1fr;

    }

    .middle,
    .medium-fs {
      font-size: 1.5rem;
    }

    .h-flex p {
      margin-top: 19.2px;
      /*refactor this code */
    }

  }

  /* 686px to like 1100 something px before climber
back in view but can't alter .split-ch 
because that affects it everywhere
  .croptoguy {
    object-position: -20% 0;
  }
*/
  .three-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:1100px) {
  #solar {
    margin-bottom: 1rem;
  }

}

a.brandclr {
  color: #aa7b51;
}


/* 480px wonder if I can clean up flex nav to look 
more balanced-500px looks decent-try to clean up social media 470px+ to be 
more aligned also at 500px+ make blutti photos 
center-so far mostly looking good up to 950px pictures 
aren't stretching weird because they 
are still simply stacking in one col
(but I want to add my
cols to make it look better starting around 685px but do I want to make some of the photos wider at wider screens?*/