/* Foothills Theme CSS
   Palette and fonts are bridged from Tumblr Theme Options via CSS variables set inline in HTML:
   --bg, --text, --accent, --link, --font-poetry, --font-headers, --font-body, --font-ui
*/

/* ===================================================================
   Table of Contents
   1) Reset & Base
   2) Theme Tokens & Palettes
   3) Header
   4) Hero
   5) Featured Tags
   6) Layout
   7) Posts & Typography
   8) Post Types
   9) Sidebar Widgets
   10) Pagination
   11) Search (Panel & Overlay)
   12) Notes & Related Posts
   13) Drawer (Mobile)
   14) Actions (Reblog/Like)
   15) Utilities (Borders/Shadows, Motion)
   16) Responsive
   17) Footer
   =================================================================== */

:root {
  /* Fallbacks if theme variables are missing */
  --bg: #FFFEF7;
  --text: #2F2F2F;
  --accent: #D2691E; /* accent burnt orange */
  --link: #cd851a;  /* earthy link color */
  --shadow: 0 8px 24px rgba(0,0,0,.06);
  --radius: 10px;
}

/* Base */
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  color: var(--text);
  font-family: var(--font-body, ui-serif, Georgia, "Times New Roman", serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-headers, var(--font-body));
  line-height: 1.25;
  margin: 0.5em 0 0.35em;
}

p, ul, ol, blockquote { margin: 0 0 1em; }

a { color: var(--link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--accent); }

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

.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; padding: .5rem .75rem; background: #fff; color: #000; box-shadow: var(--shadow); }

html, body { background: var(--bg); color: var(--text); }
.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }

/* Palettes (one-click via body[data-palette]) */
/* Prairie (light, warm) — defaults already align with this */
body[data-palette="Prairie"] {
  --bg: #FFFEF7;
  --text: #2F2F2F;
  --accent: #D2691E; /* burnt orange */
  --link: #cd851a;   /* goldenrod */
}

/* River (light, cool) */
body[data-palette="River"] {
  --bg: #F8FAFD;
  --text: #232A31;
  --accent: #2A9D8F; /* teal */
  --link: #1D6FE4;   /* blue */
}

/* Night Sky (dark) */
body[data-palette="Night"] {
  --bg: #0b0e11; /* darker overall page background */
  --text: #EDEDED;
  --accent: #E3985B; /* warm amber */
  --link: #8ECAE6;   /* soft blue */
}

/* Burnt Umber (dark, warm) */
body[data-palette="Burnt"] {
  --bg: #120c08; /* darker overall page background */
  --text: #F6F1EB;
  --accent: #D2691E; /* burnt orange */
  --link: #FFB86B;   /* warm link */
}

/* Derived tokens for surfaces, borders, and hover that adapt to palette */
/* Light palettes default */
:root,
body[data-palette="Prairie"],
body[data-palette="River"] {
  --surface: color-mix(in oklab, var(--bg) 98%, #000);
  --surface-soft: color-mix(in oklab, var(--bg) 95%, #000);
  --border: color-mix(in oklab, var(--text) 14%, transparent);
  --hover: color-mix(in oklab, var(--text) 10%, transparent);
}
/* Dark palettes override */
body[data-palette="Night"],
body[data-palette="Burnt"] {
  --surface: color-mix(in oklab, var(--bg) 85%, #fff);
  --surface-soft: color-mix(in oklab, var(--bg) 80%, #fff);
  --border: color-mix(in oklab, #ffffff 16%, transparent);
  /* Stronger hover tint for dark modes so backgrounds are visible */
  --hover: color-mix(in oklab, #ffffff 18%, transparent);
}

/* ==============================  Header  ============================== */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--surface-soft); border-bottom: 1px solid var(--border); }
.site-header .header-content { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: .75rem; padding-top: .5rem; padding-bottom: .5rem; }
.site-title { flex: 0 0 auto; margin: 0; line-height: 1; }
.site-title a { display: block; color: inherit; text-decoration: none; font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.35rem); padding: .1rem 0; line-height: 1; }
.main-nav { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.main-nav a { padding: .3rem .45rem; border-radius: 6px; }
.main-nav a:hover, .main-nav a[aria-current="page"] { background: var(--hover); }
.main-nav a i { margin-right: .35rem; opacity: .85; }
.header-actions { display: inline-flex; gap: .4rem; align-items: center; flex: 0 0 auto; margin-left: .5rem; }
/* Palette/search toggles styled like nav chips */
.main-nav .palette-toggle,
.main-nav .search-toggle { appearance: none; border: 0; background: transparent; color: var(--link); padding: .3rem .45rem; border-radius: 6px; cursor: pointer; font: inherit; }
.main-nav .palette-toggle:hover,
.main-nav .search-toggle:hover { background: var(--hover); color: inherit; }

/* Hero */
.hero-section { background:
  radial-gradient(1200px 400px at 50% -50%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 70%),
  linear-gradient(180deg, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%);
  border-bottom: 1px solid var(--border);
}
.hero-content .hero-inner { color: var(--text); }
/* No special dark override for hero background; rely on base gradient and text color */
.hero-content { padding: 3.25rem 1rem 2.5rem; }
.hero-content .hero-inner { max-width: 820px; margin: 0 auto; }
.hero-greeting { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem); letter-spacing: .2px; }
.cta-container { margin-top: 1.5rem; display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; flex-direction: column; }
.cta-text { text-align: center; }
.cta-button { display: inline-block; background: var(--accent); color: #fff; padding: .55rem .85rem; border-radius: 999px; text-decoration: none; box-shadow: var(--shadow); transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; }
.cta-button:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.cta-button:active { color: #fff; transform: translateY(0); filter: brightness(0.98); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.cta-button:visited { color: #fff; }

/* Featured Tags */
.featured-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 1rem; }
.tag-chip { display: inline-block; padding: .25rem .55rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: inherit; text-decoration: none; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.tag-chip:hover { background: var(--hover); }
.featured-tags-widget .featured-tags { margin-top: .5rem; }
.featured-tags-widget h3 { margin: 0 0 .25rem; }

/* Layout */
.content-wrapper { display: grid; grid-template-columns: 1fr 320px; gap: clamp(1.2rem, 2vw, 2rem); align-items: start; }
.sidebar .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.sidebar .card + .card { margin-top: 1rem; }

/* =======================  Posts & Typography  ======================== */
.post { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: clip; }
.post + .post { margin-top: 1.25rem; }
.post-content { padding: 1.2rem 1.2rem 0; }
.post-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; border-top: 1px solid var(--border); }
.post-title a { text-decoration: none; color: inherit; }
.post-title a:hover { text-decoration: underline; }

/* Typography hierarchy */
.post-title { font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.75rem); line-height: 1.25; }
.post-content, .post-body { font-size: 1rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; font-size: .92rem; opacity: .95; }
.post-tags { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.tag { font-size: .85em; }
.note-count { font-size: .9em; }
.pinned { color: var(--accent); font-weight: 600; font-size: .9em; }

/* Pinned post treatment */
.pinned-post { position: relative; border-color: color-mix(in oklab, var(--accent) 28%, var(--border)); }
.pinned-post::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: color-mix(in oklab, var(--accent) 45%, transparent); }
.pinned-badge { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .5rem; font-size: .85rem; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); color: inherit; box-shadow: 0 1px 0 rgba(0,0,0,.05); }
.pinned-badge i { opacity: .9; }

.post-meta { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.post-tags { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.tag { background: color-mix(in oklab, var(--accent) 18%, var(--surface)); border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--border)); color: inherit; padding: .2rem .5rem; border-radius: 999px; text-decoration: none; font-size: .9em; }
.tag:hover { background: var(--hover); }
.note-count { opacity: .75; }
.pinned { color: var(--accent); font-weight: 600; }

/* Reblog trail */
.reblog-trail { border-left: 3px solid rgba(0,0,0,.08); margin: 1rem 0; padding: .5rem 0 .5rem 1rem; display: grid; gap: .75rem; }
.reblog-username { font-weight: 600; }
.reblog-username.deactivated { opacity: .6; }
.reblog-content { background: rgba(0,0,0,.03); padding: .75rem; border-radius: 8px; }

/* Post-type specifics */
.quote-post .quote { font-size: 1.25rem; font-style: italic; }
.social-links a i { margin-right: .35rem; opacity: .85; }
.chat-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.chat-lines .label { font-weight: 700; }
.audio-player { max-width: 100%; }

/* ===========================  Sidebar  ============================== */
.about-photo { text-align: center; }
.about-photo img { border-radius: 16px; box-shadow: var(--shadow); display: inline-block; }
.blogroll { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.blogroll li { display: grid; gap: .15rem; }
.sidebar .card h3 { font-size: 1.125rem; margin-bottom: .45rem; text-align: center; }
.sidebar .card { font-size: .96rem; }
.blogroll-description { opacity: .8; font-size: .9em; }
.about-widget .about-text { margin-bottom: .5rem; }
.about-widget .currently-reading { font-size: .9em; font-style: italic; opacity: .9; margin-top: .25rem; }
.about-widget .currently-reading::before { content: "📖 "; }
.about-widget .currently-reading strong { font-weight: 600; font-style: italic; }
.write-club-link { text-decoration: none; color: var(--accent); font-weight: 600; }
.write-club-link:hover { text-decoration: underline; }
/* Substack embed: force responsive layout inside card */
.substack-widget { overflow: hidden; }
.substack-widget img, .substack-widget iframe, .substack-widget .embed-page, .substack-widget .embed-page-inner, .substack-widget form, .substack-widget .container { max-width: 100% !important; width: 100% !important; }
.substack-widget .publication-logo { width: 64px; height: auto; }
.substack-widget .sideBySideWrap-vGXrwP { display: flex; flex-wrap: wrap; gap: .5rem; }
.substack-widget .emailInputWrapper-QlA86j, .substack-widget .rightButton { flex: 1 1 auto; }
.substack-widget .rightButton { min-width: 140px; }
/* Center CTA in Support widget */
.donate-widget { text-align: center; }
.donate-widget .cta-button { margin-top: .5rem; }
/* Social links grid — two per line and centered */
.social-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .6rem; justify-items: center; align-items: center; }
.social-links a { text-decoration: none; color: var(--link); padding: .25rem .4rem; border-radius: 6px; }
.social-links a:hover { color: var(--accent); background: var(--hover); }

/* ===========================  Pagination  ============================ */
.pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 2rem 0; }
.pagination a, .pagination span { padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: inherit; text-decoration: none; }
.pagination .current-page { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ============================  Search  =============================== */
.search-panel { border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.search-panel .container { display: grid; gap: .75rem; padding-top: .75rem; padding-bottom: .75rem; }
.search-form { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.search-input { border: 1px solid var(--border); background: var(--surface); color: inherit; border-radius: 8px; padding: .5rem .65rem; }
.search-button { border: 1px solid var(--border); background: var(--surface); color: inherit; border-radius: 8px; padding: .5rem .75rem; }
.search-button:hover { background: var(--hover); }
.search-meta, .no-results { opacity: .9; }

/* ==========================  Post Notes  ============================= */
.post-notes { margin: 1rem 0; }
.post-notes ol.notes { list-style: none; padding: 0 .75rem; margin: 0; border-top: 1px solid var(--border); }
.post-notes .note { border-bottom: 1px solid var(--border); padding: .75rem .75rem; }

/* =========================  Related Posts  =========================== */
.related-posts { margin: 1.5rem 0; text-align: center; }
.related-title { margin: 0 0 .5rem; font-size: 1.1rem; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; justify-items: center; gap: .75rem; }
.related-card { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: .75rem 1rem; max-width: 420px; text-align: left; }
.related-card a { text-decoration: none; color: inherit; display: block; }
.related-card a:hover { text-decoration: underline; }
.related-snippet { display: block; margin-top: .25rem; opacity: .8; font-size: .9em; }

/* ========================  Search Overlay  =========================== */
.search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 10000; display: grid; place-items: center; opacity: 1; transition: opacity .2s ease; }
.search-overlay[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.search-overlay-inner { width: min(92vw, 720px); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; position: relative; box-shadow: var(--shadow); }
.search-overlay .search-form { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.search-close { position: absolute; top: .5rem; right: .5rem; border: 0; background: transparent; font-size: 1.25rem; line-height: 1; padding: .25rem; border-radius: 6px; color: var(--text); }
.search-close:hover { background: var(--hover); }

/* Poetry formatting */
.poetry-formatting { line-height: 2; text-align: left; font-family: var(--font-poetry, var(--font-body)); max-width: 42ch; margin: 0 auto; }
.poetry-formatting p { margin-bottom: 1.5em; }
.poetry-formatting br { line-height: 2.5; }

/* ============================  Actions  ============================== */
.post-actions { display: inline-flex; gap: .5rem; align-items: center; }
.btn-action { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--border); }
.btn-action:hover { background: var(--hover); }
.reblog-fallback { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); }
.like-wrapper { position: relative; width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.like-wrapper i { position: absolute; pointer-events: none; }
.like-wrapper iframe { opacity: 0; width: 100% !important; height: 100% !important; }

/* ===================  Utilities: Borders & Shadows  ================== */
.post, .sidebar .card { 
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 6px 18px rgba(0,0,0,.05);
  border-radius: 14px;
}

/* ======================  Motion Preferences  ========================= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================  Responsive  =========================== */
@media (max-width: 1023px) {
  .content-wrapper { grid-template-columns: 1fr 300px; }
}

@media (max-width: 767px) {
  .site-header .header-content { padding-top: .4rem; padding-bottom: .4rem; }
  .site-title { margin: 0; }
  .site-title a { font-size: 1.05rem; padding: .1rem 0; }
  .content-wrapper { grid-template-columns: 1fr; }
  .sidebar { order: 0; width: 100%; }
  .hero-content { padding: 1.75rem 1rem; }
  .site-header { position: static; }
  .site-header .header-content { flex-direction: column; align-items: center; gap: .65rem; text-align: center; }
  .site-header .site-title { width: 100%; }
  .main-nav { justify-content: center; gap: .45rem; }
  .main-nav a { padding: .25rem .4rem; font-size: .9rem; }
  .main-nav a i { margin-right: .3rem; font-size: 1rem; }
  .post-title { font-size: clamp(1.15rem, 1rem + 2.2vw, 1.5rem); }
  .post-meta { font-size: .9rem; }
}

/* ==============================  Footer  ============================= */
.site-footer { margin-top: 3rem; background: var(--surface-soft); color: var(--text); border-top: 1px solid var(--border); font-size: .95rem; }
.site-footer a { color: var(--link); }
.site-footer a:hover { color: var(--accent); }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 1.25rem; padding: 2rem 1rem; align-items: start; }
.footer-nav { display: grid; gap: .35rem; }
.footer-nav a i { margin-right: .35rem; opacity: .85; }
.footer-seo { opacity: .9; font-size: .92rem; }
.footer-copy { font-size: .9rem; opacity: .95; }
.footer-copy p, .footer-seo p { text-align: justify; }
@media (max-width: 767px) {
  .footer-inner { grid-template-columns: 1fr; }
  /* Add more horizontal padding on small screens */
  .footer-inner { padding: 2rem 1.35rem; row-gap: 1rem; }
  .footer-nav, .footer-copy, .footer-seo { padding-left: .1rem; padding-right: .1rem; }
  /* Two-per-row footer nav, centered */
  .footer-nav { grid-template-columns: repeat(2, auto); justify-content: center; justify-items: center; column-gap: 1.25rem; row-gap: .5rem; }
}