/*
Theme Name: VRDA
Author: Virtual Remote Design Agency
Author URI: https://www.vrda.net
Description: A theme for VRDA website.
Version: 1.0.0
*/

/*
Desktop view

all width
@since 1.0.0
*/

/*
General
*/

/*Custom Field Table*/
.custom-field-table {
    border-collapse: separate;
    border-spacing: 0 30px;
    text-align: left;
    width: 100%;
}

.custom-field-table tr th {
    width: 210px;
}

.custom-field-table tr td {
    display: flex;
    column-gap: 30px;
}

/*Navigation*/
header {
    background-color: var(--wp--preset--color--white);
    position: sticky;
    top: 0;
    z-index: 999;
}

section {
    box-sizing: border-box;
    padding-inline: clamp(0px, 28px - 1.5vw, 20px);
}

/*Button style*/
.is-style-outline a:hover {
    background-color: var(--wp--preset--color--shark)!important;
    border-color: var(--wp--preset--color--shark);
    color: var(--wp--preset--color--black-squeeze);
}

/*Button Outline Style*/
.is-style-outline a {
    border-color: var(--wp--preset--color--blue);
    color: var(--wp--preset--color--blue);
    padding: 8.72px 12px;
}

.is-style-outline a:hover {
    background-color: var(--wp--preset--color--blue);
    color: var(--wp--preset--color--white);
}

.content-width {
    margin: 0 auto;
    max-width: var(--wp--style--global--content-size);
}

/*Articles Page*/
.wp-block-post-terms a {
	background-color: var(--wp--preset--color--black-squeeze);
	border-radius: 5px;
	text-decoration: none;
	padding: 6px 15px;
	transition: all 0.5s ease;
}

.wp-block-post-terms a:hover {
	background-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
}

.latest-article .wp-block-post-excerpt__more-link {
	background-color: var(--wp--preset--color--blue);
	border-radius: 10px;
	color: var(--wp--preset--color--white);
	padding: 14px 25px;
}

.latest-article .wp-block-post-excerpt__more-link:hover {
	background-color: var(--wp--preset--color--shark);
	color: var(--wp--preset--color--white);
}

.wp-block-post-author {
	align-items: center;
}

.wp-block-post-author__avatar {
	display: flex;
}

.wp-block-post-author__avatar img {
	border: solid 1px var(--wp--preset--color--black-squeeze);
	border-radius: 50%;
}

.wp-block-post-author__name {
	margin-block: 0px!important;
}

.wp-block-post-author__bio {
	margin-top: 0px!important;
}

.wp-block-query-pagination-numbers {
	align-items: center;
	display: flex;
	column-gap: 10px;
	justify-content: center;
}

.wp-block-query-pagination-numbers .page-numbers, .wp-block-query-pagination-next-arrow, .wp-block-query-pagination-previous-arrow {
	border: solid 1px var(--wp--preset--color--black-squeeze);
	border-radius: 5px;
	box-sizing: border-box;
	color: var(--wp--preset--color--blue);
	display: flex;
	justify-content: center;
	max-width: 37px;
	padding: 6px 15px;
	text-decoration: none;
	transition: all 0.5s ease;
}

.wp-block-query-pagination-numbers .page-numbers:hover, .wp-block-query-pagination-previous-arrow:hover, .wp-block-query-pagination-next-arrow:hover {
	background-color: var(--wp--preset--color--black-squeeze);
}

.wp-block-query-pagination-numbers .current {
	background-color: var(--wp--preset--color--black-squeeze);
	color: var(--wp--preset--color--east-bay);
}

/*Archive Page*/
.wp-block-post-excerpt__excerpt {
	margin-block: 1rem
}

/*On Going Projects Shortcode*/
.on-going-projects {
    column-gap: 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 32px;
    row-gap: 32px;
}

.on-going-projects .on-going-project-container {
    border: solid 2px var(--wp--preset--color--black-squeeze);
    border-radius: 15px;
    padding: 24px;
}

.on-going-projects .on-going-project-container .on-going-project-detail {
    display: flex;
    margin: 5px 0;
    overflow: visible;
    column-gap: 15px;
}

.on-going-projects .on-going-project-container .on-going-project-detail svg {
    width: 20px;
}

.on-going-projects .on-going-project-container .on-going-project-detail p {
    margin: 0;
}

.on-going-projects .add-project-btn {
    align-items: center;
    border: dashed 1px var(--wp--preset--color--blue);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    padding: 24px;
    overflow: visible;
    text-decoration: none;
}

.on-going-projects .add-project-btn svg {
    width: 50px;
}

@keyframes scroll-horizontal {
    to {
        transform: translateX(calc( -100% - 32px));
    }
}

/*Accordion*/
.active {
    background-color: var(--wp--preset--color--black-squeeze);
}

.active:after {
    content: "\2212"!important;
    transition: display 0.5s ease;
}

.accordion {
    margin-top: 64px;
    text-align: left;
}

.accordion__title {
    border: solid 1px var(--wp--preset--color--black-squeeze);
    border-radius: 16px;
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 300;
    padding: 24px;
    transition: background-color 0.5s ease;
}

.accordion__title:hover {
    background-color: var(--wp--preset--color--black-squeeze);
}

.accordion__title:after {
    content: '\002B';
    float: right;
    transition: display 0.5s ease;
}

.accordion__paragraph {
    box-sizing: border-box;
    max-height: 0;
    margin-block: 0;
    margin-inline: 24px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

/*
Company Profile
*/

.card {
    border: solid 1px var(--wp--preset--color--black-squeeze);
    border-radius: 20px;
    padding: 24px;
}

.card__left {
    text-align: left;
}

.card svg {
    background-color: var(--wp--preset--color--black-squeeze);
    border-radius: 50px;
    max-width: 40px;
    padding: 18px;
}

.card__title {
    margin-block: 20px 7px;
}

.card__p {
    margin-block: 0!important;
}

/* @media screen and (max-width: 1024px) {
    section {
        padding-block: 64px!important;
    }
} */