/* ==========================================================================
   PAGES.CSS — Site Template
   Styles specific to all inner pages (about, contact, privacy, terms, etc.).
   ========================================================================== */

/* --- Breadcrumb --- */
.breadcrumb {
   padding: var(--space-sm) 0 0;
   font-size: 0.75rem;
   color: var(--color-muted);
   letter-spacing: 0.03em;
}

.breadcrumb ol {
   display: flex;
   list-style: none;
   gap: 0;
   padding: 0;
   margin: 0;
}

.breadcrumb li {
   margin: 0;
   border: none;
   padding: 0;
}

.breadcrumb li + li::before {
   content: "/";
   margin-inline: 0.5em;
   color: var(--color-border);
}

.breadcrumb a {
   color: var(--color-muted);
   text-decoration: none;
}

.breadcrumb a:hover {
   color: var(--color-accent);
}

.breadcrumb [aria-current="page"] {
   color: var(--color-text);
}

/* --- Page Intro (replaces hero on inner pages) --- */
.page-intro {
   padding-block: var(--space-xl);
   border-top: none;
}

.page-intro h1 {
   margin-bottom: var(--space-md);
}

/* --- Sidebar (shared pattern for inner pages) --- */
.forum-sidebar,
.about-sidebar,
.privacy-sidebar,
.terms-sidebar,
.contact-sidebar {
   background: var(--color-surface);
   padding: var(--space-lg);
   align-self: start;
}

.forum-sidebar strong,
.about-sidebar strong,
.privacy-sidebar strong,
.terms-sidebar strong,
.contact-sidebar strong {
   display: block;
   font-family: var(--font-heading);
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   margin-bottom: var(--space-sm);
}

.forum-sidebar ul,
.about-sidebar ul,
.privacy-sidebar ul,
.terms-sidebar ul,
.contact-sidebar ul {
   list-style: none;
   padding-left: 0;
}

.forum-sidebar li,
.about-sidebar li,
.privacy-sidebar li,
.terms-sidebar li,
.contact-sidebar li {
   padding-block: var(--space-xs);
   font-size: 0.9rem;
   border-bottom: 1px solid var(--color-border);
}

.forum-sidebar li:last-child,
.about-sidebar li:last-child,
.privacy-sidebar li:last-child,
.terms-sidebar li:last-child,
.contact-sidebar li:last-child {
   border-bottom: none;
}

@media (max-width: 767px) {

   .forum-sidebar,
   .about-sidebar,
   .privacy-sidebar,
   .terms-sidebar,
   .contact-sidebar {
      border-top: 1px solid var(--color-border);
   }
}

/* --- Layout: 55/45 split (used on contact page) --- */
.layout-split-55-45 {
   display: grid;
   grid-template-columns: 55fr 45fr;
   gap: var(--space-xl);
   align-items: start;
}

@media (max-width: 767px) {
   .layout-split-55-45 {
      grid-template-columns: 1fr;
   }
}

/* --- Contact Details (definition list) --- */
.contact-details {
   margin-top: var(--space-md);
}

.contact-details dt {
   font-family: var(--font-heading);
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--color-muted);
   margin-top: var(--space-md);
}

.contact-details dt:first-child {
   margin-top: 0;
}

.contact-details dd {
   font-size: 1rem;
   font-weight: 600;
   color: var(--color-heading);
}

.contact-details a {
   color: var(--color-accent);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.contact-details a:hover {
   color: var(--color-accent-hover);
}

/* --- Contact Map --- */
.contact-map {
   background: var(--color-surface);
   padding: var(--space-sm);
   border: 1px solid var(--color-border);
   border-radius: 4px;
   align-self: start;
}

.contact-map img {
   display: block;
   width: 100%;
   height: auto;
}

/* --- Security/PGP Note (contact sidebar) --- */
.pgp-note {
   margin-top: var(--space-sm);
   font-size: 0.85rem;
   color: var(--color-muted);
}

/* --- Video Preview (thumbnail with play overlay) --- */
.video-preview a {
   position: relative;
   display: block;
   text-decoration: none;
}

.video-preview .play-btn {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 64px;
   height: 64px;
   background: rgba(0, 0, 0, 0.7);
   border-radius: 50%;
   color: #fff;
   font-size: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-left: 4px;
   transition: background 0.2s ease, transform 0.2s ease;
}

.video-preview a:hover .play-btn {
   background: var(--color-accent);
   transform: translate(-50%, -50%) scale(1.1);
}

/* --- Article Byline --- */
.article-byline {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 0.5em;
   font-size: 0.8rem;
   color: var(--color-muted);
   margin-top: var(--space-sm);
   padding-top: var(--space-sm);
   border-top: 1px solid var(--color-border);
}

.byline__author strong {
   color: var(--color-text);
}

.byline__sep {
   color: var(--color-border);
}

/* --- Author Bio Box (end of guide articles) --- */
.author-bio {
   border-top: 1px solid var(--color-border);
   margin-top: var(--space-xl);
   padding-top: var(--space-lg);
   display: flex;
   gap: var(--space-md);
   align-items: flex-start;
}

.author-bio__icon {
   flex-shrink: 0;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   color: var(--color-accent);
   font-family: var(--font-heading);
   font-weight: 700;
}

.author-bio__body {}

.author-bio__name {
   font-family: var(--font-heading);
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--color-muted);
   margin-bottom: 0.25rem;
}

.author-bio__title {
   font-weight: 700;
   color: var(--color-heading);
   font-size: 0.95rem;
}

.author-bio__desc {
   font-size: 0.85rem;
   color: var(--color-muted);
   margin-top: 0.4rem;
   line-height: 1.6;
}

/* --- External Sources / Citations --- */
.article-sources {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-left: 3px solid var(--color-accent);
   padding: var(--space-md) var(--space-lg);
   margin-top: var(--space-xl);
}

.article-sources__title {
   font-family: var(--font-heading);
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--color-muted);
   margin-bottom: var(--space-sm);
}

.article-sources ol {
   margin: 0;
   padding-left: 1.4em;
}

.article-sources li {
   font-size: 0.85rem;
   color: var(--color-muted);
   padding-block: 0.3rem;
   line-height: 1.5;
}

.article-sources a {
   color: var(--color-accent);
   text-decoration: underline;
   text-underline-offset: 2px;
   word-break: break-all;
}

.article-sources a:hover {
   color: var(--color-accent-hover);
}