/* =========================================================
   ALPEKIN BASE LAYER
   ---------------------------------------------------------
   Purpose:
   Global browser reset, document defaults, accessibility,
   print behavior, and RTL-safe foundations.

   Rules:
   - This file applies to the entire site.
   - Do not place page-specific styles here.
   - Prefer logical properties for multilingual/RTL support.
   ========================================================= */


/* Universal box sizing keeps sizing predictable. */
*,
*::before,
*::after {
  box-sizing: border-box;
}


/* Root document defaults. */
html {
  min-height: 100%;
  font-size: 100%;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


/* Global body style.
   Alpekin uses a warm paper base with a subtle earthy atmosphere.
   Header/footer and some sections may use the darker brand surfaces. */
body {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--deep-moss) 10%, transparent),
      transparent 34rem
    ),
    var(--surface-paper);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: var(--fs-fluid-body);
  font-weight: var(--weight-medium);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration-standard) ease, color var(--duration-standard) ease;
}


/* Branded text selection. */
body::selection {
  color: var(--dark-soil);
  background: color-mix(in srgb, var(--tree-gold) 55%, var(--ivory-bone));
}


/* Main content should always participate in layout. */
main {
  display: block;
  min-width: 0;
  flex: 1 0 auto;
}


/* Media defaults. */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

svg {
  fill: currentColor;
}


/* Form controls inherit the brand typography. */
button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}


/* Global links.
   Component-level links can override this locally. */
a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition:
    color var(--duration-standard) ease,
    text-decoration-color var(--duration-standard) ease;
}

a:hover {
  color: var(--link-hover);
}


/* Strong visible focus is mandatory for accessibility. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[contenteditable]:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 3px;
}


/* Horizontal rule uses logical border direction. */
hr {
  border: 0;
  border-block-start: var(--border-width) solid var(--border-dark);
  margin-block: var(--space-8);
}


/* Native hidden should always win. */
[hidden] {
  display: none !important;
}


/* Anchor scrolling should not hide content behind fixed/sticky headers. */
:target {
  scroll-margin-top: var(--space-8);
}


/* Header/footer must sit above decorative page backgrounds. */
.site-header,
.site-footer {
  position: relative;
  z-index: 2;
}


/* =========================================================
   RTL FOUNDATION
   ---------------------------------------------------------
   Django template already supports dir="rtl".
   These are safe global defaults for Arabic and future RTL use.
   ========================================================= */

[dir="rtl"] {
  text-align: start;
}

[dir="rtl"] input,
[dir="rtl"] textarea {
  text-align: start;
}

@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  summary:focus-visible,
  [contenteditable]:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid CanvasText;
  }
}


/* =========================================================
   REDUCED MOTION
   ---------------------------------------------------------
   Respect user preference. Motion should never be mandatory.
   ========================================================= */

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


/* =========================================================
   PRINT FOUNDATION
   ---------------------------------------------------------
   Useful for legal pages, privacy, terms, articles, and
   Journal content.
   ========================================================= */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--print-ink) !important;
    text-shadow: none !important;
  }

  html,
  body {
    background: var(--print-paper) !important;
    font-size: 12pt;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
  }

  p,
  blockquote,
  table,
  pre {
    page-break-inside: avoid;
  }

  .site-header,
  .site-footer,
  .no-print {
    display: none !important;
  }
}