/*
 Theme Name:   Traffix Group
 Theme URI:    https://traffixgroup.com.au
 Author:       Matt Gibson Creative
 Author URI:   https://mgcreative.com.au
 Template:     generatepress
 Version:      1.0
*/

:root {
    --site-wrapper-width: 2500px;
    --body-bg-colour: oklch(0.984 0.003 247.858);
    --section-inline-padding: clamp(1rem, 0.512rem + 1.86vi, 2rem);
    --h1-font-size: clamp(2.375rem, 2.315vw + 1.264rem, 3rem);
    --h2-font-size: clamp(1.75rem, 1.389vw + 1.083rem, 2.125rem);
    --h3-font-size: clamp(1.313rem, 1.157vw + 0.757rem, 1.625rem);
    --h4-font-size: clamp(1.188rem, 0.694vw + 0.854rem, 1.375rem);
    --icon-slide-translate-x: 40%;
}

/* Remove default padding from header */
.site-header {
    padding-left: var(--section-inline-padding);
    padding-right: var(--section-inline-padding);
}

/* Text Balance / Pretty */
:is(h1, h2, h3, h4, h5, h6, .balance) {
    text-wrap: balance;
}

p,
div,
blockquote,
li {
    text-wrap: pretty;
}

/* Set colour of all links */
a {
	color: var(--global-color-9)
}

/* UTILITIES */
/* line-limits */
.line-limit-3,
.line-limit-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-limit, 3);
    overflow: hidden;
}

.line-limit-2 {
    --line-limit: 2;
}

.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Site Wrapper */

body {
    background-color: var(--body-bg-colour, #ffffff);
}

.site-wrapper {
    width: 100%;
    max-width: var(--site-wrapper-width);
    margin-inline: auto;
    background-color: var(--base-100, #ffffff);
}

/* Helper to contain stacking context of gallery-alt-stacked images where z-index is used */
div:has(.gallery-alt-stacked) {
    isolation: isolate;
}

/* ---- Sliding Icon Styles ---- */

@media (prefers-reduced-motion: no-preference) {
    .sliding-icons > span {
        animation: slide ease-in-out;
        animation-timeline: view();
    }
}

@keyframes slide {
    to {
        transform: translatex(var(--icon-slide-translate-x));
    }
}

@media (min-width: 1025px) {
    @view-transition {
        navigation: auto;
    }
}

/* Change sliding icon background colour based on previous section bg-colour class */

.bg-brand + .sliding-icons-section {
	background-color: var(--bg-brand);
} 

.bg-grey + .sliding-icons-section {
	background-color: var(--base-2);
}

/* Change footer Icon color based on previous section bg-colour class */
.bg-brand + .site-footer .gb-shape svg {
    fill: var(--bg-brand);
}

.bg-grey + .site-footer .gb-shape svg {
    fill: var(--base-2);
}

/* Fix spacing for footer components */
.featured-projects-section:has(+ .team-contact-section) {
	padding-bottom: 0;
}

.slideout-panel {
    background-color: var(--base-100, #ffffff);
}

.project-filters-panel {
    overflow-wrap: anywhere;
}

.project-filters-controls .search-filter-input-button {
    --search-filter-scale-font-size: .875rem;
    font-weight: 600;
}

.search-filter-field--control-type-load_more > button {
    background-color: var(--base);
    font-size: 1.125rem;
    font-weight: 600;
    transition: all 0.5s ease 0s;
    border-radius: .25rem;
    padding: .75rem 1.25rem;
}

.search-filter-field--control-type-load_more > button:is(:hover,:focus) {
    color: var(--contrast-3);
    background-color: var(--base-2);
}

.accordion-with-form .gb-accordion__item-open .gb-accordion__content {
    max-height: unset!important;
}

/* WP Default Table Styles */
.wp-block-table thead {
    border-color: var(--accent);
    color: var(--accent);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: var(--bg-brand);
}