/* ========================================================= */
/* 🎨 1. THEME VARIABLES — User-chosen colors                 */
/* ========================================================= */
:root {
    /* Base Theme Colors */
    /* Contrast text derived from primary luminance */
    --theme-mode: Dark; /* injected by code-behind */
    --theme-primary: #ffffff; /* Black */
    --theme-secondary: #918383; /* Brown */
    --theme-accent: #00ff91; /* Accent brown */
    --primary-contrast-text: #000000;
    --secondary-contrast-text: #000000;
    --accent-contrast-text: #000000;
    /* Derived from Primary */
    --color-primary: var(--theme-primary);
    --primary-light: color-mix(in srgb, var(--theme-primary) 70%, white 30%);
    --primary-dark: color-mix(in srgb, var(--theme-primary) 85%, black 15%);
    --primary-border: color-mix(in srgb, var(--theme-primary) 60%, white 40%);
    --primary-muted: color-mix(in srgb, var(--primary-contrast-text) 50%, gray 50%);
    /* Derived from Secondary */
    --color-secondary: var(--theme-secondary);
    --secondary-light: color-mix(in srgb, var(--theme-secondary) 70%, white 30%);
    --secondary-dark: color-mix(in srgb, var(--theme-secondary) 85%, black 15%);
    --secondary-border: color-mix(in srgb, var(--theme-secondary) 60%, white 40%);
    --secondary-muted: color-mix(in srgb, var(--secondary-contrast-text) 50%, gray 50%);
    /* Derived from Accent */
    --color-accent: var(--theme-accent);
    --accent-light: color-mix(in srgb, var(--theme-accent) 70%, white 30%);
    --accent-dark: color-mix(in srgb, var(--theme-accent) 85%, black 15%);
    --accent-border: color-mix(in srgb, var(--theme-accent) 60%, white 40%);
    --accent-muted: color-mix(in srgb, var(--accent-contrast-text) 50%, gray 50%);
    /* General UI colors */
    --color-dark: var(--theme-primary);
    --color-light: white;
    --color-border: var(--primary-border);
    --color-muted: var(--primary-muted);
    --color-overlay: color-mix(in srgb, var(--theme-secondary) 70%, rgba(0,0,0,0.3) 30%);
    /* Fonts */
    --font-body: 'Roboto Slab', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --font-script: 'Kaushan Script', cursive;
    --font-serif: 'Droid Serif', serif;
}

/* ========================================================= */
/* 🧩 2. BASE ELEMENTS                                       */
/* ========================================================= */
/*body {
    font-family: var(--font-body);
    overflow-x: hidden;
    background-color: var(--color-light);
}*/

body {
    font-family: var(--font-body);
    overflow-x: hidden;
    background-color: color-mix(in srgb, var(--theme-secondary) 70%, white 30%);
    color: var(--secondary-contrast-text);
}

p {
    line-height: 1.75;
}

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

    a:hover {
        color: var(--color-secondary);
    }

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

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

/* ========================================================= */
/* 🧩 3. COMPONENTS — Buttons, Navbar, Sections, etc.         */
/* ========================================================= */
.btn-primary {
    background-color: var(--color-secondary);
    border-color: var(--primary-border);
    color: var(--secondary-contrast-text);
}

    .btn-primary:hover {
        background-color: var(--color-primary);
        border-color: var(--secondary-border);
    }

.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--primary-border);
    color: var(--secondary-contrast-text);
}

.btn-success {
    background-color: var(--color-accent);
    border-color: var(--seco);
    color: var(--accent-contrast-text);
}

/* Navbar */
.navbar {
    background-color: var(--color-primary) !important;
    color: var(--primary-contrast-text) !important;
    font-family: var(--font-heading);
}

.navbar-brand {
    color: var(--primary-contrast-text) !important;
    font-family: var(--font-script);
    font-weight: bold;
}

    .navbar-brand:hover {
        color: var(--accent-light) !important;
    }

.nav-link {
    color: var(--primary-contrast-text) !important;
    transition: color 0.3s ease;
}

    .nav-link:hover,
    .nav-link:focus {
        color: var(--accent-light) !important;
    }

.navbar-toggler {
    border-color: var(--primary-border) !important;
}

.navbar-toggler-icon {
    background-image: none;
    color: var(--primary-contrast-text) !important;
}
/* Dropdown menus inside navbar */
.navbar .dropdown-menu {
    background-color: var(--primary-dark) !important;
    color: var(--primary-contrast-text) !important;
}

.navbar .dropdown-item {
    color: var(--primary-contrast-text) !important;
}

    .navbar .dropdown-item:hover {
        background-color: var(--accent-dark) !important;
        color: var(--accent-contrast-text) !important;
    }

/* Masthead */
header.masthead {
    text-align: center;
    color: var(--color-light);
    background-image: url("../img/header-bg.png");
    background-size: cover;
}

    header.masthead .intro-heading {
        font-family: var(--font-heading);
    }

/* Portfolio */
#portfolio .portfolio-hover {
    background: var(--color-overlay);
}

#portfolio .portfolio-caption {
    background-color: var(--color-light);
}

    #portfolio .portfolio-caption p {
        font-family: var(--font-serif);
    }

/* Timeline */
.timeline:before {
    background-color: var(--color-border);
}

.timeline > li .timeline-image {
    background-color: var(--color-primary);
    border: 7px solid var(--color-border);
    color: var(--primary-contrast-text);
}

/* Team */
.team-member img {
    border: 7px solid var(--color-light);
}

/* Contact */
section#contact {
    background-color: var(--color-secondary);
}

    section#contact .section-heading {
        color: var(--secondary-contrast-text);
    }

    section#contact .form-control:focus {
        border-color: var(--color-primary);
    }


/* Footer */
footer {
    background-color: var(--secon) !important; /* dynamic shade */
    color: var(--primary-contrast-text) !important;
    font-family: var(--font-body);
    padding: 20px;
    display: flex;
    flex-direction: column; /* stack elements vertically */
    align-items: center; /* horizontal centering */
    justify-content: center; /* vertical centering */
    text-align: center; /* center text inside */
}

    footer a {
        color: var(--primary-contrast-text) !important;
        text-decoration: none;
        display: inline-block;
        margin: 5px 0;
    }

        footer a:hover {
            color: var(--accent-light) !important;
        }

    footer .footer-heading {
        font-family: var(--font-heading);
        font-weight: bold;
        color: var(--primary-contrast-text);
        margin-bottom: 10px;
        text-align: center;
    }

    footer .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }

        footer .footer-links li {
            margin-bottom: 8px;
            color: var(--primary-contrast-text);
        }


/* Bottom Menu */
.bottom-menu {
    background-color: var(--primary-dark); /* same as navbar */
    color: var(--primary-contrast-text);
    font-family: var(--font-body);
    padding: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    .bottom-menu a {
        color: var(--primary-contrast-text);
        margin: 0 12px;
        text-decoration: none;
        font-weight: 500;
    }

        .bottom-menu a:hover {
            color: var(--accent-light);
        }

    .bottom-menu .menu-heading {
        font-family: var(--font-heading);
        font-weight: bold;
        color: var(--primary-contrast-text);
        margin-right: 20px;
    }



/* Social Buttons */
ul.social-buttons li a {
    background-color: var(--color-secondary) !important;
    color: var(--secondary-contrast-text) !important;
}

    ul.social-buttons li a:hover {
        background-color: var(--color-accent) !important;
        color: var(--accent-contrast-text) !important;
    }

/* ========================================================= */
/* 🔧 4. CUSTOM UTILITIES                                    */
/* ========================================================= */
.border-one {
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.vertical-text {
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
    position: absolute;
    left: 0;
    top: 50%;
    font-size: 16px;
    font-weight: bold;
}

.carousel-item {
    height: 30vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    background-size: contain;
}

/* ========================================================= */
/* 📸 5. PLUGIN STYLES — Jcrop, ScratchCard, SocialMedia      */
/* ========================================================= */
.jcrop-holder {
    direction: ltr;
    text-align: left;
    -ms-touch-action: none;
}

.jcrop-vline, .jcrop-hline {
    background: var(--color-light) url("Jcrop.gif");
    position: absolute;
}

.jcrop-handle {
    background-color: var(--color-dark);
    border: 1px solid var(--color-light);
    width: 7px;
    height: 7px;
}

/* ScratchCard */
.scratch-wrapper {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.scratch-content {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
}



.card {
    background-color: var(--secondary-light); /* card body background */
    border: 1px solid color-mix(in srgb, var(--theme-primary) 20%, var(--theme-secondary) 80%);
    color: var(--secondary-contrast-text);
    border-radius: .5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.card-header {
    background-color: var(--theme-primary); /* header matches page background */
    color: var(--primary-contrast-text);
    font-weight: 600;
}

.card-footer {
    background-color: var(--theme-primary); /* footer same as header */
    color: var(--primary-contrast-text);
}


.modal-content {
    background-color: var(--primary-light); /* modal body same as card */
    color: var(--secondary-contrast-text);
    border: 1px solid color-mix(in srgb, var(--theme-primary) 25%, var(--theme-secondary) 75%);
    border-radius: .5rem;
}

.modal-header {
    background-color: var(--theme-primary); /* header matches page background */
    color: var(--primary-contrast-text);
    border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 40%, var(--theme-secondary) 60%);
}

.modal-footer {
    background-color: var(--theme-primary); /* footer same as header */
    color: var(--primary-contrast-text);
    border-top: 1px solid color-mix(in srgb, var(--theme-primary) 40%, var(--theme-secondary) 60%);
}

.modal-title {
    font-weight: 600;
}