/*
Theme Name: Mel's Theme
Theme URI: https://opencollective.com/blankslate
Author: Al Proulx
Author URI: https://opencollective.com/blankslate#section-contributors
Description: This is a custom theme made for Mel's Exotics
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2024.2
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme 2011-2024
BlankSlate is distributed under the terms of the GNU GPL
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;/*font:inherit;*/vertical-align:baseline}
html{scroll-behavior:smooth}
body{line-height:1}
a{text-decoration-skip-ink:auto}
a[href^="tel"]{color:inherit;text-decoration:none}
button{outline:0}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
q{display:inline;font-style:italic}
q:before{content:'"';font-style:normal}
q:after{content:'"';font-style:normal}
textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}
input[type="search"]{-webkit-appearance:textfield}
table{border-collapse:collapse;border-spacing:0}
th,td{padding:2px}big{font-size:120%}
small,sup,sub{font-size:80%}
sup{vertical-align:super}
sub{vertical-align:sub}
dd{margin-left:20px}
kbd,tt{font-family:courier;font-size:12px}
ins{text-decoration:underline}
del,strike,s{text-decoration:line-through}
dt{font-weight:bold}
address,cite,var{font-style:italic}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}
.bypostauthor{}
.wp-caption{}
.wp-caption-text{}
.gallery-caption{}
.alignright{}
.alignleft{}
.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

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

:root {
  --colour-black: #242424;
  --colour-white: #FFFFFF;
  --colour-magenta: #C049B0;
  --colour-cyan: #47B5FF;
  --colour-cyan-light: #73c7ff;
  --colour-cyan-11: rgba(71, 181, 255, 0.11);
  --colour-cyan-07: rgba(71, 181, 255, 0.07);
  --colour-yellow: #FFD615;
  --colour-green: #7DFD61;
  --colour-green-75: rgba(125, 253, 97, 0.75);
  --colour-green-50: rgba(125, 253, 97, 0.5);
  --colour-green-11: rgba(125, 253, 97, 0.11);
  --colour-green-09: rgba(125, 253, 97, 0.09);
  --colour-green-08: rgba(125, 253, 97, 0.08);
  --colour-magenta-11: rgba(192, 73, 176, 0.11);
  --colour-magenta-09: rgba(192, 73, 176, 0.09);
  --colour-magenta-07: rgba(192, 73, 176, 0.07);

  /* fonts */
  --heading-font: "Comic Relief", sans-serif;
  --body-font: "Nunito Sans", sans-serif;
}

html {
  max-width: 100vw;
  background-color: var(--colour-black);
}


/* -------------------------------------------------------------------------- */
/*                           GENERAL ELEMENT STYLES                           */
/* -------------------------------------------------------------------------- */
body {
  min-height: 100vh;
  background-color: var(--colour-black);
  color: var(--colour-white);
  font-family: var(--body-font);
  line-height: 1.75rem;
  font-size: 300;
}

h1 {
  font-size: clamp(25px, 3.75vw, 40px);
  font-family: var(--heading-font);
  color: var(--colour-white);
  font-weight: 600;
  text-transform: uppercase;
  width: fit-content;
  letter-spacing: 5%;
  margin: 5rem 0 2rem;

  &::after {
    content: " ";
    display: block;
    width: 75%;
    height: 5px;
    background-color: var(--colour-green-75);
    margin: 1rem 0;
  }
}

h2 {
  font-size: clamp(18px, 3vw, 25px);
  font-family: var(--heading-font);
  color: var(--colour-white);
  font-weight: 600;
  text-transform: uppercase;
  width: fit-content;
  letter-spacing: 5%;
  margin: 5rem 0 2rem;

  &::after {
    content: " ";
    display: block;
    width: 75%;
    height: 4px;
    background-color: var(--colour-green-50);
    margin: 0.5rem 0;
  }
}

h3 {
  color: var(--colour-white);
  font-family: var(--heading-font);
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(18px, 1.75vw, 22px);
}

a:link, a:visited {
  color: var(--colour-cyan);
}

a:hover, a:active {
  color: var(--colour-cyan-light);
}

a:focus-visible {
  outline: none;
  border: dashed var(--colour-cyan) 2px;
}

p {
  margin-bottom: 1rem;
  font-weight: 300;
  font-size: clamp(16px, 1.2vw, 20px);
}

.small-text, .small-text p, .small-text span {
  margin-bottom: 0rem;
  font-weight: 200;
  font-size: clamp(14px, 1.3vw, 18px);
}

ul {
  list-style: disc;
  padding-left: 1rem;
}

ol {
  list-style: decimal;
  padding-left: 1rem;
  padding-bottom: 1rem;

  .stacked-list {
    padding-left: 1rem;
  }

  .stacked-list:last-child {
    padding-left: 1rem;
    padding-bottom: 0;
  }
}


/* -------------------------------------------------------------------------- */
/*                                   HEADER                                   */
/* -------------------------------------------------------------------------- */
.main-header {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 1rem 3% 1rem 1.5%;
  border-bottom: solid var(--colour-magenta) 3px;
  position: fixed;
  margin-top: -5.9rem;
  width: 100%;
  background-color: var(--colour-black);
  z-index: 2;
}


/* ---------------------------------- LOGO ---------------------------------- */
.logo-text {
  height: 3rem;

  .custom-logo {
    height: 3rem;
    width: auto;
  }
}



/* ----------------------------------- NAV ---------------------------------- */
.nav {
  width: 65%;
}

nav, .menu {
  width: 100%;
}

nav ul {
  display: flex;
  justify-content: end;
  gap: 5%;
  list-style: none;
  padding-left: 0;
}

.nav-items {
  text-align: right;
}

.nav-items li {
  padding: 1rem 0;
  font-size: clamp(16px, 1.5vw, 20px);
}

.nav-items li:last-child {
  padding-right: 0;
}

.nav-items a:link, .nav-items a:visited {
  color: var(--colour-white);
  text-decoration: none;
}

.nav-items a:hover, .nav-items a:active {
  text-decoration: none;
  color: var(--colour-green);
}

.current-menu-item span{      
  color: var(--colour-green);
  border-bottom: solid var(--colour-green) 3px;
}


/* --------------------------------- BANNER --------------------------------- */
.banner {
  width: 100%;
  height: 20rem;
  border-bottom: solid var(--colour-magenta) 3px;
  margin-top: 5.9rem;
}


/* -------------------------------------------------------------------------- */
/*                 GENERAL PAGE/POST STYLING & PAGE DECORATION                */
/* -------------------------------------------------------------------------- */
/* --------------------------- GENERAL PAGE DECOR --------------------------- */
.content-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
}

.content {
  width: 80%;
  height: 100%;
  padding-bottom: 5rem;
}

.page-decor-left {
  width: clamp(5rem, 10vw, 10rem);
  background: url(imgs/deco-lines-left-side.png) no-repeat fixed left;
  background-size: contain;
}

.page-decor-right {
  width: clamp(5rem, 10vw, 10rem);
  background: url(imgs/deco-lines-right-side.png) no-repeat fixed right;
  background-size: contain;
}


/* ---------------------------- POST AND POST NAV --------------------------- */
/* GENERAL */
.entry-content {
  margin-top: 1rem;

  h2 {
    margin-bottom: 0;
  }
}

.entry-title {
  margin: 5rem 0 -0.5rem;
}

/* POST NAV */
.post-navigation-div {
  margin: 4rem 0 -1rem;
  width: 100%;
  display: flex;
  text-transform: uppercase;

  & a {
    display: block;
    color: var(--colour-white);
    text-decoration: none;
  }

  & a:hover, & a:active {
    color: var(--colour-green);
    text-decoration: underline;
  }

  & > a {
    width: 50%;
  }

  .nav-links {
    width: 55%;
    display: flex;
    flex-direction: row-reverse;
    margin-left: auto;

    .nav-previous {
      text-align: right;
      margin-left: 7%;
    }
  }
}

/* AVAILABLE ANIMAL POST */
.animal-post-content-wrapper {
  width: 100%;
  display: flex;
  gap: 5%;
  margin-top: 2rem;

  img {
    width: 40%;
    height: fit-content;
  }

  div {
    width: 55%;
  }
}


/* ------------------------------ IMAGE GALLERY ----------------------------- */
.image-gallery p {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5%;
  row-gap: 1.5rem;
  margin: 2rem 0;

  a {
    display: block;
    width: calc(95% / 3);
  }

  img {
    height: fit-content;
    width: 100%;
  }
}

/* ------------------------------- BREADCRUMBS ------------------------------ */
.breadcrumbs {
  margin: 4rem 0 -1rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  a {
    color: var(--colour-white);
    text-decoration: none;
  }

  a:hover, a:active {
    color: var(--colour-green);
    text-decoration: underline;
  }

  .separator {
    margin: 0 1rem 1rem;
    align-content: center;
  }
}

/* ------------------------------ REPTILE CARDS ----------------------------- */
.reptile-card-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5%;
  row-gap: 1.5rem;
  margin: 2rem 0;
}

/* CARD */
.reptile-card {
  width: calc(95% / 3);
  background-color: var(--colour-magenta-07);
  border-radius: 20px;
  overflow: hidden;

  img {
    width: 100%;
    height: auto;
    border-bottom: solid var(--colour-magenta) 2px;
  }

  a {
    display: block;
    text-decoration: none;
    color: var(--colour-white);
  }

  a:hover {
    background-color: var(--colour-magenta-09);
  }

  a:active {
    background-color: var(--colour-magenta-11);
  }
}

/* CARD CONTENT */
.reptile-card-content {
  padding: 1.5rem;
  margin-top: -0.5rem;

  h3 {
    text-align: center;
  }

  .ar-card-h3 {
    text-align: left;
  }

  p {
    margin: 1rem 0 0;
  }

  p:last-child {
    margin: 0;
  }
}




/* -------------------------------------------------------------------------- */
/*                                    HOME                                    */
/* -------------------------------------------------------------------------- */
.home-post-h2:visited, .home-post-h2:link {
  color: var(--colour-white);
  text-decoration: none;
}

.home-post-h2:hover, .home-post-h2:active {
  color: var(--colour-green);
}



/* -------------------------------------------------------------------------- */
/*                             AVAILABLE REPTILES                             */
/* -------------------------------------------------------------------------- */

/* ----------------------------------- FAQ ---------------------------------- */
.faq-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5%;
  margin-bottom: 2rem;
}

.faq-entry {
  width: calc(95% / 3);
  padding: 2rem 0 1rem;
  border-bottom: solid var(--colour-magenta) 2px;

  .bold-text {
    color: var(--colour-white);
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(18px, 1.75vw, 22px);
  }
}

.faq-entry:nth-child(1), .faq-entry:nth-child(2), .faq-entry:nth-child(3) {
  padding-top: 2rem;
  border-top: solid var(--colour-magenta) 2px;
}

/* ---------------------- BREEDING ARCHIVE LITTER CARDS --------------------- */
/* CARD */
.litter-card {
  width: calc(95% / 3);
  background-color: var(--colour-magenta-07);
  border-radius: 20px;
  overflow: hidden;
  border: solid var(--colour-magenta) 2px;

  a {
    display: block;
    text-decoration: none;
    color: var(--colour-white);
    height: 110%;
  }

  a:hover {
    background-color: var(--colour-magenta-09);
  }

  a:active {
    background-color: var(--colour-magenta-11);
  }
}

/* CARD CONTENT */
.litter-card-content {
  padding: 1.5rem;
  margin-top: -0.5rem;

  h3 {
    text-align: left;
  }

  .card-divider {
    width: auto;
    height: 1px;
    background-color: var(--colour-magenta);
    margin: 1rem 0;
  }

  p {
    margin: 1rem 0 0;
  }

  p:last-child {
    margin: 0;
  }
}

/* ---------------------- BREEDING ARCHIVE LITTER CARDS --------------------- */
/* CARD */
.individual-litter-card {
  width: calc(95% / 3);
  background-color: var(--colour-cyan-07);
  overflow: hidden;

  img {
    width: 100%;
    height: auto;
  }
}



/* -------------------------------------------------------------------------- */
/*                                    ABOUT                                   */
/* -------------------------------------------------------------------------- */
.about-me {
  width: 100%;
  display: flex;
  gap: 2%;
  margin-top: 5rem;

  .mel-img {
    width: 150%;
    background-color: #151515;
  }

  .about-text {
    background-color: var(--colour-magenta-07);
    padding: 2rem 5%;

    h1, h2 {
      margin-top: 2rem;
    }
  }
}

.reptile-express-container {
  width: 100%;
  background-color: var(--colour-magenta-07);
  display: flex;
  gap: 5%;
  padding: 2.5rem;
  margin-bottom: 1rem;

  img {
    width: 100%;
    height: 100%;
    max-width: 12rem;
    max-height: 12rem;
  }
  
  & > * {
    margin: auto 0;
  }

  p:last-of-type {
    margin-bottom: 0;
  }
}



/* -------------------------------------------------------------------------- */
/*                                   CONTACT                                  */
/* -------------------------------------------------------------------------- */
.contact-img {
  width: 50%;
  /* height: fit-content; */
  margin: auto 7% auto -15%;
}

.form-container {
  width: 100%;
  display: flex;

  .wpforms-container, .wpforms-container-full, .wpforms-render-modern {
    margin: 0!important;
  }

  #wpforms-5381 {
    width: 100%;
    position: relative;
    z-index: 1;

    textarea {
      width: 60%;
    }

    button {
      font-weight: 700;
      text-transform: uppercase;
    }
  }
}



/* -------------------------------------------------------------------------- */
/*                                   FOOTER                                   */
/* -------------------------------------------------------------------------- */
.main-footer {
  background-color: var(--colour-black);
  color: var(--colour-white) !important;
  display: flex;
  justify-content: space-between;
  padding: 2rem 3%;
  width: 100%;
  border-top: 2px solid var(--colour-magenta);

  .footer-info {
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: space-between;
  }

  nav {
    width: auto;

    ul {
      display: flex;
      flex-direction: column;

      li {
        padding: 0;
      }
    }
  }

  .current-menu-item span{      
    color: var(--colour-white);
    border-bottom: 0px;
  }
}














/* -------------------------------------------------------------------------- */
/*                                MEDIA QUERIES                               */
/* -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  /* -------------------------------------------------------------------------- */
  /*                               GENERAL STYLES                               */
  /* -------------------------------------------------------------------------- */
  h1, h2 {
    margin: 4rem 0 1.5rem;
  }

  /* --------------------------------- HEADER --------------------------------- */
  .main-header {
    margin-top: -5rem;
  }

  /* ------------------------------- PAGE DECOR ------------------------------- */
  .content {
    width: 84%;
    height: 100%;
    padding-bottom: 4rem;
  }

  .page-decor-left, .page-decor-right {
    width: 8%;
    background: none;
  }

  /* --------------------------------- BANNER --------------------------------- */
  .banner {
    height: 14rem;
    margin-top: 5rem;
  }

  /* ----------------------------------- NAV ---------------------------------- */
  .nav {
    width: 0;
    opacity: 0;
    height: 0;

    li {
      font-size: 0;
    }
  }

  /* ---------------------------- POST AND POST NAV --------------------------- */
  /* GENERAL */
  .animal-post-content-wrapper {
    flex-wrap: wrap;

    img {
      width: 100%;
      margin-bottom: 3rem;
    }

    div {
      width: 100%;
    }
  }

  .entry-title {
    margin: 4rem 0 -0.5rem;
  }

  /* POST NAV */
  .post-navigation-div {
    gap: 1.5rem;

     & > a {
      width: 120%;
    }

    .nav-links {
      width: 85%;

      .nav-previous {
        margin-left: 10%;
      }
    }
  }

  /* ------------------------------ IMAGE GALLERY ----------------------------- */
  .image-gallery p {
    row-gap: 1.25rem;

    a {
      width: calc(95% / 2);
    }
  }

  /* ------------------------------ REPTILE CARDS ----------------------------- */
  .reptile-card-container {
    row-gap: 1.25rem;
  }

  /* CARD */
  .reptile-card {
    width: calc(95% / 2);
  }

  /* -------------------------------------------------------------------------- */
  /*                             AVAILABLE REPTILES                             */
  /* -------------------------------------------------------------------------- */
  /* ----------------------------------- FAQ ---------------------------------- */
  .faq-container {
    gap: 2.5%;
  }

  .faq-entry {
    width: calc(95% / 2);
    padding: 1rem 0 0;

    .bold-text {
      margin-bottom: 0.5rem;
    }
  }

  .faq-entry:nth-child(1), .faq-entry:nth-child(2) {
    padding: 1rem 0 0;
  }

  .faq-entry:nth-child(3) {
    padding: 1rem 0 0;
    border-top: none;
  }

  /* ---------------------- BREEDING ARCHIVE LITTER CARDS --------------------- */
  /* CARD */
  .litter-card {
    width: calc(95% / 2);
  }

  /* CARD CONTENT */
  .litter-card-content {
    padding: 1.5rem;
    margin-top: -0.5rem;

    .card-divider {
      height: 1.5px;
    }
  }

  /* ---------------------- BREEDING ARCHIVE LITTER CARDS --------------------- */
  /* CARD */
  .individual-litter-card {
    width: calc(95% / 2);
  }

  /* -------------------------------------------------------------------------- */
  /*                                    ABOUT                                   */
  /* -------------------------------------------------------------------------- */
  .about-me {
    margin-top: 4rem;

    .mel-img {
      width: 300%;
    }

    .about-text {
      padding: 1rem 5%;

      h1, h2 {
        margin-top: 1.5rem;
      }
    }
  }

  .reptile-express-container {
    padding: 2rem;
  }

  /* -------------------------------------------------------------------------- */
  /*                                   FOOTER                                   */
  /* -------------------------------------------------------------------------- */
  .main-footer {
    padding: 1.5rem 4%;
  }
}










@media (max-width: 600px) {
  /* -------------------------------------------------------------------------- */
  /*                               GENERAL STYLES                               */
  /* -------------------------------------------------------------------------- */
  h1, h2 {
    margin: 3rem 0 1rem;
  }

  /* ------------------------------- PAGE DECOR ------------------------------- */
  .content {
    width: 88%;
    height: 100%;
    padding-bottom: 3rem;
  }

  .page-decor-left, .page-decor-right {
    width: 6%;
    background: none;
  }

  /* --------------------------------- BANNER --------------------------------- */
  .banner {
    height: 8rem;
  }

  /* ---------------------------- POST AND POST NAV --------------------------- */
  /* GENERAL */
  .animal-post-content-wrapper {
    img {
      width: 100%;
      margin-bottom: 2rem;
    }
  }

  .entry-title {
    margin: 3rem 0 -0.5rem;
  }

  /* POST NAV */
  .post-navigation-div {
    flex-direction: column;
    gap: 0.5rem;

    & > a {
      width: 100%;
    }

    .nav-links {
      width: 100%;
      justify-content: space-between;

      .nav-previous {
        margin-left: 0%;
      }
    }
  }

  /* ------------------------------ IMAGE GALLERY ----------------------------- */
  .image-gallery p {
    gap: 1.5rem;

    a {
      width: 100%;
    }
  }

  /* ------------------------------ REPTILE CARDS ----------------------------- */
  .reptile-card-container {
    gap: 1.5rem;
  }

  /* CARD */
  .reptile-card {
    width: 100%;
  }

  /* -------------------------------------------------------------------------- */
  /*                             AVAILABLE REPTILES                             */
  /* -------------------------------------------------------------------------- */
  /* ----------------------------------- FAQ ---------------------------------- */
  .faq-entry {
    width: 100%;
  }

  .faq-entry:nth-child(2) {
    border-top: none;
  }

  /* ---------------------- BREEDING ARCHIVE LITTER CARDS --------------------- */
  /* CARD */
  .litter-card {
    width: 100%;
  }

  /* ---------------------- BREEDING ARCHIVE LITTER CARDS --------------------- */
  /* CARD */
  .individual-litter-card {
    width: 100%;
  }
  
  /* -------------------------------------------------------------------------- */
  /*                                    ABOUT                                   */
  /* -------------------------------------------------------------------------- */
  .about-me {
    margin-top: 3rem;
    flex-wrap: wrap;
    gap: 1rem;

    .mel-img {
      width: 100%;
      height: 35rem;
    }

    .about-text {
      padding: 0.5rem 5%;

      h1, h2 {
        margin-top: 1rem;
      }
    }
  }

  .reptile-express-container {
    flex-wrap: wrap;
    padding: 1.5rem;
    gap: 1.5rem;

    img {
      margin: 0 auto;
    }
  }

  /* -------------------------------------------------------------------------- */
  /*                                   CONTACT                                  */
  /* -------------------------------------------------------------------------- */
  .contact-img {
    width: 50%;
    margin: 2rem auto 0;
  }

  .form-container {
    display: flex;
    flex-wrap: wrap;

    #wpforms-5381 textarea {
      width: 100%;
    }
  }

  /* -------------------------------------------------------------------------- */
  /*                                   FOOTER                                   */
  /* -------------------------------------------------------------------------- */
  .main-footer {
    padding: 1rem 5%;
  }
}