/*
Theme Name: Echo News
Author: Echo News Theme Team
Description: A Gutenberg-first news and magazine theme faithfully converted from the Echo News source design, with ten homepage layouts, dynamic editorial collections, team records, native archives, secure forms, and one-click demo import.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: echo-news
Tags: news, blog, magazine, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, rtl-language-support, wide-blocks, block-styles
*/

:root {
    --echo-color-brand: #537fe7;
    --echo-color-accent: #ff390e;
    --echo-color-violet: #7817f2;
    --echo-color-heading: #181823;
    --echo-color-body: #5e5e5e;
    --echo-color-surface: #ffffff;
    --echo-color-border: #e9e9e9;
    --echo-color-success: #16784a;
    --echo-color-warning: #a66000;
    --echo-color-error: #b42318;
    --echo-font-body: Inter, Arial, sans-serif;
    --echo-font-display: "Bona Nova", Georgia, serif;
    --echo-content-width: 1290px;
    --echo-wide-width: 1440px;
    --echo-narrow-width: 760px;
    --echo-gutter: clamp(16px, 3vw, 30px);
    --echo-space-xs: 0.375rem;
    --echo-space-sm: 0.75rem;
    --echo-space-md: 1.25rem;
    --echo-space-lg: 2rem;
    --echo-space-xl: clamp(3rem, 6vw, 5.5rem);
    --echo-radius-sm: 4px;
    --echo-radius-md: 8px;
    --echo-shadow-card: 0 10px 35px rgba(24, 24, 35, 0.08);
    --echo-transition: 180ms ease;
    --echo-focus: 0 0 0 3px rgba(83, 127, 231, 0.38);
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background: #fff;
    clip: auto !important;
    clip-path: none;
    color: #181823;
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    inset: 8px auto auto 8px;
    line-height: normal;
    padding: 12px 16px;
    text-decoration: none;
    width: auto;
    z-index: 100000;
}

.echo-skip-link:focus { z-index: 100001; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--echo-color-brand);
    outline-offset: 3px;
    box-shadow: var(--echo-focus);
}

body.admin-bar .is-sticky .echo-header-area,
body.admin-bar .echo-header-area.header-sticky.sticky { top: 32px; }

.echo-block-wrap { position: relative; }
.echo-form-notice {
    margin: var(--echo-space-md) auto;
    max-width: var(--echo-content-width);
    padding: 12px var(--echo-gutter);
    border-inline-start: 4px solid var(--echo-color-success);
    background: #f0faf5;
    color: #123f2d;
}
.echo-form-notice.is-error {
    border-inline-start-color: var(--echo-color-error);
    background: #fff1f0;
    color: #6d1711;
}
.echo-honeypot { position: absolute !important; inset-inline-start: -9999px !important; }

.echo-native-entry-content { overflow-wrap: anywhere; }
.echo-native-entry-content > * { max-width: 100%; }
.echo-native-entry-content img { height: auto; }
.echo-native-entry-content iframe { max-width: 100%; }
.echo-native-entry-content table { display: block; max-width: 100%; overflow-x: auto; }

.echo-pagination { margin-block: 35px 70px; }
.echo-pagination .page-numbers {
    align-items: center;
    border: 1px solid var(--echo-color-border);
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
}
.echo-pagination .current { background: var(--echo-color-heading); color: #fff; }

.echo-fallback-content {
    margin: var(--echo-space-xl) auto;
    max-width: var(--echo-content-width);
    padding-inline: var(--echo-gutter);
}

@media (max-width: 782px) {
    body.admin-bar .is-sticky .echo-header-area,
    body.admin-bar .echo-header-area.header-sticky.sticky { top: 46px; }
}

@media (max-width: 480px) {
    .echo-header-area img { max-width: 100%; }
    .echo-contact-input-flexing { flex-wrap: wrap; }
    .echo-contact-input-flexing > * { min-width: 100%; }
    .echo-comment-box input,
    .echo-comment-box textarea { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}