/* ==========================================================================
   1. ROOT & VARIABLES
   ========================================================================== */

:root {
  --font-primary: "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  --color-text: #16171a;
  --color-background: #ffffff;
  --color-accent: #f1d1a6;
  --color-border: #ececec;
  --color-code-bg: #ececee;
  --width-container: 60rem;
}

/* ==========================================================================
   2. GLOBAL RESET & BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'SFPro';
  src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
}

img,
video {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: 2rem 0;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.container {
  max-width: var(--width-container);
  width: 90%;
  margin-inline: auto; /* Modern equivalent for margin-left/right: auto; */
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: 1.3;
  margin: 1.5rem 0 0.5rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }

p {
  margin-bottom: 1rem;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2rem;
}

a:hover {
  background-color: var(--color-accent);
}

blockquote {
  font-style: italic;
  border-left: 4px solid var(--color-border);
  padding-left: 1rem;
  margin: 1rem 0;
}

code,
pre {
  background: var(--color-code-bg);
  padding: 0.1em 0.3em;
  border-radius: 4px;
  font-family: monospace;
}

/* For lists inside a post/page content area */
.content ul,
.content ol {
  list-style-position: inside;
  margin-bottom: 1rem;
  padding-left: 1rem;
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* Main Navigation */
.main-nav {
  padding: 2rem 0;
}

.main-nav ul {
  display: flex;
  gap: 2rem; /* This creates the "tab-spaced" layout */
  list-style-type: none;
}

.main-nav a {
  text-decoration: none;
}

/* Reusable list for posts, projects, etc. */
.item-list {
  list-style: none;
}

.item-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.item-list a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}



.item-list time {
  padding-left: 1rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #666; /* Softer color for dates */
}

/* Footer */
footer {
  padding: 2rem 0 1rem;
}

/* iuhhhh */
/*
  Modifier for an item-list to show the date first.
  - Removes the space-between layout.
  - Adds a simple gap between the date and title.
*/
.item-list--date-first li {
  justify-content: flex-start; /* Aligns items to the start */
  gap: 1rem;                   /* Creates space between date and title */
}

/*
  - Resets padding on the time element.
  - Ensures date doesn't shrink on smaller screens.
*/
.item-list--date-first time {
  padding-left: 0;
  flex-shrink: 0;
}

/* ==========================================================================
   6. LINK STYLES
   ========================================================================== */
/* Styles the secondary text (e.g., username, domain) within a link */
.link-meta {
  color: #888; /* A slightly darker grey for better contrast */
  font-weight: normal;
  font-style: normal;
  margin-left: 0.5rem; /* Adds a little space from the main link text */
}

/* Adds some top margin to link list headings for better spacing */
.link-list-heading {
  margin-top: 2rem;
}


/*
  Grid alignment styles specifically for the homepage lists.
  This targets the new .item-list-index class.
*/
.item-list-index a {
  display: grid;
  grid-template-columns: 160px auto; /* Adjust 160px as needed */
  align-items: baseline;
}

/* Scoping this override to the new class as well */
.item-list-index .link-meta {
  margin-left: 0;
}

/* Styles for a line of text with a leading icon */
.icon-text-line {
  display: flex;
  align-items: center;
  gap: 0.6em;       /* Adjusts the space between the icon and the text */
  margin: 1.5rem 0; /* Adds some space above and below the entire line */
}

/* Controls the size of the icon */
.icon-text-line img {
  height: 1.4em; /* Sets the icon height relative to the text size */
  width: auto;
}