/* 
 * BASE STYLES - Typography, reset, and element defaults
 * 
 * Includes:
 * - Font imports (Inter, Noto Serif)
 * - Box-sizing reset
 * - Base body styles
 * - Typography scale (h1-h6)
 * 
 * Foundation styles that apply globally to the application
 */

/* Google Fonts - Nor's Brand System */
@import url('https://fonts.googleapis.com/css2?family=Bigshot+One&family=Trocchi&family=Inter:ital,wght@0,400..700;1,400..700&family=Source+Sans+3:ital,wght@0,400..700;1,400..700&display=swap');

/* Reset box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Form controls use the page font (browsers don't inherit it by default) */
button, input, select, textarea {
  font: inherit;
}

/* Checkboxes and radios use the site yellow for the selected state */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--signal-yellow);
}

/* Base Styles */
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  background-color: var(--background-primary);
  margin: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance; /* even line lengths, no single word left on a line */
}

/* No widows: the browser rebalances the last lines so one word never sits alone */
p, li, dd, blockquote, figcaption, td {
  text-wrap: pretty;
}

/* Big headings use the display face. It has one weight, so never fake a bold */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  font-synthesis: none;
}

h1 {
  font-size: var(--h1-size); /* top of the golden-ratio heading scale */
  line-height: 1;
  font-weight: 400; /* Bigshot One has one weight */
  margin-top: var(--space-10); /* page titles share one top space (was the browser default, 0.67em) */
}

h2 {
  font-size: var(--h2-size);
  line-height: 1.15;
}

h3 {
  font-size: var(--h3-size);
  line-height: 1.3;
}

h4 {
  font-size: var(--h4-size);
  line-height: 1.5;
}

h5 {
  font-size: var(--h5-size);
  line-height: 1.4;
}

h6 {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem;
}

a {
  color: inherit; /* the gold underline is the link affordance */
  text-decoration: none;
  transition: box-shadow 0.2s ease;
  box-shadow: 0 2px 0 var(--link-color); /* draws like a 2px bottom border without shifting text */
}

/* Plain text links: the underline turns ink on hover; the text keeps its color.
   UI links (buttons, nav, tiles, cards) keep their own colors. */
a:where(:not(.btn, .nav-link, .navbar a, .mobile-menu a, .site-header a, .admin-nav a, .admin-page-header a, .admin-breadcrumb-link, .table a, .form-actions a, .social-link, .icon-24, .category-card, .comic-card-link, .work-tile, .feature-tile, .portfolio-card-link, .card-link, .pagination-nav a, .feature-image a, .apps-image a, .app-card-link, .ds-toc a)):hover {
  box-shadow: 0 2px 0 var(--link-hover-color);
}

/* Remove yellow underline from UI elements (buttons, navigation, admin) */
a.btn,
a.btn:hover,
a.btn:visited,
.nav-link,
.nav-link:hover,
.nav-link:visited,
.navbar a,
.navbar a:hover,
.navbar a:visited,
.mobile-menu a,
.mobile-menu a:hover,
.mobile-menu a:visited,
.admin-nav a,
.admin-nav a:hover,
.admin-nav a:visited,
.admin-page-header a,
.admin-page-header a:hover,
.admin-page-header a:visited,
.admin-breadcrumb-link,
.admin-breadcrumb-link:hover,
.admin-breadcrumb-link:visited,
.table a,
.table a:hover,
.table a:visited,
.form-actions a,
.form-actions a:hover,
.form-actions a:visited,
.social-link,
.social-link:hover,
.social-link:visited,
.icon-24,
.icon-24:hover,
.icon-24:visited,
.category-card,
.category-card:hover,
.category-card:visited,
.comic-card-link,
.work-tile,
.work-tile:hover,
.work-tile:visited,
.feature-tile,
.feature-tile:hover,
.feature-tile:visited,
.comic-card-link:hover,
.comic-card-link:visited,
.portfolio-card-link,
.portfolio-card-link:hover,
.portfolio-card-link:visited {
  box-shadow: none;
}

/* Horizontal Rule */
hr {
  width: 50%;
  height: 1px;
  background-color: var(--border-light);
  border: none;
  margin: 2rem auto;
  border-radius: 0;
}

/* Text Selection */
::selection {
  background-color: var(--signal-yellow);
  color: var(--text-primary);
}

::-moz-selection {
  background-color: var(--signal-yellow);
  color: var(--text-primary);
}

/* Smart Quotes - Convert straight quotes to typographic quotes */
.prose,
.brand-body,
.post-content,
.comic-content {
  font-feature-settings: "liga" 1, "dlig" 1;
}

/* Additional typographic enhancements for curly quotes */
.prose,
.brand-body,
.post-content,
.comic-content,
.page-content {
  /* Ensure proper quote rendering */
  quotes: "\201C" "\201D" "\2018" "\2019";
}

/* Style curly quotes for better visual hierarchy */
/* One big opening mark above the quote, in the quote font */
.prose blockquote::before {
  content: "\201C";
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  color: var(--signal-yellow);
  font-family: var(--font-quote);
}