/**
 * Theme Name: Qomra Tech
 * Theme URI: https://qomratech.com
 * Description: Strategic Software Partner — Struggling Projects, Stable Solutions. Single standalone WordPress theme. See guideline.md and agent.md at the project root.
 * Author: Qomra Tech
 * Author URI: https://qomratech.com
 * Version: 5.0.0
 * Text Domain: qomratech
 * Requires PHP: 7.4
 * Requires at least: 6.4
 * License: Proprietary
 */

/* =========================================================================
 * Qomra Tech — Brand tokens
 * Reference: guideline.md §1
 *
 * These tokens are the single source of truth for color, type, and spacing.
 * They are also mirrored in Elementor → Site Settings → Global Colors / Fonts
 * so widgets pick them up; if you ever change a value here, change it there.
 * ========================================================================= */

:root {
    /* ---- Color ----------------------------------------------------------- */
    --qt-navy:        #1A2B5F;
    --qt-cyan:        #00E5FF;
    --qt-slate:       #A0A0A0;
    --qt-white:       #FFFFFF;
    --qt-ink:         #0F1A3D;   /* body text — slightly darker than navy for readability */
    --qt-mist:        #F5F7FB;   /* alt-band background on white pages */
    --qt-navy-soft:   rgba(26, 43, 95, 0.85);
    --qt-cyan-soft:   rgba(0, 229, 255, 0.12);
    --qt-divider:     rgba(15, 26, 61, 0.08);

    /* ---- Typography ------------------------------------------------------ */
    --qt-font-sans:   'Inter', 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --qt-font-arabic: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
    --qt-font-serif:  'DM Serif Display', Georgia, serif;
    --qt-font-mono:   'JetBrains Mono', SFMono-Regular, Menlo, monospace;

    --qt-fs-hero:     clamp(2.5rem, 5vw + 1rem, 4rem);     /* 40 → 64 px */
    --qt-fs-h1:       clamp(2rem, 3vw + 1rem, 3rem);       /* 32 → 48 px */
    --qt-fs-h2:       clamp(1.625rem, 2vw + 1rem, 2.5rem); /* 26 → 40 px */
    --qt-fs-h3:       1.375rem;
    --qt-fs-h4:       1.125rem;
    --qt-fs-eyebrow:  0.8125rem;
    --qt-fs-body:     1.0625rem;
    --qt-fs-caption:  0.875rem;

    --qt-lh-tight:    1.1;
    --qt-lh-snug:     1.25;
    --qt-lh-base:     1.65;

    --qt-tracking-eyebrow: 0.12em;

    /* ---- Spacing --------------------------------------------------------- */
    --qt-space-section: clamp(3rem, 8vw, 6rem);
    --qt-space-block:   clamp(1.5rem, 3vw, 2.5rem);
    --qt-space-card:    1.5rem;
    --qt-container-max: 1240px;

    /* ---- Radii ----------------------------------------------------------- */
    --qt-radius-sm:   8px;
    --qt-radius-md:   12px;
    --qt-radius-lg:   24px;
    --qt-radius-pill: 999px;

    /* ---- Shadows --------------------------------------------------------- */
    --qt-shadow-sm: 0 1px 2px rgba(15, 26, 61, 0.06);
    --qt-shadow-md: 0 8px 24px -8px rgba(15, 26, 61, 0.18);
    --qt-shadow-lg: 0 24px 48px -16px rgba(15, 26, 61, 0.22);

    /* ---- Motion ---------------------------------------------------------- */
    --qt-ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --qt-dur-fast:  150ms;
    --qt-dur-base:  250ms;
    --qt-dur-slow:  400ms;
}

/* =========================================================================
 * Base typography — sets the default before Zentec widgets / Elementor kick in.
 * ========================================================================= */

body {
    font-family: var(--qt-font-sans);
    font-size: var(--qt-fs-body);
    line-height: var(--qt-lh-base);
    color: var(--qt-ink);
    background-color: var(--qt-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Polylang adds a body class qt-lang-<slug>; switch to the Arabic stack on AR. */
body.qt-lang-ar,
body[dir="rtl"] {
    font-family: var(--qt-font-arabic);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
    font-family: inherit;
    color: var(--qt-navy);
    font-weight: 700;
    line-height: var(--qt-lh-tight);
    letter-spacing: 0;
    margin-block: 0 0.5em;
}

h1, .entry-title { font-size: var(--qt-fs-h1); }
h2 { font-size: var(--qt-fs-h2); }
h3 { font-size: var(--qt-fs-h3); font-weight: 600; }
h4 { font-size: var(--qt-fs-h4); font-weight: 600; }

p { margin-block: 0 1em; }

a {
    color: var(--qt-navy);
    text-decoration-color: var(--qt-cyan);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
    transition: color var(--qt-dur-fast) var(--qt-ease);
}
a:hover { color: var(--qt-cyan); }

strong, b { font-weight: 700; }

/* =========================================================================
 * Accessibility — focus visibility + reduced-motion
 * ========================================================================= */

:focus-visible {
    outline: 2px solid var(--qt-cyan);
    outline-offset: 2px;
    border-radius: 2px;
}

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

/* =========================================================================
 * Selection + skip link
 * ========================================================================= */

::selection {
    background: var(--qt-cyan);
    color: var(--qt-navy);
}

.skip-link.screen-reader-text:focus {
    left: 1rem;
    top: 1rem;
    z-index: 9999;
    background: var(--qt-navy);
    color: var(--qt-white);
    padding: 0.75rem 1rem;
    border-radius: var(--qt-radius-sm);
}