/* ===========================================================
   Tailwind CSS + MudBlazor Override Styles
   MudBlazor bileşenleri korunur, Tailwind sadece özel
   bileşenlerde/layout'ta kullanılır.
   =========================================================== */

/* Material Symbols font settings */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Quill editor styling overrides for admin panel */
.ql-toolbar.ql-snow {
    border-radius: 0.5rem 0.5rem 0 0 !important;
    border-color: #e2e8f0 !important;
    background: #f8fafc !important;
}

.ql-container.ql-snow {
    border-radius: 0 0 0.5rem 0.5rem !important;
    border-color: #e2e8f0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
}

.ql-editor {
    min-height: 300px;
    line-height: 1.7;
}

.ql-editor p {
    margin-bottom: 0.75em;
}

.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 700;
}

.ql-editor blockquote {
    border-left: 4px solid #1a227f;
    padding-left: 1rem;
    color: #475569;
    font-style: italic;
}

/* Admin card styles (shared) */
.hp-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
}

.hp-card-header {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Prevent MudBlazor input conflicts */
.mud-input-control .mud-input {
    font-family: 'Inter', 'Roboto', sans-serif;
}

/* Sticky header for news pages */
.hp-sticky-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
}

/* SEO score circle animation */
@keyframes seo-score-fill {
    from {
        stroke-dashoffset: 213.6;
    }
}

/* Toggle switch Tailwind style */
.hp-toggle input:checked+div {
    background-color: #1a227f;
}

/* -- Photo editor overlay - ensure hover visibility -- */
.group:hover>.opacity-0 {
    opacity: 1 !important;
}

.group>.opacity-0 {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 10;
}

/* -- Ensure images (including WebP) display correctly -- */
img[src$=".webp"],
img[src*="/media/"],
img[src*="/uploads/"] {
    image-rendering: auto;
    max-width: 100%;
    height: auto;
}