/*
Theme Name:   Magazilla Child — Eye on Terrorism
Theme URI:    https://eyeonterror.com
Description:  Child theme of Magazilla for "عين على الإرهاب" (Eye on Terrorism), an Arabic RTL news / documentation archive. Provides a full dark theme system, custom branded header & footer, single-article and archive templates, styled dark comments, share bar, related posts, and reading-progress UX. All layout is RTL-first.
Author:       Eye on Terrorism
Author URI:   https://eyeonterror.com
Template:     magazilla
Version:      1.0.0
Requires at least: 5.6
Tested up to: 6.5
Requires PHP: 7.4
Text Domain:  magazilla-child
Tags:         news, magazine, rtl, dark, arabic
*/

/* =================================================================
   DESIGN TOKENS  —  the single source of truth for the dark system
   Component-specific rules live in assets/css/*.css (enqueued
   separately per the project spec). This file holds the tokens,
   global resets, typography base, and parent-header suppression.
   ================================================================= */

:root {
    /* Reds */
    --red-deep:     #6B0000;
    --red-primary:  #B71C1C;
    --red-bright:   #C62828;
    --red-accent:   #E53935;

    /* Dark surfaces */
    --dark-bg:      #080808; /* page background           */
    --dark-surface: #0F0F0F; /* header, footer, meta bars  */
    --dark-card:    #161616; /* article cards, widgets     */
    --dark-border:  #242424; /* borders everywhere         */
    --dark-hover:   #1E1E1E; /* hover states on cards      */

    /* Text */
    --text-primary: #F0F0F0;
    --text-muted:   #9E9E9E;
    --text-dim:     #555555;

    /* Accent */
    --gold:         #C9A84C;
    --red-link:     #EF5350; /* AA-safe red for link text on card surfaces */

    /* Type families (graceful fallbacks per spec) */
    --font-head: 'Cairo', 'Tajawal', 'Tahoma', sans-serif;
    --font-body: 'Tajawal', 'Cairo', 'Tahoma', sans-serif;

    /* Layout */
    --content-max: 820px;
    --wrap-max:    1240px;
    --radius:      4px;
    --nav-height:  50px;
}

/* ----------------------------------------------------------------
   GLOBAL RESET / BASE  — everything is dark, RTL, no white anywhere
   ---------------------------------------------------------------- */

html {
    direction: rtl;
    background: var(--dark-bg);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body.eot-dark-theme,
body {
    direction: rtl;
    text-align: right;
    background: var(--dark-bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Kill any stray light backgrounds inherited from the parent theme. */
.eot-dark-theme #page,
.eot-dark-theme #content,
.eot-dark-theme .site,
.eot-dark-theme .site-content,
.eot-dark-theme .content-area,
.eot-dark-theme main,
.eot-dark-theme #main,
.eot-dark-theme #primary,
.eot-dark-theme .wrapper,
.eot-dark-theme .container {
    background: transparent !important;
    color: var(--text-primary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0 0 0.6em;
    font-weight: 700;
}

p { margin: 0 0 1.2em; }

a {
    color: var(--red-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--red-bright); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--red-accent); outline-offset: 2px; border-radius: 2px; }

/* Global media safety: never let an image/svg/video force horizontal
   scroll, regardless of intrinsic size or where it is dropped in. */
img, svg, video { max-width: 100%; height: auto; }

ul, ol { padding-inline-start: 1.4em; }

/* Shared layout wrapper used by templates */
.eot-wrap {
    max-width: var(--wrap-max);
    margin-inline: auto;
    padding-inline: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Generic pill / badge (used across templates) */
.eot-badge {
    display: inline-block;
    background: var(--red-primary);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.3px;
    padding: 4px 12px;
    border-radius: 2px;
    line-height: 1.6;
}

/* Screen-reader-only helper (in case parent's is missing) */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
}

/* ----------------------------------------------------------------
   PARENT-THEME HEADER SUPPRESSION
   We render our own header via header.php, so hide Magazilla's
   default header / topbar / logo blocks completely.
   ---------------------------------------------------------------- */
.eot-dark-theme > header:not(.eot-header),
.eot-dark-theme .site-header:not(.eot-header),
.eot-dark-theme .main-header,
.eot-dark-theme .header-top,
.eot-dark-theme .header-main,
.eot-dark-theme #masthead:not(.eot-header),
.eot-dark-theme .magazilla-header,
.eot-dark-theme .top-header-bar {
    display: none !important;
}

/* Reading progress bar lives at the very top of every page */
#eot-reading-bar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 3px;
    width: 100%;
    /* GPU-friendly: scale on the X axis instead of animating width.
       JS sets transform: scaleX(progress). transform-origin follows
       the inline-start edge so the bar grows from the start of the line. */
    transform: scaleX(0);
    transform-origin: right center;
    background: linear-gradient(90deg, var(--red-bright), var(--red-accent));
    z-index: 2000;
    transition: transform 0.05s linear;
    pointer-events: none;
}
/* RTL is the default; in LTR the bar should grow from the left edge. */
[dir="ltr"] #eot-reading-bar { transform-origin: left center; }

/* ----------------------------------------------------------------
   RESPONSIVE BASE  (desktop-first ladder: 900 / 768 / 560 / 400)
   Token-level scaling only — base type, the shared .eot-wrap gutter,
   and shrink hints for known flex/grid wrap-risk wrappers. Component
   layout lives in assets/css/*.css. body keeps overflow-x:hidden and
   the reading-bar + parent-header-suppression rules above stay intact.
   ---------------------------------------------------------------- */

/* Existing tablet step: first font + gutter tightening. */
@media (max-width: 900px) {
    body { font-size: 15px; }
    .eot-wrap { padding-inline: 16px; }
}

/* Large phone / small tablet — small type step, gutter unchanged here. */
@media (max-width: 768px) {
    body { font-size: 14.5px; }

    /* Let the header's flex rows collapse their children instead of
       pushing the row wider than the viewport. These wrappers hold a
       logo + long Arabic text / a stretchy search field, so allow the
       flex items to shrink below their content's intrinsic size. */
    .eot-topbar-inner,
    .eot-branding-inner,
    .eot-navbar-inner { min-inline-size: 0; }
}

/* Phone — base type down a touch + tighter shared gutter. */
@media (max-width: 560px) {
    body { font-size: 14px; }
    .eot-wrap { padding-inline: 14px; }

    /* The single-article meta bar is a flex row of several pills that
       can total wider than a phone; allow it to shrink + wrap cleanly. */
    .eot-meta-bar-inner { min-inline-size: 0; }
}

/* Small phone — smallest comfortable type + narrowest gutter so no
   component can trigger horizontal scroll down to 320px. */
@media (max-width: 400px) {
    body { font-size: 13.5px; }
    .eot-wrap { padding-inline: 12px; }
}