:root {
    --primary-color: #C5A059;
    /* Gold/Bronze like the circles in card */
    --secondary-color: #3E3227;
    /* Dark Brown */
    --text-color: #333333;
    --bg-light: #F9F9F7;
    /* Off-white / Cream */
    --white: #ffffff;
    --border-color: #e5e5e5;

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
}

/* Reset & Basics */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--white);
    margin: 0;
    line-height: 1.6;
}

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

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

img {
    max-width: 100%;
    height: auto;
}

/* Header */
.site-header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    height: 80px
}

/* Scrolled State */
.site-header.scrolled {
    background-color: #000000;
    padding: 10px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.site-header.scrolled .site-title a,
.site-header.scrolled .main-navigation a {
    color: var(--white);
}

.site-header.scrolled .menu-toggle .bar {
    background-color: var(--white);
}

/* Specific override for bars background since they use bg color not text color */
.site-header.scrolled .menu-toggle .bar {
    background-color: var(--white);
}

/* Link colors need to be explicit */
.site-header.scrolled .site-title a {
    color: var(--white);
}

.site-header.scrolled .main-navigation a {
    color: var(--white);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.site-title {
    font-size: 2.2rem;
    margin: 0;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.site-title a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-description {
    display: none;
    /* Hide description on scroll/desktop for cleaner look, or keep */
}

/* Navigation */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}

strong {

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

.main-navigation a {
    color: var(--secondary-color);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    font-weight: 700;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

.main-navigation a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.main-navigation a:hover::after {
    width: 100%;
}

.main-navigation a:hover {
    color: var(--primary-color);
}

.main-navigation .current-menu-item>a,
.main-navigation .current_page_item>a {
    color: var(--primary-color);
}

/* Ensure active color persists on scroll if desired, or let it inherit white? 
   User said "active page color gold", implying they want it gold. 
   scrolled class has high specificity matching, so we might need to be specific.
*/
.site-header.scrolled .main-navigation .current-menu-item>a,
.site-header.scrolled .main-navigation .current_page_item>a {
    color: var(--primary-color);
}

/* Menu Toggle (Burger) */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    gap: 6px;
    z-index: 1001;
    /* Above menu overlay */
}

.menu-toggle .bar {
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--secondary-color);
    transition: all 0.3s ease;
}

/* Mobile Menu Logic (using <1200px) */
@media (max-width: 1200px) {
    .menu-toggle {
        display: flex;
    }

    .main-navigation ul {
        display: none;
        /* Hidden by default */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--white);
        flex-direction: column;
        align-items: center;
        padding: 30px 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-top: 1px solid var(--border-color);
        gap: 20px;
    }

    /* When toggled open */
    .main-navigation.toggled ul {
        display: flex;
        animation: slideDown 0.3s ease-out;
    }

    /* Scrolled Mobile Menu overrides */
    /* When header is scrolled (black), keep dropdown white or make it black? 
       Usually better to keep it readable. Let's make dropdown black to match header. */
    .site-header.scrolled .main-navigation ul {
        background-color: #000000;
        border-top: 1px solid #333;
    }

    .main-navigation a {
        font-size: 1.1rem;
        /* Larger touch targets */
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer */
.site-footer {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 80px 0 30px;
    margin-top: 0;
    /* Remove top margin as sections handle padding */
}

.footer-widget-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-title {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    display: inline-block;
}

.site-info {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.legal-links {
    margin-top: 10px;
}

.legal-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s;
}

.legal-links a:hover {
    color: var(--primary-color);
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
    padding-bottom: 2px;
    display: inline-block;
}

.footer-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.footer-links a:hover::after {
    width: 100%;
}

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

/* Pages General */
.page-header {
    background-image: url('../images/subpage-bg.jpg');
    background-size: cover;
    background-position: center top;
    /* Parallax managed by JS */
    position: relative;
    padding: 120px 0;
    text-align: center;
    margin-bottom: 60px;
    color: var(--white);
}

/* General UL Styling for Gold Badges */
ul {
    list-style-position: inside;
    /* Or keep default */
}

ul li::marker {
    color: var(--primary-color);
    font-size: 1.2em;
    /* Optional: make bullet slightly larger */
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(62, 50, 39, 0.5);
    /* Brown overlay */
    z-index: 1;
}

.page-header .container {
    position: relative;
    z-index: 2;
}

.page-title {
    font-size: 3.5rem;
    color: var(--white);
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.page-header p {
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.9;
}

/* Home - Hero */
.hero-section {
    position: relative;
    height: 90vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    overflow: hidden;
}

.hero-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-bg-slider .slider-item {
    height: 90vh;
    min-height: 600px;
    background-size: cover;
    background-position: center top;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(62, 50, 39, 0.7) 0%, rgba(62, 50, 39, 0.3) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 20px;
    animation: fadeInUp 1s ease-out;
}

.hero-content h2 {
    font-size: 4rem;
    font-weight: 700;
    color: var(--white);
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
    line-height: 1.2;
}

.btn {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white);
    padding: 18px 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 50px;
    /* Rounded pill button */
    margin-top: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.4);
    border: 2px solid var(--primary-color);
}

.btn:hover {
    background: transparent;
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.6);
}

/* Sections */
.section {
    padding: 100px 0;
}

.section-bg-light {
    background-color: var(--bg-light);
}

.section-title {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 60px;
    position: relative;
    color: var(--secondary-color);
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: var(--primary-color);
    margin: 25px auto 0;
}

.section-title h2 {
    font-size: 1.05em;
}

.content-block h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 20px;
}

/* Team */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.team-member {
    background: var(--white);
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    text-align: center;
    border-top: 4px solid var(--primary-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.team-member h3 {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.team-role {
    color: var(--primary-color);
    font-style: italic;
    font-weight: 400;
    margin-bottom: 25px;
    display: block;
    font-family: var(--font-heading);
}

.team-details {
    text-align: left;
    font-size: 0.95rem;
    color: #666;
}

.team-details ul {
    padding-left: 20px;
}

/* Location */
.map-container {
    height: 500px;
    background: #eee;
    margin-bottom: 50px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

/* Contact Form 7 Overrides */
.wpcf7-form-control {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--white);
    transition: border-color 0.3s ease;
}

.wpcf7-form-control:focus {
    outline: none;
    border-color: var(--primary-color);
}

.wpcf7-submit {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    cursor: pointer;
    width: auto;
    transition: all 0.3s ease;
    padding: 15px 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wpcf7-submit:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
}

/* FAQ Accordion */
.faq-item {
    background: var(--white);
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.faq-question {
    padding: 25px;
    cursor: pointer;
    position: relative;
    font-weight: 700;
    color: var(--secondary-color);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    background: #fff;
    transition: background 0.3s;
}

.faq-question:hover {
    background: var(--bg-light);
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 300;
}

.faq-answer {
    padding: 0 25px 25px;
    display: none;
    color: #555;
    line-height: 1.8;
}

.faq-item.active .faq-answer {
    display: block;
    border-top: 1px solid var(--bg-light);
    animation: fadeIn 0.3s ease;
}

.faq-item.active .faq-question::after {
    content: '-';
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {

    .hero-content h2 {
        font-size: 2.2rem;
    }


    .page-title {
        font-size: 2.5rem;
    }
}

/* Cabinet Gallery Grid */
.cabinet-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 50px;
}

.gallery-item,
.gallery-item-static {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    height: 250px;
}

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

.gallery-item img,
.gallery-item-static img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Lightbox Modal */
.gallery-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    max-width: 90%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100VW;
}

#modal-image {
    height: auto;
    width: 100%;
    object-fit: contain;
    max-height: 70vh;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2001;
    transition: 0.3s;
    line-height: 1;
}

.modal-close:hover,
.modal-close:focus {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.modal-prev,
.modal-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    z-index: 2001;
}

.modal-next {
    right: 20px;
    border-radius: 3px 0 0 3px;
}

.modal-prev {
    left: 20px;
    border-radius: 3px 0 0 3px;
}

/* Homepage Slider */
.homepage-slider-section {
    background-color: var(--white);
    padding-bottom: 50px;
}

.homepage-slider {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.homepage-slider .slider-item {
    outline: none;
    /* remove slick focus outline */
}

.homepage-slider img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

/* Custom Slick Dots to match theme */
.slick-dots li button:before {
    font-size: 12px;
    color: var(--secondary-color);
    opacity: 0.5;
}

.slick-dots li.slick-active button:before {
    color: var(--primary-color);
    opacity: 1;
}

/* Team Page Custom Layout */
@media (min-width: 992px) {
    .team-page-container {
        width: 98%;
        max-width: 1800px;
        padding-left: 70px;
        padding-right: 70px;
    }

    .team-page-container .team-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px;
    }

    .team-page-container .team-member {
        padding: 20px;
    }

    .team-page-container .team-member h3 {
        font-size: 1.2rem;
    }
}

.modal-prev:hover,
.modal-next:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
}


/* Media Query for mobile lightbox */
@media (max-width: 768px) {

    .modal-prev,
    .modal-next {
        padding: 10px;
        font-size: 20px;
    }

    #modal-image {
        max-height: 60vh;
    }
}

.footer-links {
text-align: right
}

/* Media Query for mobile lightbox */
@media (max-width: 884px) {

    .footer-widget-area, .footer-branding {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

.footer-links {
text-align: center!important
}
}



/* Media Query for mobile lightbox */
@media (max-width: 674px) {

    .cabinet-gallery > .gallery-item-static:nth-child(odd){
        display:none!important;
    }

.footer-links {
text-align: center!important
}
}


li,
p,
a {
    font-family: Montserrat;
}