@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/*
================================================================================
PAPER TRAIL LIMITED - MAIN STYLESHEET
================================================================================
File: css/main.css
Purpose: Shared global styles for all pages on the Paper Trail website.

DESIGN SYSTEM:
- Background:   #ffffff (white)
- Surface:      #fafafa (off-white)
- Text:         #111111 (near-black)
- Text muted:   #666666
- Border:       #e5e5e5
- Accent:       #dc2626 (red)  |  hover: #b91c1c
- Font body:    Inter, system-ui, sans-serif
- Font heading: Newsreader, Georgia, serif

TABLE OF CONTENTS:
1.  CSS Custom Properties (variables)
2.  Base Reset
3.  Container
4.  Buttons
5.  Site Header & Navigation
6.  Footer
7.  Section Utilities
8.  Form Utilities
9.  Utility / Accessibility helpers
================================================================================
*/

/* ============================================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================================ */
:root {
    --color-bg:            #ffffff;
    --color-surface:       #fafafa;
    --color-text:          #111111;
    --color-text-muted:    #666666;
    --color-text-subtle:   #888888;
    --color-border:        #e5e5e5;
    --color-accent:        #dc2626;
    --color-accent-hover:  #b91c1c;

    --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif:  'Newsreader', Georgia, serif;

    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;

    --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:   0 12px 40px rgba(0,0,0,0.12);

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

/* Dark Mode overrides */
[data-theme="dark"] {
    --color-bg:            #0a0a0a;
    --color-surface:       #111111;
    --color-text:          #f5f5f5;
    --color-text-muted:    #a0a0a0;
    --color-text-subtle:   #666666;
    --color-border:        #222222;
    --color-accent:        #ef4444;
    --color-accent-hover:  #dc2626;
}

/* ============================================================================
   2. BASE RESET
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }

/* Headings always use the theme text colour — prevents dark text on dark bg in dark mode */
h1, h2, h3, h4, h5, h6 { color: var(--color-text); }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* ============================================================================
   3. CONTAINER
   ============================================================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ============================================================================
   4. BUTTONS
   ============================================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; font-size: 14px; font-weight: 500; border-radius: 8px; cursor: pointer; border: none; transition: all 0.15s; text-decoration: none; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: #f5f5f5; }
.btn-lg { padding: 14px 28px; font-size: 15px; }

/* ============================================================================
   5. SITE HEADER & NAVIGATION
   ============================================================================ */

.site-header { position: sticky; top: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); z-index: 100; }
.header-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.main-nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.brand-logo { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 32px; }
.nav-link { font-size: 14px; font-weight: 500; color: var(--color-text-muted); transition: color 0.15s; }
.nav-link:hover, .nav-link.active { color: var(--color-text); }

/* Nav actions group (search + theme toggle + mobile hamburger) */
.nav-actions { display: flex; align-items: center; gap: 8px; }

/* Search toggle & theme toggle — shared icon-button style */
.search-toggle,
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}
.search-toggle:hover,
.theme-toggle:hover { background: var(--color-surface); color: var(--color-text); }
.search-toggle svg,
.theme-toggle svg { width: 18px; height: 18px; pointer-events: none; }

/* Show correct icon based on current theme */
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }

/* Search overlay — slides in below header */
.search-overlay {
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 14px 0;
}
.search-overlay[hidden] { display: none; }
.search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.search-input {
    flex: 1;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: var(--font-sans);
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    transition: border-color var(--transition-fast);
}
.search-input:focus { border-color: var(--color-accent); }
.search-submit {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius-md);
    border: none; background: var(--color-accent); color: #fff;
    cursor: pointer; flex-shrink: 0;
    transition: background var(--transition-fast);
}
.search-submit:hover { background: var(--color-accent-hover); }
.search-submit svg { pointer-events: none; }
.search-close {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-full);
    border: 1px solid var(--color-border); background: transparent;
    color: var(--color-text-muted); cursor: pointer; flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.search-close:hover { background: var(--color-surface); color: var(--color-text); }
.search-close svg { pointer-events: none; }

/* Dark mode overrides */
[data-theme="dark"] .site-header { background: rgba(10,10,10,0.95); }
[data-theme="dark"] .search-overlay { background: rgba(10,10,10,0.98); }
[data-theme="dark"] .search-input { background: #111; }
/* Dark mode: fix secondary button hover */
[data-theme="dark"] .btn-secondary:hover { background: #1a1a1a; }
/* Dark mode: fix form inputs */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea { background: #111111; color: var(--color-text); border-color: var(--color-border); }

/* ============================================================================
   6. SECTION UTILITIES
   ============================================================================ */
.section-header { text-align: center; margin-bottom: 48px; }
.section-label { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 12px; }
.section-title { font-family: var(--font-serif); font-size: 36px; margin-bottom: 12px; }
.section-description { font-size: 18px; color: var(--color-text-muted); }

/* ============================================================================
   7. FOOTER
   ============================================================================ */
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: 48px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.footer-logo { width: 28px; height: 28px; }
.footer-description { font-size: 14px; color: var(--color-text-muted); max-width: 280px; margin-top: 12px; }
.footer-links h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 14px; color: var(--color-text-muted); }
.footer-links a:hover { color: var(--color-text); }
.footer-bottom { padding-top: 24px; border-top: 1px solid var(--color-border); text-align: center; }
.footer-bottom p { font-size: 13px; color: var(--color-text-subtle); }

/* ============================================================================
   8. FORM UTILITIES
   ============================================================================ */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.form-group input,
.form-group textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 15px; background: #fff; font-family: inherit; }
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--color-accent); }
.form-group textarea { min-height: 120px; resize: vertical; }

/* ============================================================================
   9. ACCESSIBILITY
   ============================================================================ */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }