/* ============================================================================
   site-extra.css — supplements to the lifted thomaswgreen.com CSS. Uses the
   main site's own vars (--navy/--gold/--cream/--cerulean…). Only adds what the
   main site doesn't already style.
   ========================================================================== */

/* Fixed-nav clearance for pages without a full hero (tag/page/error) */
.page-pad { padding-top: 6rem; }

/* Per-pillar badge colours (main site set these inline per category) */
.blog-card-cat, .article-cat-pill { background: var(--navy); }
.blog-card-cat[data-cat="ai-leadership"], .article-cat-pill[data-cat="ai-leadership"] { background: var(--cerulean); }
.blog-card-cat[data-cat="future-of-work"], .article-cat-pill[data-cat="future-of-work"] { background: var(--purple); }
.blog-card-cat[data-cat="being-human"], .article-cat-pill[data-cat="being-human"] { background: var(--coral); }
.blog-card-cat[data-cat="consciousness-and-ai"], .article-cat-pill[data-cat="consciousness-and-ai"] { background: var(--green); }

/* Key Points authored as .tldr with a bullet list */
.tldr ul { margin: 0.5rem 0 0 1.1rem; color: var(--text-secondary); font-size: 0.98rem; line-height: 1.7; }
.tldr li { margin-bottom: 0.35rem; }

/* FAQ authored as native <details class="faq-item"> (no JS needed) */
details.faq-item { border-bottom: 1px solid rgba(18,28,79,0.08); padding: 1.2rem 0; }
details.faq-item > summary { list-style: none; font-family: 'Poppins',sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::after { content: '+'; font-size: 1.3rem; color: var(--gold); transition: transform 0.2s; }
details.faq-item[open] > summary::after { transform: rotate(45deg); }
details.faq-item .faq-a { padding-top: 0.8rem; font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; font-weight: 300; }

/* TweetableQuote (not in main-site CSS) */
.tweetable { margin: 2.5rem 0; padding: 1.5rem 1.8rem; background: var(--cream); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; }
.tweetable .tweetable__quote { font-size: 1.25rem; line-height: 1.5; color: var(--navy); font-style: italic; border: 0; padding: 0; margin: 0; }
.tweetable .tweetable__share { display: flex; gap: 0.8rem; margin-top: 1rem; }
.tweetable .tweetable__share a { font-size: 0.8rem; font-weight: 600; color: var(--navy); text-decoration: none; border: 1px solid rgba(18,28,79,0.15); border-radius: 4px; padding: 0.4rem 0.9rem; transition: all .2s; }
.tweetable .tweetable__share a:hover { background: var(--navy); color: #fff; }

/* References / citations (not in main-site CSS) */
.references { margin: 2.5rem 0; padding: 1.5rem 1.8rem; background: var(--cream); border-radius: 8px; }
.references-label { font-family: 'Poppins',sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.6rem; }
.references ol { margin: 0 0 0 1.2rem; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
.references li { margin-bottom: 0.4rem; }
.references a { color: var(--cerulean); text-decoration: underline; }

/* Pillar (tag) page components not in main-site CSS */
.intent-router { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin: 2.5rem 0; }
.intent-card { background: #fff; border: 1px solid rgba(18,28,79,0.06); border-radius: 8px; padding: 2rem; text-decoration: none; transition: all .3s; display: block; }
.intent-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(18,28,79,0.08); }
.intent-card__intent { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cerulean); }
.intent-card .card__title { display: block; font-weight: 600; color: var(--navy); margin-top: 0.4rem; font-size: 1.1rem; }
.subtopic-index { margin: 3rem 0; }
.subtopic-index ul { list-style: none; margin: 1rem 0 0; }
.subtopic-index li { border-bottom: 1px solid rgba(18,28,79,0.08); }
.subtopic-index li a { display: block; padding: 0.9rem 0; color: var(--navy); text-decoration: none; font-weight: 500; }
.subtopic-index li a:hover { color: var(--gold); }
@media (max-width: 768px) { .intent-router { grid-template-columns: 1fr; } }

/* Subscribe as a contained navy panel on a cream band, LEFT-aligned (matches the
   reference). Separate from the navy footer below. */
.newsletter-wrap { background: var(--cream); padding: 4.5rem 3rem; }
.newsletter-panel { max-width: 1100px; margin: 0 auto; background: var(--navy); border-radius: 14px; padding: 3rem 3.2rem; text-align: left; position: relative; overflow: hidden; box-shadow: 0 20px 50px rgba(18,28,79,0.12); }
.newsletter-panel::before { content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(241,213,157,0.12) 0%, transparent 70%); }
.newsletter-panel h2 { color: #fff; font-size: 2rem; line-height: 1.15; margin-bottom: 0.5rem; position: relative; }
.newsletter-panel p { color: rgba(255,255,255,0.65); font-size: 1rem; margin-bottom: 1.8rem; position: relative; }
.newsletter-panel .newsletter-form { position: relative; max-width: 640px; margin: 0; }
@media (max-width: 768px) { .newsletter-wrap { padding: 3rem 1.2rem; } .newsletter-panel { padding: 2.5rem 1.4rem; } .newsletter-panel h2 { font-size: 1.6rem; } }

/* Footer-bottom inline policy links (override lifted `footer a{display:block}`) */
.footer-bottom a { display: inline !important; font-size: inherit; line-height: inherit; margin: 0; color: inherit; text-decoration: none; vertical-align: baseline; }
.footer-bottom a:hover { color: var(--gold); }

/* Newsletter modal (native <dialog>) — styled to match the site */
dialog.newsletter-modal { position: relative; border: none; border-radius: 10px; padding: 2.5rem; max-width: 440px; width: calc(100% - 3rem); background: var(--warm-white); color: var(--text-primary); box-shadow: 0 30px 80px rgba(18,28,79,0.35); margin: auto; }
dialog.newsletter-modal::backdrop { background: rgba(18,28,79,0.6); backdrop-filter: blur(3px); }
.newsletter-modal h2 { color: var(--navy); font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.4rem; padding-right: 1.5rem; }
.newsletter-modal > p { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.4rem; }
.newsletter-modal__close { position: absolute; top: 0.9rem; right: 1rem; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--text-light); cursor: pointer; padding: 0.2rem; }
.newsletter-modal__close:hover { color: var(--navy); }
.newsletter-modal .newsletter-form { display: flex; flex-direction: column; gap: 0.6rem; max-width: none; margin: 0; }
.newsletter-modal .newsletter-form input { background: #fff; color: var(--text-primary); border: 1px solid rgba(18,28,79,0.18); padding: 0.8rem 1rem; }
.newsletter-modal .newsletter-form input::placeholder { color: var(--text-light); }
.newsletter-modal .newsletter-form input:focus { border-color: var(--navy); }
.newsletter-modal .newsletter-form button { width: 100%; }

/* Tables — styled for readability AND GEO: AI engines cite pages containing a
   table ~2.3x more than prose-only pages. Make tables first-class in articles. */
.article-content table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: 0.95rem; }
.article-content table th { background: var(--navy); color: #fff; text-align: left; font-weight: 600; padding: 0.7rem 0.95rem; font-size: 0.82rem; letter-spacing: 0.02em; }
.article-content table td { padding: 0.7rem 0.95rem; border-bottom: 1px solid rgba(18,28,79,0.1); color: var(--text-primary); vertical-align: top; line-height: 1.5; }
.article-content table tr:nth-child(even) td { background: rgba(18,28,79,0.035); }
.article-content table caption { caption-side: bottom; font-size: 0.78rem; color: var(--text-light); padding-top: 0.5rem; text-align: left; }
.article-content .kg-table-card, .article-content figure.kg-card table { overflow-x: auto; }
@media (max-width: 600px) { .article-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* Accessibility helpers */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0; top: 0; z-index: 400; background: var(--navy); color: #fff; padding: 0.5rem 1rem; }