/*
Theme Name: Bitcoin Walkthrough
Theme URI: https://bitcoin-walkthrough.com
Author: Bitcoin Walkthrough
Author URI: https://bitcoin-walkthrough.com
Description: Bitcoin Walkthrough is a beginner-friendly education platform focused on helping people understand Bitcoin clearly, safely, and step by step. Simple explanations, guided steps, and practical checklists for your Bitcoin journey.
Version: 1774873218
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bitcoin-walkthrough
Tags: bitcoin, cryptocurrency, education, blog, one-column, two-columns, custom-menu, featured-images, translation-ready

Bitcoin Walkthrough WordPress Theme
Copyright (C) 2026 Bitcoin Walkthrough
*/

/* Additional WordPress-specific styles */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* WordPress alignment classes */
.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

/* WordPress caption */
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
    font-size: 14px;
    color: #666;
}

/* WordPress gallery */
.gallery {
    margin-bottom: 1.5em;
    display: grid;
    grid-gap: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
    grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
    display: block;
}

/* WordPress sticky post */
.sticky {
    display: block;
}

/* WordPress post navigation */
.post-navigation,
.posts-navigation {
    margin: 2em 0;
}

.nav-links {
    display: flex;
    justify-content: space-between;
}

/* WordPress comment styles */
.bypostauthor {
    display: block;
}

/* WordPress pagination */
.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

/* WordPress block editor support */
.wp-block-button__link {
    background-color: #000;
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    display: inline-block;
}

.wp-block-button__link:hover {
    background-color: #333;
    color: #fff;
}

/* Admin bar spacing - removed extra top margin */
body.admin-bar .navigation-top-part {
    margin-top: 0;
}

@media screen and (max-width: 782px) {
    body.admin-bar .navigation-top-part {
        margin-top: 0;
    }
}

/* Mobile navbar fixes */
@media screen and (max-width: 767px) {
    .navigation-top-part .social-wrapper {
        display: none;
    }

    .navigation-top-part .grid-2-columns._3 {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .navigation-top-part .logo-link,
    .navigation-top-part .custom-logo-link {
        display: flex;
        justify-content: center;
    }
}

/* Footer subscribe - placeholder kept for ordering */

/* ============================================
   Bitcoin Walkthrough Brand Colors
   ============================================ */

:root {
    --bitcoin-orange: #F7931A;
    --bitcoin-orange-dark: #E07D0D;
    --bitcoin-orange-light: #FFA733;
    --bitcoin-gold: #FFB347;
    --bitcoin-dark: #1A1A2E;
    --bitcoin-darker: #0F0F1A;
}

/* Hero Section - Bitcoin Orange Theme */
.hero-banner {
    background: linear-gradient(135deg, var(--bitcoin-dark) 0%, #1a1a2e 50%, var(--bitcoin-darker) 100%);
}

.hero-gradient-overlay {
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(247, 147, 26, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 100%, rgba(247, 147, 26, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
}

.hero-badge {
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.25) 0%, rgba(247, 147, 26, 0.1) 100%);
    border: 1px solid rgba(247, 147, 26, 0.4);
}

.hero-title-accent {
    background: linear-gradient(135deg, var(--bitcoin-orange) 0%, var(--bitcoin-gold) 50%, var(--bitcoin-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-title-accent::after {
    background: linear-gradient(90deg, rgba(247, 147, 26, 0.4) 0%, rgba(255, 179, 71, 0.3) 50%, rgba(247, 147, 26, 0.4) 100%);
}

.hero-cta-primary {
    background: linear-gradient(135deg, var(--bitcoin-orange) 0%, var(--bitcoin-orange-dark) 100%) !important;
    color: #fff !important;
}

.hero-cta-primary:hover {
    background: linear-gradient(135deg, var(--bitcoin-orange-light) 0%, var(--bitcoin-orange) 100%) !important;
}

.hero-stats {
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.12) 0%, rgba(247, 147, 26, 0.05) 100%);
    border: 1px solid rgba(247, 147, 26, 0.2);
}

/* Buttons - Bitcoin Orange */
.button.large,
.button {
    background-color: var(--bitcoin-orange);
}

.button.large:hover,
.button:hover {
    background-color: var(--bitcoin-orange-dark);
}

.button-subscribe.subscribe {
    background-color: var(--bitcoin-orange);
}

.button-subscribe.subscribe:hover {
    background-color: var(--bitcoin-orange-dark);
}

/* Featured Story Section */
.featured-story-badge {
    background: var(--bitcoin-orange);
}

.featured-story-cta {
    background: var(--bitcoin-orange) !important;
}

.featured-story-cta:hover {
    background: var(--bitcoin-orange-dark) !important;
}

/* Links and Accents */
.nav-link:hover,
.nav-link.w--current {
    color: var(--bitcoin-orange);
    opacity: 1;
}

/* Blog Banner - Bitcoin Theme */
.blog-banner {
    background: linear-gradient(135deg, var(--bitcoin-dark) 0%, #1a1a1a 50%, var(--bitcoin-darker) 100%);
}

.blog-banner-gradient {
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(247, 147, 26, 0.12) 0%, transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}

.blog-banner-badge {
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.2) 0%, rgba(247, 147, 26, 0.08) 100%);
    border: 1px solid rgba(247, 147, 26, 0.3);
}

/* Pagination - Bitcoin Orange */
.pagination-btn:hover:not(.pagination-disabled) {
    background: var(--bitcoin-orange);
    border-color: var(--bitcoin-orange);
}

.pagination-current {
    background: var(--bitcoin-orange);
    border-color: var(--bitcoin-orange);
}

/* Card Hover Effects */
.grid-3-equal-columns .blog-featured-wrapper._2:hover .blog-title-small {
    color: var(--bitcoin-orange);
}

/* Success Message */
.success-message {
    background-color: var(--bitcoin-orange);
}

/* Checkbox Checked State */
.checkbox.w--redirected-checked {
    border-color: var(--bitcoin-orange);
    background-color: var(--bitcoin-orange);
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
    background-color: var(--bitcoin-orange);
    border-color: var(--bitcoin-orange);
}

.w-checkbox-input--inputType-custom.w--redirected-focus {
    box-shadow: 0 0 3px 1px var(--bitcoin-orange);
}

/* Featured Icon */
.featured-icon {
    background-color: var(--bitcoin-orange);
}

/* WordPress Block Editor */
.wp-block-button__link {
    background-color: var(--bitcoin-orange);
}

.wp-block-button__link:hover {
    background-color: var(--bitcoin-orange-dark);
}

/* Search Button */
.button-search.search {
    background-color: var(--bitcoin-orange);
}

.button-search.search:hover {
    background-color: var(--bitcoin-orange-dark);
}

/* Dropdown Navigation */
.dropdown-list.w--open {
    background-color: var(--bitcoin-dark);
}

/* Footer Styles */
.section.footer {
    background-color: #fafafa;
    border-top: 1px solid #eee;
}

/* Footer subscribe form - flex layout to prevent button/input overlap */
.footer-subscribe-form {
    position: static !important;
}

.footer-subscribe-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.footer-subscribe-row .form-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.footer-subscribe-row .button-subscribe.subscribe {
    position: static !important;
    inset: unset !important;
    flex-shrink: 0;
    white-space: nowrap;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
}

@media screen and (max-width: 479px) {
    .footer-subscribe-row {
        flex-direction: column;
    }

    .footer-subscribe-row .button-subscribe.subscribe {
        width: 100%;
        text-align: center;
    }
}

/* Dark Link Hover */
.dark-link:hover {
    color: var(--bitcoin-orange);
}

/* Article Card Hover */
.blog-featured-wrapper:hover .blog-title-small {
    color: var(--bitcoin-orange);
}

/* Media Item Hover */
.blog-media-item:hover .blog-media-title {
    color: var(--bitcoin-orange);
}

/* ============================================
   Custom Logo Sizing
   ============================================ */

/* Override WordPress custom logo hardcoded dimensions */
.custom-logo {
    max-height: 90px !important;
    width: auto !important;
    height: auto !important;
}

/* Custom logo link wrapper */
.custom-logo-link {
    display: inline-block;
}

/* Loader logo sizing */
.loadin-flex .custom-logo,
.loadin-flex img {
    max-height: 90px !important;
    width: auto !important;
    height: auto !important;
}

/* Logo image sizing via CSS (not inline) */
.logo-link img,
.logo-absolute img {
    max-height: 90px;
    width: auto;
    height: auto;
}

/* Social icon image sizing */
.social-image {
    width: 20px;
    height: auto;
}

/* 404 page logo sizing */
.logo-absolute .filter-image {
    max-height: 90px;
    width: auto;
    height: auto;
}

/* Homepage section header */
.homepage-section-header {
    margin-bottom: 20px;
}

.homepage-section-title {
    font-size: 28px;
    margin-bottom: 8px;
    font-weight: 700;
}

.homepage-section-subtitle {
    color: var(--dim-grey-2);
    font-family: Redaction, sans-serif;
    font-size: 16px;
    margin: 0;
}

/* Featured story section */
.featured-story-link {
    display: block;
    cursor: pointer;
}

.featured-story-photo {
    max-height: 500px;
    object-fit: cover;
    width: 100%;
}

.featured-story-title,
.featured-story-excerpt {
    text-align: center;
}

.featured-story-cta-wrapper {
    text-align: center;
}

/* Fallback logo on About and Contact pages */
.about-fallback-logo,
.contact-fallback-logo {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================
   Contact Form - Clean Modern Redesign
   ============================================ */

.contact-form-wrapper {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
}

.contact-form-wrapper .grid-form.for-contact {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.contact-form-wrapper .grid-form.for-contact .text-field-primary {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px;
    height: 52px;
    padding: 14px 18px;
    font-size: 15px;
    font-family: Inter, sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: #fafafa;
}

.contact-form-wrapper .grid-form.for-contact .text-field-primary:focus {
    border-color: var(--bitcoin-orange);
    box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.1);
    outline: none;
    background-color: #fff;
}

.contact-form-wrapper .grid-form.for-contact .text-field-primary.area {
    height: auto;
    min-height: 150px;
    padding-top: 16px;
    padding-bottom: 16px;
    resize: vertical;
}

.contact-form-wrapper .grid-form.for-contact .text-field-primary::placeholder {
    color: #999;
    font-weight: 400;
    font-size: 14px;
}

.contact-form-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

.contact-form-row .text-field-primary {
    flex: 1;
}

.contact-form-wrapper .checkbox-field._2 {
    margin-top: 8px;
    margin-bottom: 0;
}

.contact-form-wrapper .button.large {
    width: 100%;
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    margin-top: 8px;
    cursor: pointer;
    text-align: center;
    display: block;
    border: none;
}

@media screen and (max-width: 479px) {
    .contact-form-wrapper {
        padding: 24px 20px;
        border-radius: 8px;
    }

    .contact-form-row {
        flex-direction: column;
        gap: 16px;
    }

    .contact-form-wrapper .grid-form.for-contact {
        gap: 16px;
    }
}

/* Author avatar wrapper */
.author-avatar-wrapper {
    margin-bottom: 20px;
}

/* About page features list */
.about-features-list {
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Post meta centered layout */
.post-meta-centered {
    justify-content: center;
}

/* Empty state container */
.empty-state-container {
    text-align: center;
    padding: 40px;
}

/* Override Webflow placeholder image for posts without featured images */
.blog-features-small-photo:not([style*="background-image"]) {
    background-image: none !important;
    background-color: var(--bitcoin-dark);
}

.blog-media-image:not([style*="background-image"]) {
    background-color: var(--bitcoin-dark);
}

/* Loader spinner sizing */
.loadin-flex .rotator {
    width: 34px;
    height: auto;
}

/* ============================================
   Mobile Navigation Toggle
   ============================================ */

/* Hide nav menu on mobile by default */
@media screen and (max-width: 991px) {
    .nav-menu.w-nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 15px 20px;
        z-index: 9999;
        flex-direction: column;
    }
    
    .nav-menu.w-nav-menu.w--open {
        display: flex;
    }
    
    .menu-button.w-nav-button {
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        padding: 10px;
        transition: opacity 0.2s ease;
    }
    
    .menu-button.w-nav-button:hover {
        opacity: 0.7;
    }
    
    .menu-button.w-nav-button.w--open {
        opacity: 0.7;
    }
    
    .nav-menu .nav-link {
        width: 100%;
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid #f5f5f5;
    }
    
    .nav-menu .nav-link:last-of-type {
        border-bottom: none;
    }
    
    /* Hide dropdown on mobile */
    .nav-menu .dropdown {
        display: none;
    }
    
    /* Position relative for the navbar container */
    .navbar.w-nav {
        position: relative;
    }
    
    .navigation-bottom {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
}

/* Show menu button only on mobile/tablet */
@media screen and (min-width: 992px) {
    .menu-button.w-nav-button {
        display: none;
    }
    
    .nav-menu.w-nav-menu {
        display: flex !important;
    }
}