/**
 * Custom CSS for Osato Clinic Theme
 *
 * Additional styles that supplement the main style.css
 *
 * @package OsatoClinic
 */

/* Print Styles */
@media print {
    .site-header,
    .site-footer,
    .menu-toggle,
    .language-switcher,
    .hero-buttons,
    .btn {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000000;
        background: #ffffff;
    }

    .page-header {
        background: none;
        color: #000000;
        border-bottom: 2px solid #000000;
        padding: 10px 0;
    }

    .page-header h1 {
        color: #000000;
    }

    a {
        color: #000000;
        text-decoration: underline;
    }

    .container {
        max-width: 100%;
    }
}

/* Accessibility improvements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #1a237e;
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #1a237e;
    color: #ffffff;
    padding: 10px 20px;
    z-index: 9999;
    font-weight: 700;
}

.skip-link:focus {
    top: 0;
}

/* WordPress specific */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1em;
}

.wp-caption-text {
    font-size: 0.85rem;
    color: #666666;
    text-align: center;
    padding: 8px;
}

.aligncenter {
    display: block;
    margin: 0 auto 1em;
}

.alignleft {
    float: left;
    margin: 0 1em 1em 0;
}

.alignright {
    float: right;
    margin: 0 0 1em 1em;
}

/* WordPress Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 1em;
}

.gallery-item {
    margin: 0;
}

.gallery-item img {
    border-radius: 4px;
}

/* WordPress blocks */
.wp-block-image {
    margin-bottom: 1em;
}

.wp-block-image img {
    border-radius: 4px;
}

/* Smooth transitions for interactive elements */
.service-card,
.department-card,
.plan-card,
.staff-card,
.download-item,
.announcement-item {
    transition: all 0.3s ease;
}

/* Loading animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-content {
    animation: fadeIn 0.4s ease-out;
}