/*
Theme Name: PeppercornMedia
Theme URI: https://peppercornmedia.com
Author: PeppercornMedia
Author URI: https://peppercornmedia.com
Description: A clean, lightweight WordPress block theme for PeppercornMedia — a founder-led eLearning development studio. Built on native block theme conventions with theme.json-driven design tokens.
Version: 0.3.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peppercornmedia
Tags: block-theme, full-site-editing, blog, business, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/* -----------------------------------------------------------------------------
   Selection
----------------------------------------------------------------------------- */
::selection {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--white);
}

/* -----------------------------------------------------------------------------
   Body & rendering refinements (most styles come from theme.json)
----------------------------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------------
   Skip link
----------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 100000;
}

.skip-link:focus {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--primary);
    display: block;
    font-weight: 600;
    left: 1rem;
    top: 1rem;
    padding: 0.75rem 1rem;
    line-height: 1;
    text-decoration: none;
    width: auto;
    height: auto;
    border: 2px solid var(--wp--preset--color--accent);
    border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   Focus states — visible 2px ring in accent orange
----------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation a:focus-visible,
.wp-block-navigation button:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.wp-block-button__link:focus-visible,
.wp-block-search__button:focus-visible {
    outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   Buttons — transitions, tap target, outline variant restyle
----------------------------------------------------------------------------- */
.wp-block-button__link {
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Outline button — uses core's is-style-outline */
.wp-block-button.is-style-outline > .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--primary);
    border: 1.5px solid var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--primary);
}

/* -----------------------------------------------------------------------------
   Navigation
----------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content {
    transition: color 150ms ease;
}

.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: var(--wp--preset--font-size--large);
    padding: 0.5rem 0;
}

/* -----------------------------------------------------------------------------
   Form fields
----------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select,
.wp-block-search__input {
    border: 1px solid rgba(1, 20, 49, 0.15);
    border-radius: 4px;
    padding: 0.625rem 0.875rem;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--charcoal);
    background-color: var(--wp--preset--color--white);
    width: 100%;
    max-width: 100%;
    min-height: 44px;
}

input:focus,
textarea:focus,
select:focus,
.wp-block-search__input:focus {
    border-color: var(--wp--preset--color--accent);
}

.wp-block-search__button {
    min-height: 44px;
}

/* -----------------------------------------------------------------------------
   Pagination
----------------------------------------------------------------------------- */
.wp-block-query-pagination .wp-block-query-pagination-numbers {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.wp-block-query-pagination .page-numbers {
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--wp--preset--color--primary);
    transition: background-color 150ms ease, color 150ms ease;
    min-width: 2.25rem;
    text-align: center;
}

.wp-block-query-pagination .page-numbers:hover {
    background-color: var(--wp--preset--color--soft);
}

.wp-block-query-pagination .page-numbers.current {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
}

/* -----------------------------------------------------------------------------
   Post content — vertical rhythm
----------------------------------------------------------------------------- */
.wp-block-post-content > * + * {
    margin-top: var(--wp--preset--spacing--30);
}

/* -----------------------------------------------------------------------------
   Block style variations (registered in functions.php)
----------------------------------------------------------------------------- */

/* Card — white panel for grouped content. Stretches to row height inside grid. */
.is-style-card {
    background-color: var(--wp--preset--color--white);
    border: 1px solid rgba(1, 20, 49, 0.08);
    border-radius: 6px;
    padding: var(--wp--preset--spacing--40);
    box-shadow: var(--wp--preset--shadow--subtle);
}

/* Soft section — off-white background for section breaks */
.is-style-soft-section {
    background-color: var(--wp--preset--color--soft);
    padding-top: var(--wp--preset--spacing--70);
    padding-bottom: var(--wp--preset--spacing--70);
}

/* Navy panel — dark accent for occasional callouts */
.is-style-panel-navy {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    padding-top: var(--wp--preset--spacing--70);
    padding-bottom: var(--wp--preset--spacing--70);
}

.is-style-panel-navy h1,
.is-style-panel-navy h2,
.is-style-panel-navy h3,
.is-style-panel-navy h4,
.is-style-panel-navy h5,
.is-style-panel-navy h6,
.is-style-panel-navy p,
.is-style-panel-navy li {
    color: var(--wp--preset--color--white);
}

.is-style-panel-navy a:not(.wp-block-button__link) {
    color: var(--wp--preset--color--white);
    text-decoration: underline;
}

.is-style-panel-navy a:not(.wp-block-button__link):hover,
.is-style-panel-navy a:not(.wp-block-button__link):focus {
    color: var(--wp--preset--color--accent);
}

/* Outline button inside a navy panel — invert to white */
.is-style-panel-navy .wp-block-button.is-style-outline > .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--white);
}

.is-style-panel-navy .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.is-style-panel-navy .wp-block-button.is-style-outline > .wp-block-button__link:focus {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--white);
}

/* Lead paragraph — larger introductory text */
p.is-style-lead {
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.5;
    color: var(--wp--preset--color--charcoal);
}

/* -----------------------------------------------------------------------------
   Responsive root padding — tighter on small screens
----------------------------------------------------------------------------- */
@media (max-width: 600px) {
    :root {
        --wp--style--root--padding-left: 1rem;
        --wp--style--root--padding-right: 1rem;
    }
}

/* -----------------------------------------------------------------------------
   Reduced motion
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* Stage 7 — Header polish */

.site-header .wp-block-navigation a {
    transition: color 0.15s ease;
}

.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation a:focus,
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation .current_page_item > a {
    color: var(--wp--preset--color--accent);
}

.site-header .wp-block-navigation a:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.site-header .wp-block-site-logo img {
    height: auto;
    max-width: 200px;
}

@media (max-width: 600px) {
    .site-header .wp-block-site-logo img {
        max-width: 160px;
    }
}

.site-footer a {
    color: var(--wp--preset--color--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--wp--preset--color--accent);
}

.site-footer .footer-nav-list {
    list-style: none;
    padding-left: 0;
}

.site-footer .footer-nav-list li {
    margin-bottom: var(--wp--preset--spacing--20);
}
/* Stage 9 — Article card styling for Resources page */

.article-card {
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--soft);
}

.article-card:hover {
    box-shadow: 0 8px 24px rgba(1, 20, 49, 0.08);
    transform: translateY(-2px);
}

.article-card .wp-block-post-featured-image {
    margin-top: 0;
    margin-bottom: 0;
}

.article-card .wp-block-post-featured-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.article-card .wp-block-post-featured-image a {
    display: block;
    line-height: 0;
}

.article-card .wp-block-post-title a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.article-card:hover .wp-block-post-title a {
    color: var(--wp--preset--color--accent);
}

.article-card .wp-block-post-date {
    color: var(--wp--preset--color--charcoal);
    opacity: 0.7;
}

.article-card .read-article-link a {
    color: var(--wp--preset--color--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0;
}

.article-card .read-article-link a::before {
    content: "Read article →";
    font-size: var(--wp--preset--font-size--small);
}

.article-card .read-article-link a:hover::before {
    text-decoration: underline;
    text-underline-offset: 3px;
}