/* =============================================================
   Portfolio Website - Custom Styles
   Color scheme based on urprojekty.pl
   ============================================================= */

/* -------------------------------------------------------------
   Local Fonts (@font-face)
   - Self-hosted for performance (no Google Fonts dependency)
   - Hangoe: display/heading font
   - Roboto: body text font
   ------------------------------------------------------------- */

/* Hangoe - Display Font (headings) */
@font-face {
  font-family: 'Hangoe';
  src: url('../fonts/hangoe/Hangoe-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hangoe';
  src: url('../fonts/hangoe/Hangoe-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Roboto - Body Font */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* -------------------------------------------------------------
   CSS Custom Properties (Variables)
   - Easy to update color scheme in one place
   ------------------------------------------------------------- */
:root {
  /* Primary Colors */
  --color-primary: #2ea3f2;       /* Blue - accent color */
  --color-primary-dark: #1a8cd8;  /* Darker blue for hover */

  /* Neutral Colors */
  --color-black: #000000;         /* Headings */
  --color-text: #666666;          /* Body text */
  --color-text-dark: #333333;     /* Secondary headings */
  --color-white: #ffffff;         /* White */
  --color-warm: #d6cfc9;          /* Warm beige - page background */

  /* Gray Scale */
  --color-gray-light: #f2f2f2;    /* Light backgrounds */
  --color-gray-border: #dddddd;   /* Borders */
  --color-gray-subtle: #eeeeee;   /* Subtle backgrounds */

  /* Typography */
  --font-display: 'Hangoe', serif;
  --font-body: 'Roboto', sans-serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
}

/* -------------------------------------------------------------
   Base Styles
   ------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.6;
}

/* -------------------------------------------------------------
   Language Switcher
   - Hide inactive language content
   - Spans display inline, divs display block
   ------------------------------------------------------------- */

/* Default: hide English, show Polish */
div.lang-en { display: none; }
div.lang-pl { display: block; }
span.lang-en { display: none; }
span.lang-pl { display: inline; }
p.lang-en { display: none; }
p.lang-pl { display: block; }
h2.lang-en { display: none; }
h2.lang-pl { display: block; }

/* When English is active */
html[lang="en"] div.lang-en { display: block; }
html[lang="en"] div.lang-pl { display: none; }
html[lang="en"] span.lang-en { display: inline; }
html[lang="en"] span.lang-pl { display: none; }
html[lang="en"] p.lang-en { display: block; }
html[lang="en"] p.lang-pl { display: none; }
html[lang="en"] h2.lang-en { display: block; }
html[lang="en"] h2.lang-pl { display: none; }

/* -------------------------------------------------------------
   Utility Classes
   ------------------------------------------------------------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

/* -------------------------------------------------------------
   Component Styles
   ------------------------------------------------------------- */

/* Language Switcher Buttons - Active State */
[data-lang-btn].active {
  background-color: #000000;
  color: white;
}

/* Language spans in navigation already handled by global span rules above */