/* ============================================
   ANYTHING OVER IP - CUSTOM THEME OVERRIDES
   blog.anythingoverip.com
   
   Loaded after screen.css to override Casper defaults.
   This file replaces all CSS from Code Injection.
   ============================================ */

/* ============================================
   AOIP COLOUR PALETTE
   ============================================ */
:root {
    --aoip-primary: #E84545;
    --aoip-bg: #121212;
    --aoip-text: #d4d4d4;
    --aoip-text-muted: #9a9a9a;
    --aoip-secondary-bg: #1e1e1e;
    --aoip-border: #3a3a3a;
    --aoip-code-bg: #0a0a0a;
    --aoip-footer-bg: #0d0d0d;
    --aoip-footer-text: #c0c0c0;
    --aoip-content-width: 900px;
}

/* ============================================
   GLOBAL DARK THEME
   ============================================ */
body {
    background-color: var(--aoip-bg) !important;
    color: var(--aoip-text) !important;
}

/* Override Ghost's color scheme detection */
html.dark-mode body,
html.auto-color body {
    background-color: var(--aoip-bg) !important;
    color: var(--aoip-text) !important;
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */
#gh-head,
.gh-head {
    background-color: var(--aoip-bg) !important;
    border-bottom: 1px solid var(--aoip-border);
    color: var(--aoip-text) !important;
}

/* Override accent-color backgrounds Ghost applies */
.has-cover:not(.home-template) .gh-head {
    background-color: var(--aoip-bg) !important;
    color: var(--aoip-text) !important;
}

:is(.home-template, .paged:not(.tag-template):not(.author-template)).has-cover .gh-head {
    background-color: transparent !important;
    color: var(--aoip-text) !important;
}

.gh-head-logo,
.gh-head-logo.no-image {
    color: var(--aoip-text) !important;
}

.gh-head-menu .nav a {
    color: var(--aoip-text) !important;
}

.gh-head-menu .nav a:hover {
    color: var(--aoip-primary) !important;
    opacity: 1 !important;
}

.gh-head-link,
.gh-head-members a {
    color: var(--aoip-text) !important;
}

.gh-head-link:hover {
    color: var(--aoip-primary) !important;
}

.gh-head-button {
    background: var(--aoip-primary) !important;
    color: #fff !important;
}

.has-cover .gh-head-button {
    background: var(--aoip-primary) !important;
    color: #fff !important;
}

.gh-head-button:hover {
    opacity: 0.9;
}

.gh-search,
.gh-burger,
.gh-icon-btn {
    color: var(--aoip-text) !important;
}

/* Burger menu in dark mode on mobile */
.gh-burger::before,
.gh-burger::after {
    background-color: var(--aoip-text) !important;
}

/* Mobile open menu */
@media (max-width: 767px) {
    .gh-head-open #gh-head,
    .gh-head-open #gh-head .gh-head-actions {
        background: var(--aoip-bg) !important;
    }
}

/* ============================================
   HOMEPAGE HERO / SITE HEADER
   ============================================ */
.site-header-content {
    background: linear-gradient(180deg, #0d0d0d 0%, #1a0a0a 50%, #0d0d0d 100%) !important;
    color: var(--aoip-text) !important;
}

.has-cover .site-header-content {
    background: linear-gradient(180deg, #0d0d0d 0%, #1a0a0a 50%, #0d0d0d 100%) !important;
    color: var(--aoip-text) !important;
}

/* Hide the default cover image (we use gradient instead) */
.site-header-cover {
    display: none !important;
}

.site-header-inner {
    position: relative;
    z-index: 100;
}

.site-title,
.site-description {
    color: var(--aoip-text) !important;
}

.has-cover .site-title,
.has-cover .site-description {
    color: #fff !important;
}

.has-cover .site-description {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   POST CARDS (Homepage / Tag / Author pages)
   ============================================ */
.post-card {
    background-color: var(--aoip-secondary-bg);
    border: 1px solid var(--aoip-border);
    border-radius: 6px;
    overflow: hidden;
}

.post-card:hover {
    border-color: var(--aoip-primary);
}

.post-card-content {
    padding: 1.5rem;
}

.post-card-content-link {
    color: var(--aoip-text);
}

.post-card-content-link:hover {
    text-decoration: none;
}

.post-card-title {
    color: var(--aoip-primary) !important;
}

.post-card-content-link:hover .post-card-title {
    opacity: 0.85 !important;
}

.post-card-excerpt {
    color: var(--aoip-text-muted) !important;
}

.post-card-tags,
.post-card-meta,
.post-card-meta > * {
    color: var(--aoip-text-muted) !important;
}

.post-card-featured {
    color: var(--aoip-primary) !important;
}

.post-card-image {
    background: var(--aoip-secondary-bg);
}

/* ============================================
   ARTICLE PAGE
   ============================================ */
.article {
    background-color: var(--aoip-bg) !important;
}

/* FIX #1: WIDER CONTENT AREA (720px → 900px) */
.article .gh-canvas {
    --content-width: var(--aoip-content-width);
}

/* Also widen read-more section to match */
.read-more-wrap {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Article title in AOIP red */
.article-title {
    color: var(--aoip-primary) !important;
}

.article-excerpt {
    color: var(--aoip-text-muted) !important;
}

.article-tag a {
    color: var(--aoip-text-muted) !important;
}

.article-tag a:hover {
    color: var(--aoip-primary) !important;
}

/* Author / byline meta */
.article-byline-meta,
.article-byline-meta .author-name,
.article-byline-meta .author-name a,
.byline-meta-content,
.byline-meta-date {
    color: var(--aoip-text-muted) !important;
}

.article-byline-meta .author-name a:hover {
    color: var(--aoip-primary) !important;
}

.author-avatar {
    border-color: var(--aoip-bg) !important;
    background-color: var(--aoip-border) !important;
}

/* FIX #2: SMALLER HERO / FEATURE IMAGE */
.article-image {
    max-height: 400px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.article-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

/* Subtle fade at bottom of hero image */
.article-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(transparent, var(--aoip-bg));
    pointer-events: none;
}

/* ============================================
   ARTICLE CONTENT
   ============================================ */
.gh-content {
    color: var(--aoip-text) !important;
    font-size: 1.9rem !important;
    line-height: 1.7 !important;
}

.gh-content > blockquote:not([class]),
.gh-content > dl,
.gh-content > ol,
.gh-content > p,
.gh-content > ul {
    color: var(--aoip-text);
}

.gh-content > [id] {
    color: var(--aoip-text) !important;
}

.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6 {
    color: var(--aoip-text) !important;
}

.gh-content a {
    color: var(--aoip-primary) !important;
    text-decoration: underline;
}

.gh-content a:hover {
    opacity: 0.85;
}

/* Blockquotes */
.gh-content > blockquote:not([class]) {
    color: var(--aoip-text-muted);
    background-color: var(--aoip-secondary-bg);
    padding: 1.2rem 1.5rem;
    border-radius: 4px;
}

.gh-content > blockquote:not([class])::before {
    background: var(--aoip-primary) !important;
}

/* Code blocks - terminal style */
.gh-content pre {
    background-color: var(--aoip-code-bg) !important;
    border: 1px solid #2a2a2a !important;
    color: #00ff00 !important;
    font-size: 1.6rem !important;
    line-height: 1.6 !important;
    padding: 1.5rem !important;
    border-radius: 6px !important;
    overflow-x: auto !important;
}

.gh-content code {
    background-color: var(--aoip-code-bg) !important;
    color: #00ff00 !important;
    font-family: 'Courier New', Courier, monospace !important;
}

/* Inline code - red, not green */
.gh-content :not(pre) > code {
    background-color: var(--aoip-secondary-bg) !important;
    color: var(--aoip-primary) !important;
    border: 1px solid var(--aoip-border) !important;
    font-size: 0.9em !important;
    padding: 2px 6px !important;
    border-radius: 4px;
}

/* Tables */
.gh-content table:not(.gist table) {
    background: var(--aoip-secondary-bg);
}

.gh-content table:not(.gist table) th {
    background-color: #282b2f !important;
    color: var(--aoip-text) !important;
}

.gh-content table:not(.gist table) td,
.gh-content table:not(.gist table) th {
    border-color: var(--aoip-border) !important;
    color: var(--aoip-text);
}

.gh-content table:not(.gist table) td:first-child {
    background-image: linear-gradient(to right, var(--aoip-secondary-bg) 50%, rgba(30, 30, 30, 0) 100%);
}

.gh-content table:not(.gist table) td:last-child {
    background-image: linear-gradient(to left, var(--aoip-secondary-bg) 50%, rgba(30, 30, 30, 0) 100%);
}

/* HR */
hr {
    border-top-color: var(--aoip-border) !important;
}

.gh-content hr::after {
    background: var(--aoip-border) !important;
    box-shadow: var(--aoip-bg) 0 0 0 5px !important;
}

/* Figcaptions */
figcaption {
    color: var(--aoip-text-muted) !important;
}

figcaption a {
    color: var(--aoip-primary) !important;
}

/* ============================================
   FIX #5: PREVIOUS / NEXT POST NAVIGATION
   Uses outer/inner pattern to match site width.
   ============================================ */
.aoip-post-nav-wrap {
    border-top: 1px solid var(--aoip-border);
    border-bottom: 1px solid var(--aoip-border);
    margin: 0;
    padding: max(4vmin, 24px) 0;
    background-color: var(--aoip-secondary-bg);
}

.aoip-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 1200px;
}

.aoip-nav-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem 1.8rem;
    background-color: var(--aoip-bg);
    border: 1px solid var(--aoip-border);
    border-radius: 8px;
    text-decoration: none !important;
    transition: border-color 0.3s ease, transform 0.15s ease;
    min-height: 80px;
}

.aoip-nav-item:hover {
    border-color: var(--aoip-primary);
    transform: translateY(-2px);
}

.aoip-nav-item.aoip-nav-empty {
    border: none;
    background: transparent;
}

.aoip-nav-arrow {
    font-size: 2rem;
    color: var(--aoip-primary);
    flex-shrink: 0;
    line-height: 1;
}

.aoip-nav-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.aoip-nav-label {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--aoip-text-muted);
}

.aoip-nav-title {
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--aoip-primary);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Next post: right-aligned text */
.aoip-nav-next {
    justify-content: flex-end;
    text-align: right;
}

.aoip-nav-next .aoip-nav-text {
    align-items: flex-end;
}

/* Mobile: stack vertically */
@media (max-width: 700px) {
    .aoip-post-nav {
        grid-template-columns: 1fr;
    }

    .aoip-nav-next {
        justify-content: flex-start;
        text-align: left;
    }

    .aoip-nav-next .aoip-nav-text {
        align-items: flex-start;
    }
}

/* ============================================
   AD BANNERS
   Managed via Code Injection (not in theme)
   ============================================ */

/* ============================================
   SIGNUP / CTA SECTION
   ============================================ */
.footer-cta {
    background-color: var(--aoip-secondary-bg);
    border-top: 1px solid var(--aoip-border);
    border-bottom: 1px solid var(--aoip-border);
}

.footer-cta-title {
    color: var(--aoip-text) !important;
}

.footer-cta-button {
    background: var(--aoip-secondary-bg) !important;
    border-color: var(--aoip-border) !important;
    color: var(--aoip-text-muted) !important;
}

.footer-cta-button span {
    background: var(--aoip-primary) !important;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination a {
    color: var(--aoip-text) !important;
}

.pagination a:hover {
    color: var(--aoip-primary) !important;
}

.pagination .page-number {
    color: var(--aoip-text-muted) !important;
}

/* ============================================
   SITE FOOTER
   ============================================ */
.site-footer {
    background-color: var(--aoip-footer-bg) !important;
    border-top: 2px solid var(--aoip-border);
    padding-top: 48px;
    margin-top: max(8vmin, 48px) !important;
}

.site-footer .inner {
    color: var(--aoip-footer-text) !important;
}

.site-footer .copyright a {
    color: var(--aoip-footer-text) !important;
}

.site-footer a {
    color: var(--aoip-footer-text) !important;
}

.site-footer a:hover {
    color: var(--aoip-primary) !important;
}

.site-footer-nav li:not(:first-child) a::before {
    background: var(--aoip-footer-text) !important;
}

/* ============================================
   ERROR PAGES
   ============================================ */
.error-code,
.error-description {
    color: var(--aoip-text-muted);
}

.error-link a {
    color: var(--aoip-primary);
}

/* ============================================
   LIGHT MODE TOGGLE OVERRIDES
   (Applied via JS toggle adding body.light-mode)
   ============================================ */
body.light-mode {
    --aoip-bg: #ffffff;
    --aoip-text: #1a1a1a;
    --aoip-text-muted: #666666;
    --aoip-secondary-bg: #f5f5f5;
    --aoip-border: #d0d0d0;
    --aoip-code-bg: #f0f0f0;
    --aoip-footer-bg: #f8f8f8;
    --aoip-footer-text: #555555;
}

body.light-mode .site-header-content,
body.light-mode .has-cover .site-header-content {
    background: linear-gradient(180deg, #f8f8f8 0%, #fff0f0 50%, #f8f8f8 100%) !important;
}

body.light-mode .post-card-title {
    color: var(--aoip-primary) !important;
}

body.light-mode .gh-content pre {
    background-color: #1a1a1a !important;
    color: #00ff00 !important;
}

body.light-mode .gh-content code {
    background-color: #1a1a1a !important;
    color: #00ff00 !important;
}

body.light-mode .gh-content :not(pre) > code {
    background-color: var(--aoip-secondary-bg) !important;
    color: var(--aoip-primary) !important;
    border-color: var(--aoip-border) !important;
}

body.light-mode #gh-head,
body.light-mode .gh-head {
    background-color: var(--aoip-bg) !important;
    color: var(--aoip-text) !important;
}

body.light-mode .gh-head-logo,
body.light-mode .gh-head-menu .nav a {
    color: var(--aoip-text) !important;
}

body.light-mode .gh-search,
body.light-mode .gh-burger::before,
body.light-mode .gh-burger::after {
    color: var(--aoip-text) !important;
    background-color: var(--aoip-text) !important;
}

body.light-mode .site-footer {
    background-color: var(--aoip-footer-bg) !important;
}

/* ============================================
   BOOKMARK CARDS
   ============================================ */
.kg-bookmark-container {
    background: var(--aoip-secondary-bg) !important;
    border-color: var(--aoip-border) !important;
    color: var(--aoip-text) !important;
}

.kg-bookmark-title {
    color: var(--aoip-text) !important;
}

.kg-bookmark-description {
    color: var(--aoip-text-muted) !important;
}

.kg-bookmark-metadata {
    color: var(--aoip-text-muted) !important;
}

/* ============================================
   MISC OVERRIDES
   ============================================ */

/* Selection highlight */
::selection {
    background: rgba(232, 69, 69, 0.3);
    text-shadow: none;
}

::-moz-selection {
    background: rgba(232, 69, 69, 0.3);
    text-shadow: none;
}

/* KBD styling */
kbd {
    background: var(--aoip-secondary-bg) !important;
    border-color: var(--aoip-border) !important;
    color: var(--aoip-text) !important;
}

/* Callout cards */
.kg-callout-card {
    background: var(--aoip-secondary-bg) !important;
    color: var(--aoip-text) !important;
}

/* Toggle cards */
.kg-toggle-card {
    background: var(--aoip-secondary-bg) !important;
    border-color: var(--aoip-border) !important;
}