/* ============================================================
   Your Egy Guide 2.0 — Base Layer
   Global reset, typography, spacing utilities, surface styles,
   focus states, selection, reduced motion.
   Loaded AFTER ui_tokens.css.
   ============================================================ */

/* ── Reset & Global ──────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--txt-color);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

body.dark-mode {
    background: var(--bg);
    color: var(--txt-color);
}

::selection {
    background: rgba(var(--primary-rgb), .15);
    color: var(--primary-hover);
}

/* ── Focus States ────────────────────────────────── */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

:is(input, select, textarea):focus-visible {
    outline: none;  /* Inputs use border/shadow instead */
}

/* ── Links ───────────────────────────────────────── */
a {
    color: var(--a, var(--primary));
    text-decoration: none;
    transition: color .18s ease;
}
a:hover { color: var(--a-hover, var(--primary)); }

/* ── Images ──────────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Lists ───────────────────────────────────────── */
ul, ol { list-style: none; }

/* ── Interactive Elements ────────────────────────── */
button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ── Layout ──────────────────────────────────────── */
.wrap {
    width: 100%;
    max-width: var(--wrap, 1240px);
    margin-inline: auto;
    padding-inline: var(--page-pad, 1rem);
}

.container { width: 100%; }

.hidden { display: none !important; }

/* ── Typography ──────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-h1, var(--font-main));
    color: var(--h1-color, var(--txt-color));
    line-height: var(--lh-heading);
    font-weight: var(--bold);
    letter-spacing: -0.01em;
    margin-bottom: 0.5em;
    text-wrap: balance;
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); }
h6, .h6 { font-size: var(--fs-h6); }

p { line-height: var(--lh-body); }

.font-sm   { font-size: var(--fs-sm); }
.font-xs   { font-size: var(--fs-xs); }
.font-lg   { font-size: 1.125rem; }
.font-xlg  { font-size: 1.25rem; }
.font-xxlg { font-size: 1.5rem; }
.font-700  { font-weight: 700; }
.font-600  { font-weight: 600; }
.font-500  { font-weight: 500; }

.text-muted    { color: var(--text-muted); }
.text-primary  { color: var(--primary); }
.text-success  { color: var(--success); }
.text-danger   { color: var(--danger); }
.text-warning  { color: var(--warning); }
.text-yellow   { color: var(--warning); }

.auto-dir      { direction: auto; }
.text-balance  { text-wrap: balance; }

/* ── Section Kickers / Eyebrows ──────────────────── */
.two-line-ttl small,
.section-kicker,
.eyebrow {
    font-family: var(--font-main);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary);
}

/* ── Flex Utilities ──────────────────────────────── */
.flex              { display: flex; }
.inline-flex       { display: inline-flex; }
.inline            { display: inline-flex; }
.column            { flex-direction: column; }
.flex-wrap         { flex-wrap: wrap; }
.flex-center       { display: flex; justify-content: center; align-items: center; }
.flex-start        { justify-content: flex-start; }
.flex-end          { justify-content: flex-end; }
.flex-strech       { align-items: stretch; }
.flex-stretch      { align-items: stretch; }
.align-items-center     { align-items: center; }
.align-items-start      { align-items: flex-start; }
.align-items-end        { align-items: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-center  { justify-content: center; }
.center-content    { display: flex; align-items: center; justify-content: center; }

.flex-sm-column-reverse {}
@media (max-width: 768px) {
    .flex-sm-column-reverse { flex-direction: column-reverse; }
}

/* ── Grid Utilities ──────────────────────────────── */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.row > [class*="col-"] { flex: 1; min-width: 250px; }
.col-md-3 { flex: 0 0 calc(25% - 1.125rem); }
.col-md-6 { flex: 0 0 calc(50% - .75rem); }

@media (max-width: 768px) {
    .col-md-3, .col-md-6 { flex: 0 0 100%; min-width: 100%; }
}

/* ── Spacing Utilities ───────────────────────────── */
.m-0  { margin: 0; }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }

.mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }

.my-1 { margin-block: var(--sp-1); } .my-2 { margin-block: var(--sp-2); }
.my-3 { margin-block: var(--sp-3); } .my-4 { margin-block: var(--sp-4); }
.my-5 { margin-block: var(--sp-5); } .my-6 { margin-block: var(--sp-6); }

.ms-auto { margin-inline-start: auto; }
.me-auto { margin-inline-end: auto; }
.mx-auto { margin-inline: auto; }

.me-1 { margin-inline-end: var(--sp-2); }
.me-2 { margin-inline-end: var(--sp-4); }
.me-3 { margin-inline-end: var(--sp-4); }
.me-5 { margin-inline-end: var(--sp-5); }
.ms-1 { margin-inline-start: var(--sp-2); }
.ms-2 { margin-inline-start: var(--sp-4); }
.ms-3 { margin-inline-start: var(--sp-4); }
.ms-4 { margin-inline-start: var(--sp-5); }
.ms-5 { margin-inline-start: var(--sp-5); }

.pt-1 { padding-top: var(--sp-2); }
.pt-4 { padding-top: var(--sp-5); }
.pb-4 { padding-bottom: var(--sp-5); }
.pb-5 { padding-bottom: var(--sp-7); }
.py-3 { padding-block: var(--sp-4); }
.py-4 { padding-block: var(--sp-5); }
.py-5 { padding-block: var(--sp-7); }
.px-2 { padding-inline: var(--sp-4); }
.px-4 { padding-inline: var(--sp-6); }
.p-3  { padding: var(--sp-4); }
.p-4  { padding: var(--sp-5); }

.gap-1  { gap: var(--sp-2); }
.gap-2  { gap: var(--sp-4); }
.gap-3  { gap: var(--sp-5); }
.gap-4  { gap: var(--sp-6); }
.gap-5  { gap: var(--sp-1); }
.gap-6  { gap: var(--sp-8); }
.gap-10 { gap: var(--sp-2); }

.row-gap-2 { row-gap: var(--sp-6); }

/* ── Display / Position ──────────────────────────── */
.relative     { position: relative; }
.float-end    { float: inline-end; }
.d-block      { display: block; }
.inl-blk      { display: inline-block; }
.width100     { width: 100%; }
.height100    { min-height: 100%; }

/* ── Text Alignment ──────────────────────────────── */
.center         { text-align: center; }
.text-start     { text-align: start; }
.text-end       { text-align: end; }
.text-sm-center { text-align: center; }

/* ── Surfaces ────────────────────────────────────── */
.card,
.panel,
.list-block,
.sheet {
    background: var(--bg-card, var(--bg));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line-light);
}

.bg-light    { background: var(--bg-alt); }
.rounded     { border-radius: var(--radius); }
.rounded-lg  { border-radius: var(--radius-lg); }

/* ── Section Rhythm ──────────────────────────────── */
.section, .section-y {
    padding-block: var(--section-y);
}

/* ── Sticky CTA Bar ──────────────────────────────── */
body.has-sticky-cta {
    padding-bottom: var(--sticky-cta-h);
}

.sticky-cta-bar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: var(--tap-min);
    padding: .75rem var(--page-pad) calc(.75rem + var(--safe-bottom));
    background: var(--bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.sticky-cta-bar .btn {
    flex: 1 1 auto;
    min-height: var(--tap-min);
}

/* ── Badge Utility ───────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .25rem .625rem;
    border-radius: var(--radius-xs);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.3;
}
.badge-primary {
    background: var(--primary-050);
    color: var(--primary);
}
.badge-success {
    background: var(--success-light);
    color: var(--success);
}
.badge-danger {
    background: var(--danger-light);
    color: var(--danger);
}
.badge-warning {
    background: var(--warning-light);
    color: var(--warning);
}

/* ── Desktop-only hover lift (not on touch) ──────── */
@media (hover: hover) and (pointer: fine) {
    .post-block:hover {
        transform: translateY(-4px);
    }
}

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

/* ── Mobile font-size guardrails ─────────────────── */
@media (max-width: 480px) {
    h1, .h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
}