/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global Styles */
:root {
    /* New Color Palette */
    --color-primary: #38424a; /* Ironstone */
    --color-background: #f9fafb;
    --color-accent: #2fa4a2; /* Teal */
    --color-text-light: #f9fafb; /* For dark backgrounds */
    --color-text-dark: #38424a; /* For light backgrounds */

    /* Old variables - for reference during transition, will be removed/updated */
    /* --primary-color: #3E434C; */ /* COLORBOND Ironstone® */
    /* --accent-color: #40E0D0; */ /* Cool aqua - placeholder, adjust for WCAG AA */
    /* --white-color: #FFFFFF; */
    /* --light-gray-color: #f4f4f4; */
    
    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Lato', sans-serif;
}

body {
    font-family: var(--font-body);
    font-weight: 400; /* Default weight for Lato */
    line-height: 1.65; /* Adjusted for Lato's readability */
    color: var(--color-text-dark);
    background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700; /* Default bold for Montserrat headings */
    margin-bottom: 0.75em;
    color: var(--color-primary); 
    line-height: 1.3; /* Adjusted for Montserrat */
}

h1 { font-size: 2.5rem; font-weight: 700; } /* Example: Explicit weight */
h2 { font-size: 2rem; font-weight: 600; } /* Example: Slightly lighter bold */
h3 { font-size: 1.5rem; font-weight: 600; }

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0;
}

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

ul {
    list-style: none;
}

/* Header Styles */
header {
    background-color: var(--color-background); /* Updated from white */
    padding: 1em 0;
    border-bottom: 1px solid #e0e0e0; /* Lightened border */
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* Logo image sizing */
.logo img {
  height: 70px;          /* pick the height you want */
  width: auto;           /* keeps aspect ratio */
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}


/*@media (min-width: 768px) {*/
/*  .logo img {*/
/*    height: 55px;*/
/*  }*/
/*}*/

.logo:hover {
    text-decoration: none;
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-menu li {
    margin-left: 20px;
}

.nav-menu li a {
    color: var(--color-text-dark); 
    font-weight: 600; /* Montserrat for nav items if desired, or Lato 700 */
    font-family: var(--font-heading); /* Using Montserrat for nav */
}

.nav-menu li a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.cta-button {
    background-color: var(--color-accent);
    color: var(--color-text-light); 
    padding: 10px 20px;
    border-radius: 5px;
    font-family: var(--font-body); /* Lato for buttons */
    font-weight: 700; /* Bold Lato */
    display: inline-block;
    border: 2px solid var(--color-accent);
    text-transform: uppercase; /* Optional: common for CTAs */
    letter-spacing: 0.5px; /* Optional: for button text */
}

.cta-button:hover {
    background-color: #28908e; 
    color: var(--color-text-light);
    text-decoration: none;
    border-color: #28908e;
}

.cta-button.secondary {
    background-color: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    /* font-family and font-weight will be inherited or can be set explicitly if different */
}

.cta-button.secondary:hover {
    background-color: var(--color-accent);
    color: var(--color-text-light); 
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-primary);
    position: relative;
    transition: 0.3s;
}

.hamburger::before,
.hamburger::after {
    content: '';
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-primary);
    position: absolute;
    transition: 0.3s;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    top: 8px;
}

/* Footer Styles */
footer {
    background-color: var(--color-primary); 
    color: var(--color-text-light); 
    padding-top: 40px; /* More padding at the top */
    padding-bottom: 0; /* Copyright will have its own padding */
    margin-top: 40px;
    text-align: left; /* Align text to left for sections */
}

.footer-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px; /* Space between columns */
    padding-bottom: 30px; /* Space before copyright */
}

.footer-section {
    flex-basis: 100%; /* Mobile first - full width */
    margin-bottom: 30px;
}

.footer-section h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600; /* Montserrat semi-bold */
    color: var(--color-text-light); /* Explicitly light for headings */
    margin-bottom: 15px;
    border-bottom: 1px solid var(--color-accent); /* Accent color underline */
    padding-bottom: 8px;
    display: inline-block; /* To make border-bottom fit content */
}

.footer-section p,
.footer-section ul {
    margin-bottom: 10px;
    font-size: 0.9rem; /* Slightly smaller for footer content */
    line-height: 1.7;
}

.footer-section ul {
    list-style: none;
    padding-left: 0; /* Remove default padding */
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section a {
    color: var(--color-text-light);
    text-decoration: none; 
}

.footer-section a:hover {
    color: #e0e0e0; /* Using a light grey that ensures high contrast on dark primary background */
    text-decoration: underline; 
}

.footer-section.social-media .halaxy-placeholder {
    margin-top: 15px;
    padding: 10px;
    background-color: rgba(255,255,255,0.1); /* Slight highlight for placeholder */
    border-radius: 4px;
    font-size: 0.85rem;
    text-align: center;
}

.footer-copyright {
    background-color: rgba(0,0,0,0.1); /* Slightly darker shade for copyright separation */
    padding: 15px 0;
    text-align: center;
    font-size: 0.85rem;
}

.footer-copyright p {
    margin-bottom: 0;
}

/* Tablet and Desktop Layout for Footer Sections */
@media (min-width: 768px) {
    .footer-section {
        flex-basis: calc(33.333% - 20px); /* Adjust for 3 columns with gap */
        margin-bottom: 0; /* No margin bottom for columns */
    }
    .footer-section.contact-details,
    .footer-section.quick-links,
    .footer-section.social-media {
        padding-right: 20px; /* Add some spacing between columns */
    }
    .footer-section.social-media {
        padding-right: 0; /* No right padding for the last column */
    }
}

/* Hero Section */
.hero-section {
    position: relative; /* For overlay positioning */
    background-color: var(--color-primary); /* Placeholder background */
    /* Replace with actual background image later: e.g., background-image: url('../images/hero-image.jpg'); */
    background-size: cover;
    background-position: center center;
    padding: 100px 0; /* Adjust padding for visual impact */
    text-align: center;
    overflow: hidden; /* Ensures pseudo-elements don't cause overflow */
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-primary); /* Ironstone overlay */
    opacity: 0.6;
    z-index: 1;
}

.hero-section .hero-content {
    position: relative;
    z-index: 2; /* Content above overlay */
    max-width: 800px; /* Limit width of content for better readability */
}

.hero-section h1 {
    color: var(--color-text-light); /* Light text for dark overlay */
    font-size: 3rem; /* Larger, more prominent tagline */
    font-weight: 700; /* Bold Montserrat */
    margin-bottom: 0.5em; /* Adjust spacing */
}

.hero-section .hero-subtitle {
    color: var(--color-text-light);
    font-size: 1.2rem; /* Readable subtitle size */
    line-height: 1.7;
    margin-bottom: 1.5em; /* Space before CTA */
    font-weight: 300; /* Lighter Lato for subtitle */
}

.hero-section .cta-button {
    /* Styles for .cta-button are already defined:
       background-color: var(--color-accent);
       color: var(--color-text-light);
       font-family: var(--font-body);
       font-weight: 700; 
       padding: 10px 20px; (or updated values)
       text-transform: uppercase;
       letter-spacing: 0.5px;
    */
    padding: 15px 30px; /* Larger padding for hero CTA */
    font-size: 1.1rem; /* Slightly larger font for hero CTA */
}

/* Services Overview Section */
#services-overview {
    padding: 40px 0;
    text-align: center;
}

.service-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    margin-top: 30px;
}

.card {
    background-color: var(--white-color);
    border: 1px solid var(--light-gray-color);
    border-radius: 8px;
    padding: 20px;
    width: calc(33.333% - 20px); /* Adjust for gap */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: left;
}

.card h3 {
    color: var(--accent-color);
}

/* About Teaser Section */
#about-teaser {
    background-color: var(--light-gray-color);
    padding: 40px 0;
    text-align: center;
}

/* Generic Page Template Styles */
/* NOTE: Removed duplicate .generic-page rules that were here */
.generic-page .container {
    padding-top: 30px;
    padding-bottom: 30px;
}

.generic-page h1 {
    margin-bottom: 20px;
    color: var(--color-primary); /* Already updated via global h1 style */
}

.generic-page h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--color-primary); /* Already updated via global h2 style */
}

.generic-page p {
    margin-bottom: 15px;
    line-height: 1.7;
    /* Default text color is var(--color-text-dark) from body */
}

.generic-page ul {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}

.generic-page ul li {
    margin-bottom: 8px;
}

/* Contact Page Styles */
.contact-page .container {
    padding-top: 30px;
    padding-bottom: 30px;
}

.contact-page h1 {
    text-align: center;
    margin-bottom: 30px;
    /* Uses global h1 color: var(--color-primary) */
}

.contact-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.contact-form-section {
    flex: 2; /* Takes twice the space of details */
    min-width: 300px; /* Ensures form is usable on smaller flex views */
}

.contact-details-section {
    flex: 1;
    min-width: 280px; /* Ensures details are readable */
    background-color: #e9ecef; /* Using similar to hero, or a lightened primary */
    padding: 20px;
    border-radius: 8px;
}

.contact-form-section h2,
.contact-details-section h2 {
    margin-bottom: 20px;
    color: var(--color-primary); /* Already updated via global h2 style */
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--color-text-dark); /* Updated from primary */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da; /* Lightened border */
    border-radius: 5px;
    font-family: var(--font-body); /* Lato for form inputs */
    font-size: 1rem;
    color: var(--color-text-dark);
    background-color: var(--color-background); 
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(47, 164, 162, 0.3); /* Updated to new accent color */
}

.contact-page .cta-button { /* Specificity for contact page button if needed */
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
}

.details-group {
    margin-bottom: 20px;
}

.details-group h3 {
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 8px;
}

.details-group p {
    margin-bottom: 5px;
    line-height: 1.6;
}

.details-group p a {
    color: var(--primary-color);
}

.details-group p a:hover {
    color: var(--color-accent);
}

/* Services Landing Page Styles */
.services-landing-page .container {
    padding-top: 30px;
    padding-bottom: 30px;
}

.services-landing-page h1 {
    text-align: center;
    margin-bottom: 15px;
    /* Uses global h1 color: var(--color-primary) */
}

.services-landing-page .intro-paragraph {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px auto;
    font-size: 1.1rem;
    line-height: 1.7;
    /* Default text color from body */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.service-card {
    background-color: var(--color-background); 
    border: 1px solid #dee2e6; 
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(56, 66, 74, 0.07); /* Subtle shadow with primary color base */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures "Learn More" is at the bottom if cards have varying content */
    height: 100%; /* For equal height cards in CSS Grid context if not using flexbox for the grid itself */
}

.service-card-icon {
    width: 60px;
    height: 60px;
    background-color: var(--color-accent);
    border-radius: 50%;
    margin: 0 auto 20px auto; /* Center the icon and add space below */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: 1.5rem; /* Example size for a potential font icon */
    /* Add placeholder text or style for visual if no icon is present */
}
.service-card-icon::after {
    content: ""; /* Placeholder text for empty icon div */
    font-size: 0.8rem;
    color: var(--color-text-light);
}


.service-card h2 { 
    font-size: 1.4rem; /* Slightly reduced for better fit */
    color: var(--color-primary); 
    margin-bottom: 10px;
    margin-top: 0; 
}

.service-card p {
    font-size: 0.9rem; /* Slightly reduced for better fit */
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; 
    /* Default text color from body */
}

.service-card .cta-button.secondary {
    width: auto; 
    padding: 10px 20px;
    align-self: center; 
    /* Uses .cta-button.secondary styles: var(--color-accent) for text/border */
}

/* Service Detail Page (can reuse generic styles or add specific ones) */
/* Uses .generic-page class for base styling */
.service-detail-page h1 { 
    margin-bottom: 20px; 
    /* Uses global h1 color: var(--color-primary) */
}

.service-detail-page section { 
    margin-bottom: 30px;
}

.service-detail-page h2 { 
    margin-top: 0; 
    margin-bottom: 15px;
    color: var(--color-accent); /* Accent color for subheadings to stand out */
    font-size: 1.75rem; 
}

.service-detail-page p, 
.service-detail-page ul {
    margin-bottom: 15px;
    line-height: 1.7;
    /* Default text color from body */
}

.service-detail-page ul {
    list-style: disc;
    margin-left: 20px;
}

.service-detail-page .cta-button { 
    display: inline-block; 
    margin-top: 10px; 
    width: auto; 
    /* Uses .cta-button styles: background var(--color-accent), text var(--color-text-light) */
}

/* Blog Listing Page Styles */
.blog-listing-page .intro-paragraph { 
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px auto;
    font-size: 1.1rem;
    line-height: 1.7;
    /* Default text color from body */
}

.blog-posts-list {
    margin-top: 30px;
}

.blog-post-entry {
    background-color: var(--color-background); /* Match page background or use white */
    border: 1px solid #dee2e6; /* Lightened border */
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.blog-post-entry h2 {
    font-size: 1.75rem; 
    color: var(--color-primary); /* Already updated via global h2 style */
    margin-top: 0; 
    margin-bottom: 5px;
}

.blog-post-entry h2 a {
    color: var(--color-primary);
    text-decoration: none;
}

.blog-post-entry h2 a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.blog-post-entry .post-meta {
    font-size: 0.9rem;
    color: #6c757d; /* Slightly muted text color */
    margin-bottom: 15px;
}

.blog-post-entry .post-excerpt {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
    /* Default text color from body */
}

.blog-post-entry .cta-button.secondary {
    padding: 8px 15px; 
    font-size: 0.9rem;
    /* Uses .cta-button.secondary styles */
}

/* Single Blog Post Page Styles */
.single-post-page .container {
    padding-top: 30px;
    padding-bottom: 30px;
}

.single-post-page h1 { 
    font-size: 2.2rem; 
    margin-bottom: 10px;
    /* Uses global h1 color: var(--color-primary) */
}

.single-post-page .post-meta {
    font-size: 0.95rem;
    color: #6c757d; /* Slightly muted text color */
    margin-bottom: 25px;
}

.single-post-page .post-content p {
    margin-bottom: 20px;
    line-height: 1.8; 
    /* Default text color from body */
}

.single-post-page .post-content ul,
.single-post-page .post-content ol {
    margin-bottom: 20px;
    margin-left: 25px;
}

.single-post-page .post-content li {
    margin-bottom: 8px;
    line-height: 1.7;
}

.single-post-page .post-content img { 
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 5px;
}

/* Form Status Messages Styles */
.form-status-messages {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
}

.success-message {
    background-color: #d1e7dd; /* Bootstrap-like success green */
    color: #0f5132;
    border: 1px solid #badbcc;
}

.error-message {
    background-color: #f8d7da; /* Bootstrap-like error red */
    color: #842029;
    border: 1px solid #f5c2c7;
}


/* Responsive Styles */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px; /* Adjust based on header height */
        left: 0;
        width: 100%;
    background-color: var(--color-background); /* Updated from white */
    border-top: 1px solid #e0e0e0; /* Lightened border */
        padding: 1em 0;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu li {
        margin: 10px 0;
        text-align: center;
    }

    .menu-toggle {
        display: block; /* Show hamburger on mobile */
    }

    header .container .cta-button.book-online {
        display: none; /* Optionally hide the book online button next to nav on smallest screens */
    }

    .contact-content-wrapper {
        flex-direction: column;
    }

    .card {
        width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; } /* Global h1, might need to override for hero if too small */
    h2 { font-size: 1.75rem; }

    .hero-section h1 { /* Specific adjustment for hero h1 on mobile */
        font-size: 2.25rem; /* Ensure hero tagline is still prominent */
    }
    
    .hero-section .hero-subtitle {
        font-size: 1rem;
    }

    .hero-section .cta-button {
        padding: 12px 25px;
        font-size: 1rem;
    }
    
    /* Old #hero .cta-button rules - can be removed if #hero is no longer used */
    /* #hero .cta-button {
        display: block;
        margin: 10px auto;
        width: 80%;
        max-width: 300px;
    } */

    .card {
        width: 100%;
    }
}

/* Mobile Quick Actions Bar */
.mobile-quick-actions {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-primary); /* Dark background */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Subtle shadow above */
    z-index: 1001; /* Above header's sticky z-index */
    padding: 5px 0; /* Minimal vertical padding */
}

.mobile-quick-actions .quick-action-link {
    flex: 1; /* Distribute space equally */
    text-align: center;
    padding: 10px 5px; /* Padding for tap target */
    color: var(--color-text-light); /* Light text */
    text-decoration: none;
    font-size: 0.8rem; /* Small but readable */
    font-weight: 600; /* Slightly bolder for readability */
    font-family: var(--font-body); /* Using Lato */
}

.mobile-quick-actions .quick-action-link:hover {
    background-color: var(--color-accent); /* Teal accent for hover */
    color: var(--color-text-light);
}

/* Show on mobile screens */
@media (max-width: 768px) {
    .mobile-quick-actions {
        display: flex; /* Use flex to lay out children */
        justify-content: space-around;
        align-items: center;
    }
    
    /* Adjust main content bottom padding to prevent overlap with quick actions bar */
    body {
        padding-bottom: 50px; /* Height of the quick actions bar, adjust as needed */
    }
}