/*
Theme Name: Twenty Twenty-One Child - Hammer Down Headlines
Description: Child theme of Twenty Twenty-One for Hammer Down Headlines branding
Author: Your Name
Template: twentytwentyone
Version: 1.0.0
*/

/* Your custom CSS will go below this line */

/*
Theme Name: Twenty Twenty-One Child - Hammer Down Headlines
Description: Child theme of Twenty Twenty-One for Hammer Down Headlines branding
Author: Your Name
Template: twentytwentyone
Version: 1.0.0
*/

/* =============================================================================
   HAMMER DOWN HEADLINES CUSTOM STYLING
   ============================================================================= */

/* Custom Color Variables */
:root {
    --hammer-orange: #CC4400;
    --hammer-orange-light: #E55A1A;
    --hammer-brown: #8B4513;
    --hammer-brown-dark: #654321;
    --hammer-text-dark: #2C1810;
    --hammer-cream: #F5F5DC;
}

/* =============================================================================
   GLOBAL STYLING
   ============================================================================= */

/* Body and General */
body {
    background: linear-gradient(135deg, var(--hammer-orange) 0%, var(--hammer-brown) 100%);
    min-height: 100vh;
    font-family: 'Georgia', serif;
    color: var(--hammer-text-dark);
}

.wp-site-blocks {
    background: var(--hammer-cream);
    margin: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    overflow: hidden;
}

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

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia', serif;
    font-weight: bold;
    color: var(--hammer-brown-dark);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 0.8rem;
}

/* Site Title */
.wp-block-site-title a {
    font-family: 'Georgia', serif;
    font-weight: bold;
    font-size: 2rem;
    color: var(--hammer-cream) !important;
    text-decoration: none !important;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.8);
    position: relative;
    z-index: 2;
}

/* =============================================================================
   HEADER STYLING
   ============================================================================= */

.wp-block-template-part header,
.site-header {
    background: 
        linear-gradient(rgba(204, 68, 0, 0.8), rgba(139, 69, 19, 0.8)),
        url('https://hammerdownheadlines.com/wp-content/uploads/2025/06/InShot_20250621_141910154.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px 0;
    border-bottom: 4px solid var(--hammer-brown);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    position: relative;
}

/* Navigation */
.wp-block-navigation ul {
    background: transparent;
    position: relative;
    z-index: 2;
}

.wp-block-navigation .wp-block-navigation-item a {
    color: var(--hammer-cream) !important;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    background: rgba(139, 69, 19, 0.3);
    backdrop-filter: blur(5px);
}

.wp-block-navigation .wp-block-navigation-item a:hover {
    background: var(--hammer-brown);
    color: var(--hammer-cream) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* =============================================================================
   CONTENT STYLING
   ============================================================================= */

/* Main Content Container */
main {
    padding: 40px;
    background: var(--hammer-cream);
}

/* Post/Page Content */
.entry-content,
.wp-block-post-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    border: 2px solid var(--hammer-orange);
}

/* =============================================================================
   BLOG/NEWS PAGE STYLING
   ============================================================================= */

/* Post Listings */
.wp-block-post {
    background: white;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    border-left: 6px solid var(--hammer-orange);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Post Titles */
.wp-block-post-title a {
    color: var(--hammer-brown-dark) !important;
    text-decoration: none;
    font-weight: bold;
}

.wp-block-post-title a:hover {
    color: var(--hammer-orange) !important;
}

/* Post Meta */
.wp-block-post-date,
.wp-block-post-author {
    color: var(--hammer-brown);
    font-weight: bold;
    font-size: 0.9rem;
}

/* Post Excerpts */
.wp-block-post-excerpt {
    color: var(--hammer-text-dark);
    line-height: 1.6;
}

/* =============================================================================
   BUTTONS AND LINKS
   ============================================================================= */

/* Primary Buttons */
.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"] {
    background: linear-gradient(135deg, var(--hammer-orange) 0%, var(--hammer-brown) 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important;
}

/* Regular Links */
a {
    color: var(--hammer-orange);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--hammer-brown);
}

/* =============================================================================
   FOOTER STYLING
   ============================================================================= */

footer,
.wp-block-template-part:last-child {
    background: linear-gradient(135deg, var(--hammer-brown-dark) 0%, var(--hammer-brown) 100%);
    color: var(--hammer-cream);
    padding: 30px;
    text-align: center;
    border-top: 4px solid var(--hammer-orange);
}

footer a {
    color: var(--hammer-cream);
}

footer a:hover {
    color: var(--hammer-orange-light);
}

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

@media (max-width: 768px) {
    .wp-site-blocks {
        margin: 10px;
        border-radius: 10px;
    }
    
    main {
        padding: 20px;
    }
    
    .entry-content,
    .wp-block-post-content,
    .wp-block-post {
        padding: 20px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    .wp-block-site-title a {
        font-size: 1.5rem;
    }
}

/* =============================================================================
   CUSTOM ENHANCEMENTS
   ============================================================================= */

/* Add subtle texture to main areas */
.wp-site-blocks::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="2" cy="2" r="1" fill="%23000000" opacity="0.02"/></svg>');
    pointer-events: none;
    z-index: 1;
}

/* Ensure content stays above texture */
.wp-site-blocks > * {
    position: relative;
    z-index: 2;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--hammer-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--hammer-orange);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--hammer-brown);
}