/*
Theme Name: Jirad-IT thema
Theme URI: https://jouwdomein.nl/mijn-tailwind-thema/
Description: Jirad-IT WordPress thema gemaakt met Tailwind CSS.
Version: 1.0.0
*/

/* ==========================================
   1. CSS CUSTOM PROPERTIES
   ========================================== */
:root {
    --jirad-primary:#2268A1;
    --jirad-secondary:#81B6DE;
    --jirad-light:#CBD8E6;
    --jirad-dark:#323235;
    --jirad-text-light:#789BC0;
    --jirad-background:#EBF2F8;

    --header-height:88px;
    --runtime-header-height:var(--header-height);

    --spacing-sm:.5rem;
    --spacing-md:1rem;
    --spacing-lg:1.5rem;
    --spacing-xl:2rem;

    --border-radius:0;
    --transition-fast:.2s ease;
    --transition-medium:.3s ease;
}

/* ==========================================
   2. BASE
   ========================================== */
body { overflow-x:hidden; }

/* ==========================================
   3. LAYOUT
   ========================================== */
header { height:var(--header-height); min-height:var(--header-height); }
.hero-full-height {
    min-height:calc(100vh - var(--runtime-header-height));
    height:calc(100vh - var(--runtime-header-height));
}
.custom-logo { height:3rem; width:auto; }
.custom-logo-link { display:inline-block; }

/* Contact page spacing */
main.bg-gray-100 {
    min-height: calc(100vh - var(--runtime-header-height));
}

/* ==========================================
   4. UTILITIES
   ========================================== */
.text-jirad-primary { color:var(--jirad-primary); }
.text-jirad-secondary { color:var(--jirad-secondary); }
.text-jirad-dark { color:var(--jirad-dark); }
.bg-jirad-primary { background:var(--jirad-primary); }
.bg-jirad-dark { background:var(--jirad-dark); }
.border-jirad-primary { border-color:var(--jirad-primary); }
.hover\:bg-jirad-dark:hover { background:var(--jirad-dark); }
.hover\:text-jirad-primary:hover { color:var(--jirad-primary); }

/* ==========================================
   5. COMPONENTS
   ========================================== */
/* Contact Form 7 */
.wpcf7-form {
    margin: 0;
    position: relative;
    z-index: 1;
}
.wpcf7-form p { margin-bottom: 1.25rem; }
.wpcf7-form label {
    display:block; font-size:.875rem; font-weight:600; color:var(--jirad-dark); margin-bottom:.5rem;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width:100%; padding:.875rem 1rem; border:2px solid #e5e7eb; border-radius:var(--border-radius);
    background:#fff; font-size:1rem; color:var(--jirad-dark);
    transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wpcf7-form textarea { min-height:120px; resize:vertical; }
.wpcf7-form select {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position:right var(--spacing-sm) center; background-repeat:no-repeat;
    background-size:1.5em 1.5em; padding-right:2.5rem; appearance:none;
}
.wpcf7-form input[type="checkbox"] {
    width:var(--spacing-md); height:var(--spacing-md); border:1px solid #d1d5db;
    border-radius:var(--border-radius); margin-right:.75rem; flex-shrink:0;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline:none; border-color:var(--jirad-primary); box-shadow:0 0 0 3px rgba(34,104,161,.15);
}
.wpcf7-form input[type="submit"] {
    background:var(--jirad-primary); color:#fff; padding:1rem 2rem;
    font-weight:600; font-size:1rem; border:none; border-radius:var(--border-radius);
    cursor:pointer; transition:background-color var(--transition-fast); width:100%;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.wpcf7-form input[type="submit"]:hover { background:#1e5a8a; }
.wpcf7-form input[type="submit"]:active { background:#164163; }
.wpcf7-form a { color:var(--jirad-primary); font-weight:500; text-decoration:none; }
.wpcf7-form a:hover { text-decoration:underline; }
.wpcf7-response-output {
    margin:1.5rem 0 0 !important; padding:1rem !important;
    border:none !important; border-radius:var(--border-radius);
    font-size: 0.95rem; font-weight: 500;
}
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-mail-sent-ng {
    background:#fef2f2; color:#dc2626; border-left:4px solid #dc2626 !important;
}
.wpcf7-response-output.wpcf7-mail-sent-ok {
    background:#f0fdf4; color:#16a34a; border-left:4px solid #16a34a !important;
}
.wpcf7 .ajax-loader { display:none; }

/* Service Cards (hover via JS class) */
.service-card {
    position: relative;
}
.service-card .lift {
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,.30);
    will-change: transform;
}
/* This class is added/removed by the script in header.php */
.service-card .lift.is-hovered {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,.40);
}
.service-card img {
    filter: brightness(0) invert(1);
    transition: filter var(--transition-medium);
}
.service-card h3 {
    color: #fff !important;
}

/* ==========================================
   6. NAVIGATION
   ========================================== */
/* Desktop parent indicators */
header nav .menu-item-has-children > a {
    position:relative; padding-right:1.25rem;
}
header nav .menu-item-has-children > a::after {
    content:""; position:absolute; top:50%; right:.35rem;
    width:.5rem; height:.5rem;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:translateY(-60%) rotate(45deg);
    transition:transform .2s ease;
    pointer-events:none;
}
header nav .menu-item-has-children:hover > a::after {
    transform:translateY(-60%) rotate(225deg);
}

/* Mobile menu - ensure proper height and scrolling */
#mobile-menu {
    max-height: 100vh;
    max-height: 100dvh; /* Use dynamic viewport height if supported */
}

/* Mobile menu scrollbars */
#mobile-menu .flex-1::-webkit-scrollbar { width:8px; }
#mobile-menu .flex-1::-webkit-scrollbar-track { background:rgba(0,0,0,.05); }
#mobile-menu .flex-1::-webkit-scrollbar-thumb {
    background:rgba(0,0,0,.25); border-radius:4px;
}
#mobile-menu .flex-1::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,.35);
}

/* Mobile submenu toggles */
#mobile-menu li.menu-item-has-children > ul {
    overflow:hidden;
    max-height:0;
    transition:max-height .35s ease;
}
#mobile-menu li.menu-item-has-children.expanded > ul {
    max-height:600px;
}
#mobile-menu .submenu-toggle-btn {
    margin-left:auto; display:flex; align-items:center; justify-content:center;
    width:2.25rem; height:2.25rem; color:var(--jirad-dark);
    transition:color .2s;
}
#mobile-menu .submenu-toggle-btn:hover { color:var(--jirad-primary); }
#mobile-menu .submenu-toggle-btn svg {
    width:1rem; height:1rem; transition:transform .25s ease;
}
#mobile-menu li.expanded > div > .submenu-toggle-btn svg { transform:rotate(180deg); }

/* ==========================================
   7. RESPONSIVE
   ========================================== */
@media (min-width:768px){
    .wpcf7-form input[type="submit"] { width:auto; }
}
@media (min-width:768px) and (max-width:1023px){
    #mobile-menu { width:24rem; }
    #mobile-menu nav a { padding:var(--spacing-md) var(--spacing-lg); font-size:1.125rem; }
    #mobile-menu .mt-6 a { padding:var(--spacing-md) var(--spacing-xl); font-size:1rem; }
}
@media (min-width:1024px){
    #mobile-menu,#mobile-menu-overlay { display:none !important; }
    #mobile-menu li.menu-item-has-children > ul { max-height:none !important; }
}

/* ==========================================
   8. ACCESSIBILITY
   ========================================== */
@media (prefers-reduced-motion:reduce){
    .animate-bounce { animation:none !important; }
    .service-card .lift,
    .service-card:hover .lift { transition:none !important; transform:none !important; }
}

/* ==========================================
   9. PRINT
   ========================================== */
@media print {
    .wpcf7-form,
    #mobile-menu,
    #mobile-menu-overlay { display:none !important; }
}

/* Contact page info boxes */
.bg-white.shadow-lg {
    border-radius: 0.5rem;
    position: relative;
    z-index: auto;
}
.border-l-4.border-jirad-primary {
    border-left-width: 5px;
}

/* Ensure form section doesn't overlap sidebar */
main.bg-gray-100 .grid > section,
main.bg-gray-100 .grid > aside {
    position: relative;
    z-index: 1;
}

/* Contact page: prevent overflow on small screens */
.contact-page a {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.contact-page .bg-white.shadow-lg {
    max-width: 100%;
}