/*
Theme Name: Playspaces Nursery
Theme URI: https://playspacesnursery.co.uk
Author: ElevateOM
Author URI: https://elevateom.com
Description: A dynamic WordPress theme for Playspaces Nursery, Brechin. Built with Tailwind CSS and ACF custom fields.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: playspaces
Tags: nursery, childcare, custom-colors, custom-logo, custom-menu, full-width-template
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Sour+Gummy:wght@400;700&display=swap');

/* ========================================
   CUSTOM ANIMATIONS
   ======================================== */
@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
.animate-spin-slow  { animation: spin-slow 8s linear infinite; }

/* ========================================
   MOBILE MENU DRAWER
   ======================================== */
#mobile-menu-overlay {
    position: fixed; inset: 0; z-index: 49;
    background: rgba(0,0,0,.5);
    display: none;
    animation: none;
}
#mobile-menu-overlay.open { display: block; }

#mobile-menu-drawer {
    position: fixed; top: 0; right: -360px;
    height: 100%; width: 300px;
    background: #fff; z-index: 50;
    overflow-y: auto;
    transition: right .3s ease-in-out;
    border-left: 1px solid #e5e7eb;
    display: flex; flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,.1);
}
@media (min-width:640px) { #mobile-menu-drawer { width: 350px; } }
#mobile-menu-drawer.open { right: 0; }
body.mobile-menu-open { overflow: hidden !important; }

/* ========================================
   HEADER NAVIGATION
   ======================================== */
.site-header-nav .nav-menu,
.site-header-nav .nav-menu ul {
    list-style: none; margin: 0; padding: 0;
}
.site-header-nav .nav-menu {
    display: flex; align-items: center; gap: 2rem;
}
.site-header-nav .nav-menu > li { position: relative; }
.site-header-nav .nav-menu > li > a {
    font-size: .875rem; font-weight: 500;
    color: #374151; font-family: Poppins,sans-serif;
    text-decoration: none; transition: color .2s;
    position: relative; display: flex; align-items: center; gap: .25rem;
}
.site-header-nav .nav-menu > li > a::after {
    content: ''; position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 2px;
    background: #92C13E; transition: width .2s;
}
.site-header-nav .nav-menu > li > a:hover,
.site-header-nav .nav-menu > li.current-menu-item > a,
.site-header-nav .nav-menu > li.current_page_item > a { color: #0C8D45; }
.site-header-nav .nav-menu > li > a:hover::after,
.site-header-nav .nav-menu > li.current-menu-item > a::after { width: 100%; }

/* Dropdown */
.site-header-nav .nav-menu .sub-menu {
    display: none; position: absolute;
    left: 0; top: 100%; z-index: 10;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.1);
    min-width: 180px; padding: 4px 0;
}
.site-header-nav .nav-menu li.menu-item-has-children:hover > .sub-menu { display: block; }
.site-header-nav .nav-menu .sub-menu li a {
    display: block; padding: 8px 16px;
    font-size: .875rem; color: #374151;
    font-family: Poppins,sans-serif; text-decoration: none;
    white-space: nowrap; transition: background .15s;
}
.site-header-nav .nav-menu .sub-menu li a::after { display: none; }
.site-header-nav .nav-menu .sub-menu li a:hover { background: #f3f4f6; color: #0C8D45; }

/* ========================================
   MOBILE MENU NAV
   ======================================== */
.mobile-menu-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu-nav li a {
    font-weight: 500; color: #1f2937;
    font-family: Poppins,sans-serif; text-decoration: none;
    transition: color .2s; display: block;
}
.mobile-menu-nav li a:hover,
.mobile-menu-nav li.current-menu-item > a { color: #0C8D45; }

/* ========================================
   FOOTER NAVIGATION
   ======================================== */
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer-menu li a { font-size: .875rem; color: #9ca3af; text-decoration: none; transition: color .2s; font-family: Poppins,sans-serif; }
.footer-menu li a:hover { color: #fff; }

/* ========================================
   CPT SHARED STYLES
   ======================================== */
.ps-review-card { background: #fff; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,.08); border-left: 6px solid #92C13E; }
.ps-document-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: #f9fbf6; border-radius: 1rem; border: 2px solid #e8f5d6; transition: all .2s; }
.ps-document-item:hover { background: #e8f5d6; border-color: #92C13E; }

/* ========================================
   WORDPRESS ALIGNMENT HELPERS
   ======================================== */
.aligncenter { display: block; margin: 0 auto; }
.alignleft  { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.screen-reader-text { clip: rect(1px,1px,1px,1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

input[type="submit"] {
    line-height: 0;
}

/* ========================================
   ADMIN BAR FIX
   ======================================== */
.admin-bar .site-header { top: 32px !important; }
@media screen and (max-width:782px) { .admin-bar .site-header { top: 46px !important; } }