/* =============================================================================
   THEME CUSTOM CSS  –  Astra Child Hossam
   Location: /wp-content/themes/astra-child-hossam/assets/css/theme-custom.css
   ============================================================================= */

/* ─── 1. CSS Design Tokens ─────────────────────────────────────────────────── */
:root {
  --c-gold: #f2ca50;
  --c-gold-dim: #d4af37;
  --c-gold-muted: #b08c10;
  --c-outline: #4d4635;
  --c-muted: #99907c;
  --c-bg: #131313;
  --c-bg-dark: #0e0e0e;
  --c-bg-low: #1c1b1b;
  --c-bg-high: #2a2a2a;
  --c-surface: #201f1f;
  --c-surface-var: #353534;
  --c-text: #e5e2e1;
  --c-text-dim: rgba(229, 226, 225, 0.7);
  --c-text-muted: #d0c5af;
  --c-error: #ffab91;

  --font-headline: "Noto Serif", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --bar-h: 40px;
  --header-h: 68px;
  --page-top-gap: 16px;
  --site-main-offset: calc(var(--bar-h) + var(--header-h));
  --max-w: 1440px;
  --px-lg: 48px;
  --px-md: 32px;
  --px-sm: 20px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
}

/* ─── 2. Reset ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.no-announcement-bar {
  --bar-h: 0px;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
ul {
  list-style: none;
}
button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
}
input,
textarea,
select {
  font: inherit;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  vertical-align: middle;
}

/* Offset for fixed bars */
.site-main {
  padding-top: var(--site-main-offset);
  padding-bottom: 0;
}

@media (max-width: 991.98px) {
  :root {
    --header-h: 62px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --header-h: 58px;
  }
}