/*
Theme Name: Hello Capitol Roots
Theme URI: https://github.com/angelosleebos/CapitolRootsWebsite
Template: hello-elementor
Author: Sleebos IT
Author URI: https://sleebos.nl
Description: A child theme of Hello Elementor for Capitol Roots band website. Features parallax scrolling, event listings, galleries, and customizable colors and typography options. Built specifically for bands and musicians using Elementor page builder.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-capitol-roots
Tags: music, band, entertainment, portfolio, one-column, custom-colors, custom-menu, featured-images, theme-options, elementor-ready

Hello Capitol Roots WordPress Theme, Copyright 2024 Sleebos IT
Hello Capitol Roots is distributed under the terms of the GNU GPL v3 or later
*/

/* 
=================================================================
This is a child theme of Hello Elementor. The parent theme styles
are loaded via functions.php. Add your custom styles below or use
the WordPress Customizer for theme options.
=================================================================
*/

/* Custom Capitol Roots Styles */

/* Basic theme variables - can be overridden via Customizer */
:root {
    --cr-primary-color: #ff6600;
    --cr-secondary-color: #333333;
    --cr-link-color: #ff6600;
    --cr-body-font: 'PT Sans', sans-serif;
    --cr-heading-font: 'PT Sans', sans-serif;
    --cr-body-font-size: 16px;
}

/* Apply typography settings */
body {
    font-family: var(--cr-body-font);
    font-size: var(--cr-body-font-size);
    color: var(--cr-secondary-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cr-heading-font);
}

/* Link styles */
a {
    color: var(--cr-link-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--cr-primary-color);
}

/* Button styles */
.button, 
button, 
input[type="submit"], 
input[type="button"],
.elementor-button {
    background-color: var(--cr-primary-color);
    color: #ffffff;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover, 
button:hover, 
input[type="submit"]:hover, 
input[type="button"]:hover,
.elementor-button:hover {
    background-color: var(--cr-secondary-color);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Parallax support - requires Stellar.js or similar */
.parallax-section {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* One-page section styling */
section {
    padding: 80px 0;
}

section h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 36px;
    color: var(--cr-secondary-color);
}

/* Navigation improvements for one-page layout */
.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* Ensure content doesn't hide under fixed header */
body.has-fixed-header {
    padding-top: 80px;
}

/* Gallery styling for bands */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.gallery-item {
    overflow: hidden;
    border-radius: 8px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Event listing styles */
.event-item {
    border-left: 4px solid var(--cr-primary-color);
    padding: 20px;
    margin-bottom: 20px;
    background: #f9f9f9;
    transition: all 0.3s ease;
}

.event-item:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.event-date {
    color: var(--cr-primary-color);
    font-weight: bold;
    font-size: 18px;
}

.event-venue {
    color: var(--cr-secondary-color);
    margin-top: 5px;
}

/* Social media icons */
.social-icons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
}

.social-icons a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: var(--cr-primary-color);
    color: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: var(--cr-secondary-color);
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    section {
        padding: 50px 0;
    }
    
    section h2 {
        font-size: 28px;
        margin-bottom: 30px;
    }
    
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
}

/* Footer styling */
footer {
    background-color: var(--cr-secondary-color);
    color: #fff;
    padding: 40px 0 20px;
}

footer a {
    color: #fff;
}

footer a:hover {
    color: var(--cr-primary-color);
}

/* Widget areas */
.widget {
    margin-bottom: 30px;
}

.widget-title {
    color: var(--cr-primary-color);
    font-size: 20px;
    margin-bottom: 15px;
}

/* Contact form styling */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: var(--cr-body-font);
}

.wpcf7-form input[type="submit"] {
    background-color: var(--cr-primary-color);
    color: #fff;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: var(--cr-secondary-color);
}

/* Elementor compatibility enhancements */
.elementor-section {
    overflow: hidden;
}

.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
    font-family: var(--cr-heading-font);
}