/*
Theme Name: CoffeeBreak
Description: The CoffeeBreak journal, with a shared public-site identity and comfortable article reading.
Version: 1.0.3
Author: Transcendent Software
Author URI: https://transcendentsoftware.com
Requires at least: 6.6
Requires PHP: 8.3
Text Domain: coffeebreak
License: GPL-2.0-or-later
*/
:root { color-scheme: dark; --background: #020617; --surface: #0b1220; --text: #f1f5f9; --muted: #9ca8ab; --gold: #f5c451; --accent: #d0d6d8; --accent-light: #e3e7e8; --line: #ffffff1a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: white; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
img, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.035em; font-weight: 650; overflow-wrap: anywhere; }
p { margin: 0 0 1.2em; }
.screen-reader-text, .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link:focus { position: fixed; z-index: 100000; top: 1rem; left: 1rem; width: auto; height: auto; margin: 0; padding: 1rem; clip: auto; background: var(--accent); color: #020617; }
.site-header { border-bottom: 1px solid var(--line); background: #020711; }
.header-inner, .footer-inner { max-width: 1472px; margin: auto; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: 1rem; color: var(--text); font-weight: 650; text-decoration: none; white-space: nowrap; }
.brand-mark { position: relative; width: 1.65rem; height: 1.2rem; border: 2px solid var(--gold); border-radius: .2rem .2rem .4rem .4rem; margin-right: .3rem; }
.brand-mark::after { content: ''; position: absolute; right: -.5rem; top: .2rem; width: .45rem; height: .5rem; border: 2px solid var(--gold); border-left: 0; border-radius: 0 .35rem .35rem 0; }
.brand-mark span, .brand-mark span::after { content: ''; position: absolute; width: 2px; height: .45rem; background: #5eead4; }
.brand-mark span { left: .55rem; top: -.65rem; }
.brand-mark span::after { left: .45rem; top: -.15rem; }
.desktop-nav { display: flex; gap: .5rem; }
.desktop-nav a { color: #cbd5e1; border: 1px solid var(--line); border-radius: 2rem; padding: .4rem .8rem; font-size: .8rem; text-decoration: none; }
.desktop-nav a:hover { border-color: #ffffff66; color: white; }
.account-nav { display: flex; align-items: center; gap: 1rem; font-size: .85rem; }
.account-nav > a { color: white; text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.mobile-menu { display: none; }
.blog-shell { max-width: 1180px; margin: auto; padding: 0 2rem 5rem; }
.blog-intro { padding: 5.5rem 0 2.5rem; }
.eyebrow { color: var(--accent); font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .2em; margin: 0 0 1.25rem; }
.blog-intro h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); margin: 0 0 1.5rem; max-width: 900px; }
.intro-copy { font-size: 1.15rem; color: #cbd5e1; max-width: 640px; }
.blog-tools { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.blog-home { text-decoration: none; color: var(--accent); font-size: .9rem; }
.search-form { display: flex; gap: .5rem; width: min(100%, 360px); }
.search-form input { min-width: 0; width: 100%; color: var(--text); background: var(--surface); border: 1px solid #ffffff33; border-radius: .5rem; padding: .7rem .85rem; font: inherit; font-size: .85rem; }
.search-form button:hover { border-color: var(--accent); background: #d0d6d80c; }
.search-form button { font: inherit; font-size: .85rem; background: transparent; color: var(--text); border: 1px solid #ffffff33; border-radius: .5rem; padding: .7rem .85rem; cursor: pointer; }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.post-card { min-width: 0; border: 1px solid var(--line); border-radius: 1.1rem; overflow: hidden; background: var(--surface); }
.card-image { display: block; }
.card-image img { width: 100%; aspect-ratio: 5/3; object-fit: cover; display: block; }
.card-body { padding: 2rem; }
.post-card h2 { font-size: 1.7rem; margin: .6rem 0 1rem; }
.post-card h2 a { color: var(--text); text-decoration: none; }
.post-card h2 a:hover { color: var(--accent); }
.card-excerpt { color: #cbd5e1; font-size: 1rem; }
.featured { grid-column: 1/-1; border-color: #d0d6d840; background: linear-gradient(125deg, #d0d6d80c, #0b1220 65%); }
.featured:has(.card-image) { display: grid; grid-template-columns: 1fr 1fr; }
.featured .card-image img { height: 100%; }
.featured .card-body { padding: 2.75rem; }
.featured h2 { font-size: clamp(2rem, 3vw, 2.8rem); }
.featured .card-excerpt { max-width: 720px; }
.featured .eyebrow { color: var(--accent); }
.post-meta { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .8rem; color: var(--muted); }
.topics { display: flex; flex-wrap: wrap; gap: .5rem; }
.topics a { font-size: .75rem; color: var(--accent); text-decoration: none; }
.topics .topic-launch-check { color: #ffd230; }
.topics .topic-mission-control { color: #74d4ff; }
.topics .topic-persona { color: #f4a8ff; }
.topics .topic-embodied { color: #46ecd5; }
.read-link { display: inline-flex; gap: .6rem; margin-top: 1.5rem; font-size: .9rem; text-decoration: none; color: var(--accent); }
.pagination { margin-top: 2.5rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.pagination .page-numbers { padding: .5rem .8rem; border: 1px solid var(--line); border-radius: .4rem; text-decoration: none; }
.pagination .current { color: var(--accent); }
.empty-state { padding: 3rem; border: 1px solid var(--line); border-radius: 1rem; }
.empty-state p { color: var(--muted); }
.product-callout { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 4rem; padding: 2.5rem; border-top: 1px solid var(--line); }
.product-callout .eyebrow { margin-bottom: .75rem; }
.product-callout h2 { margin: 0 0 .75rem; font-size: 1.8rem; }
.product-callout p:last-child { color: var(--muted); margin: 0; }
.button { display: inline-flex; align-items: center; gap: 1rem; background: var(--accent-light); color: #020617; font-weight: 700; padding: .85rem 1.2rem; border-radius: .5rem; text-decoration: none; font-size: .9rem; flex-shrink: 0; }
.button:hover { background: #f1f3f3; color: #020617; }
.article-shell { max-width: 840px; margin: auto; padding: 4rem 2rem 5rem; }
.back-link { display: inline-block; margin-bottom: 2.5rem; font-size: .9rem; text-decoration: none; }
.article-header h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin: 1rem 0 1.5rem; }
.article-header .post-meta { margin-bottom: 3rem; }
.article-image { margin: 0 0 2.5rem; }
.article-image img { width: 100%; border-radius: .75rem; }
.entry-content { font-size: 1.1rem; line-height: 1.85; color: #cbd5e1; overflow-wrap: anywhere; }
.entry-content > * { margin-top: 0; margin-bottom: 1.6rem; }
.entry-content h2, .entry-content h3, .entry-content h4 { color: var(--text); margin-top: 2.5rem; }
.entry-content h2 { font-size: 1.9rem; }
.entry-content h3 { font-size: 1.45rem; }
.entry-content blockquote { margin-left: 0; padding: .5rem 0 .5rem 1.5rem; border-left: 3px solid var(--accent); color: var(--text); }
.entry-content pre { background: var(--surface); padding: 1.5rem; border-radius: .5rem; overflow: auto; font-size: .9rem; }
.entry-content code { font-size: .9em; }
.entry-content .wp-block-table { overflow: auto; }
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content td, .entry-content th { padding: .75rem; border: 1px solid #ffffff33; }
.entry-content figcaption { font-size: .85rem; color: var(--muted); }
.entry-content iframe { max-width: 100%; }
.entry-content .wp-block-button__link { background: var(--accent-light); color: #020617; border-radius: .5rem; font-weight: 700; font-size: .95rem; }
.entry-content .wp-block-button__link:hover { background: #f1f3f3; color: #020617; }
.article-tags { margin-top: 2rem; font-size: .85rem; }
.post-navigation { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.post-navigation .nav-links { display: flex; gap: 2rem; justify-content: space-between; }
.post-navigation .nav-links > div { width: 50%; }
.post-navigation a { text-decoration: none; overflow-wrap: anywhere; }
.post-navigation span { display: block; color: var(--muted); font-size: .8rem; margin-bottom: .5rem; }
.site-footer { border-top: 1px solid var(--line); background: #020711; }
.footer-inner { padding-top: 2rem; padding-bottom: 2rem; font-size: .85rem; color: var(--muted); }
.footer-brand { color: var(--text); font-weight: 650; text-decoration: none; }
.footer-inner p { margin: .5rem 0 0; font-size: .75rem; }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-inner nav a { color: var(--muted); text-decoration: none; }
@media (max-width: 1050px) {
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary { cursor: pointer; border: 1px solid #ffffff33; padding: .6rem .8rem; border-radius: .5rem; min-height: 44px; }
  .mobile-menu nav { position: absolute; z-index: 10; left: 0; right: 0; padding: 1rem; background: #020711; border-bottom: 1px solid var(--line); display: grid; gap: .4rem; }
  .mobile-menu nav a { display: block; padding: .75rem; color: white; text-decoration: none; }
}
@media (max-width: 640px) {
  .header-inner, .footer-inner { padding-left: 1rem; padding-right: 1rem; gap: 1rem; }
  .brand { font-size: .85rem; gap: .8rem; }
  .account-nav { gap: .6rem; font-size: .75rem; }
  .blog-shell, .article-shell { padding-left: 1.25rem; padding-right: 1.25rem; }
  .blog-intro { padding-top: 3.5rem; }
  .blog-intro h1 { font-size: 2.55rem; }
  .blog-tools { align-items: flex-start; flex-direction: column; }
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .featured:has(.card-image) { display: block; }
  .card-body, .featured .card-body { padding: 1.5rem; }
  .product-callout { flex-direction: column; align-items: flex-start; padding: 2rem 0 0; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .article-shell { padding-top: 2.5rem; }
  .entry-content { font-size: 1rem; }
  .empty-state { padding: 1.5rem; }
}