/*GENERAL STYLES*/

/*TO FIX LIST

-REMOVE UNDERLINE (ADD LIGHTER SHADE OF COLOR WITH THE HOVER SELECTOR)
-CREATE SPACE BETWEEN THE LEARN MORE/BUY TEXT AND THE CHEVRON (MIGHT NEED TO MAKE THEM AS TWO SEPARATE SIBLINGS TO THE PARENT ELEMENT)
-GET THE NAVBAR LIST ITEMS TO BE IN LINE WITH THE FOOTER
-GET THE FOOTER TO ALIGN LEFT AND INSTEAD OF COMPLETELY CENTERED?
-ADJUST THE BACKGROUND IMAGE OF THE APPLE VISION PRO/IPAD PANELS SO THE TEXT ABOVE IT CAN BE MORE VISIBLE (TRY MAINTAINING ASPECT RATIO BUT USING SET HEIGHT/WIDTH FOLLOWING CENTER CENTER)
-FIX THE FONT SIZES IF THEY AREN'T CORRECT ANYWHERE (MOSTLY THE FOOTER)
-FIX THE BOTTOM TWO SECTIONS IN THE FOOTER SO THEY ARE SPACED AND DESIGNED THE CORRECT WAY IN CSS
-HAVE APPROPRIATE SPACING BETWEEN THE SPAN LINK TEXT AND THE REST OF THE TEXT THAT'S BEING MANIPULATED WITH FLEXBOX
-CHECK THE BOX MODELS FOR THE REST OF THE DOCUMENT TO SEE IF ANY PADDING, MARGIN, TEXT COLORS ETC. NEEDS TO BE ADJUSTED
-REPLACE THE (APPLE) TEXT WITH THE APPLE ICON/LOGO/SVG
-FIX THE FIRST SECTION WITH THE 

THINGS TO MENTION IN NEXT POST
-  to create with spans flexbox. I flexed the issue with the span/flexbox issue by inserting   but is that the right way to approach it? Whether if I hypothetically added padding or margin to artificially create that space would've made it more complicated than it'd have to be since it would all be determined by the size of the font as well as other factors that I can't think of I'd assume no?
-Fixed the color issue with the a tags. The classes were there but it ended up working when I put the class in the span and there was a span missing. I usually write out the opening and closing tags but the text was already done a while ago before I added it.
-better way to rename .footer-shop > p, .footer-shop > a, .footer-shop > span selector?
-img h4 for vision pro a bit cut off (put transparent for color to make it disappear not sure if its the best way to do it)
-BR TAG: I removed it since the logo contained an image link. Initially I was trying to style it but have the series 9 logo on the following line like it looked on the logo. I was going to put a span and style the color whatever the hex red color it used (couldn't determine what specifically since I don't think it was written in the code because it was an image). The issue came before replacing but I couldn't put it on the following line. The only thing that worked was the BR tag but I've heard you should avoid using that. The only other thing I noticed people mentioning was styling CSS with clear: both; but it didn't work for me. Is there another alternative to the BR tag that you're aware of?
-I put the following below under bg-img-5-txt does that make sense or is the best way to make the text go to the bottom (just a check) 
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
-images are still not zoomed out enough (for the apple vision pro it just had that on the bottom so I adjusted it with flexbox) but with iPad too if none of the others is still to close to the text and I don't know how to approach adjusting it.
-bottom of the footer with the copyright I tried to fix it. Calculated the space it took and created width percentages (92.33 and 7.67) but for some reason it still doesn't look quite like the other website not sure if it's just the font size looks weird or something else I'm missing
-In the footer as well with the all the unordered lists in flexbox it seems a little pushed to the left. I tried adding some margin since I noticed it had some but it still doesn't look quite right
*/



* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  }
  
  /* Swap a tags with a class if you need to be more specfic with other things that have a tags like the navbar and footer may that don't need to be centered like that*/
  
  /* navbar spacing is off (maybe they used flex in a specific selector or a specific amount of margin) not using it currently*/
  /* h2, h3, a{
    display: block;
    text-align: center;
    text-decoration: none;
    border: 3px solid red;
  } */
  
  h2, h4 {
    padding-top: 44px;
  }
  
  .main {
  /*   position: relative; */
  /*   max-width: 1348px; */
  /*   margin: 0 auto; */
    width: 100%;
  /*   padding-top: 44px; */
  }
  
  .flex {
    display: flex;
    justify-content: center;
  /*   border: 3px solid red; */
  }
  
  div.flex {
    margin-top: 15px;
  }
  
  /* SECTIONS */
  
  .head-sub-center {
    display: block;
    text-align: center;
    text-decoration: none;
  }
  
  .headline {
    font-size: 56px;
    line-height: 1.07143;
    font-weight: 600;
  /*   border: 3px solid red; */
  }
  /* Letter spacing was 0em so I removed it. Check back if you see letter spacing elsewhere */
  h4.headline {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 600;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  /*   margin-top: 53px; */
  }
  
  .subhead {
    font-size: 28px;
    line-height: 1.10722;
    font-weight: 400;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    margin-top: 6px;
  }
  
  /* check back for the comment that mentioned removing letter spacing 0em */
  h5.subhead {
    font-size: 21px;
    line-height: 1.2381;
    font-weight: 400;
    letter-spacing: .016em;
    margin-top: 4px;
  }
  
  h4 {
    font-size: 40px;
  }
  
  h5 {
    font-size: 21px;
  }
  
  h3, h5 {
    margin-top: 6px;
  }
  
  /* ul.nav-flex, footer {
    border: 3px solid red;
    max-width: 1024px;
  } */
  
  .theme-dark {
    background-color: #000;
    color: #fff;
  }
  
  .theme-white {
    background-color: #fff;
    color: #000;
  }
  
  /* margin-left feels off to have for both only one should be there? Also not sure if the 13.65px is correct for margins. Most of my margins px sizes im not too sure of (between blue link text and arrows, in between elements) */
  .blue-link /*, a.blue-link */ {
    text-decoration: none;
    font-size: 21px;
    font-weight: 400;
    margin-left: 35px;
  /*   margin-top: 13.65px; */
    color: #2997ff;
  }
  
  .blue-link:hover, .blue-link-4:hover {
    text-decoration: underline;
  }
  
  .blue-link-2 {
    padding-top: 6px;
    color: #2997ff;
  }
  
  .blue-link-3 {
    padding-top: 3px;
    color: #2997ff;
  }
  
  .blue-link-4 {
    text-decoration: none;
    font-size: 21px;
    font-weight: 400;
    margin-left: 0;
    color: #2997ff;
  }
  
  .blue-link-panel {
    font-size: 17px;
  }
  
  /* https://cssgradient.io/blog/css-gradient-text/ */
  .gradient {
    background: -webkit-linear-gradient(0deg, #cb1333, #de45c1, #b96be2, #84a9e0, #23d43b, #d0bb08, #eb6d17);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  /* NAVBAR */
  
  
  .nav-content {
    display: flex;
    flex-direction: row;
    width: 1024px;
    max-width: 1348px;
  /*   border: 3px solid red; */
    /* note: in the apple codebase it had the div outside the ul but I nested it inside the ul and for some reason it's doing the same thing */
  }
  
  .nav-list-item {
    display: flex;
    justify-content: space-between;
    list-style: none;
    font-size: 12px;
    font-weight: 400px;
    margin: auto;
    color: rgba(255, 255, 255, 0.8);
  }
  
  /* a {
    color: #2997ff;
  } */
  
  /* class="nav-list-link" change the color */
  
  a.nav-list-link, .nav-list-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
  }
  
  /* Change this to a class later*/
  
  .nav-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(22, 22, 23, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    z-index: 9999;
    margin: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 44px;
  }
  
  .line-break {
  /*   clear: both;
    font-size: 0;
    line-height: 0; */
    color: #ff0800;
    font-size: 24px;
    font-weight: 600;
  }
  
  
  /* SECTIONS */
  
  /*not sure if too classes makes sense but it seems to work good enough for the time being*/
  .flex-panel {
    display: flex;
    flex-wrap: wrap;
  }
  
  .block-panel {
    display: block;
    text-align: center;
    width: 50%;
    justify-content: center;
  }
  
  .block-panel-1 {
    margin: 0px 6px 6px 12px;
  }
  
  .block-panel-2 {
    margin: 0px 12px 6px 6px;
  }
  
  .block-panel-3 {
    margin: 6px 6px 6px 12px;
  }
  
  .block-panel-4 {
    margin: 6px 12px 6px 6px;
  }
  
  .block-panel-5 {
    margin: 6px 6px 12px 12px;
  }
  
  .block-panel-6 {
    margin: 6px 12px 12px 6px;
  }
  
  .chevron-padding {
    padding-left: 6.3px;
  }
  
  svg.chevron-width {
    width: 16px;
  }
  
  
  
  
  /* This class was put in a container div that included the content so it could be a background image vs a separate div following the content*/
  .bg-img-1 {
    /* Use width 100% and just use a fixed height for these section/div and panels otherwise there may be whitespace at points where there shouldn't be */
    width: 100%;
    height: 580px;
    /* Dont put something specific like background-size before something less specific like shorthand properties in CSS otherwise they will get overwritten and will have problems*/
    background: url(https://www.apple.com/v/home/bk/images/promos/macbook-pro-14-and-16/promo_mbp__ek7p477bkp6q_large.jpg) no-repeat center center;
    background-size: cover;
    margin-bottom: 12px;
  }
  
  .bg-img-2 {
    width: 100%;
    height: 580px;
    background: url(https://www.apple.com/v/home/bk/images/heroes/iphone-15-pro/hero_iphone15pro__i70z9oz3hj2i_largetall.jpg) no-repeat center center;
    background-size: cover;
    margin-bottom: 12px;
  }
  
  .bg-img-3 {
    width: 100%;
    height: 580px;
    background: url(https://www.apple.com/v/home/bk/images/heroes/iphone-15/hero_iphone15_announce__uuemlcwczn6u_largetall.jpg) no-repeat center center;
    background-size: cover;
    margin-bottom: 12px;
  }
  
  .bg-img-4 {
    width: calc(50% - 18px);
    height: 580px;
    background: url(https://www.apple.com/v/home/bk/images/promos/apple-watch-series-9/promo_apple_watch_series_9_order__b3u85rm9zf6u_large.jpg) no-repeat center center;
    background-size: cover;
  }
  
  /* Removed background-size cover because it was making it too big*/
  .apple-watch-series-9-logo {
    width: 100%;
    height: 53px;
    background: url(https://www.apple.com/v/home/bl/images/logos/apple-watch-series-9/promo_logo_apple_watch_series_9__ckz0hbex0yeu_large.png) no-repeat center center;
  }
  
  .apple-watch-series-9-h4-txt {
   color: transparent;
  }
  
  .bg-img-5 {
    width: calc(50% - 18px);
    height: 580px;
    background: url(https://www.apple.com/v/home/bk/images/heroes/apple-vision-pro/hero_apple_vision_pro_avail__ecthwv10twsy_large.jpg) no-repeat center center;
    background-size: cover;
  /*   color: transparent; */
  }
  
  .bg-img-5-txt {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  
  .pb-53 {
    padding-bottom: 53px;
  }
  
  /* Pasted a different original link with different dimensions and smaller and it looks better for some reason */
  .apple-vision-pro-logo {
    background: url(https://www.apple.com/v/home/bl/images/logos/apple-vision-pro/promo_logo_apple_vision_pro__90zi46p7dc2y_large.png) no-repeat center center;
    width: 50%;
    height: 41px;
  /*   https://www.apple.com/v/apple-vision-pro/c/images/overview/hero/apple_vision_pro_logo_base__ff62ypdqteie_large_2x.png */
  }
  
  .apple-vision-pro-h4-txt {
    color: transparent;
  }
  
  .bg-img-6 {
    width: calc(50% - 18px);
    height: 580px;
    background: url(https://www.apple.com/v/home/bk/images/promos/ipad/promo_ipad__fioegapg12qi_large_2x.jpg) no-repeat center center;
    background-size: cover;
  }
  
  .bg-img-7 {
    width: calc(50% - 18px);
    height: 580px;
    background: url(https://www.apple.com/v/home/bk/images/heroes/airpods-pro/hero_airpods_pro__cj2i6o7o6876_large.jpg) no-repeat center center;
    background-size: cover;
  }
  
  .bg-img-8 {
    width: calc(50% - 18px);
    height: 580px;
    background: url(https://www.apple.com/v/home/bk/images/promos/apple-card/tile__cauwwcyyn9hy_large_2x.jpg) no-repeat center center;
    background-size: cover;
  }
  
  /* Issue getting rid of the text so making the text transparent so far is the only work around */
  .apple-card-logo {
    background: url(https://www.apple.com/v/home/bl/images/logos/apple-card/logo__dcojfwkzna2q_large.png) no-repeat center center;
    width: 50%;
    height: 41px;
    color: transparent;
  /*   https://www.apple.com/v/home/bl/images/logos/apple-card/logo__dcojfwkzna2q_large_2x.png */
  }
  
  /* Gave a fixed percentage width so it can adjust easily with some margin to center it in the panel. Was initially going to doing 25% instead of 35% but the text didn't look the same */
  .w-35 {
    width: 35%;
    margin: 0 auto;
  }
  
  .w-42 {
    width: 42%;
    margin: 0 auto;
  }
  
  .bg-img-9 {
  /*   border: 3px solid red; */
    width: calc(50% - 18px);
    height: 580px;
    background: url(https://www.apple.com/v/home/bl/images/promos/iphone-tradein/promo_iphone_tradein__bugw15ka691e_large.jpg) no-repeat center center;
    background-size: cover;
  }
  
  .apple-tradein-logo {
    background: url(https://www.apple.com/v/home/bl/images/logos/iphone-tradein/logo_tradein__d1fpktgipvki_large.png) no-repeat center center;
    width: 50%;
    height: 41px;
    color: transparent;
  /*   https://www.apple.com/v/home/bl/images/logos/iphone-tradein/logo_tradein__d1fpktgipvki_large.png */
  }
  
  /* Looks as if the 1 is too far away */
  .footnote {
    display: inline;
    font-size: 0.6em;
    text-decoration: none;
    color: black;
  }
  
  .footnote:hover {
    color: #2997ff;
  }
  
  /* FOOTER */
  
  .bg-gray {
    background-color: rgb(245, 245, 247);
    width: 100%;
    font-size: 12px;
  }
  
  .list-none {
    list-style: none;
  }
  
  .mx-20 {
    margin-right: 20px;
  /*   border: 3px solid red; */
  }
  
  .pt-24 {
    padding-top: 24px;
  /*   border: 3px solid red; */
  }
  
  .footer-text-color {
    color: rgb(0, 0, 0, 0.56);
  }
  
  .link-text-color a {
    color: rgba(0, 0, 0, 0.72);
  /*   border: 3px solid red; */
    display: inline-block; /* Is this necessary? I feel like it is since nothing else will keep the link on the same line in the footer. If so I don't know the reasoning why. */
    /* put this tag under li instead of the div or whatever parent element it's on now*/
  }
  
  .link-text-color-2 a {
    color: rgb(0, 102, 204);
    /*color is not changing*/
  }
  
  .link-line {
    text-decoration: none;
  /*   border: 3px solid red; */
  }
  
  .link-line:hover {
    text-decoration: underline;
  }
  
  .section-padding {
    padding-top: 37px;
    padding-bottom: 11px;
  }
  
  .footer-section-1, .footer-section-2 {
    display: flex;
    font-size: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  /*   border: 3px solid red; */
  }
  
  .footer-section-1, .footer-section-2, .footer-shop, .legal-container {
    max-width: 980px;
    margin: 0 auto;
  }
  
  .footer-section-item-container {
    font-size: 12px;
    line-height: 1.3333733333;
    font-weight: 400;
  /*   border: 3px solid red; */
  }
  
  .footer-section-1 {
    padding-top: 17px;
  /*   border: 3px solid red; */
  }
  
  .footer-section-2 {
  /*   border: 3px solid red; */
    justify-content: space-between;
    padding-top: 20px;
    border-bottom: none;
  }
  
  .ft-sect-2-title {
    font-size: 12px;
    font-weight: 700;
    margin-right: 20px;
    margin-bottom: 9.6px;
  }
  
  .ft-li {
    margin-bottom: 9.6px;
  }
  
  .footer-li-padding {
    padding-bottom: 9.6px;
  }
  
  /* footer h3, footer li {
    text-align: left;
    border: 3px solid red;
  } */
  
  .footer-shop {
    margin-bottom: 16px;
    padding-bottom: 19px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  /*   border: 3px solid red; */
  }
  
  .footer-shop > p, .footer-shop > a, .footer-shop > span {
    display: flex;
    /* text is too close to each other not entirely sure what they did without fixing the margin between*/
  }
  
  .legal-container {
    display: flex;
    justify-content: space-between;
  /*   border: 3px solid blue; */
  }
  /* justify content wasn't working but by making width 100% it finally spaced out otherwise it was only taking as much space as needed. Is this because all the elements involved are inline? */
  .footer-legal-copyright {
    display: flex;
  /*   border: 3px solid red; */
  }
  
  .mtmx {
    margin-top: 5px;
    margin-right: 30px;
  }
  
  /* .wd-9233 {
    width: 92.33%;
  }
  
  div.wd-767 {
    width: 7.67%;
  } */
  
  .footer-legal {
    display: flex;
    list-style: none;
    padding-right: 9px;
  }
  
  .footer-legal-2 {
    text-decoration: none;
    border-right: 1px solid rgba(0, 0, 0, 0.72);
    padding-right: 9px;
  /*   border: 3px solid red; */
  }
  
  .footer-legal-2:hover {
    text-decoration: underline;
  }
  
  .footer-legal-3 {
    text-decoration: none;
  /*   border: 3px solid red; */
  }
  
  .footer-legal-3:hover {
    text-decoration: underline;
  }
  
  
  
  .ft-leg {
    padding-right: 9px;
  }
  
  .footer-legal li {
    padding-right: 9px solid ;
  /*   border: 3px solid red; */
  }
  
  /* .footer-legal-us { */
  /*   display: flex;
    width: 50%;
    justify-content: right; */
  /*   border: 3px solid red; */
    /* the selector is in the html but not using yet */
  /* } */
  
  .left {
    align-items: left;
  /*   border: 3px solid red; */
  }