/*
Theme Name: Will Chatham Custom Blog Theme
Theme URI: https://blog.willchatham.com
Description: A custom child theme for blog.willchatham.com that harmonizes design with willchatham.com using OKLch colors and Barlow typography.
Author: Will Chatham
Author URI: https://willchatham.com
Version: 1.1
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: twentyseventeen
Text Domain: willchatham-blog-theme
Domain Path: /languages
*/

/* =============================================
   FONT FACES - Barlow Local Files
   ============================================= */

@font-face {
    font-family: 'Barlow';
    src: url('./fonts/barlow-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('./fonts/barlow-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('./fonts/barlow-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =============================================
   COLOR VARIABLES
   ============================================= */

:root {
    --bg-1:   oklch(21.56% 0.083 210);   /* dark blue - primary bg */
    --bg-2:   oklch(26%    0.097 210);   /* slightly lighter blue */
    --bg-3:   oklch(30%    0.085 210);   /* card / widget bg */
    --acc:    oklch(65%    0.14  50);    /* warm gold accent */
    --acc-dk: oklch(55%    0.14  50);    /* darker accent for hover */
    --fg-1:   oklch(95%    0.01  210);   /* near-white body text */
    --fg-2:   oklch(75%    0.04  210);   /* muted secondary text */
    --fg-3:   oklch(60%    0.05  210);   /* very muted - meta etc */
    --border: oklch(30%    0.05  210);   /* subtle borders */
}

/* =============================================
   GLOBAL RESET + BASE
   ============================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background-color: var(--bg-1) !important;
}

body {
    background-color: var(--bg-1) !important;
    color: var(--fg-1) !important;
    font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    -webkit-font-smoothing: antialiased;
}

/* =============================================
   TYPOGRAPHY
   ============================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Barlow', sans-serif !important;
    font-weight: 700 !important;
    color: var(--fg-1) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
}

p, li, td, th, blockquote, label {
    font-family: 'Barlow', sans-serif !important;
    color: var(--fg-1) !important;
}

strong, b {
    font-weight: 700;
    color: var(--fg-1) !important;
}

em, i {
    color: var(--fg-1) !important;
}

/* =============================================
   LINKS
   ============================================= */

a,
a:visited {
    color: var(--acc) !important;
    text-decoration: none !important;
    transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover,
a:focus {
    color: var(--fg-1) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--acc) !important;
    text-underline-offset: 3px !important;
}

/* =============================================
   SITE HEADER
   ============================================= */

.site-header,
#masthead {
    background-color: var(--bg-2) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 !important;
}

/* Kill Twenty Seventeen's header image area entirely */
.custom-header-media,
.has-header-image .custom-header-media,
.has-header-image .site-header,
.custom-header {
    background: var(--bg-2) !important;
}

.custom-header-media img,
.custom-header-media video,
.custom-header-media::before,
.custom-header-media::after {
    display: none !important;
}

.custom-header-media {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Ensure site branding is always visible */
.site-branding {
    padding: 1.5rem 2rem !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.site-title {
    font-family: 'Barlow', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    clip: unset !important;
    clip-path: unset !important;
    height: auto !important;
    width: auto !important;
    position: static !important;
}

.site-title a,
.site-title a:visited {
    color: var(--fg-1) !important;
    text-decoration: none !important;
}

.site-title a:hover {
    color: var(--acc) !important;
    text-decoration: none !important;
}

.site-description {
    color: var(--fg-2) !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.9rem !important;
    margin: 0.25rem 0 0 !important;
    display: block !important;
    visibility: visible !important;
    clip: unset !important;
    clip-path: unset !important;
    height: auto !important;
    width: auto !important;
    position: static !important;
}

/* =============================================
   NAVIGATION
   ============================================= */

.main-navigation,
.navigation-top,
#site-navigation {
    background-color: var(--bg-1) !important;
    border-bottom: 1px solid var(--border) !important;
}

.main-navigation ul,
.navigation-top ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main-navigation li,
.navigation-top li {
    display: inline-block;
}

.main-navigation a,
.navigation-top a,
.main-navigation a:visited,
.navigation-top a:visited {
    color: var(--fg-2) !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    padding: 1rem 1.2rem !important;
    display: block;
    transition: color 0.15s ease !important;
}

.main-navigation a:hover,
.navigation-top a:hover,
.main-navigation .current-menu-item > a,
.navigation-top .current-menu-item > a {
    color: var(--acc) !important;
    text-decoration: none !important;
}

/* Mobile menu toggle */
.menu-toggle {
    background: transparent !important;
    color: var(--fg-1) !important;
    border: 1px solid var(--border) !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0.5rem 1rem !important;
    cursor: pointer;
}

.menu-toggle:hover {
    border-color: var(--acc) !important;
    color: var(--acc) !important;
}

/* =============================================
   PAGE / CONTENT WRAPPERS
   ============================================= */

.site-content,
#content {
    background-color: var(--bg-1) !important;
}

.wrap {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

/* =============================================
   PAGE TITLE / ARCHIVE HEADER
   ============================================= */

.page-header,
.archive-header {
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 2px solid var(--acc) !important;
}

.page-title,
.archive-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--fg-2) !important;
    margin: 0 !important;
}

/* =============================================
   POSTS
   ============================================= */

.hentry,
article.post,
article.page {
    background-color: var(--bg-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
}

/* Post date / meta line */
.entry-meta,
.posted-on,
.byline {
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--fg-3) !important;
    margin-bottom: 0.75rem !important;
}

.entry-meta a,
.entry-meta a:visited,
.posted-on a,
.byline a {
    color: var(--fg-3) !important;
}

.entry-meta a:hover,
.posted-on a:hover {
    color: var(--acc) !important;
}

/* Post title */
.entry-title {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 1.25rem !important;
    letter-spacing: -0.02em !important;
}

.entry-title a,
.entry-title a:visited {
    color: var(--fg-1) !important;
    text-decoration: none !important;
}

.entry-title a:hover {
    color: var(--acc) !important;
    text-decoration: none !important;
}

/* Post content */
.entry-content,
.entry-summary {
    color: var(--fg-1) !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
}

.entry-content p,
.entry-summary p {
    color: var(--fg-1) !important;
    margin-bottom: 1.25rem !important;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: var(--fg-1) !important;
    margin-top: 2rem !important;
    margin-bottom: 0.75rem !important;
}

/* Post footer / tags */
.entry-footer {
    font-size: 0.8rem !important;
    color: var(--fg-3) !important;
    border-top: 1px solid var(--border) !important;
    padding-top: 1rem !important;
    margin-top: 1.5rem !important;
}

.entry-footer a,
.entry-footer a:visited {
    color: var(--fg-3) !important;
}

.entry-footer a:hover {
    color: var(--acc) !important;
}

/* =============================================
   SIDEBAR / WIDGETS
   ============================================= */

.widget-area,
#secondary,
aside.widget-area {
    background-color: transparent !important;
}

.widget {
    background-color: var(--bg-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.widget-title,
.widgettitle {
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--fg-2) !important;
    margin: 0 0 1rem !important;
    padding-bottom: 0.6rem !important;
    border-bottom: 1px solid var(--border) !important;
}

.widget ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.widget ul li {
    padding: 0.4rem 0 !important;
    color: var(--fg-1) !important;
    border: none !important;
    box-shadow: none !important;
}

.widget ul li a,
.widget ul li a:visited {
    color: var(--fg-1) !important;
    font-size: 0.9rem !important;
    display: block !important;
    text-decoration: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.widget ul li a:hover {
    color: var(--acc) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* No underlines on any sidebar/widget links */
.widget a,
.widget a:visited,
.widget a:hover,
.widget a:focus,
#secondary a,
#secondary a:visited {
    text-decoration: none !important;
}

.widget p {
    color: var(--fg-1) !important;
    font-size: 0.9rem !important;
}

/* Text widget */
.textwidget {
    color: var(--fg-1) !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

/* =============================================
   SEARCH WIDGET
   ============================================= */

.search-form {
    display: flex !important;
    gap: 0 !important;
}

.search-field {
    flex: 1 !important;
    background-color: var(--bg-3) !important;
    color: var(--fg-1) !important;
    border: 1px solid var(--border) !important;
    border-right: none !important;
    border-radius: 4px 0 0 4px !important;
    padding: 0.6rem 0.9rem !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.9rem !important;
    outline: none;
}

.search-field::placeholder {
    color: var(--fg-3) !important;
}

.search-field:focus {
    border-color: var(--acc) !important;
    background-color: var(--bg-2) !important;
}

.search-submit {
    background-color: var(--acc) !important;
    color: var(--bg-1) !important;
    border: none !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 0.6rem 1rem !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.search-submit:hover {
    background-color: var(--acc-dk) !important;
}

/* =============================================
   BUTTONS
   ============================================= */

button,
input[type="submit"],
input[type="button"],
.button,
.wp-block-button__link {
    background-color: var(--acc) !important;
    color: var(--bg-1) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0.65rem 1.4rem !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

button:hover,
input[type="submit"]:hover,
.button:hover {
    background-color: var(--acc-dk) !important;
}

/* =============================================
   FORMS
   ============================================= */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
    background-color: var(--bg-3) !important;
    color: var(--fg-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    padding: 0.6rem 0.9rem !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.95rem !important;
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--acc) !important;
}

label {
    color: var(--fg-2) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* =============================================
   PAGINATION
   ============================================= */

.site-main .posts-navigation,
.site-main .post-navigation,
.site-main .pagination {
    border-top: 1px solid var(--border) !important;
    padding-top: 1.5rem !important;
    margin-top: 1.5rem !important;
}

.nav-links a,
.page-numbers a,
.nav-links a:visited,
.page-numbers a:visited {
    background-color: var(--bg-2) !important;
    color: var(--fg-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: border-color 0.15s, color 0.15s !important;
}

.nav-links a:hover,
.page-numbers a:hover {
    border-color: var(--acc) !important;
    color: var(--acc) !important;
}

.page-numbers.current {
    background-color: var(--acc) !important;
    color: var(--bg-1) !important;
    border-radius: 4px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

/* =============================================
   BLOCKQUOTES, CODE, HR
   ============================================= */

blockquote {
    border-left: 3px solid var(--acc) !important;
    margin: 1.5rem 0 !important;
    padding: 0.5rem 1.5rem !important;
    background-color: var(--bg-3) !important;
    border-radius: 0 4px 4px 0 !important;
}

blockquote p {
    color: var(--fg-2) !important;
    font-style: italic;
    margin: 0 !important;
}

pre,
code {
    font-family: 'Courier New', 'Courier', monospace !important;
    background-color: var(--bg-3) !important;
    color: var(--fg-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
}

pre {
    padding: 1.25rem !important;
    overflow-x: auto !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
}

code {
    padding: 2px 6px !important;
    font-size: 0.875em !important;
}

hr {
    border: none !important;
    border-top: 1px solid var(--border) !important;
    margin: 2rem 0 !important;
}

/* =============================================
   COMMENTS
   ============================================= */

#comments,
.comments-area {
    background-color: var(--bg-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    padding: 2rem !important;
    margin-top: 2rem !important;
}

.comments-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--fg-2) !important;
    margin-bottom: 1.5rem !important;
}

.comment-body {
    background-color: var(--bg-3) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
}

.comment-author .fn {
    color: var(--fg-1) !important;
    font-weight: 700 !important;
}

.comment-metadata,
.comment-meta {
    font-size: 0.8rem !important;
    color: var(--fg-3) !important;
    margin-bottom: 0.75rem !important;
}

.comment-content p {
    color: var(--fg-1) !important;
    font-size: 0.95rem !important;
}

/* =============================================
   SITE FOOTER
   ============================================= */

.site-footer,
#colophon {
    background-color: var(--bg-2) !important;
    border-top: 1px solid var(--border) !important;
    padding: 2rem !important;
    margin-top: 3rem !important;
}

.site-footer .site-info {
    color: var(--fg-3) !important;
    font-size: 0.8rem !important;
    font-family: 'Barlow', sans-serif !important;
}

.site-footer a,
.site-footer a:visited {
    color: var(--fg-3) !important;
}

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

/* =============================================
   IMAGES
   ============================================= */

img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 4px;
}

.wp-caption {
    background-color: var(--bg-3) !important;
    border: 1px solid var(--border) !important;
    padding: 0.5rem !important;
    border-radius: 4px !important;
}

.wp-caption-text {
    color: var(--fg-3) !important;
    font-size: 0.8rem !important;
    text-align: center;
    margin: 0.4rem 0 0 !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 900px) {
    .entry-title {
        font-size: 1.4rem !important;
    }

    .hentry,
    article.post,
    article.page {
        padding: 1.25rem !important;
    }

    .wrap {
        padding: 0 1rem !important;
    }
}

@media (max-width: 600px) {
    .site-branding {
        padding: 0.75rem 1rem !important;
    }

    .entry-title {
        font-size: 1.25rem !important;
    }
}

/* =============================================
   PAGE LAYOUT FIXES
   ============================================= */

/* 1. Kill the two-column split inside #primary on pages.
      Override both at root level AND inside the same
      @media min-width: 48em block the parent uses, so
      there is no cascade ambiguity. */
body.page .entry-header {
    float: none !important;
    width: 100% !important;
    padding-right: 0 !important;
    position: static !important;
}

body.page .entry-content,
body.page .entry-summary {
    float: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    position: static !important;
}

body.page .entry-content::before {
    display: none !important;
    content: none !important;
}

@media screen and (min-width: 48em) {
    body.page-two-column:not(.archive) #primary .entry-header,
    body.page #primary .entry-header {
        float: none !important;
        width: 100% !important;
        padding-right: 0 !important;
    }

    body.page-two-column:not(.archive) #primary .entry-content,
    body.page-two-column:not(.archive) #primary .entry-summary,
    body.page #primary .entry-content,
    body.page #primary .entry-summary {
        float: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        position: static !important;
    }

    body.page-two-column:not(.archive) #primary .entry-content::before,
    body.page #primary .entry-content::before {
        display: none !important;
        content: none !important;
    }
}

/* 2. Sidebar placement on pages.
      The parent theme excludes pages from has-sidebar.
      Force the float layout via CSS and PHP (functions.php). */
body.page #primary {
    float: left !important;
    width: 58% !important;
}

body.page #secondary {
    float: right !important;
    width: 36% !important;
    padding-top: 0 !important;
}

@media screen and (min-width: 48em) {
    body.page #primary {
        float: left !important;
        width: 58% !important;
    }

    body.page #secondary {
        float: right !important;
        width: 36% !important;
    }
}

/* Clearfix so the .wrap container doesn't collapse */
.wrap::after {
    content: '' !important;
    display: table !important;
    clear: both !important;
}

/* =============================================
   WIDGET LINK DOUBLE-LINE FIX
   Twenty Seventeen fakes underlines with
   box-shadow: inset 0 -1px 0, not text-decoration.
   Must override box-shadow to remove them.
   ============================================= */

/* Kill the box-shadow fake-underline on all widget links.
   Using #secondary (ID = 100 specificity) beats the parent
   theme's class-only selectors without needing !important. */
#secondary a,
#secondary a:visited,
#secondary a:hover,
#secondary a:focus,
#secondary .widget a,
#secondary .widget a:visited,
#secondary .widget ul li a,
#secondary .widget ul li a:visited,
#secondary .widget ul li a:hover,
#secondary .widget ul li a:focus {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-decoration: none !important;
}

@media screen and (min-width: 48em) {
    #secondary a,
    #secondary .widget ul li a,
    #secondary .widget ul li a:hover {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        text-decoration: none !important;
    }
}