@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Poppins:wght@400;700&display=swap');

/* --- Base Styles --- */
:root {
    /* Define color variables for easier maintenance */
    --primary-blue: #19587B;
    --primary-red: #9D1C20;
    --secondary-blue: #005ea2; /* Used for hover states */
    --light-grey: #f2f2f2;
    --dark-text: #000;
    --light-text: #fff;
    --border-color: #ccc;

    /* Font sizes for better scalability */
    --base-font-size: 16px;
    --heading-1: 2.75rem; /* ~40px */
    --heading-2: 2.25rem; /* ~30px */
    --heading-3: 1.85rem; /* ~20px */

    /* Spacing variables */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Max width for containers */
    --max-content-width: 1200px;
}

*,
*::before,
*::after {
    box-sizing: border-box; /* Ensures padding and border are included in element's total width and height */
}

html {
    font-size: var(--base-font-size); /* Base font size for rem units */
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

body {
    margin: 0;
    padding: 0;
    color: var(--dark-text);
}

h1,
h2,
h3 {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif; /* Explicitly set font for headings */
}

h1 {
    font-size: var(--heading-1);
    text-align: center;
    color: var(--dark-text); /* Default color, can be overridden */
}

h2 {
    font-size: var(--heading-2);
    text-align: center;
    color: var(--light-text); /* Default for banner, can be overridden */
}

h3 {
    font-size: var(--heading-3);
    text-align: center; /* Default for h3, can be overridden */
}

a {
    text-decoration: none;
    color: var(--primary-blue); /* Default link color */
}

ul,
ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes extra space below images */
}

/* --- Header & Navigation --- */
header {
    background-color: var(--light-text);
    position: sticky;
    top: 0;
    z-index: 100; /* High z-index to ensure it stays on top */
    width: 100%;
    padding: var(--spacing-sm) 0; /* Consistent padding */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.mobilenavbar {
    display: none; /* Hidden by default, shown in mobile media query */
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg); /* Padding for mobile view */
}

.desktopnavbar {
    display: block; /* Shown by default, hidden in mobile media query */
}

.container-box {
    display: grid;
    grid-template-columns: auto repeat(5, 1fr) auto; /* Adjust columns as needed, 'auto' for logo/button */
    align-items: center;
    gap: var(--spacing-sm);
    max-width: var(--max-content-width);
    margin-inline: auto;
    padding: 0 var(--spacing-sm); /* Horizontal padding */
}

.navgrid {
    color: var(--primary-blue);
    text-align: center;
    font-size: 1rem; /* Use rem for better scalability */
    font-weight: bold;
    padding: 0 var(--spacing-sm);
    transition: color 0.3s ease, background-color 0.3s ease;
    white-space: nowrap; /* Prevents text from wrapping */
}

p.navgrid {
    display: flex; /* Ensures the text is centered */
    justify-content: center;
    align-items: center;
    grid-column: span 2; /* Span two columns for the contact info */
    font-size: 0.875rem; /* Smaller font size */
    color: var(--dark-text); /* Change color to black for better contrast on white background */
}

img.navgrid {
    width: clamp(150px, 15vw, 250px); /* Responsive image size */
    min-width: unset; /* Override previous min-width */
    object-fit: contain;
    grid-column: 1 / 2; /* Position logo in the first column */
}

/* Custom Button */
.custom-button {
    background-color: var(--primary-red);
    color: var(--light-text);
    border: 2px solid var(--light-text); /* Adjusted border thickness */
    border-radius: 20px; /* Consistent border-radius */
    padding: 0.75rem 1.5rem; /* More standard padding */
    font-weight: bold;
    text-align: center;
    display: flex; /* Use flex to center content inside button */
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    grid-column: -2 / -1; /* Position in the second to last column */
}

.custom-button:hover {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* Dropdown Navigation */
.bkdropdown,
.trustdropdown {
    position: relative; /* Changed to relative for dropdown positioning */
    display: inline-block; /* Allows items to sit next to each other */
}

.bkdropdown-content,
.trustdropdown-content {
    display: none;
    position: absolute; /* Position relative to the parent dropdown */
    background-color: var(--primary-red);
    min-width: 180px; /* Adjusted min-width for better readability */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1; /* Stacks correctly above other content */
    top: 100%; /* Position below the parent link */
    left: 0;
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
    overflow: hidden; /* Ensures child elements respect border-radius */
}

.bkdropdown-content a,
.trustdropdown-content a {
    color: var(--light-text);
    padding: 12px 16px;
    display: block;
    text-align: left;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.bkdropdown-content a:hover,
.trustdropdown-content a:hover {
    background-color: var(--primary-blue);
    color: var(--light-text);
}

.bkdropdown:hover .bkdropdown-content,
.trustdropdown:hover .trustdropdown-content {
    display: block;
}

/* --- Main Content Layout --- */
.mainpage {
    margin: 0;
}

.container {
    background-color: var(--primary-blue);
    padding: 2% 20%;
    color: var(--light-text);
}

.container p,
.probate p {
    color: var(--light-text);
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-lg); /* Adjusted padding */
}

.blue.welcome p {
    padding-top: var(--spacing-sm);
    margin: 0; /* Remove extra margin from specific welcome p */
}

/* --- Banner Section --- */
.banner {
    position: relative;
    background-color: var(--primary-blue); /* Fallback background */
    min-height: 400px; /* Ensure a minimum height for the banner */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Hide overflow from banner-slide */
}

.banner-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("images/johnsonfambanner.webp");
    background-size: cover; /* Cover the entire area */
    background-position: center;
    background-repeat: no-repeat;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(25, 88, 123, 0); /* Semi-transparent overlay */
    /* Removed gradients - simplify for consistency */
}

.banner-content {
    position: relative; /* Position relative to allow z-index over overlay */
    z-index: 2; /* Place content above the overlay */
    text-align: center;
    color: var(--light-text);
    padding: var(--spacing-lg);
    background-color: slategray;
}

.banner-content h1 {
    color: var(--light-text);
    font-size: clamp(2.5rem, 5vw, 4rem); /* Fluid font size for h1 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Subtle text shadow */
    margin-bottom: var(--spacing-sm);
    -webkit-text-stroke-width: 0; /* Remove webkit text stroke, usually not needed for modern designs */
}

.banner-content h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem); /* Fluid font size for h2 */
    color: var(--light-text);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.nobanner {
    display: none; /* Hidden by default, shown in mobile view */
}

/* --- Gallery Section (Services) --- */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: var(--spacing-lg);
    justify-content: center;
    padding: var(--spacing-lg) var(--spacing-md);
    color: var(--dark-text);
    text-align: center;
}

.gallery {
    background-color: var(--light-grey);
    border-radius: 10px;
    padding: var(--spacing-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Use flexbox for content within gallery item */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%; /* Ensures all cards are same height if content varies */
}

.gallery a {
    display: flex; /* Make the entire card clickable */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: inherit; /* Inherit color from parent */
}

.gallery:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--primary-blue); /* Highlight on hover */
}

.service-button {
    color: #000;
    padding: var(--spacing-md);
    width: 100%;
    height: 100%; /* Fill available space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.service-button:hover {
    color: var(--dark-text);
    border-color: var(--primary-blue);
}

h2.serviceheader {
    color: #000;
    margin-bottom: var(--spacing-sm);
}

.service-button:hover h2.serviceheader {
    color: var(--dark-text); /* Change color on hover */
}

ul.servicedetails {
    text-align: left;
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 1.5rem;
}

.service-button:hover ul.servicedetails {
    color: var(--dark-text);
}

/* --- Contact Section --- */
.contact-section {
    max-width: 800px; /* Reduced max-width for better form readability */
    margin: var(--spacing-xl) auto;
    padding: var(--spacing-lg);
    background-color: var(--light-grey);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: 'Poppins', sans-serif; /* Consistent font */
}

.profile-image {
    display: block;
    max-width: 120px;
    border-radius: 50%;
    margin: 0 auto var(--spacing-md);
    object-fit: cover;
    width: 120px; /* Ensures consistent size */
    height: 120px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.contact-form label {
    font-weight: bold; /* Use bold for labels */
    margin-bottom: 0.25rem;
    display: block;
    color: #333;
    font-size: 0.95rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--primary-red);
    outline: none;
    box-shadow: 0 0 0 2px rgba(157, 28, 32, 0.2); /* Subtle focus ring */
}

.contact-form button[type="submit"] {
    background-color: var(--primary-red);
    color: var(--light-text);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: flex-start; /* Align button to the start */
    min-width: 150px; /* Ensure button has a minimum width */
}

.contact-form button[type="submit"]:hover {
    background-color: var(--secondary-blue);
}

/* Error Box for Forms */
.form-errors {
    display: none; /* Controlled by JavaScript */
    background-color: #ffe0e0;
    color: #b00020;
    border: 1px solid #b00020;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    border-radius: 5px;
    font-size: 0.95em;
}

/* Honeypot field (hidden from users) */
.honeypot-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* --- Page Specific Content Styles (consolidated) --- */
.willstrustscontent,
.bankruptcycontent,
.trusttable,
.contactus,
.contacttable {
    margin: var(--spacing-lg) auto;
    border-radius: 10px;
    background-color: var(--light-grey);
    padding: var(--spacing-lg);
    width: clamp(90%, 800px, 95%); /* Responsive width for content blocks */
    color: var(--dark-text);
    font-family: 'Poppins', sans-serif;
}

.willstrustscontent h2,
.bankruptcycontent h2,
.trusttable h2 {
    color: var(--dark-text); /* Ensure headings are black on light backgrounds */
    text-align: left; /* Adjust alignment if needed */
    margin-bottom: var(--spacing-sm);
}

.bankruptcycontent p,
.bankruptcycontent li {
    padding: 0; /* Remove extra padding/margin from specific elements */
    margin-bottom: 0.5rem;
}

img.trustdiagram {
    width: clamp(150px, 30vw, 300px); /* Responsive size */
    margin: 0 auto var(--spacing-md);
}

.willstruststeps,
.bankruptcy,
.probate,
.contactuspage {
    background-color: var(--primary-blue);
    color: var(--light-text);
    padding: var(--spacing-xl) var(--spacing-lg); /* Consistent section padding */
}

.willstruststeps p,
.willstruststeps ol,
.willstruststeps ul {
    color: var(--light-text);
    padding: 0 var(--spacing-md); /* Consistent padding for lists */
    margin-bottom: var(--spacing-sm);
}

.probate h3 {
    color: var(--light-text);
    margin-bottom: var(--spacing-sm);
}

.probate ul,
.probate li {
    list-style-type: none; /* Ensure no list bullets */
    padding: 0;
}

/* Headings within content sections */
h3.headings {
    color: var(--dark-text);
    text-align: left;
    padding: 0;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

/* --- Utility Classes --- */
.centeralign {
    text-align: center;
    font-weight: bold;
}

.largetext {
    font-size: 1rem;
    font-weight: bold;
}

.smalltext {
    font-size: 0.875rem;
}

.moveDown {
    margin-top: var(--spacing-xl);
}

/* --- Footer --- */
footer {
    background-color: var(--light-grey); /* Set a background for consistency */
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex; /* Use flexbox for footer layout */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
}

footer p {
    color: var(--dark-text);
    margin: 0;
    flex-basis: auto; /* Allow text to take necessary space */
}

.social {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0; /* Prevent social icons from shrinking */
}

.social img {
    height: 30px; /* Consistent icon size */
    width: 30px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.social img:hover {
    transform: scale(1.1);
}

/* --- Mobile Navigation Specifics --- */
.mobilenavbar {
    display: none; /* Will be overridden by media query below */
    padding-top: var(--spacing-lg); /* Adjusted for fixed header compensation */
    position: relative;
    z-index: 101; /* Higher than header sticky for toggle */
}

/* Hamburger Icon */
.toggle {
    display: none; /* Hide the checkbox */
}

.hamburger {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px; /* Space between bars */
    padding: 10px; /* Clickable area */
    z-index: 102; /* Above mobile nav */
}

.hamburger span {
    background-color: var(--dark-text);
    display: block;
    height: 2px;
    width: 30px; /* Shorter width for hamburger bars */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger Animation */
.toggle:checked + .hamburger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.toggle:checked + .hamburger span:nth-child(2) {
    opacity: 0;
}

.toggle:checked + .hamburger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Nav Menu */
.mobile-nav {
    background-color: var(--primary-red);
    position: absolute; /* Position relative to .mobilenavbar */
    top: 100%; /* Below the mobile navbar */
    left: 0;
    width: 100%;
    height: 0; /* Hidden by default */
    overflow: hidden;
    transition: height 0.3s ease;
    z-index: 100; /* Stacks correctly below main navbar */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items to top within menu */
    padding-top: var(--spacing-lg); /* Space from top of menu */
}

.toggle:checked ~ .mobile-nav {
    height: calc(100vh - 100px); /* Fill remaining viewport height */
    overflow-y: auto; /* Allow scrolling if content is long */
}

.mobile-nav ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    padding: 0;
}

.mobile-nav li {
    margin-bottom: var(--spacing-md);
    list-style-type: none;
}

.mobile-nav a {
    background-color: darken(var(--primary-red), 10%); /* Slightly darker red */
    border-radius: 40px;
    display: block;
    width: clamp(200px, 60vw, 300px); /* Responsive button width */
    padding: 10px;
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--light-text);
    margin: 0 auto;
    transition: background-color 0.3s ease;
}

.mobile-nav a:hover {
    background-color: var(--secondary-blue);
}

/* --- Media Queries --- */

/* Tablet and smaller desktops (up to 1250px) */
@media (max-width: 1250px) {
    .desktopnavbar .container-box {
        grid-template-columns: auto repeat(5, 1fr); /* Remove button column */
        /* The custom-button will be hidden, so grid adjusts */
    }

    .custom-button {
        display: none; /* Hide custom button on smaller desktops */
    }

    .gallery-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* More compact grid */
        gap: var(--spacing-md);
    }
}

/* Large phones and tablets (up to 855px) */
@media (max-width: 855px) {
    header {
        padding-top: 0; /* Remove extra padding from header */
        height: 80px; /* Fixed height for mobile header */
        display: flex;
        align-items: center;
        justify-content: space-between;
/*        padding: 0 var(--spacing-md);*/
    }

    .desktopnavbar {
        display: none; /* Hide desktop nav */
    }

    .mobilenavbar {
        display: flex; /* Show mobile nav */
        width: 100%;
        padding: 0; /* Reset padding here, handled by header */
    }

    .mobilenavbar .navgrid:first-child { /* Targets the logo */
        margin-right: auto; /* Pushes logo to the left, hamburger to the right */
        width: clamp(100px, 20vw, 150px); /* Responsive logo size */
        min-width: unset;
    }

    .mobilenavbar p.navgrid {
        display: none; /* Hide contact info in mobile header */
    }

    .banner {
        display: none; /* Hide banner on mobile */
    }

    .banner-content {
        display: none; /* Hide banner content on mobile */
    }

    .nobanner {
        display: block; /* Show no-banner content on mobile */
        color: var(--light-text);
        text-align: center;
        padding-top: calc(80px + var(--spacing-lg)); /* Space for fixed header + extra padding */
        background-color: var(--primary-blue); /* Background for this section */
        padding-bottom: var(--spacing-lg);
    }

    .nobanner h1 {
        color: var(--light-text);
        font-size: 2rem;
        margin-bottom: var(--spacing-sm);
    }

    .nobanner p {
        color: var(--light-text);
        font-size: 1.1rem;
        padding: 0 var(--spacing-md);
    }
    
    .container {
    background-color: var(--primary-blue);
    padding: 2% 8%;
    color: var(--light-text);
}

    .form-grid {
        grid-template-columns: 1fr; /* Stack form fields vertically */
    }

    .gallery-container {
        grid-template-columns: 1fr; /* Single column layout for services */
        gap: var(--spacing-md);
    }

    /* Adjust padding for page sections on smaller screens */
    .willstrusts,
    .bankruptcy,
    .probate,
    .contactuspage {
        padding: var(--spacing-xl) var(--spacing-md); /* More padding on top to clear header */
    }

    .trusttable,
    .willstrustscontent,
    .bankruptcycontent,
    .contactus,
    .contacttable {
        padding: var(--spacing-md); /* Consistent padding */
        width: 90%; /* Fill more width on mobile */
    }

    .willstruststeps p,
    .willstruststeps ol,
    .willstruststeps ul {
        padding: 0 var(--spacing-sm); /* Reduced side padding for lists */
    }

    footer {
        flex-direction: column; /* Stack footer items vertically */
        text-align: center;
        padding: var(--spacing-md);
    }

    footer p {
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }

    .social {
        width: 100%;
        justify-content: center;
    }
}

/* Small mobile devices (up to 420px) */
@media (max-width: 420px) {
    /* Further adjustments for very small screens if needed */
    .mobilenavbar .navgrid:first-child {
        width: clamp(180px, 18vw, 120px);
    }

    .mobile-nav a {
        width: clamp(180px, 70vw, 250px); /* Make mobile nav buttons narrower */
        font-size: 1.1rem;
    }

    .contact-form button[type="submit"] {
        width: 100%; /* Make submit button full width */
        align-self: stretch;
    }

    .contact-section {
        padding: var(--spacing-md) var(--spacing-sm); /* Even less padding */
    }
    
    .container {
    background-color: var(--primary-blue);
    padding: 2% 5%;
    color: var(--light-text);
}

    .willstrusts,
    .bankruptcy,
    .probate,
    .contactuspage {
        padding: var(--spacing-xl) var(--spacing-sm); /* Minimal padding for sections */
    }

    .trusttable,
    .willstrustscontent,
    .bankruptcycontent,
    .contactus,
    .contacttable {
        padding: var(--spacing-sm);
        width: 95%;
    }

    .nobanner h1 {
        font-size: 1.75rem;
    }
}