/*
 * Basic styling for the landing page of the WordPress Link Editor extension.
 * Provides a clean, professional look with a focus on readability and structure.
 */

/* Body styles: Sets base font, line height, background, and text color */
body {
    font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa; /* Lighter background */
    color: #343a40; /* Darker text */
}

/* Header styles: Background, color, padding, text alignment, and shadow */
header {
    background: #0073aa; /* WordPress primary color */
    color: #fff;
    padding: 2rem 1rem; /* More padding */
    text-align: center;
    margin-bottom: 30px; /* More space below header */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Header content styles: Use flexbox to center content vertically */
.header-content {
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    gap: 15px; /* Space between items */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

/* Header h1 styles: Font size and weight for the main title */
header h1 {
    margin: 0;
    font-size: 2.5em; /* Larger heading */
    font-weight: 700; /* Bolder font */
}

/* Main Icon Container: Centers the icon in the main content area */
.main-icon-container {
    text-align: center; /* Center the image inside */
    padding: 20px 0; /* Add some padding above and below */
    margin-bottom: 20px; /* Space below the icon */
}

/* Extension Icon (Main): Set size and display block for centering */
.extension-icon-main {
    display: block; /* Make it a block element */
    margin: 0 auto; /* Center the block element */
    width: 240px; /* Set a larger fixed width (double 120px) */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure it doesn't overflow on small screens */
}


/* Main content area styles: Max width, margin for centering, and padding */
main {
    max-width: 1000px; /* Slightly wider content area */
    margin: 20px auto;
    padding: 0 20px;
}

/* Section styles: Background, padding, margin, border radius, and shadow */
section {
    background: #fff;
    padding: 30px; /* More padding inside sections */
    margin-bottom: 30px; /* Space between sections */
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle shadow for sections */
}

/* Intro section paragraph styles: Font size and bottom margin */
section.intro p {
    font-size: 1.1em; /* Slightly larger text for intro */
    margin-bottom: 15px;
}

/* Section title (h2) styles: Color, margins, font size, and underline */
h2 {
    color: #0056b3; /* A slightly different blue for section titles */
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 2em;
    border-bottom: 2px solid #0073aa; /* Underline for section titles */
    padding-bottom: 10px;
    display: flex; /* Use flexbox to align icon and text */
    align-items: center; /* Vertically align icon and text */
    gap: 10px; /* Space between icon and text */
}

/* Feature title (h3) styles: Color, margins, font size, and flex for icon */
h3 {
    color: #0073aa; /* WordPress blue for feature titles */
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 1.3em;
    display: flex; /* Use flexbox to align icon and text */
    align-items: center; /* Vertically align icon and text */
    gap: 8px; /* Space between icon and text */
}

/* Styles for Font Awesome icons */
.fas, .fab {
    color: #0073aa; /* Match WordPress blue */
    font-size: 1.2em; /* Slightly larger than surrounding text */
}

h3 .fas, h3 .fab {
    font-size: 1em; /* Match h3 text size */
}

.button .fas, .button .fab {
     margin-right: 8px; /* Space between icon and button text */
     color: #fff; /* White color for icon in button */
}


/* Unordered list styles: Remove default list style and padding */
ul {
    list-style: none; /* Remove default list style */
    padding: 0;
    margin: 0;
}

/* List item styles: Background, padding, margin, border radius, and accent border */
ul li {
    background: #e9ecef; /* Light background for list items */
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 5px solid #0073aa; /* Accent border */
}

/* Nested unordered list styles: Top margin and padding, re-add disc style */
ul li ul {
    margin-top: 10px;
    padding-left: 20px;
    list-style: disc; /* Re-add disc style for nested lists */
}

/* Nested list item styles: Remove background and border */
ul li ul li {
    background: none; /* No background for nested list items */
    padding: 5px 0;
    margin-bottom: 5px;
    border-left: none; /* No accent border for nested items */
}

/* Screenshots gallery styles: Use flexbox to display screenshots in a row, prevent wrapping */
.screenshot-gallery {
    display: flex; /* Enable flexbox */
    gap: 15px; /* Space between images */
    flex-wrap: nowrap; /* Prevent images from wrapping */
    justify-content: center; /* Center images */
    margin-top: 20px;
    overflow-x: auto; /* Add horizontal scroll if images exceed container width */
    padding-bottom: 10px; /* Add padding for scrollbar */
}

/* Individual screenshot image styles: Set fixed width, maintain aspect ratio, border, shadow */
.screenshot-img {
    width: 300px; /* Set a fixed width for each image (adjust as needed) */
    height: auto; /* Maintain aspect ratio */
    flex-shrink: 0; /* Prevent images from shrinking below their width */
    border: 1px solid #ddd; /* Subtle border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-radius: 5px;
    object-fit: cover; /* Crop image if necessary to fit (optional) */
}


/* Button styles: Display, background, color, padding, text decoration, border radius, margin, font size, weight, and transitions */
.button {
    display: inline-block; /* Important for text-align: center to work on parent */
    background: #28a745; /* Green for call to action */
    color: #fff;
    padding: 12px 25px; /* More padding */
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.1s ease;
    border: none;
    cursor: pointer;
    display: inline-flex; /* Use flexbox to align icon and text in button */
    align-items: center; /* Vertically align icon and text */
    justify-content: center; /* Center content */
}

/* Button hover effect: Darker background and slight lift */
.button:hover {
    background-color: #218838; /* Darker green on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Button active effect: Remove lift */
.button:active {
    transform: translateY(0); /* Press effect */
}


/* Call to action section styles: Text alignment, background */
.call-to-action {
    text-align: center;
    background: #e2f0cb; /* Light green background */
    border-left: none; /* Remove accent border */
}

/* Call to action paragraph styles: Font size, weight, color */
.call-to-action p {
    font-size: 1.3em;
    font-weight: 600;
    color: #1e7e34; /* Darker green text */
}

/* Pro features section styles: Background */
.pro-features {
    background: #d4edda; /* Another light green shade */
    border-left: none; /* Remove accent border */
}

/* Footer styles: Text alignment, padding, margin, color, font size, and top border */
footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
    color: #6c757d; /* Grey color */
    font-size: 0.9em;
    border-top: 1px solid #e9ecef;
}

/* --- Contact Form Styles --- */
.contact-form {
    /* Add some padding if needed */
}

/* *** ADDED: Center align the form content, including the button *** */
.contact-form form {
    text-align: center; /* Center inline or inline-block children */
}

.contact-form .form-group {
    margin-bottom: 15px; /* Space between form groups */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align label and input */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    text-align: left; /* Reset text-align for form groups */
}

.contact-form label {
    flex-basis: 100px; /* Give labels a fixed base width */
    flex-shrink: 0; /* Prevent labels from shrinking */
    text-align: right; /* Align label text to the right */
    margin-right: 15px; /* Space between label and input */
    font-weight: 600; /* Make labels slightly bolder */
    padding-top: 5px; /* Align label text better with input top */
}

/* Align 'Message' label to the top for textarea */
.contact-form .form-group:has(textarea) label {
    align-self: flex-start; /* Align 'Message' label to the top */
}


.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    flex-grow: 1; /* Allow input/textarea to take remaining space */
    padding: 10px;
    border: 1px solid #ced4da; /* Standard border color */
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box; /* Include padding and border in element's total width/height */
    max-width: 100%; /* Prevent overflow on small screens */
}

.contact-form textarea {
    min-height: 120px; /* Ensure textarea has a decent minimum height */
    resize: vertical; /* Allow vertical resizing */
}

/* Adjust alignment for smaller screens if needed */
@media (max-width: 500px) {
    .contact-form .form-group {
        flex-direction: column; /* Stack label and input vertically */
        align-items: flex-start; /* Align items to the start */
    }
    .contact-form label {
        flex-basis: auto; /* Remove fixed basis */
        text-align: left; /* Align label text left */
        margin-bottom: 5px; /* Space below label */
        margin-right: 0; /* Remove right margin */
    }
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        width: 100%; /* Make inputs full width */
    }
}


.contact-form .form-note {
    font-size: 0.9em;
    color: #6c757d;
    margin-top: 15px;
    text-align: center;
}

.contact-form .alternative-contact {
    text-align: center;
    margin-top: 20px; /* Space above this paragraph */
    font-size: 1em;
}

.contact-form .alternative-contact a {
    color: #0073aa; /* WordPress blue for the link */
    text-decoration: none;
}

.contact-form .alternative-contact a:hover {
    text-decoration: underline;
}

/* Styles for the form messages container */
.form-messages {
    margin-bottom: 20px; /* Space below messages */
}

/* General message styles */
.message {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: 600;
    display: flex; /* Use flexbox to align icon and text */
    align-items: center; /* Vertically align icon and text */
    gap: 10px; /* Space between icon and text */
    text-align: left; /* Ensure text within messages is left-aligned */
}

/* Success message styles */
.message.success {
    background-color: #d4edda; /* Light green background */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb; /* Green border */
}

/* Error message styles */
.message.error {
    background-color: #f8d7da; /* Light red background */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb; /* Red border */
}

/* Style for icons within messages */
.message .fas {
    font-size: 1.2em; /* Slightly larger icon */
}


/* Basic Responsiveness: Adjust styles for smaller screens */
@media (max-width: 768px) {
    /* Adjust header title size */
    header h1 {
        font-size: 2em;
    }

    /* Adjust main content padding */
    main {
        padding: 0 10px;
    }

    /* Adjust section padding */
    section {
        padding: 20px;
    }

    /* Adjust section title size */
    h2 {
        font-size: 1.8em;
    }

    /* Adjust button size and padding */
    .button {
        font-size: 1em;
        padding: 10px 20px;
    }

    /* Adjust main icon size on smaller screens */
    .extension-icon-main {
        width: 180px; /* Make it a bit smaller on mobile */
    }

    /* Allow screenshot gallery to scroll horizontally on small screens */
    .screenshot-gallery {
        justify-content: flex-start; /* Align items to the start for scrolling */
    }

    /* Adjust screenshot image width for smaller screens if needed, but fixed width might be okay with scrolling */
    .screenshot-img {
         width: 250px; /* Slightly smaller width on small screens */
    }


} /* End of @media (max-width: 768px) */

/* Note: The form alignment styles were added above, outside the media query initially,
   and then adjusted inside the @media (max-width: 500px) query for smaller screens. */