/*
Theme Name: AP Chiropractic Theme
Theme URI: https://your-website.com/ (Optional)
Author: Your Name / Company Name
Author URI: https://your-website.com/ (Optional)
Description: Custom theme for AP Chiropractic based on static HTML design. Requires a multilingual plugin (e.g., Polylang) for language switching. Page content needs to be added via the WordPress editor.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ap-chiropractic-theme
Tags: custom-theme, chiropractic, two-column, accessibility-ready

*/

/* --- Paste ALL your existing CSS from the <style> block here --- */
:root {
    --primary-color: #005A9C; /* A professional blue */
    --accent-color: #FFA500; /* A vibrant orange */
    --text-color: #333;
    --light-gray: #f4f4f4;
    --white: #ffffff;
    --footer-bg: #2c3e50;
    --footer-text: #ecf0f1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Arial', sans-serif; line-height: 1.6; color: var(--text-color); overflow-x: hidden; position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3, h4, h5, h6 { color: var(--primary-color); margin-bottom: 0.8em; }
p { margin-bottom: 1em; }
a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--accent-color); }
img { max-width: 100%; height: auto; display: block; }
.btn { display: inline-block; background-color: var(--primary-color); color: var(--white); padding: 12px 25px; border: none; border-radius: 25px; cursor: pointer; text-align: center; text-decoration: none; font-size: 1rem; transition: background-color 0.3s ease, transform 0.2s ease; }
.btn:hover { background-color: var(--accent-color); color: var(--white); transform: translateY(-2px); }

/* Header */
header { background-color: var(--white); padding: 0.5rem 0; border-bottom: 1px solid var(--light-gray); position: sticky; top: 0; z-index: 1000; }
header .container { display: flex; justify-content: space-between; align-items: center; }
/* Logo styling - may need adjustment depending on the_custom_logo() output */
.logo { flex-shrink: 0; } /* Prevent logo from shrinking too much */
.custom-logo-link { display: flex; align-items: center; text-decoration: none; }
.custom-logo { max-height: 50px; width: auto; margin-right: 10px; display: block; }
.logo .logo-text { /* Used as fallback if no custom logo */
    font-weight: bold; color: var(--primary-color); text-decoration: none;
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; /* Visually hide text if logo image is present */
}
.no-custom-logo .logo .logo-text { /* Show text only if no logo */
     position: static; width: auto; height: auto; overflow: visible;
}
.logo a:hover { color: var(--primary-color); } /* Prevent default hover */

/* Navigation Styling */
nav { flex-grow: 1; } /* Allow nav to take remaining space */
nav ul { list-style: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; padding: 0; margin: 0; }
nav ul li { margin-left: 15px; margin-bottom: 0; }
/* Target links generated by wp_nav_menu */
nav ul li a { color: var(--primary-color); text-decoration: none; padding: 5px 8px; transition: color 0.3s ease; display: inline-block; font-size: 0.9rem; }
/* Target potential phone/text/email links (might need specific classes added via menu editor or walker) */
nav ul li a[href^="tel:"], nav ul li a[href^="sms:"], nav ul li a[href^="mailto:"] {
    /* Add specific styles if needed, e.g., different color or icon */
}
nav ul li a:hover,
nav ul li a[href^="tel:"]:hover,
nav ul li a[href^="sms:"]:hover,
nav ul li a[href^="mailto:"]:hover {
    color: var(--accent-color);
}
/* Style the current page menu item */
nav ul .current-menu-item > a,
nav ul .current_page_item > a {
    font-weight: bold;
    color: var(--accent-color); /* Example highlight */
}
/* Language switcher styles (will depend on your plugin's output) */
nav ul li.lang-item a, /* Example Polylang class */
nav ul li.wpml-ls-item a /* Example WPML class */
{
    /* Style language switcher links if needed */
}
nav ul li.lang-toggle-li { /* Remove - Button is added by plugin */ }
.lang-toggle-btn { /* Remove - Button is added by plugin */ }

/* Mobile Menu Handling (Hidden for now) */
.menu-toggle { display: none; } /* Needs implementation if hamburger menu desired */

/* Page Structure & Transitions - REMOVE transitions CSS */
main { flex: 1; position: relative; overflow: visible; /* Changed from hidden */ }
.page { /* Remove positioning/opacity/transform styles - handled by WP page loads */
    /* position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; */
    /* background-color: var(--white); opacity: 0; visibility: hidden; */
    /* transform: translateX(100%); */
    padding: 40px 0;
    /* transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; */
}
/* Remove active/exiting page transition styles */
/* .page.active { ... } */
/* .page.exiting { ... } */
/* Remove language specific page hiding */
/* .page-es { ... } */

/* Section Styling */
.section { padding: 40px 0; }
.section-bg { background-color: var(--light-gray); }

/* Home Page Specific (These styles will apply if the specific classes/structure are used within the WP Page editor content) */
.hero { text-align: center; padding: 60px 20px; background-color: var(--primary-color); color: var(--white); }
.hero h1 { font-size: 2.8rem; margin-bottom: 0.5em; color: var(--white); }
.hero p { font-size: 1.3rem; margin-bottom: 2em; color: var(--white); opacity: 0.9; }
.top-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.service-item { text-align: center; padding: 20px; border: 1px solid var(--light-gray); border-radius: 8px; background-color: var(--white); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
.service-item img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; margin: 0 auto 15px auto; }
.service-item h3 { margin-bottom: 10px; font-size: 1.2rem; }
.service-item h3 a { color: var(--primary-color); }
.service-item h3 a:hover { color: var(--accent-color); }
.service-item p { font-size: 0.95rem; color: #555; }
.clinic-hours, .insurance-info, .map-section { text-align: center; margin-top: 40px; }

/* Shared List Styling (Hours & Reach Out) */
.hours-list, .reach-out-list { list-style: none; padding: 0; margin: 0 auto; max-width: 350px; border: 1px solid #eee; border-radius: 8px; background-color: var(--white); box-shadow: 0 2px 5px rgba(0,0,0,0.05); padding: 15px 20px; }
.hours-list li, .reach-out-list li { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--light-gray); font-size: 0.95rem; line-height: 1.5; }
.hours-list li:last-child, .reach-out-list li:last-child { border-bottom: none; }
.hours-list li.closed .time { color: #888; } /* Style Sunday Closed */
.hours-list li span.day, .reach-out-list .reach-out-label { font-weight: bold; color: var(--primary-color); margin-right: 15px; flex-shrink: 0; padding-top: 0.1em; }
.hours-list li span.time, .reach-out-list .reach-out-value { text-align: right; word-break: break-word; }
.insurance-info a { display: inline-block; margin-top: 20px; font-weight: bold; }
.map-container { position: relative; padding-bottom: 75%; /* 4:3 aspect ratio */ height: 0; overflow: hidden; margin-top: 20px; border: 1px solid #ccc; }
.map-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Services Page Specific */
/* Use these classes within the WP Page editor */
#services-page h4.treatments-heading, /* Target specific IDs if needed, but less flexible */
.page-template-services h4.treatments-heading, /* Target template file if specific one created */
.treatments-heading /* Generic class is better */
{
    font-size: 1.3rem; color: var(--primary-color); border-bottom: 2px solid var(--accent-color); padding-bottom: 8px; margin-bottom: 25px; display: inline-block;
}
.treatments-list { list-style: none; padding-left: 10px; margin-bottom: 30px; columns: 2; -webkit-columns: 2; -moz-columns: 2; column-gap: 40px; }
.treatments-list li { margin-bottom: 15px; padding-left: 25px; position: relative; line-height: 1.5; }
.treatments-list li::before { content: '✓'; position: absolute; left: 0; top: 1px; color: var(--accent-color); font-weight: bold; font-size: 1.1rem; }
.all-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

/* About Us Page Specific */
.about-section { display: flex; gap: 30px; align-items: center; margin-bottom: 40px; }
.about-section .text-content, .about-section .image-content { flex: 1; }
.about-section img { border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.about-section.reverse { flex-direction: row-reverse; }

/* FAQ Page Specific */
.faq-item { margin-bottom: 15px; border: 1px solid var(--light-gray); border-radius: 5px; overflow: hidden; }
.faq-question { background-color: var(--light-gray); padding: 15px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: var(--primary-color); transition: background-color 0.3s ease, color 0.3s ease; }
.faq-question:hover { color: var(--accent-color); background-color: #e9f2fa; }
.faq-question::after { content: '+'; font-size: 1.5rem; color: var(--primary-color); transition: transform 0.3s ease, color 0.3s ease; }
.faq-question:hover::after { color: var(--accent-color); }
.faq-item.active .faq-question::after { transform: rotate(45deg); color: var(--accent-color); }
.faq-item.active .faq-question, .faq-item.active .faq-question:hover { color: var(--accent-color); background-color: #e0edf9; }
.faq-answer { max-height: 0; overflow: hidden; padding: 0 20px; transition: max-height 0.5s ease-out, padding 0.5s ease-out; background-color: var(--white); color: #555; }
.faq-item.active .faq-answer{max-height:500px;overflow-y:auto !important;padding:20px 20px;border-top:1px solid var(--light-gray);}
.faq-answer p, .faq-answer ul { margin-bottom: 1em; }
.faq-answer ul { padding-left: 20px; }
.faq-answer ul li { margin-bottom: 0.5em; }

/* Contact Page Specific */
.contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-bottom: 40px; }
.contact-column h3 { margin-bottom: 15px; color: var(--primary-color); border-bottom: 2px solid var(--accent-color); padding-bottom: 5px; display: inline-block; }
.contact-column p { margin-bottom: 10px; line-height: 1.8; }
.contact-column .hours-list, .contact-column .reach-out-list { margin: 0; max-width: none; border: none; box-shadow: none; padding: 0; background-color: transparent; }
.contact-column .hours-list li, .contact-column .reach-out-list li { font-size: 1rem; padding: 8px 0; }
.reach-out-list .reach-out-value a { display: inline-block; margin-bottom: 0; color: var(--text-color); text-decoration: none; }
.reach-out-list .reach-out-value a:hover { color: var(--accent-color); text-decoration: underline; }
.social-media-links a { margin-right: 15px; font-size: 1.8rem; color: var(--primary-color); }
.social-media-links a:hover { color: var(--accent-color); }

/* Legal Page Specific */
/* Target based on page slug or title if needed, or use classes in editor */
.page-legal h2,
.entry-title /* Generic title styling from index/page.php */
{
    margin-top: 30px; margin-bottom: 15px; border-bottom: 1px solid #ccc; padding-bottom: 10px;
}
.page-legal h2:first-of-type,
.entry-title:first-of-type { margin-top: 0; }

/* Footer */
footer { background-color: var(--footer-bg); color: var(--footer-text); padding: 30px 0 15px 0; margin-top: auto; }
footer .container { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 30px; text-align: left; }
footer .footer-links, footer .footer-legal { flex: 1; min-width: 200px; }
/* Footer Menu Styles */
footer .footer-links ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 15px; padding: 0; margin: 0;}
footer .footer-links li { margin-bottom: 0; }
footer a { color: var(--footer-text); opacity: 0.8; transition: color 0.3s ease, opacity 0.3s ease; }
footer a:hover { color: var(--accent-color); opacity: 1; }
footer .footer-legal { text-align: right; }
footer .footer-legal a { display: inline-block; margin-bottom: 10px; }
footer .footer-legal p { margin-bottom: 0; }
/* footer .copyright { display: none; } /* Remove - Handled by PHP */

/* --- Responsive Design --- */
@media (max-width: 768px) {
    header .container { flex-wrap: wrap; justify-content: center; } /* Center items when wrapped */
    .logo { width: auto; /* Don't force full width */ margin-bottom: 10px; text-align: center; justify-content: center; order: 1; /* Logo first */ }
    .custom-logo { max-height: 40px; margin-right: 5px; }
    /* Adjust fallback text style */
     .logo .logo-text { font-size: 1.5rem; position: static; width: auto; height: auto; overflow: visible; }
    nav { width: 100%; order: 3; /* Nav last */ margin-top: 10px; }
    nav ul { flex-direction: row; justify-content: center; align-items: center; padding: 0; margin-top: 10px; flex-wrap: wrap; /* Allow wrapping */ }
    nav ul li { margin: 5px; margin-left: 5px; /* Reset left margin */ width: auto; text-align: center; padding-right: 0; }
    /* Style language switcher li if needed for wrapping */
    nav ul li.lang-item, nav ul li.wpml-ls-item { order: 10; width: auto; margin-top: 5px; }
    .menu-toggle { display: block; order: 2; /* Place toggle between logo and nav if implemented */ } /* Show toggle */
    /* Hide nav menu by default on mobile, show when toggled (requires JS) */
    /* nav ul { display: none; } */
    /* nav.toggled-on ul { display: flex; flex-direction: column; ... } */


    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 1rem; }
    .top-services, .all-services-grid, .contact-info-grid { grid-template-columns: 1fr; }
    .about-section, .about-section.reverse { flex-direction: column; }
    .about-section .image-content, .about-section.reverse .image-content { order: -1; } /* Image first */
    .treatments-list { columns: 1; -webkit-columns: 1; -moz-columns: 1; }
    .contact-column h3 { text-align: center; display: block; border-bottom: none; margin-bottom: 0.5em; }
    .contact-column h3::after { content: ''; display: block; width: 50px; margin: 5px auto 15px auto; height: 2px; background-color: var(--accent-color); }
    .hours-list li, .reach-out-list li { flex-direction: column; align-items: center; text-align: center; padding: 12px 0; }
    .hours-list li span.day, .reach-out-list .reach-out-label { margin-right: 0; margin-bottom: 5px; padding-top: 0; }
    .hours-list li span.time, .reach-out-list .reach-out-value { text-align: center; }
    .reach-out-list li.address-item .reach-out-value a { display: block; margin-top: 5px; } /* Ensure address link is block */
    footer .container { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
    footer .footer-links ul { justify-content: center; }
    footer .footer-links, footer .footer-legal { text-align: center; width: 100%; flex: none; }
    footer .footer-legal { margin-top: 0; }
    footer .footer-legal a { margin-bottom: 5px; }
}

/* --- WordPress Core Styles --- */
.alignleft { float: left; margin: 0.5em 1em 0.5em 0; }
.alignright { float: right; margin: 0.5em 0 0.5em 1em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { margin-left: -100px; margin-right: -100px; max-width: 1200px; /* Adjust values */ }
.alignfull { margin-left: calc( -100vw / 2 + 100% / 2 ); margin-right: calc( -100vw / 2 + 100% / 2 ); max-width: 100vw; }
/* Add more core styles as needed (galleries, captions, etc.) */

/* Accessibility */
.screen-reader-text,
.visually-hidden { /* Replaces .logo-text hiding */
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important; /* Ensure it overrides other styles */
    width: 1px;
    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
/*
* FAQ Clipping Fix for Mobile
* When an FAQ item is active, ensure its container is not clipping
* its children, allowing the scrollable answer box to be fully visible.
*/
.faq-item.active {
    overflow: visible;
}