/*
 Theme Name:     Sacha Judd
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Husk
 Author URI:     https://www.husk.co.nz/
 Template:       Divi
 Version:        1.0.033
*/

/* CSS Custom Properties for consistent theming */
:root {
    /* Colors */
    --color-red: #ed174f;
    --color-yellow: #ffee4d;
    --color-blue: #99d4f5;
    --color-purple: #39153b;
    --color-navy: #293847;
    --color-grey: #dfdcd4;
	--color-grey-light: #b0b0b0;
    --color-white: #ffffff;
    
    /* Typography */
    --font-primary: 'Poppins', Arial, sans-serif;
    --font-heading: 'Poppins', Arial, sans-serif;
    
    /* Font Sizes - Using rem for better scaling */	
	--text-sm: 1rem;        /* 16px */
	--text-base: 1.125rem;  /* 18px */
	--text-lg: 1.25rem;     /* 20px */
	--text-xl: 1.5rem;      /* 24px */
	--text-2xl: 2rem;       /* 32px */
	--text-3xl: 2.5rem;     /* 40px */
	--text-4xl: 3rem;       /* 48px */
	--text-5xl: 15rem;      /* 240px */
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Other */
    --border-radius: 0;
    --transition-speed: 300ms;
}

/* Responsive Typography */
@media only screen and (max-width: 768px) {
    :root {
        --text-5xl: 2rem;
        --text-4xl: 1.75rem;
        --text-3xl: 1.5rem;
        --text-2xl: 1.25rem;
        --text-xl: 1.125rem;
    }
}

@media only screen and (min-width: 1920px) {
    :root {
        --text-5xl: 20rem; 
    }
}

/* Base Typography */
body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.8;
}

/* Typography Mixins */
.text-content {
    font-family: var(--font-primary);
    line-height: 1.8;
    font-weight: 400;
}

/* Heading Styles */
.et_pb_text_inner h1, 
.et_pb_text_inner h2, 
.et_pb_text_inner h3, 
.et_pb_text_inner h4, 
.et_pb_text_inner h5, 
.et_pb_text_inner h6,
.et_pb_posts .pagination a {
    font-family: var(--font-heading);
    line-height: 1.2em !important;
    font-weight: 800;
}

.et_pb_text_inner h1 {
    line-height: 0.75em !important;
	font-size: clamp(3.5rem, 12vw, 15rem) !important;
	align-self: baseline !important; 
}

/* Consistent heading sizes */
.et_pb_text_inner h1, .h1 { font-size: var(--text-5xl); }
.et_pb_text_inner h2, .h2, .post-template-default .et_pb_text_inner h1, .project-template-default .et_pb_text_inner h1 { font-size: var(--text-4xl) !important; }
.et_pb_text_inner h3, .h3, .et_pb_blog_grid .et_pb_post h2.entry-title, .dp-dfg-item h2.entry-title { font-size: var(--text-3xl) !important; }
.et_pb_text_inner h4, .h4 { font-size: var(--text-2xl); }
.et_pb_text_inner h5, .h5 { font-size: var(--text-xl); }
.et_pb_text_inner h6, .h6 { font-size: var(--text-base); }

/* Content Elements */
.et_pb_text_inner p, 
.et_pb_text_inner ul li, 
.et_pb_text_inner ol li, 
.et_pb_toggle_content, 
.et_pb_text_inner, 
.et_pb_blurb_description,
.et_pb_tab_content,
cite {
    @extend .text-content;
}

/* Text Size Utilities */
.text-large {
    font-size: var(--text-lg);
}

.text-small {
    font-size: var(--text-xs);
}

/* Color Utilities */
.color-utilities {
    --colors: (
        red: var(--color-red),
        yellow: var(--color-yellow),
        blue: var(--color-blue),
        purple: var(--color-purple),
        navy: var(--color-navy),
        grey: var(--color-grey),
        white: var(--color-white)
    );
}

/* Color Utility Classes */
/* Text Colors */
.text-red { color: var(--color-red); }
.text-yellow { color: var(--color-yellow); }
.text-blue { color: var(--color-blue); }
.text-purple { color: var(--color-purple); }
.text-navy { color: var(--color-navy); }
.text-grey { color: var(--color-grey); }
.text-white { color: var(--color-white); }

/* Button Base Styles */
.btn, .nf-form-content input[type=submit] {
    display: inline-block;
    font-size: var(--text-base) !important;
    font-family: var(--font-primary);
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.7 !important;
    border-radius: var(--border-radius) !important;
    border: 2px solid !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
    transition: all var(--transition-speed) ease;
    cursor: pointer !important;
	height: auto !important;
}

/* Button Variants */
.btn-red {
    color: var(--color-white) !important;
    background-color: var(--color-red) !important;
    border-color: var(--color-red) !important;
}

.btn-blue {
    color: var(--color-navy) !important;
    background-color: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
}

.btn-yellow, .nf-form-content input[type=submit] {
    color: var(--color-navy) !important;
    background-color: var(--color-yellow) !important;
    border-color: var(--color-yellow) !important;
}

.btn-purple {
    color: var(--color-white) !important;
    background-color: var(--color-purple) !important;
    border-color: var(--color-purple) !important;
}

.btn-navy {
    color: var(--color-white) !important;
    background-color: var(--color-navy) !important;
    border-color: var(--color-navy) !important;
}

/* Hover States */
.btn:hover {
    opacity: 0.85;
}

/* Form Styles */
.nf-form-fields-required, .nf-after-field {
	display: none;
}

.nf-error.field-wrap .nf-field-element:after {
	background-color: var(--color-red) !important;
}

.nf-form-content {
    --form-padding: var(--spacing-md);
    --form-border-color: var(--color-grey);
    --form-text-color: var(--color-navy);
    --form-placeholder-color: var(--color-grey-light); /* Add your placeholder color variable */
    
    input:not([type=submit]),
    textarea {
        border-radius: var(--border-radius) !important;
        background-color: var(--color-white) !important;
        padding: var(--form-padding) !important;
        color: var(--form-text-color) !important;
        font-size: var(--text-sm);
        border: 1px solid var(--form-border-color) !important;
        
        &::placeholder {
            color: var(--form-placeholder-color) !important; /* Apply placeholder text color */
        }

        &:focus {
            background-color: var(--color-white) !important;
        }
    }
}

/* Responsive Layout Utilities */
.layout-utilities {
    --breakpoints: (
        tablet: 980px,
        mobile: 600px
    );
    
    --columns: (
        two: 50%,
        three: 33.33%,
        four: 25%
    );
}

/* Generate responsive column classes */
@each $breakpoint-name, $breakpoint in var(--breakpoints) {
    @media only screen and (max-width: $breakpoint) {
        @each $column-name, $width in var(--columns) {
            .$(column-name)-columns-$(breakpoint-name) .et_pb_column {
                width: $width !important;
            }
        }
    }
}

/* Menu Styles */
#main-header {
    box-shadow: none;
}

.nav li li {
    line-height: 1.4;
}

/* custom icon override to email */
.et-social-rss a.icon:before {
	content: "\e076"; 
	font-family: "ETmodules"; 
}

/* custom icon override to bluesky */
.et-social-foursquare a.icon:before {
    content: '';
    display: inline-block;
    width: 32px !important; 
    height: 32px !important; 
    background-image: url('https://gamingcommission.club/www.sachajudd.com/wp-content/uploads/2025/01/bluesky-icon-512.png');
    background-size: cover; 
}

.et-social-foursquare a.icon {
    display: inline-block; /* Ensure the link behaves as a block element */
    padding: 8px; /* Adjust padding as needed */
}

/* blog */
div.wp-block-columns {
    padding-top: 20px;
    padding-bottom: 20px;
}