/* 
 * Theme CSS for Dr. Shea Conway's Website
 * This file customizes Bulma's default colors and adds additional styling
 */

/* Custom color variables that override Bulma defaults */
:root {
    /* Primary Colors (Focus on muted blues for trust and serenity) */
    --primary-color: #778899;       /* Muted Slate Blue - Trustworthy and calming */
    --primary-light: #A7BCCF;       /* Lighter Blue - For hover states, gentle and approachable */
    --primary-dark: #5F7381;        /* Darker Blue - For active states or subtle accents, still subdued */
    --primary-lighter: #f4f8fb;       /* Lighter Blue - For hover states, gentle and approachable */
    /* Secondary Colors (Soft greens for growth and well-being) */
    --secondary-color: #92B4A7;     /* Sage Green - Represents balance, nature, and growth */
    --secondary-light: #C0D6CC;     /* Lighter Sage Green - For subtle accents or less prominent elements */

    /* Neutral Colors (Warm and light for openness and readability) */
    --light-color: #F8F8F8;         /* Off-White - Clean, open, and inviting background */
    --dark-color: #4A4A4A;          /* Medium Dark Gray - Soft on the eyes, professional text color */

    /* Accent Colors (Purposeful but soft and harmonious) */
    --accent-color: #87CEEB;        /* Sky Blue / Soft Azure - For "Info" or non-urgent highlights, still calming */
    --warning-color: #FFDDAA;       /* Soft Peach / Muted Gold - For "Warning" but with warmth, not alarm */
    --danger-color: #CD5C5C;        /* Muted Terracotta / Indian Red - For "Danger"
}

/* Override Bulma's default colors */
.is-primary {
    background-color: var(--primary-color) !important;
}

.is-primary:hover {
    background-color: var(--primary-light) !important;
}

.is-primary:active {
    background-color: var(--primary-dark) !important;
}
    .has-text-primary {
        color: var(--primary-color) !important;
    }
.has-background-primary-light{background-color: var(--primary-light) !important;}
    .has-background-primary-lighter{background-color: var(--primary-lighter) !important;}
    .has-background-secondary-light{background-color: var(--secondary-light) !important;}
.is-danger{background-color: var(--danger-color) !important;}

.has-text-danger {
    color: var(--danger-color) !important;
}
    .has-text-warning {
        color: var(--warning-color) !important;
    }
.has-text-primary {
    color: var(--primary-color) !important;
}

.is-secondary {
    background-color: var(--secondary-color) !important;
}

.has-text-secondary {
    color: var(--secondary-color) !important;
}

.is-256x256 {
    width: 256px;
    height: 256px;

}
    .border-bottom{border-bottom: 1px solid #ccc}
/* Header styling */
header {
    background-color: var(--primary-color);
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
}
.media-left{margin-right: auto !important;}
/* Navigation styling */
.navbar {
    margin-top:5px;
    background-color: var(--light-color);
}

.navbar-item{

}

.navbar-item.is-active {
    background-color: transparent !important;
    color: var(--primary-color) !important;
    font-weight: bold;
}

.navbar-item:hover {
    background-color: rgba(50, 115, 220, 0.1) !important;
    color: var(--primary-color) !important;
}
/* Hero section styling */
.hero {
    background-blend-mode: multiply;
    background: var(--primary-color) url("/img/hero.jpg") no-repeat center center;
    background-size: cover;
}

.hero .title, 
.hero .subtitle {
    color: var(--light-color) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.hero .button.is-white.is-outlined {
    border-width: 2px;
    transition: all 0.3s ease;
}

.hero .button.is-white.is-outlined:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.hero .button.is-secondary {
    transition: all 0.3s ease;
}

.hero .button.is-secondary:hover {
    background-color: var(--secondary-light) !important;
}

/* Footer styling */
.footer {
    background-blend-mode: multiply;
    background: var(--light-color) url("/img/footer-bg.jpg") no-repeat center center;
    background-size: cover;
    padding: 3rem 1.5rem;
}

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

.footer a:hover {
    color: var(--primary-dark);
}
.section-break {
    border-top: 1px solid #dbdbdb; /* This is Bulma's default border color */
    height: 1px;
    margin-top: 4rem !important; /* The my-6 class will override this */
    margin-bottom: 4rem !important;
}
.shadow-sm {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.border-rounded-sm {
    border-radius: 0.35rem;
}
.border-light{border: 1px solid rgba(0, 0, 0, 0.1);}
.line-height-1-4{line-height: 1.4em}



    .panel-block-trigger {
        cursor: pointer;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.75em 1em; /* Give it padding like a normal panel-block */
        color: hsl(0, 0%, 29%); /* Bulma's default text color */
    }

    .panel-block-trigger:hover {
        background-color: hsl(0, 0%, 98%); /* Subtle hover effect */
    }

    .panel-block-trigger .panel-icon {
        transition: transform 0.3s ease;
    }

    .panel-block.is-active .panel-block-trigger .panel-icon {
        transform: rotate(45deg);
    }

    .panel-block-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        background-color: hsl(0, 0%, 98%); /* Light background for content */
    }

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    /* Header responsive adjustments */
    header .columns.is-vcentered {
        text-align: center;
    }

    header .is-flex {
        justify-content: center;
    }

    header .has-text-right {
        text-align: center !important;
    }

    header .is-align-items-flex-end {
        align-items: center !important;
    }

    /* Hero responsive adjustments */
    .hero.is-medium .hero-body {
        padding: 6rem 1.5rem;
    }

    .hero .title.is-2 {
        font-size: 1.75rem;
    }

    .hero .subtitle.is-4 {
        font-size: 1.25rem;
    }

    .hero .buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero .button {
        margin: 0.5rem 0;
        width: 100%;
        max-width: 250px;
    }
}
}