/*
Theme Name: AAC-Inclusion
Theme URI: https://aacinclusion.site.eurosyvec.eu
Author: Eurosyvec
Description: Accessible custom WordPress theme for Erasmus+ AAC-Inclusion Project.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: aac-inclusion
*/

/* WCAG Compliant Variables & Reset */
        :root {
            --primary: #004B87; 
            --primary-dark: #003366;
            --secondary: #FFB300; 
            --text-main: #1A1A1A;
            --text-light: #555555;
            --bg-light: #F4F7F6;
            --white: #FFFFFF;
            --focus-ring: #0056b3;
            --success: #2e7d32;
            --pending: #ed6c02;
            --border-color: #E0E7EB;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', system-ui, sans-serif; }
        body { color: var(--text-main); background: var(--bg-light); line-height: 1.6; overflow-x: hidden; }
        
        /* Accessibility & Focus */
        .skip-link { position: absolute; top: -40px; left: 0; background: var(--secondary); color: #000; padding: 8px; z-index: 1000; transition: top 0.2s; font-weight: bold; }
        .skip-link:focus { top: 0; }
        a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

        /* Header & Navigation */
        header { background: var(--white); border-bottom: 2px solid var(--primary); position: sticky; top: 0; z-index: 100; padding: 0.8rem 5%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .header-brand { display: flex; align-items: center; gap: 1rem; }
        
        /* Official Logo Styling */
        .header-logo, .custom-logo, .header-brand img { height: 75px !important; width: auto !important; max-width: 100%; object-fit: contain; transition: transform 0.2s; }
        .header-brand a:hover .header-logo, .header-brand a:hover img { transform: scale(1.05); }
        .logo { font-size: 1.5rem; font-weight: 800; color: var(--primary); text-decoration: none; letter-spacing: -0.5px; }
        
        .header-controls { display: flex; align-items: center; gap: 1rem; }
        .lang-selector select { padding: 0.4rem; font-size: 0.95rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--white); color: var(--text-main); font-weight: 600; cursor: pointer; }
        .menu-toggle { display: none; background: none; border: none; font-size: 1.8rem; color: var(--primary); cursor: pointer; padding: 0.2rem; }

        nav { display: flex; gap: 0.5rem; flex-wrap: wrap; width: 100%; justify-content: center; margin-top: 1rem; }
        nav ul { list-style: none; display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0; padding: 0; justify-content: center; }
        nav li { list-style: none; margin: 0; padding: 0; }
        nav button, nav a { background: none; border: none; color: var(--text-light); font-weight: 600; padding: 0.6rem 0.8rem; cursor: pointer; border-bottom: 3px solid transparent; font-size: 0.95rem; transition: all 0.2s; border-radius: 4px 4px 0 0; text-decoration: none; display: inline-block; }
        nav button:hover, nav button.active, nav a:hover, nav li.current-menu-item > a { color: var(--primary); border-bottom: 3px solid var(--secondary); background: #f8fbff; }

        @media (max-width: 992px) {
            .header-logo { height: 50px; }
            .menu-toggle { display: block; }
            nav { display: none; flex-direction: column; width: 100%; align-items: flex-start; margin-top: 1rem; background: var(--white); padding: 1rem; border-radius: 4px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
            nav.open { display: flex; }
            nav ul { flex-direction: column; width: 100%; }
            nav li { width: 100%; }
            nav button, nav a { width: 100%; text-align: left; padding: 1rem; border-bottom: 1px solid var(--border-color); border-radius: 0; }
            nav button:last-child, nav li:last-child > a { border-bottom: none; }
            nav button:hover, nav button.active, nav a:hover, nav li.current-menu-item > a { border-bottom: 1px solid var(--border-color); border-left: 4px solid var(--secondary); background: #f8fbff; }
        }

        /* Layout & Sections */
        main { min-height: 80vh; padding-bottom: 4rem; }
        .page-section { display: none; padding: 2rem 5%; }
        .page-section.active { display: block; opacity: 1; }

        /* Typography & Components */
        h1, h2, h3, h4 { color: var(--primary); margin-bottom: 1rem; line-height: 1.3; }
        h2 { font-size: 2rem; position: relative; padding-bottom: 0.5rem; margin-bottom: 2rem; }
        h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 60px; height: 4px; background: var(--secondary); border-radius: 2px; }
        .text-center h2::after { left: 50%; transform: translateX(-50%); }
        p, ul { margin-bottom: 1rem; }
        ul { padding-left: 1.5rem; }
        
        .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.5rem; background: var(--primary); color: var(--white); text-decoration: none; border-radius: 6px; font-weight: bold; border: none; cursor: pointer; font-size: 1rem; transition: background 0.2s, transform 0.1s; }
        .btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
        .btn:disabled { background: #ccc; color: #666; cursor: not-allowed; transform: none; }
        .btn-secondary { background: var(--secondary); color: var(--text-main); }
        .btn-secondary:hover { background: #e6a200; }
        .btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
        .btn-outline:hover { background: var(--primary); color: var(--white); }
        .btn-small { padding: 0.5rem 1rem; font-size: 0.9rem; }
        
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
        .grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
        
        .card { background: var(--white); padding: 2rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid var(--border-color); display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }
        .card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
        .card-icon { width: 50px; height: 50px; background: #f0f5fa; color: var(--primary); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.5rem; font-weight: bold; }
        
        .badge { display: inline-block; padding: 0.3rem 0.6rem; border-radius: 20px; font-size: 0.75rem; font-weight: bold; margin-bottom: 1rem; letter-spacing: 0.5px; text-transform: uppercase; }
        .badge.completed { background: #e8f5e9; color: var(--success); }
        .badge.planned { background: #fff3e0; color: var(--pending); }
        .badge.info { background: #e3f2fd; color: var(--primary); }
        .badge.coordinator { background: var(--secondary); color: #000; font-size: 0.85rem; }
        
        /* Expandable Elements */
        details { background: var(--bg-light); border-radius: 8px; padding: 0.5rem; margin-top: 1rem; border: 1px solid var(--border-color); }
        summary { font-weight: 600; cursor: pointer; padding: 0.5rem; color: var(--primary); }
        details p, details ul { padding: 0.5rem; font-size: 0.95rem; margin-bottom: 0; }

        /* Specific Home Page Sections */
        .home-section { padding: 4rem 5%; }
        .bg-white { background: var(--white); }
        
        /* Hero Redesign */
        .hero-modern { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); color: var(--white); padding: 6rem 5%; border-radius: 0 0 40px 40px; margin-top: -2rem; position: relative; overflow: hidden; margin-bottom: 3rem; }
        .hero-modern::before { content: ''; position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,179,0,0.15) 0%, rgba(255,179,0,0) 70%); border-radius: 50%; }
        .hero-modern::after { content: ''; position: absolute; bottom: -20%; left: -5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%); border-radius: 50%; pointer-events: none; }
        .hero-content { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
        .hero-content h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; margin-bottom: 1rem; color: var(--white); letter-spacing: -1px; }
        .hero-content h2 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 400; color: var(--secondary); margin-bottom: 1.5rem; padding-bottom: 0; border: none; }
        .hero-content h2::after { display: none; }
        .hero-content p { font-size: clamp(1.1rem, 2vw, 1.4rem); opacity: 0.9; margin-bottom: 2.5rem; max-width: 700px; margin-inline: auto; }
        .hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

        /* At a Glance Grid */
        .glance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
        .glance-card { background: var(--bg-light); padding: 1.5rem; border-radius: 8px; border-left: 4px solid var(--secondary); }
        .glance-label { font-size: 0.85rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; margin-bottom: 0.3rem; }
        .glance-value { font-weight: 700; color: var(--primary); font-size: 1.1rem; }
        .flag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 1.5rem; margin-top: 0.5rem; }

        /* Stats Section */
        .stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; text-align: center; margin-top: 2rem; }
        .stat-box { display: flex; flex-direction: column; align-items: center; }
        .stat-num { font-size: 3.5rem; font-weight: 800; color: var(--secondary); line-height: 1; margin-bottom: 0.5rem; }
        .stat-label { font-size: 1.1rem; font-weight: 600; color: var(--text-main); }

        /* Partner Logos & Cards */
        .partner-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
        .logo-box { background: var(--white); border: 1px solid var(--border-color); border-radius: 12px; display: flex; flex-direction: column; align-items: center; padding: 1.5rem; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; text-decoration: none; color: inherit; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
        .logo-box:hover, .logo-box:focus { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.08); outline: none; border-color: var(--primary); }
        .partner-img-wrapper { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
        .partner-img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .partner-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.2rem; color: var(--primary-dark); }
        .partner-country { font-size: 0.85rem; color: var(--text-light); }

        /* EU Funding Area & Responsive Logos */
        .eu-funding { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; background: #f0f5fa; padding: 2rem; border-radius: 12px; margin-top: 4rem; border: 1px solid var(--border-color); }
        .eu-logos { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
        .logo-container-white { background: var(--white); padding: 0.8rem 1.2rem; border-radius: 8px; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .eu-img { height: 65px; width: auto; object-fit: contain; max-width: 100%; }
        .project-img { height: 65px; width: auto; object-fit: contain; max-width: 100%; }
        .eu-text { flex: 1; min-width: 300px; }
        .eu-text h3 { margin-bottom: 0.5rem; font-size: 1.2rem; }
        .eu-text p { font-size: 0.95rem; color: var(--text-light); margin: 0; }
        
        @media (max-width: 600px) {
            .eu-img, .project-img { height: 50px; }
        }

        /* Forms & Filters */
        .filters { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; background: var(--white); padding: 1rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .filters select, .filters input { padding: 0.8rem; border: 1px solid var(--border-color); border-radius: 6px; flex: 1; min-width: 200px; font-size: 0.95rem; }
        
        /* Footer */
        footer { background: var(--primary-dark); color: var(--white); padding: 4rem 5% 2rem; margin-top: 3rem; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2.5rem; margin-bottom: 3rem; }
        .footer-grid h3 { color: var(--secondary); font-size: 1.2rem; margin-bottom: 1.5rem; }
        .footer-grid ul { list-style: none; padding: 0; }
        .footer-grid li { margin-bottom: 0.8rem; }
        .footer-grid a { color: #d0e1f9; text-decoration: none; transition: color 0.2s; }
        .footer-grid a:hover { color: var(--white); text-decoration: underline; }
        .footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; font-size: 0.85rem; color: #a0b2c6; }
        .footer-eu-img { height: 40px; width: auto; object-fit: contain; background: var(--white); padding: 0.3rem 0.6rem; border-radius: 4px; }


/* Strict Logo Constrain - Never blowout */
.header-logo, .custom-logo, .header-brand img, .site-logo img {
    height: 75px !important;
    max-height: 75px !important;
    width: auto !important;
    max-width: 250px !important;
    object-fit: contain !important;
    display: block !important;
}
@media (max-width: 992px) {
    .header-logo, .custom-logo, .header-brand img, .site-logo img {
        height: 50px !important;
        max-height: 50px !important;
    }
}