﻿/*
Theme Name: PaperMod Kamticle
Description: WordPress port of the Kamticle papermod static theme (BBC-inspired editorial).
Author: Ilam
Version: 1.0.0
License: MIT
Text Domain: papermod-kamticle
*/
:root{--gap:24px;--main-width:720px;--radius:8px;--font-heading:'Merriweather',serif;--font-body:'Inter',sans-serif;--font-subtitle:'Source Sans Pro',sans-serif;--theme:#f2f2f2;--entry:#fff;--primary:#202224;--secondary:#545658;--tertiary:#666;--content:#202224;--code-bg:#f5f5f5;--border:#d9d9d9;--accent:#b80000;--accent-hover:#8f0000;--header-bg:#000;--header-text:#fff;--header-h:70px;color-scheme:light}
body.wp-dark-mode{--theme:#121212;--entry:#1f1f1f;--primary:#f6f6f6;--secondary:#b3b3b3;--tertiary:#a0a0a0;--content:#e6e6e6;--code-bg:#262626;--border:#414141;--accent:#ff6b6b;--accent-hover:#ff9a9a;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--primary);background:var(--theme);line-height:1.6;font-size:16px;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
img{max-width:100%;height:auto;border-radius:8px}
/* Header */
.site-header{background:var(--header-bg);border-bottom:4px solid var(--accent)}
.site-nav{display:flex;justify-content:space-between;align-items:center;height:var(--header-h);padding:0 20px;position:sticky;top:0;z-index:100;background:var(--header-bg)}
.site-logo a{font-family:var(--font-heading);font-weight:900;font-size:1.5rem;color:var(--header-text)}
#site-menu{display:flex;gap:20px;list-style:none;padding:0;margin:0;align-items:center}
#site-menu a{color:var(--header-text);font-weight:500}
#site-menu a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:6px}
#theme-toggle{border:0;background:none;color:var(--header-text);cursor:pointer;font-size:1.1rem;padding:4px}
/* Layout */
.site-main{max-width:1100px;margin:0 auto;padding:20px}
.content-wrapper{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:30px;align-items:start}
.main-content{min-width:0}
/* Post card */
.post-single{background:var(--entry);border:1px solid var(--border);border-top:4px solid var(--accent);border-radius:12px;overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}
.post-header{padding:40px;text-align:center;background:var(--entry)}
.post-title{font-family:var(--font-heading);font-size:2.5rem;font-weight:900;margin:0 0 15px;line-height:1.3;color:var(--primary)}
.post-meta{color:var(--tertiary);font-size:.95rem;font-family:var(--font-subtitle)}
.post-content{padding:40px;font-size:1.125rem;line-height:1.8;color:var(--content)}
.post-content h2,.post-content h3,.post-content h4{font-family:var(--font-heading);color:var(--primary);margin-top:2.5rem;line-height:1.2}
.post-content h2{font-size:1.6rem}
.post-content h3{font-size:1.3rem}
.post-content p{margin:0 0 1.2em}
.post-content blockquote{border-left:4px solid var(--accent);margin:1.5em 0;padding:.5em 1.2em;background:var(--code-bg);border-radius:0 8px 8px 0}
.post-content table{width:100%;border-collapse:collapse;margin:1.5em 0}
.post-content table td,.post-content table th{border:1px solid var(--border);padding:8px 10px}
.post-content img{border-radius:8px;margin:10px 0}
.post-content figcaption{text-align:center;font-size:.85rem;color:var(--tertiary);margin-top:4px}
.post-content ul,.post-content ol{padding-left:1.4em;margin:0 0 1.2em}
.featured-image img{max-height:400px;width:100%;object-fit:cover;border-radius:8px;margin-bottom:20px}
/* Gallery */
.gallery-section{margin:30px 0}
.gallery-title{font-family:var(--font-heading);border-bottom:2px solid var(--accent);padding-bottom:8px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:20px 0}
.gallery-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
/* Sidebar */
.sidebar{display:flex;flex-direction:column;gap:20px}
.sidebar-widget{background:var(--entry);border:1px solid var(--border);padding:20px;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.widget-title{font-family:var(--font-heading);font-size:1.2rem;margin:0 0 15px;padding-bottom:10px;border-bottom:2px solid var(--accent);color:var(--primary)}
.sidebar-post-list{list-style:none;padding:0;margin:0}
.sidebar-post-item{margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid var(--border)}
.sidebar-post-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.sidebar-post-item a{color:var(--content);font-weight:500;font-size:.95rem;line-height:1.4}
.sidebar-post-item a:hover{color:var(--accent);text-decoration:underline}
/* Related */
.bottom-related{background:var(--entry);border:1px solid var(--border);border-radius:12px;padding:20px;margin-top:40px}
.bottom-related h3{font-family:var(--font-heading);margin:0 0 10px;padding-bottom:10px;border-bottom:2px solid var(--accent);color:var(--primary)}
.bottom-related ul{margin:15px 0 0;padding-left:20px}
.bottom-related li{margin-bottom:10px}
.bottom-related a{color:var(--primary)}
.bottom-related a:hover{color:var(--accent);text-decoration:underline}
/* Footer */
.site-footer{margin-top:40px;padding:20px;border-top:4px solid var(--accent);background:var(--header-bg);color:var(--header-text);text-align:center}
.site-footer a{color:var(--header-text)}
/* Archive/list */
.entry-card{background:var(--entry);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:12px;padding:25px;margin-bottom:20px;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.entry-card h2{font-family:var(--font-heading);margin:0 0 8px;font-size:1.4rem;line-height:1.3}
.entry-card h2 a{color:var(--primary)}
.entry-card h2 a:hover{color:var(--accent)}
.entry-card .entry-meta{color:var(--tertiary);font-size:.9rem;font-family:var(--font-subtitle)}
.entry-card .entry-excerpt{color:var(--content);margin:10px 0 0}
/* Responsive */
@media(max-width:900px){.content-wrapper{grid-template-columns:1fr}.sidebar{order:2}.post-title{font-size:1.8rem}.post-header,.post-content{padding:25px}}
