/**
 * PawWise Daily - Additional Styles
 * 
 * Block styles and additional component styles
 * 
 * @package PawWise_Daily
 */

/* ==========================================================================
   Block Styles
   ========================================================================== */

/* Button - Outline Style */
.wp-block-button.is-style-pawd-outline .wp-block-button__link {
    color: var(--pawd-color-primary);
    background: transparent;
    border: 2px solid var(--pawd-color-primary);
}

.wp-block-button.is-style-pawd-outline .wp-block-button__link:hover {
    color: #fff;
    background: var(--pawd-color-primary);
}

/* Button - Large Style */
.wp-block-button.is-style-pawd-large .wp-block-button__link {
    padding: var(--pawd-spacing-md) var(--pawd-spacing-xl);
    font-size: var(--pawd-text-lg);
}

/* Quote - Highlighted Style */
.wp-block-quote.is-style-pawd-highlight {
    padding: var(--pawd-spacing-xl);
    margin: var(--pawd-spacing-xl) 0;
    background: linear-gradient(135deg, var(--pawd-color-bg-alt) 0%, var(--pawd-color-bg-dark) 100%);
    border: none;
    border-left: 4px solid var(--pawd-color-primary);
    border-radius: var(--pawd-radius-lg);
}

.wp-block-quote.is-style-pawd-highlight p {
    font-size: var(--pawd-text-xl);
    font-style: normal;
    line-height: var(--pawd-leading-relaxed);
}

.wp-block-quote.is-style-pawd-highlight cite {
    display: block;
    margin-top: var(--pawd-spacing-md);
    font-size: var(--pawd-text-sm);
    font-style: normal;
    color: var(--pawd-color-text-light);
}

.wp-block-quote.is-style-pawd-highlight cite::before {
    content: "— ";
}

/* List - Checkmarks Style */
.wp-block-list.is-style-pawd-check {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.is-style-pawd-check li {
    position: relative;
    padding-left: var(--pawd-spacing-xl);
    margin-bottom: var(--pawd-spacing-sm);
}

.wp-block-list.is-style-pawd-check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--pawd-color-primary);
    font-weight: 700;
}

/* Table - Striped Style */
.wp-block-table.is-style-pawd-striped table {
    border-collapse: collapse;
}

.wp-block-table.is-style-pawd-striped tbody tr:nth-child(odd) {
    background: var(--pawd-color-bg-alt);
}

.wp-block-table.is-style-pawd-striped th {
    background: var(--pawd-color-primary);
    color: #fff;
    font-weight: 600;
}

.wp-block-table.is-style-pawd-striped td,
.wp-block-table.is-style-pawd-striped th {
    padding: var(--pawd-spacing-sm) var(--pawd-spacing-md);
    border: 1px solid var(--pawd-color-border);
}

/* Group - Callout Box Styles */
.wp-block-group.is-style-pawd-callout {
    padding: var(--pawd-spacing-lg) var(--pawd-spacing-xl);
    margin: var(--pawd-spacing-xl) 0;
    background: var(--pawd-color-bg-alt);
    border: 1px solid var(--pawd-color-border);
    border-left: 4px solid var(--pawd-color-primary);
    border-radius: var(--pawd-radius);
}

.wp-block-group.is-style-pawd-callout-warning {
    padding: var(--pawd-spacing-lg) var(--pawd-spacing-xl);
    margin: var(--pawd-spacing-xl) 0;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: var(--pawd-radius);
}

.wp-block-group.is-style-pawd-callout-success {
    padding: var(--pawd-spacing-lg) var(--pawd-spacing-xl);
    margin: var(--pawd-spacing-xl) 0;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-left: 4px solid #10b981;
    border-radius: var(--pawd-radius);
}

.wp-block-group.is-style-pawd-callout-danger {
    padding: var(--pawd-spacing-lg) var(--pawd-spacing-xl);
    margin: var(--pawd-spacing-xl) 0;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-left: 4px solid #ef4444;
    border-radius: var(--pawd-radius);
}

/* ==========================================================================
   Card Link Styles
   ========================================================================== */
.pawd-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--pawd-spacing-xs);
    font-weight: 600;
    color: var(--pawd-color-primary);
    text-decoration: none;
    transition: gap var(--pawd-transition-fast);
}

.pawd-card__link:hover {
    gap: var(--pawd-spacing-sm);
    text-decoration: none;
}

/* ==========================================================================
   Form Styles
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: var(--pawd-spacing-sm) var(--pawd-spacing-md);
    font-family: inherit;
    font-size: var(--pawd-text-base);
    line-height: var(--pawd-leading-normal);
    color: var(--pawd-color-text);
    background: var(--pawd-color-bg);
    border: 1px solid var(--pawd-color-border);
    border-radius: var(--pawd-radius);
    transition: border-color var(--pawd-transition-fast), box-shadow var(--pawd-transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--pawd-color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ==========================================================================
   Newsletter Form Styles
   ========================================================================== */
.newsletter-widget form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pawd-spacing-sm);
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-widget input[type="email"] {
    flex: 1;
    min-width: 200px;
}

.newsletter-widget button,
.newsletter-widget input[type="submit"] {
    padding: var(--pawd-spacing-sm) var(--pawd-spacing-xl);
    font-family: inherit;
    font-size: var(--pawd-text-base);
    font-weight: 600;
    color: #fff;
    background: var(--pawd-color-primary);
    border: none;
    border-radius: var(--pawd-radius);
    cursor: pointer;
    transition: background var(--pawd-transition-fast);
}

.newsletter-widget button:hover,
.newsletter-widget input[type="submit"]:hover {
    background: var(--pawd-color-primary-dark);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 639px) {
    .pawd-posts-grid {
        grid-template-columns: 1fr;
    }
    
    .pawd-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pawd-hero__title {
        font-size: var(--pawd-text-3xl);
    }
    
    .single-post-header .entry-title {
        font-size: var(--pawd-text-3xl);
    }
    
    .pawd-hero__actions {
        flex-direction: column;
        align-items: center;
    }
    
    .pawd-hero__actions .pawd-btn {
        width: 100%;
        max-width: 300px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .site-header,
    .site-footer,
    .pawd-sidebar,
    .pawd-toc,
    .post-navigation,
    .pawd-related-posts,
    .comments-area,
    .pawd-search-box,
    .pawd-hero__actions,
    .header-cta,
    .menu-toggle {
        display: none !important;
    }
    
    .pawd-main {
        width: 100%;
        max-width: none;
    }
    
    .entry-content {
        max-width: none;
    }
    
    a {
        color: inherit;
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    .pawd-card a[href]::after,
    .nav-menu a[href]::after {
        content: none;
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */
@media (prefers-contrast: high) {
    :root {
        --pawd-color-border: #000;
        --pawd-color-text-light: #333;
    }
    
    .pawd-btn {
        border-width: 3px;
    }
    
    a:focus-visible {
        outline-width: 3px;
    }
}

/* ==========================================================================
   Dark Mode Support (Optional - Uncomment if needed)
   ========================================================================== */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --pawd-color-text: #f3f4f6;
        --pawd-color-text-light: #9ca3af;
        --pawd-color-text-lighter: #6b7280;
        --pawd-color-bg: #111827;
        --pawd-color-bg-alt: #1f2937;
        --pawd-color-bg-dark: #374151;
        --pawd-color-border: #374151;
        --pawd-color-border-dark: #4b5563;
    }
    
    .pawd-card {
        background: var(--pawd-color-bg-alt);
    }
    
    .pawd-card__title a {
        color: var(--pawd-color-text);
    }
}
*/