/**
 * OIC-Atif-alabbasi — core.css
 * Version: 1.0.001.003
 *
 * Source of truth for frontend styling.
 * Mobile-first | RTL/LTR via logical properties | Token-driven
 *
 * Architecture:
 * - tokens.css defines raw design tokens (--oic-token-*)
 * - core.css bridges them into semantic aliases (--oic-*)
 * - Components consume only --oic-* aliases
 * - Changing tokens.css re-skins the entire theme
 *
 * Sections:
 *  0) Token Bridge        8) Sidebar
 *  1) Reset / Baseline    9) Comments
 *  2) Layout Primitives  10) Search / 404
 *  3) Header             11) Front Page
 *  4) Footer             12) Landing Page
 *  5) Navigation         13) Taxonomy
 *  6) Content / Single   14) Utilities
 *  7) Archive / Loop     15) Focus & A11y
 *                        16) CLS Prevention
 *                        17) Responsive
 */

/* ==========================================================================
   0) TOKEN BRIDGE
   Semantic aliases → tokens.css. Fallbacks ensure rendering without tokens.
   ========================================================================== */
:root {
    /* Colors */
    --oic-color-bg:            var(--oic-token-bg-primary, #ffffff);
    --oic-color-surface:       var(--oic-token-bg-secondary, #f8f9fa);
    --oic-color-surface-alt:   var(--oic-token-bg-tertiary, #e9ecef);
    --oic-color-text:          var(--oic-token-text-primary, #1a1a1a);
    --oic-color-text-secondary: var(--oic-token-text-secondary, #495057);
    --oic-color-text-muted:    var(--oic-token-text-muted, #6c757d);
    --oic-color-text-inverse:  var(--oic-token-text-inverse, #ffffff);
    --oic-color-primary:       var(--oic-token-brand-primary, #0d6efd);
    --oic-color-primary-hover: var(--oic-token-brand-primary-hover, #0a58ca);
    --oic-color-border:        var(--oic-token-border-color, #dee2e6);
    --oic-color-border-strong: var(--oic-token-border-color-strong, #adb5bd);
    --oic-color-link:          var(--oic-token-link-color, #0d6efd);
    --oic-color-link-hover:    var(--oic-token-link-hover, #0a58ca);
    --oic-color-success:       var(--oic-token-success, #198754);
    --oic-color-warning:       var(--oic-token-warning, #ffc107);
    --oic-color-danger:        var(--oic-token-danger, #dc3545);
    --oic-color-info:          var(--oic-token-info, #0dcaf0);

    /* Typography */
    --oic-font-family:         var(--oic-token-font-primary, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif);
    --oic-font-family-heading: var(--oic-token-font-heading, var(--oic-font-family));
    --oic-font-family-mono:    var(--oic-token-font-mono, "SFMono-Regular", Consolas, monospace);
    --oic-font-size-xs:        var(--oic-token-fs-xs, 0.75rem);
    --oic-font-size-sm:        var(--oic-token-fs-sm, 0.875rem);
    --oic-font-size-base:      var(--oic-token-fs-base, 1rem);
    --oic-font-size-md:        var(--oic-token-fs-md, 1.125rem);
    --oic-font-size-lg:        var(--oic-token-fs-lg, 1.25rem);
    --oic-font-size-xl:        var(--oic-token-fs-xl, 1.5rem);
    --oic-font-size-2xl:       var(--oic-token-fs-2xl, 2rem);
    --oic-font-size-3xl:       var(--oic-token-fs-3xl, 2.5rem);
    --oic-fw-normal:           var(--oic-token-fw-normal, 400);
    --oic-fw-medium:           var(--oic-token-fw-medium, 500);
    --oic-fw-semibold:         var(--oic-token-fw-semibold, 600);
    --oic-fw-bold:             var(--oic-token-fw-bold, 700);
    --oic-line-height:         var(--oic-token-lh-normal, 1.6);
    --oic-line-height-tight:   var(--oic-token-lh-tight, 1.25);

    /* Spacing */
    --oic-space-xs:  var(--oic-token-space-1, 0.25rem);
    --oic-space-sm:  var(--oic-token-space-2, 0.5rem);
    --oic-space-md:  var(--oic-token-space-4, 1rem);
    --oic-space-lg:  var(--oic-token-space-6, 1.5rem);
    --oic-space-xl:  var(--oic-token-space-8, 2rem);
    --oic-space-2xl: var(--oic-token-space-12, 3rem);
    --oic-space-3xl: var(--oic-token-space-16, 4rem);

    /* Layout */
    --oic-container-max: var(--oic-token-container-xl, 1200px);
    --oic-content-max:   var(--oic-token-content-max, 800px);

    /* Borders & Radius */
    --oic-border-width:  var(--oic-token-border-width, 1px);
    --oic-radius-sm:     var(--oic-token-radius-sm, 4px);
    --oic-radius-md:     var(--oic-token-radius-md, 8px);

    /* Shadows */
    --oic-shadow-sm:     var(--oic-token-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    --oic-shadow-md:     var(--oic-token-shadow-md, 0 4px 6px rgba(0,0,0,0.07));

    /* Transitions */
    --oic-transition:      var(--oic-token-transition-base, 150ms ease-in-out);
    --oic-transition-slow: var(--oic-token-transition-slow, 300ms ease-in-out);

    /* Z-Index */
    --oic-z-sticky:   var(--oic-token-z-sticky, 100);
    --oic-z-dropdown: var(--oic-token-z-dropdown, 50);
    --oic-z-overlay:  var(--oic-token-z-overlay, 200);
}

/* ==========================================================================
   1) RESET / BASELINE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    line-height: var(--oic-line-height);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--oic-font-family);
    font-size: var(--oic-font-size-base);
    color: var(--oic-color-text);
    background-color: var(--oic-color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin-block-start: 0;
    margin-block-end: var(--oic-space-sm);
    font-family: var(--oic-font-family-heading);
    font-weight: var(--oic-fw-bold);
    line-height: var(--oic-line-height-tight);
}
h1 { font-size: var(--oic-font-size-2xl); }
h2 { font-size: var(--oic-font-size-xl); }
h3 { font-size: var(--oic-font-size-lg); }
h4 { font-size: var(--oic-font-size-md); }
h5 { font-size: var(--oic-font-size-base); }
h6 { font-size: var(--oic-font-size-sm); }

p { margin-block-start: 0; margin-block-end: var(--oic-space-md); }

a {
    color: var(--oic-color-link);
    text-decoration: none;
    transition: color var(--oic-transition);
}
a:hover, a:focus { color: var(--oic-color-link-hover); text-decoration: underline; }

img { max-inline-size: 100%; block-size: auto; display: block; }

ul, ol {
    padding-inline-start: var(--oic-space-lg);
    margin-block-start: 0;
    margin-block-end: var(--oic-space-md);
}

pre, code {
    font-family: var(--oic-font-family-mono);
    font-size: var(--oic-font-size-sm);
}
pre {
    background-color: var(--oic-color-surface);
    padding: var(--oic-space-md);
    border-radius: var(--oic-radius-sm);
    overflow-x: auto;
    margin-block-end: var(--oic-space-md);
}

blockquote {
    margin: 0 0 var(--oic-space-md);
    padding-inline-start: var(--oic-space-lg);
    border-inline-start: 3px solid var(--oic-color-primary);
    color: var(--oic-color-text-secondary);
    font-style: italic;
}

hr {
    border: none;
    border-block-start: var(--oic-border-width) solid var(--oic-color-border);
    margin-block: var(--oic-space-xl);
}

table { border-collapse: collapse; inline-size: 100%; margin-block-end: var(--oic-space-md); }
th, td {
    padding: var(--oic-space-sm) var(--oic-space-md);
    border: var(--oic-border-width) solid var(--oic-color-border);
    text-align: start;
}
th { background-color: var(--oic-color-surface); font-weight: var(--oic-fw-semibold); }

/* ==========================================================================
   2) LAYOUT PRIMITIVES
   ========================================================================== */
.oic-site { display: flex; flex-direction: column; min-block-size: 100vh; }

.oic-container {
    inline-size: 100%;
    max-inline-size: var(--oic-container-max);
    margin-inline: auto;
    padding-inline: var(--oic-space-md);
}

.oic-content-area {
    max-inline-size: var(--oic-content-max);
    padding-block: var(--oic-space-xl);
}

.oic-main { flex: 1 0 auto; }

/* ==========================================================================
   3) HEADER
   ========================================================================== */
.oic-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--oic-z-sticky);
    background-color: var(--oic-color-bg);
    border-block-end: var(--oic-border-width) solid var(--oic-color-border);
    min-block-size: 60px;
}

.oic-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding-block: var(--oic-space-md); gap: var(--oic-space-md);
}

.oic-header__brand { display: flex; align-items: center; gap: var(--oic-space-sm); }
.oic-header__brand a {
    font-size: var(--oic-font-size-lg); font-weight: var(--oic-fw-bold);
    color: var(--oic-color-text); text-decoration: none;
}
.oic-header__brand img { max-block-size: 50px; inline-size: auto; }

/* ==========================================================================
   4) FOOTER
   ========================================================================== */
.oic-footer {
    flex-shrink: 0;
    background-color: var(--oic-color-surface);
    border-block-start: var(--oic-border-width) solid var(--oic-color-border);
}

.oic-footer__inner {
    padding-block: var(--oic-space-xl); text-align: center;
    color: var(--oic-color-text-muted); font-size: var(--oic-font-size-sm);
}

.oic-footer__widgets { margin-block-end: var(--oic-space-lg); }

.oic-footer__nav { margin-block-end: var(--oic-space-md); }
.oic-footer__nav ul {
    list-style: none; display: flex; justify-content: center;
    flex-wrap: wrap; gap: var(--oic-space-md); margin: 0; padding: 0;
}
.oic-footer__nav a { color: var(--oic-color-text-muted); font-size: var(--oic-font-size-sm); }
.oic-footer__nav a:hover { color: var(--oic-color-primary); }

/* ==========================================================================
   5) NAVIGATION
   ========================================================================== */
.oic-nav-primary ul {
    list-style: none; display: flex; flex-wrap: wrap;
    gap: var(--oic-space-md); margin: 0; padding: 0;
}
.oic-nav-primary li { position: relative; }
.oic-nav-primary a {
    color: var(--oic-color-text); font-size: var(--oic-font-size-sm);
    padding-block: var(--oic-space-xs); transition: color var(--oic-transition);
}
.oic-nav-primary a:hover,
.oic-nav-primary .current-menu-item > a {
    color: var(--oic-color-primary); text-decoration: none;
}

/* Submenu */
.oic-nav-primary .sub-menu {
    display: none; position: absolute;
    background-color: var(--oic-color-bg);
    border: var(--oic-border-width) solid var(--oic-color-border);
    border-radius: var(--oic-radius-sm); box-shadow: var(--oic-shadow-md);
    padding: var(--oic-space-sm) 0; min-inline-size: 180px;
    z-index: var(--oic-z-dropdown);
}
.oic-nav-primary li:hover > .sub-menu,
.oic-nav-primary li:focus-within > .sub-menu { display: block; }
.oic-nav-primary .sub-menu a {
    display: block; padding: var(--oic-space-xs) var(--oic-space-md); white-space: nowrap;
}

/* Mobile nav */
.oic-nav-toggle {
    display: none; background: none; border: none;
    padding: var(--oic-space-xs); cursor: pointer; color: var(--oic-color-text);
}
.oic-nav-toggle svg { inline-size: 24px; block-size: 24px; }

@media (max-width: 767px) {
    .oic-nav-toggle { display: flex; }
    .oic-nav-primary {
        display: none; position: absolute; inset-block-start: 100%; inset-inline: 0;
        background-color: var(--oic-color-bg);
        border-block-end: var(--oic-border-width) solid var(--oic-color-border);
        padding: var(--oic-space-md); z-index: var(--oic-z-dropdown);
        box-shadow: var(--oic-shadow-md);
    }
    .oic-nav-primary.is-open { display: block; }
    .oic-nav-primary ul { flex-direction: column; }
    .oic-nav-primary .sub-menu {
        position: static; box-shadow: none; border: none;
        padding-inline-start: var(--oic-space-md);
    }
    .oic-nav-primary li:hover > .sub-menu { display: block; }
}

/* ==========================================================================
   6) CONTENT / SINGLE
   ========================================================================== */
.oic-entry { margin-block-end: var(--oic-space-2xl); }
.oic-entry__header { margin-block-end: var(--oic-space-lg); }
.oic-entry__title { font-size: var(--oic-font-size-2xl); margin-block-end: var(--oic-space-sm); }
.oic-entry__title a { color: var(--oic-color-text); text-decoration: none; }
.oic-entry__title a:hover { color: var(--oic-color-primary); }

.oic-entry__meta {
    display: flex; flex-wrap: wrap; gap: var(--oic-space-md);
    color: var(--oic-color-text-muted); font-size: var(--oic-font-size-sm);
    margin-block-end: var(--oic-space-md);
}
.oic-entry__meta a { color: var(--oic-color-text-secondary); }
.oic-entry__meta a:hover { color: var(--oic-color-primary); }

.oic-entry__thumbnail { margin-block-end: var(--oic-space-lg); }
.oic-entry__content { line-height: var(--oic-line-height); }
.oic-entry__content > *:last-child { margin-block-end: 0; }

.oic-entry__footer {
    margin-block-start: var(--oic-space-lg); padding-block-start: var(--oic-space-md);
    border-block-start: var(--oic-border-width) solid var(--oic-color-border);
    font-size: var(--oic-font-size-sm); color: var(--oic-color-text-muted);
    display: flex; flex-wrap: wrap; gap: var(--oic-space-md);
}

.oic-post-nav {
    display: flex; justify-content: space-between; gap: var(--oic-space-md);
    margin-block: var(--oic-space-xl); padding-block-start: var(--oic-space-md);
    border-block-start: var(--oic-border-width) solid var(--oic-color-border);
}
.oic-post-nav .nav-subtitle {
    display: block; font-size: var(--oic-font-size-xs);
    color: var(--oic-color-text-muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.oic-post-nav .nav-title { font-weight: var(--oic-fw-medium); }

/* ==========================================================================
   7) ARCHIVE / LOOP
   ========================================================================== */
.oic-archive-header { margin-block-end: var(--oic-space-xl); }
.oic-archive-header__title { font-size: var(--oic-font-size-xl); }
.oic-archive-header__description { color: var(--oic-color-text-muted); margin-block-start: var(--oic-space-sm); }

.oic-pagination { margin-block-start: var(--oic-space-xl); }
.oic-pagination .nav-links { display: flex; justify-content: center; gap: var(--oic-space-sm); flex-wrap: wrap; }
.oic-pagination .page-numbers {
    padding: var(--oic-space-xs) var(--oic-space-sm);
    border: var(--oic-border-width) solid var(--oic-color-border);
    border-radius: var(--oic-radius-sm); font-size: var(--oic-font-size-sm);
    color: var(--oic-color-text); transition: all var(--oic-transition);
}
.oic-pagination .page-numbers:hover {
    background-color: var(--oic-color-surface);
    border-color: var(--oic-color-border-strong); text-decoration: none;
}
.oic-pagination .page-numbers.current {
    background-color: var(--oic-color-primary);
    color: var(--oic-color-text-inverse); border-color: var(--oic-color-primary);
}

/* ==========================================================================
   8) SIDEBAR
   ========================================================================== */
.oic-sidebar .widget { margin-block-end: var(--oic-space-xl); }
.oic-sidebar .widget-title {
    font-size: var(--oic-font-size-lg); margin-block-end: var(--oic-space-sm);
    padding-block-end: var(--oic-space-xs);
    border-block-end: 2px solid var(--oic-color-primary);
}

/* ==========================================================================
   9) COMMENTS
   ========================================================================== */
.oic-comments { margin-block-start: var(--oic-space-2xl); }
.oic-comments__title { font-size: var(--oic-font-size-xl); margin-block-end: var(--oic-space-lg); }
.oic-comment-list { list-style: none; padding: 0; }
.oic-comment-list .comment {
    padding-block: var(--oic-space-md);
    border-block-end: var(--oic-border-width) solid var(--oic-color-border);
}
.oic-comment-list .comment .children { list-style: none; padding-inline-start: var(--oic-space-xl); }

.comment-respond { margin-block-start: var(--oic-space-xl); }
.comment-respond .comment-form label {
    display: block; margin-block-end: var(--oic-space-xs); font-weight: var(--oic-fw-semibold);
}
.comment-respond .comment-form input[type="text"],
.comment-respond .comment-form input[type="email"],
.comment-respond .comment-form input[type="url"],
.comment-respond .comment-form textarea {
    inline-size: 100%; padding: var(--oic-space-sm);
    border: var(--oic-border-width) solid var(--oic-color-border);
    border-radius: var(--oic-radius-sm); font-family: inherit;
    font-size: var(--oic-font-size-base); color: var(--oic-color-text);
    background-color: var(--oic-color-bg); margin-block-end: var(--oic-space-md);
    transition: border-color var(--oic-transition);
}
.comment-respond .comment-form input:focus,
.comment-respond .comment-form textarea:focus {
    border-color: var(--oic-color-primary);
    outline: 2px solid transparent; outline-offset: 2px;
}
.comment-respond .comment-form .form-submit .submit {
    background-color: var(--oic-color-primary); color: var(--oic-color-text-inverse);
    border: none; padding: var(--oic-space-sm) var(--oic-space-lg);
    border-radius: var(--oic-radius-sm); cursor: pointer;
    font-size: var(--oic-font-size-base); font-weight: var(--oic-fw-medium);
    transition: background-color var(--oic-transition);
}
.comment-respond .comment-form .form-submit .submit:hover { background-color: var(--oic-color-primary-hover); }
.oic-comments__closed { color: var(--oic-color-text-muted); font-style: italic; }

/* ==========================================================================
   10) SEARCH / 404
   ========================================================================== */
.oic-search-form { display: flex; gap: var(--oic-space-sm); max-inline-size: 500px; }
.oic-search-form input[type="search"] {
    flex: 1; padding: var(--oic-space-sm);
    border: var(--oic-border-width) solid var(--oic-color-border);
    border-radius: var(--oic-radius-sm); font-family: inherit;
    font-size: var(--oic-font-size-base); color: var(--oic-color-text);
    background-color: var(--oic-color-bg); transition: border-color var(--oic-transition);
}
.oic-search-form input[type="search"]:focus {
    border-color: var(--oic-color-primary); outline: 2px solid transparent; outline-offset: 2px;
}
.oic-search-form button {
    padding: var(--oic-space-sm) var(--oic-space-md);
    background-color: var(--oic-color-primary); color: var(--oic-color-text-inverse);
    border: none; border-radius: var(--oic-radius-sm); cursor: pointer;
    font-weight: var(--oic-fw-medium); transition: background-color var(--oic-transition);
}
.oic-search-form button:hover { background-color: var(--oic-color-primary-hover); }

.oic-404 { text-align: center; padding-block: var(--oic-space-3xl); }
.oic-404 h1 { font-size: var(--oic-font-size-3xl); margin-block-end: var(--oic-space-md); }
.oic-404 p { color: var(--oic-color-text-muted); font-size: var(--oic-font-size-lg); margin-block-end: var(--oic-space-xl); }
.oic-404 .oic-search-form { margin-inline: auto; }

/* ==========================================================================
   11) FRONT PAGE
   ========================================================================== */
.oic-front-page__hero { margin-block-end: var(--oic-space-xl); }
.oic-front-page__hero img {
    aspect-ratio: 21 / 9; object-fit: cover; inline-size: 100%;
    border-radius: var(--oic-radius-sm);
}

/* ==========================================================================
   12) LANDING PAGE
   ========================================================================== */
.oic-landing { min-block-size: 100vh; }
.oic-landing__main { display: flex; flex-direction: column; min-block-size: 100vh; }
.oic-landing__hero { margin-block-end: var(--oic-space-xl); }
.oic-landing__hero img { inline-size: 100%; max-block-size: 70vh; object-fit: cover; }
.oic-landing__content { flex: 1; }

/* ==========================================================================
   13) TAXONOMY
   ========================================================================== */
.oic-taxonomy-header {
    margin-block-end: var(--oic-space-xl); padding-block-end: var(--oic-space-md);
    border-block-end: var(--oic-border-width) solid var(--oic-color-border);
}
.oic-taxonomy-header__title { font-size: var(--oic-font-size-xl); }
.oic-taxonomy-header__count {
    color: var(--oic-color-text-muted); font-size: var(--oic-font-size-sm);
    margin-block-start: var(--oic-space-xs);
}

/* ==========================================================================
   14) UTILITIES
   ========================================================================== */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px); position: absolute !important;
    block-size: 1px; inline-size: 1px; overflow: hidden; word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: var(--oic-color-surface); clip: auto !important; display: block;
    font-size: var(--oic-font-size-sm); padding: var(--oic-space-md);
    position: fixed; inset-block-start: var(--oic-space-xs); inset-inline-start: var(--oic-space-xs);
    z-index: 100000; inline-size: auto; block-size: auto;
    box-shadow: var(--oic-shadow-md); border-radius: var(--oic-radius-sm);
}

/* ==========================================================================
   15) FOCUS & ACCESSIBILITY
   ========================================================================== */
:focus-visible { outline: 2px solid var(--oic-color-primary); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   16) CLS PREVENTION
   ========================================================================== */
.oic-entry__thumbnail img { aspect-ratio: 16 / 9; object-fit: cover; inline-size: 100%; }

/* ==========================================================================
   17) RESPONSIVE
   ========================================================================== */
@media (min-width: 768px) {
    h1 { font-size: var(--oic-font-size-3xl); }
    h2 { font-size: var(--oic-font-size-2xl); }
    h3 { font-size: var(--oic-font-size-xl); }
    .oic-entry__title { font-size: var(--oic-font-size-3xl); }
    .oic-container { padding-inline: var(--oic-space-lg); }
}

@media (min-width: 1024px) {
    .oic-container { padding-inline: var(--oic-space-xl); }
}