* {
    font-family: Oswald, sans-serif;
    font-weight: medium;
    font-size: 18px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
  font-family: oswald;
  src: url(../fonts/Oswald-Medium.ttf);
}
@font-face {
  font-family: ptMono;
  src: url(../fonts/PTMono-Regular.ttf);
}
@font-face {
  font-family: oswaldLight;
  src: url(../fonts/Oswald-Light.ttf);
}
/* ------------------------ WRAPPER ------------------------ */
#wrapper {
  min-height: 100vh;
  width: 100%;
  margin: 0 auto;
  /* padding: 2em; */
      /* primary grid */
    display: grid;
    grid-template-areas:
      "bannerMenu"
      "content"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: minmax(300px auto) minmax(200px auto) minmax(650px, auto) minmax(100px, auto);
  }
  .whiteWrapper{
    background-color: #fff;
  }
  .blackWrapper{
    background-color: #000;
  }
  .redWrapper{background-color: #BE1E2D;}
  #skipNav{
    display: none;
  }
  /* ------------------------ SKIP NAV ------------------------ */
  .skipNav{
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
  }
  
  .skipNav:focus{
    position: static;
    width: auto;
    height: auto;
  }
  /* ---------------------------------------- HEADER & NAVIGATION -------------------------------------------- */
/* ---------------------------------------- HEADER & NAVIGATION -------------------------------------------- */
#topBanner{
  grid-area: bannerMenu;
  padding:2em;
  display: flex;
  flex-direction: row;
}

header h1{
  margin: 0 1em 0;
}
#headingWhite{
  color: #fff;
  text-decoration: none;
}
#headingBlack{
  color: #000;
  text-decoration: none;
}
/* ------------------------ HEADER ------------------------ */
header {
  width: 100%;
  height: 100%;
  /* background-color: pink; */
  display: grid;
  grid-template-areas: 
  "logo menu"
  "tag";
}
/* ------------------------ NAVIGATION ------------------------ */
nav {
  width: 100%;
  height: 50px;
  padding: 4em 0 2em;
}
nav a {
  text-decoration: none;
  display: block;
  padding: 1em;
}
nav.whiteM a:link,
nav.whiteM a:visited {
  color: #fff;
} 
nav.blackM a:link,
nav.blackM a:visited {
  color: black;
}
nav ul {
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.hoverRed:hover{
  background-color: #BE1E2D;
  color: #fff;
  text-decoration: underline;
}
.hBlue:hover{
  background-color: #33C5F2;
  color: #fff;
  text-decoration: underline;
}
.hoverWhite:hover{
text-decoration: underline;
}
  /* ------------------------ MAIN ------------------------ */
main{
    grid-area: content;
  }
    /* ------------------------ PLAYLIST PAGE ------------------------ */
    #playlists{
      grid-area: content;
      background-color: black;
      padding: 2em;
      grid-template-areas: 
      "playHeader"
      "playIntro"
      "mainPlaylists"
      "subPlaylists";
      grid-template-columns: 1fr;
    }
  /* -------------- PLAYLIST HEADER ---------------- */
#playHeader{
    grid-area: playHeader;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#playHeading {
    font-size: 10vw;
    color: #33C5F2;
  }
  /* -------------- PLAYLIST INTRO ---------------- */

#playIntro{
    grid-area: playIntro;
    padding-top: 1em;
    padding-bottom: 1em;
    color: #fff;
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: center;
}
#playIntro h2{
    font-size: 2.5vw;
}
  /* -------------- PROMOTED PLAYLISTS ---------------- */
  #playlistPro{
    grid-area: mainPlaylists;
    padding-bottom: 2em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: top;
    gap: 2em;
  }

/* -------------- PLAYLISTS LINKS ---------------- */
#otherPlaylists{
    grid-area:subPlaylists;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items:top;
    /* gap: 2em; */
    }
.playlistCard{
    max-width: 250px;
    color: #fff;
}
    .playlistLinks{
        display: flex;
        flex-direction: row;
        align-items:baseline;
        gap: 1em;
      }
/* starts from 347 on main file  */
/* --------------/*  ----------------------------home page --- */
#home {
  grid-area: content;
  display: grid;
  grid-template-areas: 
  "banner"
  "review"
  "episode"
  "blog";
  grid-template-columns: 1fr;
  grid-template-rows: minmax(500px, auto) minmax(300px, auto) minmax(200px, auto) minmax(300px, auto);
  margin: 0;
  padding: 0; 
  width: 100%;
}
/* ---------- Releases ----------- */
#hpBanner{
  grid-area: banner;
  width: 100%;
  padding: 1em;
  background-color: #33C5F2;
  display: grid;
  grid-template-areas: 
  "title"
  "releases";
  grid-template-rows: 1fr;
}

/* --- release title --- */
#releaseTitle{
grid-area:title;
margin: 0 0.7em 0;
font-size: 4vw;
}
/* --- releases --- */
#releases{
grid-area: releases;
margin: 2em;
width: 100%;
display: flex;
flex-direction: row;
gap: 5em;
align-items: center;
justify-content: center;
margin: 1em 0 3em;
}
.releaseSubtitle{
  text-decoration: none;
  padding-top: 0.5em;
  color: #000;
  font-size: 2vw;
}
.releaseSubtitle:hover{
  color: #fff;
  text-decoration: underline;
}
/* ---------- REVIEWS SECTION  ----------- */
#hpReview{
  grid-area: review;
  padding: 1em;
  background-color: #fff;
  display: grid;
  grid-template-areas: 
  "hpTitle"
  "hpTease ";
  /* grid-template-columns: 1fr 1fr; */
  /* grid-template-rows: 1fr 1fr; */
}
/* --- REVIEW SECTION  TITLE --- */
#hpReviewTitle{
grid-area: hpTitle;
text-decoration: none;
margin:2em 0 ;
color: #000;
}
/* ----- REVIEW TITLE------ */
.homePageReview{
text-decoration: none;
  margin: 0 0.7em 0;
font-size: 4vw;
}

/* --- Review  Teaser --- */
#hpReviewTeaser{
grid-area: hpTease;
width: 80%;
margin: 2em auto;
gap: 2em;
padding: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}

/* --- Review  text --- */
#teaserText{
  width: 100%;
  background-color: #BE1E2D;
  padding: 1em;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
#teaserText:hover{
  background-color: #54151b;
  text-decoration: underline;
  color: #fff;
}
#hpReviewTeaserTitle{
font-size: 2vw;
}

#hpReviewTeaserText {
font-family: oswaldLight;
font-size: larger;
margin: 0;
}
/* ------------------ PODCAST SECTION ----------------- */
#hpEpisode{
  grid-area: episode;
  padding-bottom: 1em;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#hpEpisode a{
color: #fff;
font-size: 2vw;
text-align: center;
}

#episodeTitle{
font-size: 8vw;
text-align: center;
color: #fff;
}

/* ----------------- LATEST EVENTS ----------------- */
#hpBlog{
  grid-area: blog;
  background-color: #BE1E2D;
  padding: 3em 2em;
  display: grid;
  grid-template-areas: 
  "heading"
  "news";
}

/* --- News  text --- */
#newsHeading{
grid-area: heading;
margin: 2em;
color: #fff;
}

/* --- news  teaser section --- */
#latestNews{
grid-area: news;
/* width: 80%; */
gap: 5em;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 2em;
color: #fff;
}
/* ---- SECTION TITLE---- */
#newsHeading{
margin: 1 1 1em 0;
text-decoration: none;
text-align: center;
font-size: 3vw;
}
.newsHeadingLink {
  text-decoration: none;
  color: #fff;
  margin: 0 0.7em 0;
  font-weight: 700;
  font-size: 4vw;
}
.newsHeadingLink:hover {
  color: #33C5F2;
}
/* .newsHeadingTitle{
  font-size: 4vw;
} */
/* --- LATEST NEWS --- */
#latestNews{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  grid-template-areas: "teaserImage teaserInfo";
}
/*  news image */
#latestNewsImage{
  grid-area: teaserImage;
margin: 1em 3em 0em;
}
/* --- news  text --- */
#latestNewsInfo{
  grid-area: teaserInfo;
  margin: auto;
  gap: 2em;
  margin: 0;
}
#latestNewsTeaser{
  text-decoration: none;
  color: #fff;
}
#latestNewsTeaser:hover{
 text-decoration: underline;
}
.latestNewsSubtitle{
  text-decoration: none;
  font-size: 2vw;
}
/*  --------------------------------------- REVIEW PAGE -------------------------- */
#reviews{
  width: 100%;
  padding: 1em;
  background-color: #ffff;
  display: grid;
  grid-template-areas:
  "rHeader"
  "new-review"
  "old-reviews";
}
/* ------- REVIEW HEADER ------- */
/* top review/banner review */
#revHeader{
  grid-area: rHeader;
  width: 100%;
  padding: 1em;
  font-size: 4vw;
}
#mainReview{
  grid-area: new-review;
  margin: 2em;
  display: grid;
  grid-template-areas: 
  "intro outro";
  gap: 1em;
}

/* ---------------- PROMOTED REVIEW -------------- */
#articleIntro{
  grid-area: intro;
  padding: 1em 1em 1em 0;
}
/* REVIEW ARTICLE HEADING */
#revArticleHeadings{
  font-size: 2vw;
  padding-bottom: 2em;
}
/* REVIEW ARTICLE MAIN IMAGE */
#reviewArticleImage {
  border:6px solid #BE1E2D;
  border-radius: 20px;
}
/* REVIEW IMAGE CREDIT */
#articleImageCredit{
 font-style: italic;
}
/* ---- PROMOTED REVIEW TEASER ------ */
#newReview{
  grid-area: outro;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* - TEASER LINK/TEASER TITLE - */
#newReviewLink{
  text-decoration: none;
}
#newReviewTitle{
font-size: 1.5vw;
width: fit-content;
color: #000;
}
#newReviewTitle:hover{
  background-color: #BE1E2D;
  color: #fff;
}
#revHeader,
#revArticleHeadings {
  padding-left: 1em;
  text-align: left;
}
/* TEASER IMAGE */
#newReview img{
  align-self: flex-start;
  width: auto;
  height: auto;
}
.newReviewTeaserDesciption{
  align-self: flex-start; 
  width: 90%;   
}
/* ---------------- OLDER REVIEW -------------*/
#reviewContainer{
  grid-area: old-reviews;
  padding-top: 5em;
  padding: 2em;
  display: flex;
  flex-direction: column;
}
#containerTitle{
  font-size: 4vw;
padding-bottom: 1em;
}
.responsive {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 2em;
}
.desc{
font-size: 1.5vw;
width: fit-content;
padding-top: 0.5em;
}
figcaption,
figcaption a {
  color: #000;
  text-decoration: none;
  font-style: italic;
}
figcaption:hover,
figcaption:hover a {
  color: #BE1E2D;
  text-decoration: underline;
}
.linkToReview{
  text-decoration: none;
  color: #000;

}
.linkToReview:hover{
  text-decoration: underline;
  color: #BE1E2D;
}

/* --------------------- BLOG PAGE --------------------- */
#blog {
  display: grid;
  grid-template-areas:
    "hero"
    "posts";
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

/* ---------------- HERO BANNER ---------------- */
#heroBanner {
  grid-area: hero;
  background-image: url(../img/blog/banner3.jpg);
  background-size: cover;
  background-position: center;
  padding: 4em 2em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  /* STYLE BOOST */
  color: #fff;
}

#heroBanner h2 {
  font-size: 5vw;
  margin: 0;
}
#heroBanner h3 {
  font-size: 3vw;
  margin: 0.5em 0 0;
}

/* ---------------- BLOG POSTS CARD ---------------- */
#blogPosts {
  grid-area: posts;
  margin: 2em;
  padding: 2em;
  display: flex;
  flex-direction: column;
  gap: 2.5em;
  border-left: 6px solid #BE1E2D;
}

/* ---------------- INDIVIDUAL POST ---------------- */
.blogPost {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
  width: 100%;
  padding: 1.5em;
  text-decoration: none;
  color: inherit;
  background-color: #ffffff;
  border-radius: 12px;
  border: 4px solid #33C5F2;

  /* Glow + lift effect */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.blogPost:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 25px #B2E9FA;
}

/* ----------- IMAGE STYLING ----------- */
.blogPost img {
  width: 35%;
  min-width: 220px;
  border-radius: 10px;
  border: 6px solid #BE1E2D;
  object-fit: cover;
}

/* -------- TEXT -------- */
.blogText,
.blogTextR {
  flex: 1;
}

.blogText h5,
.blogTextR h5 {
  font-size: 2vw;
  margin: 0;
  color: #BE1E2D;
}

.blogText p,
.blogTextR p {
  margin-top: 0.5em;
  font-size: 1.2vw;
}

/* Reverse layout option */
/* needs to be fixed */
.blogReverse {
  flex-direction: row-reverse;
  gap: 1em;
}
.blogRow {
  flex-direction: row;
}
/* --------------------------- Directory ----------------------- */
#directory{
  grid-area: content;
  padding: 2em;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#ffffff, #f0f8ff);
  display: grid;
  grid-template-areas:
  "tableIntro"
  "table"
  "tableCta";
  grid-template-rows: auto auto auto;
  row-gap: 2em;
}
#directoryIntro{
  grid-area: tableIntro;
  margin: 1em;
}
#directoryIntro h2{
  font-size: 10vw;
  letter-spacing: -1px;
  font-weight: 700;
}
#directoryIntro h3{
  font-size: 3vw;
  padding-bottom: 0.25em;
}
table{
  grid-area: table;
  padding: 1em;
  border-collapse: collapse;
  border: 2px solid #000;
  width: 80%;
  margin-left:auto;
  margin-right: auto;

}
.tableCap{
  grid-area: tableCta;
  margin: 1em;
  font-size: 2vw;
  font-weight: 700;
  text-align: center;
  padding: 1em;
  caption-side: top;
}
th, td{
  border:2px solid #000;
  padding: 1em;
}
th{
  background-color: #33C5F2;
  color: #fff;
}

/* table stripe */
table tr:nth-child(odd) td {
  background-color: #ffffff;
  color: #000;
}

table tr:nth-child(even) td {
  background-color: #E7F7FF; 
  color: #000;
}

/* table social links */
.artistsInstagrams a {
color: #000814;
text-decoration: none;
font-weight: bold;
}
.artistsInstagrams a:hover {
color: #33C5F2;
}
#tableOutro{
  grid-area: tableCta;
}
/* ------------------ TABLE OUTRO ------------ */
#tableOutro h3{
  font-size: 3vw;
  padding-bottom: 0.25em;
}
.cta-button{
text-decoration: underline;
color: #000;
}
.cta-button:hover{
  border: 2px solid #33C5F2;
  border-radius: 5px;
  background-color: #000;
  color: #fff;
}
    /*  ------------------------------------------ CONTACT PAGE ---------------------- */
    #contactPage {
      grid-area: content;
      background-color: #BE1E2D;
      color: #fff;
      padding: 2em;
      grid-template-areas: 
      "cta"
      "form"
      "socials";
      grid-template-columns: 1fr;
      grid-template-rows: minmax(1fr, auto), minmax(2fr, auto), minmax(1fr, auto);
    }
    /* ---top cta--- */
    #topCta {
      grid-area: cta;
      font-family: oswald;
      padding: 2em;
      text-align: center;
      line-height: 1.6;
    }
    #topCta h2{
      font-size: 4vw;
    }
    #topCta p{
      font-size: 1.75vw;
    }

    /* ---contact form--- */
    #contactUs {
      grid-area: form;
      color: #000814;
      width: 100%;
    }

    #contact h2 {
      padding: 2em;
      
    }
    .contactMe {
      padding-left: 3em;
      display: grid;
    grid-template-columns: 1fr;
      gap: 2em;
    }


    /* form labels */
    .contactLabels {
      display: none;
      margin: 0.25em 0;
      padding-left: 8em;
      text-align: left;
      font-weight: bold;
    }
    /*  user form input */
    #fullName,
    #email,
    #emailContent {
      display: block;
      margin: 0.25em auto;
      padding: 0.5em 3em;
      border-color: #003566;
      border-radius: 6px;
      width: 70%;
    }
    input::placeholder {
      font-weight: bold;
      color: #003566;
    }
    textarea::placeholder{
      font-weight: bold;
      color: #003566;
    }
    /* subscribe to substack */
    .substack {
      color: #fff;
      margin: 1em auto;
      font-weight: bold;
    }
    /* submit form  */
    #submitForm {
      margin: 1em auto;
      padding: 0.5em 2em;
      border: none;
    }

    #submit {
      padding: 0 2em;
      border: none;
      border-radius: 6px;
      background-color: #fff;
      color: #001d3d;
    }
    /* --- socials --- */
    #bottomCta {
      grid-area: socials;
      padding: 2em;
      text-align: center;
    }

     /* ------------------------ FOOTER ------------------------ */
footer{
  grid-area: footer;
  /* display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 2em; */
  display: grid;
  grid-template-areas: 
  "line line line"
  "info socials bottommenu";
  grid-auto-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 2em;
  padding: 2em;
}
hr{
grid-area: line;
border-top: 3px solid #334354;
}
.whiteHr{
border-top: 3px solid #fff;
}
.whiteFooter{
  background-color: #fff;
}
.blackFooter{
  background-color: #000;
}
.redFooter{
background-color: #BE1E2D;
color: #fff;
}
.gradientFooter{
  background-color: #f0f8ff;
}

/* --- VCARD --- */
#cardRed{
  color: #fff;
}
#companyLocation{
  grid-area: info;
}
.redCard{
  color: #fff;
}
.vcardRed{
  color: #BE1E2D;
}
.vcardBlack{
  color: #000;
}
/* ---- EMAIL ---- */
#email:hover{
text-decoration: underline;
}
.email{
  text-decoration: none;
  color: #fff;
}
.emailBlack{
  text-decoration: none;
  color: #000;
}
.emailWhiteRed{
  text-decoration: none;
  color: #fff;
}
.emailWhiteRed:hover{
  text-decoration: underline;
  background-color: #fff;
  color: #BE1E2D;
}
.emailRed{
  text-decoration: none;
  color: #BE1E2D;
}
.emailBlackRed{
color: #000;
text-decoration: none;
}
.emailBlackRed:hover{
background-color: #BE1E2D;
color: #fff;
}
.emailBlack:hover{
  background-color: #33C5F2;
  text-decoration: underline;
}

/* --- FOOTER SOCIALS --- */
#footerSocials{
  grid-area: socials;
  justify-self: center;
  color: #fff;
}
/* FOLLOW */
.blackFollow{
  color: #000;
}
.whiteFollow{
  color: #fff;
}
.redFollow{
  color: #BE1E2D;
}
/* FOOTER MENU */
#footerMenu {
  grid-area: bottommenu;
  justify-self: end;
  font-weight: bold;
}
/* --- FOOTER MENU --- */
.hRed{
  color: #fff;
  text-decoration: none;
}
#footerMenu a.hRed:hover {
  background-color: #fff;
  color: #BE1E2D; 
  text-decoration: underline;
}

.hRedM{
  color: #BE1E2D;
}
.hWhiteRed{
  color: #fff;
}
.hWhiteRed:hover{
  background-color: #fff;
  color: #BE1E2D;
}

#footerMenu a{
  border: none;
}
/* FOOTER MENU LINKS */
.hRed:hover{
  background-color: #BE1E2D;
  color: #fff;
  text-decoration: underline;
}
.blackRed{
  color: #000;
}
.blackRed:hover{
  background-color: #BE1E2D;
  color: #fff;
}
.hBlue{
  color: #000;
}
.hBlue:hover{
  background-color: #33C5F2;
  color: #fff;
  text-decoration: underline;
}