/*
Theme Name: P Best
Theme URI: 
Author: Math Russell
Author URI: 
Description:
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pbest
Tags:
*/

/*GENRAL*/

:root {
    --border:rgb(51, 51, 51);
    --orange: color(display-p3 0.949 0.3412 0.1647);
    --grey: color(srgb 0.5451 0.5451 0.5452);
    --light-grey: rgb(219, 219, 219);
    --accent-color: rgb(26, 40, 66);
    --second-color: rgb(27, 69, 104);
}

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

html {scroll-behavior:smooth;}

body {
    font-family: "Clash Display";
    margin: 0;
}

a:any-link {
    text-decoration: none;
    color: var(--accent-color);
}

.site-main {
    padding: 6vh 5vw;
}

.flex-row, .flex {
    display: flex;
}

.flex-column {
    flex-flow: column;
}

.wrap {
    flex-flow: wrap;
}

.between {
    justify-content: space-between;
}

.center {
    align-items: center;
}

.grid {
    display: grid;
}

.align-btm {
    align-items: flex-end;
}

.column-full {
    grid-column: 1/3;
}

.pad-bot {
    margin-bottom: 6vh;
}

.pad-bot-small {
    margin-bottom: 3vh;
}

.pad-top {
    padding-top: 6vh;
}

.marg-top {
    margin-top: 6vh;
}

h1 {
    margin: 0;
    color: var(--accent-color);
    font-size: 2rem;
    line-height: 2rem;
    font-family: "Clash Display";
    font-weight: 500;
    letter-spacing: -0.02rem;
}

h3, h2 {
    font-family: "Clash Display";
    font-weight: 500;
    letter-spacing: -0.02rem;
    margin: 0;
    color: var(--accent-color);
}

p {
    font-family: "Clash Display";
    margin: 0;
    color: var(--accent-color);
}

ul, ol {
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
    color: var(--accent-color);
}

button, .button {
    all: unset;
    box-sizing: border-box;
    height: 40px;
    border: 1px solid var(--accent-color);
    text-align: center;
    border-radius: 7px;
    width: 100%;
    font-family: "Clash Display";
    cursor: pointer;
    color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 10px;
}

button:hover, .button:hover {
        background: var(--accent-color);
        color: white;
}

.border-top {
    border-top: 1px solid var(--light-grey);
}

.border-bottom {
    border-bottom: 1px solid var(--light-grey);
}

#page-wrap, .page-wrap {
    padding-top: calc(13vh + 50px);
    min-height: 100vh;
    display: flex;
    flex-flow: column;
}

main {
    flex: 1;
}

.button-small {
    border: 1px solid rgb(51, 51, 51);
    padding: 8px 15px;
    border-radius: 3px;
}

.button-small:hover {
    background-color: white;
    color: black;
}

/*HEADER*/

#header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    z-index: 2;
    height: 13vh;
    width: 100vw;
    border-bottom: 1px solid var(--light-grey);
    padding: 0 5vw;
}

#top {
    position: fixed;
    background-color: white;
    z-index: 9;
    transition: all 0.5s;
}

#info-bar {
    height: 10px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5vw;
    font-size: 12px;
}

#info-bar a {
    text-decoration: none;
    color: white;
    letter-spacing: 1px;
}

#info-bar a:hover {
    text-decoration: underline;
}

#logo {
    justify-self: center;
}

#logo img{
    width: 120px;
    height: auto;
}

#logo-mobile {display: none;}

#logo-mobile img { width:150px;}

.menu-button-container {
    display: flex;
    height: 23px;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-self: end;
    z-index: 3;
}

.menu-button, .menu-button::before, .menu-button::after {
    display: block;
    background-color: color(display-p3 0.949 0.3412 0.1647);
    position: absolute;
    height: 2px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-button::before {
    content: '';
    margin-top: -10px;
}

.menu-button::after {
    content: '';
    margin-top: 10px;
}

#menu-button-container, #icon-container {
    border-radius: 3px;
    overflow: hidden;
    background-color: black;
    width: 30px;
    min-height: 30px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

#menu-button-container {
    cursor: pointer;
}

#menu-button:hover {
    font-size: 1.4rem;
}

#menu-toggle {
    display: none;
  }

#menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
  }

.icon {
    text-align: left;
    width: 20px;
}

#navigation {
    background-color: white;
    width: 100%;
    border-bottom: 1px solid var(--light-grey);
    padding: 0 5vw;
}

#menu-primary {
    display: flex;
    gap: 4vw;
    /*grid-template-columns: 65px 93px 60px 53px 80px 126px 90px 104px;*/
    justify-content: center;
}

#menu-primary li {
    list-style-type: none;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    position: relative;
}

#menu-primary li::before {
    content: '\25CF'; /* Unicode for black circle */
    color: black; /* Circle color */
    position: absolute;
    top: 0;
    font-size: 12px;
    line-height: 0px;
    margin-top: -1px;
    opacity: 0;
}

#menu-primary li:hover::before, .current-menu-item::before {
    opacity: 1 !important;
}

/*.current-menu-item, #menu-primary li:hover {
    font-family: "Permanent Marker", serif;
}*/

.menu a {
    color: black;
}

.sub-menu a{
    color: grey;
}

#profile, #nav-buttons {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1vw;
    width: 60%;
}

#nav-buttons {
    display: none;
}

#profile {
    justify-self: flex-end;
}

button i, .profile-button i {
    margin-right: 5px;
}

.profile-button {
    border: 1px solid;
    border-radius: 7px;
    text-align: center;
    height: 40px;
    cursor: pointer;
    width: 100%;
    color: black;
}

#profile a, #nav-buttons a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.profile-button:hover {
    background-color: var(--accent-color);
    color: white;
}

#user-account {
    justify-self: flex-end;
}

#user-account img {
    border:1px solid black;
}

#wppb-register-user, .alert {
    margin-top: 20px;
}

.wppb-logout-url {
    display: none;
}

.wppb_register_pre_form_message, .wppb-success {
    margin-top: 20px !important;
}

.logged-out-message {
    text-align:center;
    width:70%;
    margin:0 auto;
}

/*HOME*/

#hero {
    height: 60vh;
    width: 100%;
    background-size: cover;
    background-position-y: 90%;
    background-position-x: center;
}

#home {
    padding-top: 6vh;
}

#home .grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1vw;
    margin-bottom: 6vh;
}

#home .grid h1 {
    text-align: center;
}

.all-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2vw;
    row-gap: 6vh;
}

.all-categories a {
    width: 100%;
    display: block;
}

.all-categories li {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: column;
    overflow: hidden;
}

.category-image {
    background-size: cover;
    background-position: center;
    height: 300px;
    width: 100%;
    position: relative;
    background-position-y: bottom;
}

.category-description {
    margin: 10px 0;
    opacity: 0.8;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
}

.category-text a {
    font-size: 1.5rem;
    color: black;
}

.category-text{
    z-index: 1;
    color: rgb(117, 117, 117);
    text-align: left;
    margin-top: 2vh;
}

.shop-now {
    font-size: 16px !important;
    border-bottom: 1px solid white;
}

.overlay {
    /*position: absolute;
    bottom: 0;*/
    width: 100%;
    background-color: white;
    padding-top: 10px;
    /*transition: all 0.2s;
    opacity: 0;*/
}

/*.category-image:hover .overlay {
    opacity: 1;
}*/

/*USER*/

#user {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
}

.user-form {
    border-radius: 7px;
    padding: 5%;
    border: 1px solid var(--light-grey);
    min-height: 60vh;
}

/*FEED*/

.page-numbers {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.post-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    row-gap: 6vh;
}

.feed-thumbnail {
    height: 242px;
    background-size: cover;
    border-radius: 3px;
    background-position: center;
    margin-bottom: 2vh;
}

.feed-post-title {
    margin-bottom: 2vh;
    font-weight: 500;
}

.feed-post-title a{
    text-decoration: none;
    color: color(display-p3 0.949 0.3412 0.1647);
}

.feed-post-excerpt {
    margin-bottom: 2vh;
}

.feed-post-meta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.feed-post-meta a {
    text-decoration: none;
    color: rgb(152, 152, 152);
}

.feed-post-meta a:hover {
    color: white;
}

/*SINGLE POST*/

.single-meta {
    margin-bottom: 1vh;
}

.post-single-title {
    margin-bottom: 4vh;
}

.post-body, .related-posts {
    padding: 6vh 5vw;
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    column-gap: 4rem;
}

.related-posts {
    grid-template-columns: 1fr 1fr;
}

.post-content p{
    color: color(srgb 0.5451 0.5451 0.5452);
    font-size: 1.5rem;
    margin-bottom: 2vh;
}

.post-content p:last-child {
    margin-bottom: 0;
}

.post-content h1 {
    margin: 5vh 0 3vh;
}

.post-content strong {
    font-weight: 400 !important;
    color: white;
}

.single-meta a {
    text-decoration: none;
    color: white;
}

.single-meta a:hover {
    text-decoration: underline;
}

#single-featured-image {
    height: 450px;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    justify-content: center;
    margin-bottom: 7vh;
    border-radius: 3px;
}

#single-featured-image img {
    width: 100%;
}

.content h2, .content h3 {
    margin:50px 0 20px;
}

.content ul, .content ol {
    font-size: 1.5rem;
    padding-left: 20px;
    margin: 6vh 0;
}

.content ul li, .content ol li {
    color: color(srgb 0.5451 0.5451 0.5452);
    margin-bottom: 2vh;
    list-style-type: circle;
}

.content ul li strong, .content ol li strong {
    color: white;
}

/*FORMS*/

#my-form {
    display: grid;
    margin-top: 10vh;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2vw;
}

.text-input, input, textarea{
    all: unset;
    height: 40px;
    border: 1px solid rgb(51, 51, 51);
    text-align: center;
    border-radius: 7px;
    width: 100%;
    font-family: "Clash Display";
    box-sizing: border-box;
    cursor: text;
}

textarea {
    display: flex;
    align-content: flex-start;
    height: 145px;
    text-align: left;
    padding: 20px;
}

#search {
    width: 100%;
    display: none;
    justify-content: center;
    height: 50px;
    align-content: center;
    align-items: center;
    padding: 0 5vw;
    border-bottom: 1px solid var(--light-grey);
    background-color: white;
}

#search-icon {
    margin: 0;
}

#search-desktop button {
    border: 0;
}

#search-desktop button {
    border: 0;
}

#search-desktop .search-input {
    background-color: rgb(242, 242, 242);
    text-indent: 10px;
}

.search-input {
    border: none;
    outline: none;
    text-align: left;
    color: black;
    padding: 0 10px;
}

#search-desktop .search-form  {
    width: 60%;
}

.search-form {
    display: grid;
    grid-template-columns: 1fr 40px;
    width: 100%;
    gap: 1vw;
}

#search button {
    border: 0;
}

input::placeholder {
    margin: 0;
}

select {
    text-align-last:center; 
    align-items: center;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 0;
    background-color: white;
    width: 100%;
    padding: 5% !important;
    z-index: 1;
    border: 1px solid var(--accent-color);
    border-radius: 7px;
}

.dropbtn {
    border: 0;
    text-align: center;
    cursor: pointer;
}

.wpc-edit-filter-set {
    display: none;
}

.buy-now {
    color: white;
    height: 50px;
    border: 1px solid rgb(51, 51, 51);
    text-align: center;
    border-radius: 7px;
    width: 100%;
    font-family: "Clash Display";
    box-sizing: border-box;
}

#successMessage {
    color:color(display-p3 0.949 0.3412 0.1647);
    font-size: 1.2rem;
    font-family: "Krona One", sans-serif;
    font-weight: 100;
    letter-spacing: -0.02rem;
    margin-top: 10vh;
    display: none;
  }

#contact {
    text-align: center;
}

.contact-form h1 {
    grid-column: 1/4;
    margin: 30px 0;
}

.message {
    grid-column: 1/4;
    height: 90px;
}

.contact-form .submit {
    grid-column: 1/4;
}

#contact-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2vw;
}

.submit {
    box-sizing: border-box;
    height: 40px;
    border: 1px solid rgb(51, 51, 51);
    text-align: center;
    border-radius: 7px;
    cursor: pointer;
    width: 100%;
    font-family: "Clash Display";
    background-color: var(--accent-color);
    color: white !important;
}

.submit:hover {
    background: var(--second-color);
}

.form-submit {
    margin-top: 40px;
}

.contact-info {
    width:70%; 
    margin:0 auto;
}

/*ABOUT*/

#about {
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#about-image img {
    width:100%;
    height: auto;
}

#about-image {
    display: flex;
    align-items: center;
    height: 60vh;
    overflow: hidden;
}

/*FOOTER*/

#get-in-touch {
    text-decoration: underline;
}

.call-to-action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2vw;
    border-top: solid 1px var(--light-grey);
    padding: 6vh 5vw;
}

#footer{
    padding: 6vh 5vw;
    border-top: 1px solid var(--light-grey);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    gap: 1.5vw;
}

#footer li {
    list-style-type: circle;
}

#footer li:hover {
    list-style-type: disc;
}

#footer img {
    width: 100px;
    grid-row: 1/span 2;
}

#footer a {
    color: black;
    opacity: 0.7;
}

#footer a:hover {
    opacity: 1;
    text-decoration: underline;
}

#footer-links {
    display: flex;
    width: 30vw;
    justify-content: space-between;
}

#footer-copy {
    border-top: 1px solid var(--light-grey);
    padding: 4vh 5vw;
    color: rgb(168, 168, 168);
}

#footer-copy a{
    color:  rgb(168, 168, 168);
}

#footer-copy a:hover {
    color: black;
}

/*PAGES*/

.page-template-page-info .top {
    margin-bottom: 40px;
}

#info p, #info ul {
    margin-bottom: 20px;
}

#info ul {
    margin-left: 20px;
}

#info li {
    list-style-type: circle;
    color: var(--accent-color);
}

.red-bull img {
    width: 75%;
}

@media only screen and (max-width: 1227px) {
    .comments-title {display: none;}
}

@media only screen and (max-width: 1050px) {

    body {
        grid-template-columns: 1fr;
    }

    .site-main {
        padding: 4vh 5vw;
    }

    .pad-bot {
        margin-bottom: 4vh;
    }

    #menu {
        padding: 0 7vw;
        width: 100vw;
        height: 12vh;
        border-bottom: 1px solid rgb(51, 51, 51);
        border-right: 0;
    }

    #top {
        background-color: transparent;
    }

    #header {
        height: 15vh;
        grid-template-columns: 90px 1fr 90px;
        background-color: white;
    }

    #page-wrap, .page-wrap {
        padding-top: 15vh;
    }

    #navigation {
        display: none;
        height: auto;
        padding: 3% 5vw;
        background-color: rgba(255, 255, 255, 0.93);
        backdrop-filter: blur(10px);
    }

    #logo {
        height: 40px;
    }

    #logo img {
        height: 40px;
        width: auto;
    }

    #logo-top {
        margin-bottom: 5rem;
    }

    button i, .profile-button i {
        margin: 0;
    }

    #search-desktop {
        display: none;
    }

    #nav-buttons {
        display: grid;
    }

    #profile, #nav-buttons {
        width: 100%;
    }

    #profile a, #nav-buttons a {
        width: 40px;
    }

    #profile {
        justify-items: flex-end;
    }

    .hide-mobile {
        display: none;
    }

    #menu-primary {
        flex-flow: column;
    align-items: flex-start;
    }

    #menu-primary li {
        height: unset;
    }

    #menu-primary li::before {
        margin-top: 0;
        right: -20px;
        top: unset;
    }

    .menu {
        padding-top: 0;
    }

    .menu a {
        font-size: 1.8rem;
    }

    .menu li:first-child {
        border-top: 0;
    }

    #user {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        row-gap: 4vh;
    }

    /*HOME*/

    #home .grid {
        grid-template-columns: 1fr 6fr 1fr;
    }

    /*SHOP*/

    .all-categories {
        grid-template-columns: 1fr;
    }

    /*POSTS*/

    .logged-out-message {
        width: 100%;
        text-align: left;
    }

    #about-image img {
        height: 100%;
        width: auto;
    }

    #about {
        grid-template-columns: 1fr;
        row-gap: 4vh;
    }

    #services p, .big-para {
        font-size: 2rem;
    }

    .post-list {
        grid-template-columns: 1fr;
    }

    .post-body {
        grid-template-columns: 1fr;
        padding: 6vh 7vw;
    }

    .call-to-action {
        padding: 6vh 5vw;
        grid-template-columns: 1fr;
    }

    .content {
        border-bottom: 1px solid grey;
        padding-bottom: 6vh;
    }

    #comments {
          margin-top: 6vh;
    }

    .related-posts {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 6vh 7vw;
    }

    #my-form.subscribe {
        grid-template-columns: 1fr 1fr;
    }

    #my-form.contact-form {
        grid-template-columns: 1fr;
        margin-top: 6vh;
        row-gap: 4vh;
    }

    #my-form input {
        height: 50px;
    }

    #my-form .message {
        height: 150px;
    }

    .contact-form h1 {
        grid-column: 1;
    }

    .contact-form .message {
        grid-column: 1;
    }

    .contact-form .submit {
        grid-column: 1;
    }

    .submit {
        grid-column: 1/3;
    }

    #contact-buttons {
        grid-template-columns: 1fr;
        gap: 5vh 4vw;
        justify-items: flex-start;
    }

    .contact-info {
        width: 100%;
    }

    .contact-p {
        text-align: left;
    }

    #footer {
        padding: 6vh 5vw;
        grid-template-columns: 1fr 1fr;
        row-gap: 3vh;
    }

    #footer img {
        display: none;
    }

    #footer-copy {
        flex-flow: column;
        gap: 2vh;
    }
	
	#footer li {
		margin-left: 18px;
	}

    .column-full {
        grid-column: 1/1;
    }

}