/* ------------------------------
   GLOBAL TYPOGRAPHY
------------------------------ */

* {
    font-family: 'Inter', 'Satoshi', sans-serif;
    color: #4B5563; /* body text */
}

h1, h2, h3, h4, h5, h6,
.wp-main-header .logo-area a {
    font-family: 'Satoshi', 'Inter', sans-serif;
    font-weight: 800; /* geometric grotesk */
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-transform: uppercase;
    color: #111827; /* very dark navy */
}

/* ------------------------------
   BRAND COLORS
------------------------------ */

body,
.bg-color,
.nav-brand,
.logbook-wp-wp-blog-section,
.wp-index-blog-section {
    background: #F5F7FA; /* soft grey */
}

a {
    color: #111827;
}

a:hover {
    color: #22C55E; /* logo green */
}

/* Primary CTA green */
button,
#myBtn,
.widget_search .wp-block-search .wp-block-search__button {
    background: #C6FF00;
    color: #111827;
}

button:hover,
.form-submit .submit:hover {
    background: #111827;
    color: #fff;
}

/* Secondary CTA dark */
.post-readmore,
.page_link a {
    border-color: #111827;
    color: #111827;
}

/* ------------------------------
   LOGO / WORDMARK
------------------------------ */

.wp-main-header .logo-area a {
    font-size: 4.2rem;
    color: #111827;
}

.wp-main-header .logo-area p {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4B5563;
}

/* ------------------------------
   NAVIGATION
------------------------------ */

.logbook-wp-main-navigation .wrapper {
    background: #F5F7FA;
    padding: 10px 0;
}

.logbook-wp-main-navigation ul.logbook-wp-nav-menu > li > a {
    color: #111827;
    font-weight: 600;
    font-size: 15px;
}

.logbook-wp-main-navigation ul.logbook-wp-nav-menu > li:hover > a,
.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current-menu-item > a {
    color: #22C55E;
}

/* Mobile menu */
@media screen and (max-width: 1023px) {
    .logbook-wp-main-navigation .wrapper {
        background: #111827 !important;
    }
}

/* ------------------------------
   POSTS / GRID
------------------------------ */

.post {
    background: #ffffff;
    border-bottom: 2px solid #C6FF00;
    transition: all .3s ease-in-out;
}

.post:hover {
    transform: translateY(-12px);
}

.post .post-title a:hover {
    color: #22C55E;
}

/* "Read more" */
.read-more:after {
    content: '\f101';
    font-family: fontAwesome;
    color: #C6FF00;
}

.post-readmore {
    border-top: 2px solid #C6FF00;
}

/* ------------------------------
   META + CATEGORIES
------------------------------ */

.byline,
.posted-on {
    color: #22C55E;
}

.logbook-wp-wp-blog-section .category-name a {
    background-color: #22C55E;
    color: #111827;
}

/* ------------------------------
   PAGINATION
------------------------------ */

.logbook-wp-wp-blog-section .pagination span.current {
    background: #C6FF00;
    color: #111827;
    border-color: #C6FF00;
}

.logbook-wp-wp-blog-section .pagination .page-numbers:hover {
    background: #111827;
    color: #fff;
}

/* ------------------------------
   WIDGETS / DECOR
------------------------------ */

.widget-area .widget-title:after,
.content-part .block:before {
    background-color: #C6FF00;
}

.wp-block-latest-comments .wp-block-latest-comments__comment-meta {
    color: #22C55E;
}

/* ------------------------------
   GRID / RESPONSIVE
------------------------------ */

.wp-index-blog-section {
    width: 70%;
    padding: 40px 10px;
    column-width: 15vw;
    grid-gap: 32px;
}

@media screen and (max-width: 1440px) {
    .wp-index-blog-section { width: 80%; }
}

@media screen and (max-width: 1024px) {
    .wp-index-blog-section { width: 90%; }
}

@media screen and (max-width: 1023px) {
    .wp-index-blog-section { width: 100% !important; }
}