/**
 * UTC Waidhofen/Thaya - Custom Styles
 * Erweiterte Styles für das UTC Theme
 */

/* ===============================
   CSS Custom Properties
   =============================== */
:root {
    --utc-radius-sm: 8px;
    --utc-radius-md: 14px;
    --utc-radius-lg: 22px;
    --utc-radius-pill: 999px;
    --utc-shadow-sm: 0 2px 10px rgba(0,0,0,0.08);
    --utc-shadow-md: 0 8px 24px rgba(0,0,0,0.12);
    --utc-header-height: 76px;
}

/* ===============================
   Header Styles
   =============================== */
.utc-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.utc-header .wp-block-navigation {
    gap: 24px;
}

.utc-header .wp-block-navigation__container {
    gap: 24px;
}

/* ===============================
   Card Styles
   =============================== */
.is-style-utc-card {
    background: #FFFFFF;
    border: 1px solid #D8DED0;
    border-radius: var(--utc-radius-lg);
    padding: 22px;
    box-shadow: var(--utc-shadow-sm);
    transition: all 0.3s ease;
}

.is-style-utc-card:hover {
    box-shadow: var(--utc-shadow-md);
    transform: translateY(-2px);
}

.is-style-utc-card-featured {
    background: #FFFFFF;
    border: 1px solid #D8DED0;
    border-top: 6px solid #AFD41F;
    border-radius: var(--utc-radius-lg);
    padding: 22px;
    box-shadow: var(--utc-shadow-sm);
}

.utc-news-card {
    box-shadow: var(--utc-shadow-sm);
    transition: all 0.3s ease;
}

.utc-news-card:hover {
    box-shadow: var(--utc-shadow-md);
    transform: translateY(-4px);
}

/* ===============================
   Button Styles
   =============================== */
.wp-block-button.is-style-utc-secondary .wp-block-button__link {
    background-color: #7997DA;
    color: #FFFFFF;
    border-radius: var(--utc-radius-pill);
}

.wp-block-button.is-style-utc-secondary .wp-block-button__link:hover {
    background-color: #5E82D0;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: #3E2728;
    border: 1px solid #D8DED0;
    border-radius: var(--utc-radius-pill);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: #F7FAF2;
}

/* ===============================
   Form Styles
   =============================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
    background: #FFFFFF;
    border: 1px solid #D8DED0;
    border-radius: var(--utc-radius-md);
    padding: 12px 16px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #7997DA;
    box-shadow: 0 0 0 4px rgba(173,211,242,0.6);
}

/* ===============================
   Badge Styles
   =============================== */
.utc-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--utc-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
}

.utc-badge.success {
    background: #E7F5E6;
    color: #2E7D32;
    border: 1px solid #BFE4C0;
}

.utc-badge.info {
    background: #EEF6FD;
    color: #2C5AA0;
    border: 1px solid #CFE5F8;
}

.utc-badge.neutral {
    background: #F7FAF2;
    color: #3E2728;
    border: 1px solid #D8DED0;
}

/* ===============================
   Navigation Improvements
   =============================== */
.wp-block-navigation-item__content {
    transition: color 0.2s ease;
}

.wp-block-navigation-item__content:hover {
    color: #4AA119;
}

.wp-block-navigation__submenu-container {
    border-radius: var(--utc-radius-md);
    box-shadow: var(--utc-shadow-md);
    border: 1px solid #D8DED0;
}

/* ===============================
   Image Enhancements
   =============================== */
.wp-block-post-featured-image img,
.wp-block-image img {
    border-radius: var(--utc-radius-lg);
}

/* ===============================
   Typography Enhancements
   =============================== */
strong, b {
    font-weight: 600;
}

/* ===============================
   Utility Classes
   =============================== */
.utc-text-center {
    text-align: center;
}

.utc-mb-0 {
    margin-bottom: 0 !important;
}

.utc-mt-small {
    margin-top: 1rem;
}

.utc-mt-medium {
    margin-top: 2rem;
}

.utc-mt-large {
    margin-top: 3rem;
}

/* ===============================
   Responsive Design
   =============================== */
@media (max-width: 781px) {
    .utc-header .wp-block-navigation {
        gap: 16px;
    }
    
    .wp-block-columns {
        flex-direction: column !important;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
    }
}

@media (max-width: 600px) {
    :root {
        font-size: 14px;
    }
    
    .utc-header {
        padding: 12px 16px;
    }
}

/* ===============================
   Animations
   =============================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* ===============================
   Print Styles
   =============================== */
@media print {
    .utc-header,
    .wp-block-navigation,
    .wp-block-buttons,
    footer {
        display: none;
    }
}