/* Base Typography Setup */
html {
  font-family: var(--font-family-body);
  font-size: 16px; /* Base for rem calculations */
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--textColor);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--textColor);
  /* Fix hyphenation issue - override Olivero theme's automatic hyphenation */
  hyphens: none;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
}

/* Headings */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-family-headings);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--heading-margin-bottom);
  text-transform: none;
  color: currentColor;
}

h1, .h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-tight);
}

h2, .h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
}

h3, .h3 {
  font-size: var(--font-size-h3);
}

h4, .h4 {
  font-size: var(--font-size-h4);
}

h5, .h5 {
  font-size: var(--font-size-h5);
}

h6, .h6 {
  font-size: var(--font-size-h6);
}

/* Display headings for hero/banner content */
.display-1 {
  font-size: var(--font-size-display-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.display-2 {
  font-size: var(--font-size-display-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.display-3 {
  font-size: var(--font-size-display-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* Body Text */
p {
  font-family: var(--font-family-body);
  font-size: 1rem;
  line-height: var(--line-height-normal);
  margin: 0 0 var(--text-margin-bottom);
}

p:last-of-type,
p:last-child {
  margin-bottom: 0;
}

/* Lead paragraph */
.lead, p.lead {
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
}

/* Small text and captions */
.small, small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
}

.caption, figcaption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
  color: var(--greyDarker);
  font-style: italic;
}

/* Text content areas */
.text-content {
  font-family: var(--font-family-body);
}

.text-content p {
  line-height: var(--line-height-normal);
}

.text-content blockquote {
  background-color: transparent;
  border-left: solid 4px var(--orangeLighter);
  font-family: var(--font-family-body);
  font-size: var(--font-size-blockquote);
  font-style: normal;
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  margin: var(--space-2xl) 0;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-2xl);
}

blockquote::after,
blockquote::before {
  display: none;
}

/* Links */
a {
  border: none;
  color: var(--orange);
  font-family: inherit;
  text-decoration: underline;
  transition: var(--transition);
}

@media (pointer: fine) {
  a:hover,
  a:focus {
    border: none;
    color: var(--orange);
    text-decoration: none;
  }
}

/* Lists */
ul, ol {
  font-family: var(--font-family-body);
  font-size: 1rem;
  line-height: var(--line-height-normal);
  margin: 0 0 var(--text-margin-bottom);
  padding: 0 0 0 var(--space-lg);
}

ul ul, ol ol, ul ol, ol ul {
  margin: 0;
  padding: 0 0 0 var(--space-lg);
}

/* Definition lists */
dl {
  margin: 0 0 var(--text-margin-bottom);
}

dt {
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-sm);
}

dd {
  margin: 0 0 var(--text-margin-bottom) var(--space-lg);
}

/* Code and preformatted text */
code, kbd, samp {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875em;
  line-height: var(--line-height-normal);
}

pre {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  background-color: var(--greyLighter);
  border-radius: 4px;
  overflow-x: auto;
}

/* Emphasis and strong */
em, i {
  font-style: italic;
}

strong, b {
  font-weight: var(--font-weight-bold);
}

/* Mark/highlighting */
mark {
  background-color: var(--blueMedium);
  color: var(--white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 2px;
}

/* Utility Classes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }

/* Color utilities */
.text-dark {
  color: var(--textColor) !important;
}

.text-orange {
  color: var(--qridaOrange) !important;
}

.text-white {
  color: var(--white) !important;
}

.text-shadow {
  text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
}

/* Drupal specific */
.single-taxonomy:not(:first-of-type)::before {
  content: "\007C";
  display: inline-block;
  margin: 0 var(--space-sm);
}

.single-taxonomy:first-child::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tags" viewBox="0 0 16 16"><path d="M3 2v4.586l7 7L14.586 9l-7-7H3zM2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2z"/><path d="M5.5 5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm0 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM1 7.086a1 1 0 0 0 .293.707L8.75 15.25l-.043.043a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 0 7.586V3a1 1 0 0 1 1-1v5.086z"/></svg>');
  background-repeat: no-repeat;
  background-size: 0.8rem 0.8rem;
  content: "";
  display: inline-block;
  height: 0.8rem;
  margin-right: var(--space-sm);
  vertical-align: middle;
  width: 0.8rem;
}

/* Ensure all Views fields use the theme font */
.views-field,
.views-field a,
.field-content {
  font-family: var(--font-family-body);
}

/* Caption styling */
.caption > figcaption {
  border: none;
  text-align: left;
}

/* Responsive adjustments */
@media screen and (min-width: 768px) {
  /* Tablet specific typography adjustments */
}

@media screen and (min-width: 1200px) {
  /* Large desktop specific typography adjustments */
}

@media screen and (min-width: 1920px) {
  /* Extra large desktop specific typography adjustments */
}