/* ================================================================
   Christopher Sanders — Personal Website
   styles.css — Version 1.0

   Single stylesheet shared by all pages.
   No preprocessors, frameworks, or external dependencies.
   Open this file alongside any HTML page to understand the design.

   ----------------------------------------------------------------
   TABLE OF CONTENTS

    1.  Design Tokens (CSS Custom Properties)
    2.  CSS Reset
    3.  Base Element Styles
    4.  Accessibility Utilities
    5.  Layout
    6.  Site Header
    7.  Primary Navigation
    8.  Hero Section          (homepage)
    9.  Cards Section         (homepage)
   10.  Placeholder Pages     (all non-home pages)
   11.  Site Footer
   12.  Responsive Styles     (≤ 768px, ≤ 640px)

   ----------------------------------------------------------------
   DESIGN PHILOSOPHY

   This stylesheet implements a restrained, typography-led design.
   Hierarchy is communicated through size, weight, and spacing —
   not colour, decoration, or animation.

   The layout uses a single centred container (960px max-width)
   that provides comfortable reading line lengths across all
   content types.

   ----------------------------------------------------------------
   BROWSER SUPPORT

   Modern evergreen browsers (Chrome, Firefox, Safari, Edge).
   Uses: CSS Custom Properties, CSS Grid, Flexbox, logical
   properties (margin-inline, padding-block, etc.).

   ================================================================ */


/* ================================================================
   1. DESIGN TOKENS — CSS Custom Properties
   ----------------------------------------------------------------
   All design decisions live here. Changing a token cascades
   through the entire stylesheet automatically.

   Color palette:
     Two neutrals (background + surface), three text grays,
     one accent (deep navy), and minimal border values.
     No gradients, no shadows except a single subtle hover state.

   Spacing scale:
     Based on a 4 px grid. The number in the variable name is the
     multiple (e.g. --space-6 = 6 × 4 px = 24 px = 1.5 rem).
     This makes spacing relationships explicit and consistent.
   ================================================================ */

:root {

  /* ── Colors ─────────────────────────────────────────────────── */

  --color-bg:          #ffffff;   /* Page background               */
  --color-surface:     #f7f6f5;   /* Cards section, subtle panels  */
  --color-border:      #e5e4e2;   /* Standard dividers and borders */
  --color-border-mid:  #c9c8c6;   /* Stronger borders when needed  */

  --color-text:        #1a1a1a;   /* Primary body text             */
  --color-text-muted:  #5c5b59;   /* Secondary text, descriptions  */
  --color-text-faint:  #8c8b89;   /* Captions, labels, meta        */

  --color-accent:      #1a3a5c;   /* Deep navy — links and accents */
  --color-accent-dark: #112840;   /* Accent hover state            */

  /* ── Typefaces ─────────────────────────────────────────────── */

  /*
   * System UI stack: renders using the native OS font.
   * San Francisco on macOS/iOS, Segoe UI on Windows,
   * Roboto on Android/Chrome OS. Fast, beautiful, no download.
   */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /*
   * Georgia: used selectively for prose passages.
   * Adds warmth and readability to longer text.
   * Available on every major platform without download.
   */
  --font-serif: Georgia, 'Times New Roman', Times, serif;

  /* ── Spacing Scale (4 px grid) ─────────────────────────────── */
  --space-1:   0.25rem;   /*  4 px */
  --space-2:   0.5rem;    /*  8 px */
  --space-3:   0.75rem;   /* 12 px */
  --space-4:   1rem;      /* 16 px */
  --space-5:   1.25rem;   /* 20 px */
  --space-6:   1.5rem;    /* 24 px */
  --space-8:   2rem;      /* 32 px */
  --space-10:  2.5rem;    /* 40 px */
  --space-12:  3rem;      /* 48 px */
  --space-16:  4rem;      /* 64 px */
  --space-20:  5rem;      /* 80 px */
  --space-24:  6rem;      /* 96 px */

  /* ── Layout ─────────────────────────────────────────────────── */
  --max-width:   960px;    /* Maximum content width                */
  --pad-inline:  1.5rem;   /* Horizontal padding inside .container */

  /* ── Border Radius ──────────────────────────────────────────── */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;

  /* ── Transitions ─────────────────────────────────────────────── */
  /*
   * Used only for hover states on interactive elements.
   * Keep very short to feel responsive, not decorative.
   */
  --ease: 0.15s ease;
}


/* ================================================================
   2. CSS RESET
   ----------------------------------------------------------------
   A minimal modern reset. Removes problematic browser defaults
   without overcorrecting (no normalize.css needed).
   ================================================================ */

/* Universal box-sizing — makes width calculations predictable */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove all default margin and padding */
* {
  margin:  0;
  padding: 0;
}

/* Respect the user's font-size preference */
html {
  font-size:              100%;
  -webkit-text-size-adjust: 100%;   /* Prevent iOS font inflation */
  scroll-behavior:        smooth;
}

/* Make images and media responsive and block-level by default */
img,
picture,
video,
canvas,
svg {
  display:   block;
  max-width: 100%;
}

/* Inherit font in form elements — important when forms are added */
input,
button,
textarea,
select {
  font: inherit;
}

/* Prevent long words from breaking the layout */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}


/* ================================================================
   3. BASE ELEMENT STYLES
   ----------------------------------------------------------------
   Sensible defaults for common HTML elements.
   All component-specific styles are defined further below.
   ================================================================ */

body {
  font-family:      var(--font-sans);
  font-size:        1rem;           /* 16 px — respects user setting */
  line-height:      1.6;
  color:            var(--color-text);
  background-color: var(--color-bg);

  /*
   * Sticky footer pattern:
   * body is a flex column; <main> grows to fill remaining height.
   * This keeps the footer at the bottom even on short pages.
   */
  display:          flex;
  flex-direction:   column;
  min-height:       100vh;

  /* Improve font rendering across platforms */
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
}

/* Main content area grows to fill space between header and footer */
main {
  flex: 1;
}

/* Heading base styles — sizes are set within each component */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 600;
  color:       var(--color-text);
}

/* Link reset — specific link styles are defined per component */
a {
  color:                 inherit;
  text-decoration:       none;
  text-underline-offset: 2px;   /* Improves legibility of underlined links */
}

/*
 * Remove bullets from lists used for navigation or non-enumerable
 * content (the role="list" attribute makes this pattern clear to
 * screen readers despite removing the visual list indicator).
 */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Horizontal rule — used sparingly as a content divider */
hr {
  border:       none;
  border-top:   1px solid var(--color-border);
  margin-block: var(--space-8);
}

/* Bold text */
strong {
  font-weight: 600;
}


/* ================================================================
   4. ACCESSIBILITY UTILITIES
   ----------------------------------------------------------------
   Features that improve usability for keyboard and screen reader
   users. These should never be removed or significantly changed.
   ================================================================ */

/*
 * Skip Navigation Link
 * ────────────────────
 * Visually hidden until it receives keyboard focus.
 * Allows keyboard users to jump directly to main content,
 * bypassing the navigation on every page.
 *
 * If this ever needs to be visually restyled, ensure it remains:
 *   - Invisible to sighted mouse users
 *   - Visible and clearly readable on keyboard focus
 *   - Reachable as the very first focusable element
 */
.skip-nav {
  position:      absolute;
  top:           -100%;           /* Off-screen until focused */
  left:          var(--space-4);
  z-index:       9999;

  padding:       var(--space-2) var(--space-5);
  background:    var(--color-accent);
  color:         #ffffff;
  font-size:     0.875rem;
  font-weight:   600;
  border-radius: 0 0 var(--radius) var(--radius);
  white-space:   nowrap;

  transition:    top var(--ease);
}

.skip-nav:focus {
  top: 0;
}

/*
 * Focus Rings
 * ───────────
 * :focus-visible shows the ring only for keyboard navigation,
 * not on mouse clicks, in supporting browsers. This is the
 * preferred modern approach — better than :focus alone.
 *
 * The outline uses the accent color for clear, branded visibility.
 */
:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

/* Suppress focus ring for mouse/pointer users where supported */
:focus:not(:focus-visible) {
  outline: none;
}


/* ================================================================
   5. LAYOUT
   ----------------------------------------------------------------
   The .container class is the primary layout primitive.
   All page sections wrap their content in a .container to ensure:
     - A consistent maximum width of 960 px
     - Horizontal padding on narrow viewports
     - Automatic centring via margin-inline: auto
   ================================================================ */

.container {
  width:          100%;
  max-width:      var(--max-width);
  margin-inline:  auto;
  padding-inline: var(--pad-inline);
}


/* ================================================================
   6. SITE HEADER
   ----------------------------------------------------------------
   The site-wide header appears on every page.
   It contains the brand name (left) and primary navigation (right).

   Design decisions:
   - Static (not sticky): avoids consuming vertical space and
     reduces visual complexity on a content-focused site.
   - White background with a subtle bottom border: consistent
     with the overall minimal aesthetic.
   - min-height ensures the header never collapses even if
     content is temporarily missing.
   ================================================================ */

.site-header {
  background-color: var(--color-bg);
  border-bottom:    1px solid var(--color-border);
}

.site-header__inner {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              var(--space-6);
  padding-block:    var(--space-5);
  min-height:       4rem;
}

/* Site name — links home, inherits restrained typographic style */
.site-header__name {
  font-size:      1rem;
  font-weight:    600;
  color:          var(--color-text);
  white-space:    nowrap;          /* Prevent wrapping on narrow viewports */
  letter-spacing: -0.01em;
  transition:     color var(--ease);
}

.site-header__name:hover {
  color: var(--color-accent);
}


/* ================================================================
   7. PRIMARY NAVIGATION
   ----------------------------------------------------------------
   Horizontal list of page links.
   On narrow viewports, the list wraps onto multiple lines
   (see responsive section below).

   Active page state:
   - The class .site-nav__link--active is applied in HTML
   - The aria-current="page" attribute is also applied in HTML
   - Both together ensure visual and semantic correctness

   Hover effect:
   - A thin underline expands from the centre to full width.
   - This is a CSS transition (not a keyframe animation) and
     is too brief and purposeful to feel decorative.
   ================================================================ */

.site-nav__list {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-1) var(--space-6);
}

.site-nav__link {
  position:       relative;
  font-size:      0.875rem;      /* 14 px */
  font-weight:    400;
  color:          var(--color-text-muted);
  letter-spacing: 0.01em;
  padding-block:  var(--space-1);
  transition:     color var(--ease);
}

/*
 * The underline is a pseudo-element positioned below the link.
 * It starts at zero width (centred) and expands to full width
 * on hover — a directional reveal that draws attention to the
 * link without being garish.
 */
.site-nav__link::after {
  content:          '';
  position:         absolute;
  bottom:           -2px;
  left:             50%;
  right:            50%;
  height:           1px;
  background-color: var(--color-accent);
  transition:       left var(--ease), right var(--ease);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-text);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
  left:  0;
  right: 0;
}

/* Active / current page — slightly bolder, underline always shown */
.site-nav__link--active {
  color:       var(--color-text);
  font-weight: 500;
}

.site-nav__link--active::after {
  left:             0;
  right:            0;
  background-color: var(--color-accent);
}


/* ================================================================
   8. HERO SECTION  (homepage only)
   ----------------------------------------------------------------
   The primary introduction block on the homepage.
   No images, no background graphics — typography carries
   all the visual weight.

   Structure:
     Name (H1)  →  Role  →  Focus areas  →  Bio paragraph

   The bio paragraph switches to the serif font (Georgia) to
   add warmth and mark it as human prose rather than metadata.
   The max-width: 62ch constrains it to approximately 62
   characters per line, which is the optimum reading measure.
   ================================================================ */

.hero {
  padding-top:    var(--space-20);   /* 80 px */
  padding-bottom: var(--space-16);   /* 64 px */
}

/* Constrains hero text to a comfortable reading width */
.hero__content {
  max-width: 680px;
}

/* ── Name ───────────────────────────────────────────────────── */
/*
 * Large, light weight: authoritative without being aggressive.
 * font-weight: 300 relies on the thin variant of the system font
 * being available. Falls back gracefully to 400 if not.
 */
.hero__name {
  font-size:      2.5rem;       /* 40 px */
  font-weight:    300;
  letter-spacing: -0.02em;
  color:          var(--color-text);
  line-height:    1.1;
  margin-bottom:  var(--space-4);
}

/* ── Role / Title ───────────────────────────────────────────── */
.hero__subtitle {
  font-size:     1.125rem;      /* 18 px */
  font-weight:   400;
  color:         var(--color-text-muted);
  margin-bottom: var(--space-5);
}

/* The parenthetical "(Academic Affairs)" slightly lighter */
.hero__subtitle-qualifier {
  color: var(--color-text-faint);
}

/* ── Focus Areas ────────────────────────────────────────────── */
/*
 * Presented as uppercase, tracked, very small text —
 * a common convention for categorical metadata.
 * The separator characters are hidden from screen readers
 * via aria-hidden="true" in the HTML.
 */
.hero__focus {
  font-size:      0.8125rem;    /* 13 px */
  font-weight:    500;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  color:          var(--color-text-faint);
  line-height:    2;
  margin-bottom:  var(--space-10);
}

/* ── Introductory Bio Paragraph ─────────────────────────────── */
/*
 * A thin rule above the bio visually separates identity
 * metadata (name, title, focus) from prose.
 */
.hero__intro {
  border-top:  1px solid var(--color-border);
  padding-top: var(--space-8);
}

.hero__intro p {
  font-family: var(--font-serif);    /* Georgia for warmth */
  font-size:   1.0625rem;            /* 17 px */
  line-height: 1.78;
  color:       var(--color-text-muted);
  max-width:   62ch;                 /* Optimal reading line length */
}


/* ================================================================
   9. CARDS SECTION  (homepage only)
   ----------------------------------------------------------------
   Four cards linking to the main areas of the site.
   Displayed on a slightly warm gray surface that is distinct
   from the white page background.

   Each card:
   - Has a 3 px accent-colored top border for visual anchoring
   - Uses flex column layout to push the "Learn more" link to
     the bottom of each card regardless of content height
   - Gains a subtle box-shadow on hover — the only shadow used
     on the site, kept intentionally small
   ================================================================ */

.cards-section {
  background-color: var(--color-surface);
  border-top:       1px solid var(--color-border);
  padding-block:    var(--space-16) var(--space-20);
}

/*
 * 2-column grid on desktop.
 * Collapses to 1 column below 640 px (see responsive section).
 */
.cards-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-6);
}

/* ── Individual Card ─────────────────────────────────────────── */
.card {
  background-color: var(--color-bg);

  /*
   * The shorthand `border` sets all four sides to 1 px.
   * The subsequent `border-top` overrides just the top edge
   * with the 3 px accent color. This is intentional cascade.
   */
  border:           1px solid var(--color-border);
  border-top:       3px solid var(--color-accent);

  border-radius:    var(--radius-lg);
  padding:          var(--space-8) var(--space-8) var(--space-6);

  display:          flex;
  flex-direction:   column;
  gap:              var(--space-3);

  transition:       box-shadow var(--ease);
}

.card:hover {
  /* Very subtle elevation — not decorative, just confirms interactivity */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

/* ── Card Title (H2) ─────────────────────────────────────────── */
.card__title {
  font-size:      1.0625rem;    /* 17 px */
  font-weight:    600;
  color:          var(--color-text);
  letter-spacing: -0.01em;
  line-height:    1.25;
}

/* ── Card Description ────────────────────────────────────────── */
/*
 * flex: 1 makes this element grow to fill available space,
 * which pushes .card__link to the bottom of every card —
 * keeping "Learn more" links vertically aligned across a row.
 */
.card__description {
  font-size:   0.9375rem;       /* 15 px */
  line-height: 1.65;
  color:       var(--color-text-muted);
  flex:        1;
}

/* ── Card Link ───────────────────────────────────────────────── */
.card__link {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-2);
  margin-top:  var(--space-2);

  font-size:   0.875rem;        /* 14 px */
  font-weight: 500;
  color:       var(--color-accent);

  transition:  color var(--ease), gap var(--ease);
}

.card__link:hover {
  color: var(--color-accent-dark);
  gap:   var(--space-3);   /* Gap widens, pushing the arrow right */
}

/* Arrow shifts slightly right on hover for a directional cue */
.card__link-arrow {
  display:    inline-block;
  transition: transform var(--ease);
}

.card__link:hover .card__link-arrow {
  transform: translateX(2px);
}


/* ================================================================
   10. PLACEHOLDER PAGES
   ----------------------------------------------------------------
   Applies to: about.html, cv.html, writing.html,
               projects.html, contact.html

   Placeholder pages are intentional — they make navigation
   functional without implying the site is broken or unfinished.
   The design is clean, honest, and consistent with the rest of
   the site.

   To replace a placeholder with real content:
   1. Remove the <section class="placeholder-section"> block
   2. Add the actual page content in its place
   3. These CSS rules can be left in place — they won't affect
      anything unless the classes are used.
   ================================================================ */

.placeholder-section {
  padding-block: var(--space-20) var(--space-24);
}

.placeholder-content {
  max-width: 560px;
}

/* Heading with a small accent rule below it */
.placeholder-content h1 {
  font-size:      2.25rem;    /* 36 px */
  font-weight:    300;
  letter-spacing: -0.02em;
  color:          var(--color-text);
  margin-bottom:  var(--space-6);
}

/*
 * A 2 px accent-coloured line below the heading.
 * Provides visual closure after the heading and signals
 * the accent colour in the absence of other interactive elements.
 */
.placeholder-content h1::after {
  content:     '';
  display:     block;
  width:       2rem;           /* 32 px — deliberately short */
  height:      2px;
  background:  var(--color-accent);
  margin-top:  var(--space-4);
}

/* Body text in serif for readability and warmth */
.placeholder-content p {
  font-family: var(--font-serif);
  font-size:   1.0625rem;
  line-height: 1.75;
  color:       var(--color-text-muted);
}


/* ================================================================
   11. SITE FOOTER
   ----------------------------------------------------------------
   Minimal footer: social/contact links on the left, copyright
   on the right. Both items wrap to a column on narrow screens.

   The footer uses the same white background as the page —
   there is no dark footer. Keeping the colour consistent
   maintains the clean, light aesthetic throughout.
   ================================================================ */

.site-footer {
  background-color: var(--color-bg);
  border-top:       1px solid var(--color-border);
  padding-block:    var(--space-10);
}

.site-footer__inner {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  flex-wrap:        wrap;
  gap:              var(--space-6);
}

/* Horizontal list of links */
.site-footer__list {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--space-6);
}

.site-footer__link {
  font-size:   0.875rem;
  font-weight: 400;
  color:       var(--color-text-faint);
  transition:  color var(--ease);
}

.site-footer__link:hover {
  color: var(--color-accent);
}

/* Copyright notice */
.site-footer__copyright {
  font-size: 0.8125rem;   /* 13 px */
  color:     var(--color-text-faint);
}


/* ================================================================
   12. RESPONSIVE STYLES
   ----------------------------------------------------------------
   Mobile adjustments. Desktop styles are the default above;
   these queries progressively adjust for narrower viewports.

   Breakpoints used:
     ≤ 640 px — phones in portrait (and most landscape phones)
     ≤ 768 px — narrow tablets, large landscape phones

   Approach: adjust spacing, font sizes, and layout direction
   where needed. Avoid rewriting components from scratch.
   ================================================================ */

/* ── ≤ 768 px — Tablets and large phones ───────────────────── */
@media (max-width: 768px) {

  /* Slightly reduce hero name on tablets */
  .hero__name {
    font-size: 2.25rem;   /* 36 px */
  }

  /* Tighten card gaps slightly */
  .cards-grid {
    gap: var(--space-5);
  }
}

/* ── ≤ 640 px — Phones ───────────────────────────────────────── */
@media (max-width: 640px) {

  /* Tighten horizontal container padding on small screens */
  :root {
    --pad-inline: 1.25rem;
  }

  /*
   * Header: stack brand name above navigation on narrow screens.
   * This prevents the nav from being squeezed or overflowing.
   */
  .site-header__inner {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-3);
    padding-block:  var(--space-4);
  }

  /* Reduce nav link size and tighten gaps */
  .site-nav__list {
    gap: var(--space-1) var(--space-4);
  }

  .site-nav__link {
    font-size: 0.8125rem;   /* 13 px */
  }

  /* Tighten hero vertical rhythm */
  .hero {
    padding-top:    var(--space-12);   /* 48 px */
    padding-bottom: var(--space-10);   /* 40 px */
  }

  .hero__name {
    font-size: 2rem;         /* 32 px */
  }

  .hero__subtitle {
    font-size: 1rem;         /* 16 px */
  }

  .hero__focus {
    font-size:      0.75rem;
    letter-spacing: 0.04em;
  }

  .hero__intro p {
    font-size: 1rem;
  }

  /*
   * Cards: single column on phones.
   * Two columns at ~320 px content width would be too narrow
   * for comfortable reading.
   */
  .cards-grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-4);
  }

  .cards-section {
    padding-block: var(--space-10) var(--space-12);
  }

  /*
   * Footer: stack links above copyright on small screens.
   * Prevents the two-column layout from becoming too cramped.
   */
  .site-footer__inner {
    flex-direction: column;
    align-items:    flex-start;
  }

  /* Reduce placeholder heading on small screens */
  .placeholder-content h1 {
    font-size: 1.75rem;   /* 28 px */
  }
}