/* ==========================================================================
   BASE.CSS — Modern Reset & Foundation Styles
   Normalizes browser defaults, sets RTL direction, applies the dark theme
   foundation, and configures accessibility features.
   ========================================================================== */

/* -----------------------------------------------------------------------
   MODERN CSS RESET
   Based on Josh Comeau's reset with additions for this project.
   ----------------------------------------------------------------------- */

/* Use border-box globally — the only sane box model */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Remove default margins */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd,
ul, ol {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Prevent font-size inflation on mobile */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
  direction: ltr;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first last;
  color-scheme: dark;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  overflow-x: hidden;
  position: relative;
}

/* Ensure body fills viewport for flex/grid layouts */
body {
  display: flex;
  flex-direction: column;
}

/* Main content takes remaining space */
main {
  flex: 1;
}

/* -----------------------------------------------------------------------
   TYPOGRAPHY DEFAULTS
   ----------------------------------------------------------------------- */

/* Set heading defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--text-primary);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* Paragraphs */
p {
  max-width: 70ch;
  text-wrap: pretty;
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

/* Bold text uses semibold for Arabic readability */
strong, b {
  font-weight: var(--fw-semibold);
}

/* Small text */
small {
  font-size: var(--fs-small);
}

/* -----------------------------------------------------------------------
   LINKS
   ----------------------------------------------------------------------- */

a {
  color: var(--green-secondary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--green-light);
}

/* -----------------------------------------------------------------------
   MEDIA ELEMENTS
   ----------------------------------------------------------------------- */

/* Make images responsive by default */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Buttons reset */
button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

/* Text areas respect parent width */
textarea {
  resize: vertical;
  width: 100%;
}

/* -----------------------------------------------------------------------
   SELECTION STYLES
   ----------------------------------------------------------------------- */

::selection {
  background-color: rgba(0, 108, 52, 0.5);
  color: var(--text-primary);
}

::-moz-selection {
  background-color: rgba(0, 108, 52, 0.5);
  color: var(--text-primary);
}

/* -----------------------------------------------------------------------
   CUSTOM SCROLLBAR
   Thin dark track with green thumb for a premium feel.
   ----------------------------------------------------------------------- */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--green-primary) rgba(255, 255, 255, 0.05);
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}

::-webkit-scrollbar-thumb {
  background: var(--green-primary);
  border-radius: 4px;
  border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--green-secondary);
}

::-webkit-scrollbar-corner {
  background: var(--bg-primary);
}

/* -----------------------------------------------------------------------
   FOCUS STYLES
   Green outline for keyboard navigation — invisible for mouse users.
   ----------------------------------------------------------------------- */

/* Remove default outline */
:focus {
  outline: none;
}

/* Visible focus for keyboard users only */
:focus-visible {
  outline: 2px solid var(--green-secondary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Focus within for composite widgets */
:focus-within {
  outline: none;
}

/* -----------------------------------------------------------------------
   SKIP LINK
   Accessibility skip navigation link — visible only on focus.
   ----------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-sm);
  z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md);
  background: var(--green-primary);
  color: var(--text-primary);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top var(--transition-smooth);
}

.skip-link:focus {
  top: 0;
  outline: none;
}

/* -----------------------------------------------------------------------
   REDUCED MOTION — Base Level
   Respects user motion preferences at the foundation level.
   More specific overrides are in animations.css.
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* -----------------------------------------------------------------------
   PLACEHOLDER STYLES
   ----------------------------------------------------------------------- */

::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

:-ms-input-placeholder {
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------
   TABLE DEFAULTS
   ----------------------------------------------------------------------- */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* -----------------------------------------------------------------------
   HR STYLING
   ----------------------------------------------------------------------- */

hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-lg) 0;
}

/* -----------------------------------------------------------------------
   PRINT STYLES (MINIMAL)
   ----------------------------------------------------------------------- */

@media print {
  body {
    background: white;
    color: black;
  }

  .site-header,
  .site-footer,
  #cursor,
  #cursor-follower {
    display: none !important;
  }
}

/* Custom Green Eagle Cursor */
body, html {
  cursor: url('../assets/images/green-eagle-cursor.png?v=10') 8 8, auto !important;
}

/* Keep default hand for interactive elements */
a, button, .btn, .lang-switcher, [role="button"], input[type="submit"], input[type="button"], input[type="reset"], .swiper-button-next, .swiper-button-prev, .port-next, .port-prev, .back-to-top-btn {
  cursor: pointer !important;
}