src/styles.css

@import url('../node_modules/@fortawesome/fontawesome-free/css/all.min.css');

@font-face {
  font-family: 'Roliana';
  src: url('/assets/font/Roliana-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'EBGaramond-Regular';
  src: url('/assets/font/EBGaramond-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'EBGaramond-Medium';
  src: url('/assets/font/EBGaramond-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Global application font (applies everywhere) */
html, body, body.mat-typography, button, input, select, textarea {
  font-family: Roboto, sans-serif !important;
  /*letter-spacing: 2px !important;*/ /* unified global letter spacing */
}

/* -------- Black & White Theme (global) -------- */
:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;
  --border: #e5e5e5;
  --black: #000000;
  --white: #ffffff;
  --focus: #000000; /* focus ring color */
  --ls: 1px; /* global letter spacing token */
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  letter-spacing: var(--ls); /* set to 1px globally */
}

/* Reusable layout helpers */
.container {
  width: min(1120px, 92%);
  margin-inline: auto;
}

/* Header bar */
.header {
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Logo / brand */
.brand {
  font-weight: 700;
  letter-spacing: 0.3px; /* keep brand tighter */
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.05s ease-in-out;
  letter-spacing: var(--ls);
  cursor:pointer;
}

  .btn:hover {
    transform: translateY(-1px);
    background: #3ab8a9;
  }
  .btn:active { transform: translateY(0); }
  .btn.primary { background: var(--black); color: var(--white); }

.btn-ghost {
  border: 2px solid #f3a54c;
  color: white;
  background: black;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--black);
  color: var(--white);
  padding: 6px 10px;
  border-radius: 6px;
  letter-spacing: var(--ls);
}
  .skip-link:focus { top: 8px; }

/* Hero section */
/*.hero { padding: 56px 0 72px; }*/
  .hero h1 { margin: 0 0 12px 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: var(--ls); }
  .hero p { margin: 0 0 28px 0; color: var(--muted); max-width: 74ch; }

/* Card (optional info block) */
.card { border: 1px solid var(--border); border-radius: 12px; padding: 20px; background: var(--white); letter-spacing: var(--ls); }

/* Simple grid */
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

html, body { height: 100%; }
body { margin: 0; }

span.mdc-tab__text-label { color: white !important; font-weight:bold !important; /*font-family: EBGaramond-Medium !important;*/ letter-spacing: var(--ls) !important; }

body.mat-typography { /*font-family: EBGaramond-Medium !important;*/ letter-spacing: var(--ls); }

.mat-h2, .mat-headline-6, .mat-typography .mat-h2, .mat-typography .mat-headline-6, .mat-typography h2, .mat-h3, .mat-subtitle-1, .mat-typography .mat-h3, .mat-typography .mat-subtitle-1, .mat-typography h3, .mat-h1, .mat-headline-5, .mat-typography .mat-h1, .mat-typography .mat-headline-5, .mat-typography h1 { 
  /*font-family: EBGaramond-Medium !important; */
  letter-spacing: var(--ls) !important; 
}
button.modal-close {
  right: 16px;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  border: none;
  transition: all 0.3s ease;
  display: flex;
  position: relative;
  left: 48.5vw;
  border-radius: 7px;
  top: 0;
  z-index: 1;
  width: 1.2vw;
  height: 1.2vw;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 1vw;
  cursor: pointer;
}

.body-scrollable {
  overflow: auto !important;
}

body {
  overflow: hidden !important;
}


.message.bot-message {
  color: white;
  display: flex;
  align-items: baseline;
  /*  text-align: justify;*/
  gap: 1vw;
}

.message.user-message {
  color: wheat;
  display: flex;
  align-items: baseline;
  gap: 1vw;
}

.message-content p {
  margin: 0;
}

/* Shared pulse animation for footnote links (used by sign-up and sign-in footnotes) */
@keyframes footnotePulseColor {
  0% { color: #FFD600; }
  50% { color: #FFFFFF; }
  100% { color: #FFD600; }
}

.footnote a.pulse {
  animation: footnotePulseColor 1s ease-in-out 0s 3;
  display: inline-block;
}
app-question-answer, app-user-preferences {
  position: relative !important;
  top: 6.3vw !important;
}