@import url('https://fonts.googleapis.com/css?family=Domine:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');

/*
Theme Name: Theme 7 - Timeless Blog Style
Description: A timeless, professional WordPress theme with elegant design inspired by Maria Orozova. Features clean layouts, custom Gutenberg blocks, and mobile-first responsive design.
Author: Pau Inocencio
Version: 1.0.0
Text Domain: tripeak-test-seven
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
*/

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

:root {
    /* Colors */
    --primary-color: #E74C3C;
    --primary-hover: #C0392B;
    --secondary-color: #3498DB;
    --secondary-hover: #2980B9;
    --text-dark: #2D2D2D;
    --text-light: #666;
    --text-white: #fff;
    --bg-light: #F8F9FA;
    --bg-white: #ffffff;
    --border-color: #E5E5E5;
    --footer-bg: #2D2D2D;
    
    /* Button System Colors */
    --button-primary-bg: linear-gradient(135deg, var(--primary-color) 0%, #d63031 100%);
    --button-primary-hover-bg: linear-gradient(135deg, var(--primary-hover) 0%, #c0392b 100%);
    --button-secondary-bg: linear-gradient(135deg, var(--secondary-color) 0%, #2980b9 100%);
    --button-secondary-hover-bg: linear-gradient(135deg, var(--secondary-hover) 0%, #21618c 100%);
    --button-shadow: 0 4px 12px rgba(231, 76, 60, 0.25);
    --button-shadow-hover: 0 8px 25px rgba(231, 76, 60, 0.35);
    --button-border-radius: 8px;
    --button-border-radius-large: 10px;
    --button-border-radius-small: 6px;
    
    /* Typography */
    --font-serif: 'Domine', serif;
    --font-sans: 'Montserrat', sans-serif;
    
    /* Spacing */
    --container-max-width: 1200px;
    --header-height: 110px;
    --mobile-header-height: 100px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-white);
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.1rem; }

p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-normal);
}

a:hover {
    color: var(--primary-hover);
}

a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ==========================================================================
   Layout & Grid System
   ========================================================================== */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.grid {
    display: grid;
    gap: 2rem;
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-bottom: 3rem;
}

.grid.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (max-width: 700px) {
  .grid.grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Header Styles
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    min-height: var(--header-height);
    background: var(--bg-white);
    box-shadow: none;
    border-bottom: 1px solid rgba(45, 45, 45, 0.1);
    margin-top: 0;
    padding-top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.25rem 0;
    min-height: var(--header-height);
}

.site-branding {
    display: flex;
    align-items: center;
}

.site-title a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    transition: color var(--transition-normal);
    text-transform: uppercase;
    line-height: 1.2;
    display: block;
}

.site-title a:hover {
    color: var(--primary-color);
}

.site-description {
    display: none; /* Hide site description as requested */
}

.site-logo img {
    height: 40px;
    width: auto;
}

.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.main-navigation a {
    color: var(--text-dark);
    font-weight: 500;
    transition: color var(--transition-normal);
}

.main-navigation a:hover {
    color: var(--primary-color);
}

.social-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.social-links a {
    font-size: 1.2rem;
    color: var(--text-dark);
    transition: color var(--transition-normal);
}

.social-links a:hover {
    color: var(--primary-color);
}



/* ==========================================================================
   Hero Section
   ========================================================================== */

/* Hero Section: Centered Bottom Content */
.hero-section {
    height: 100vh;
    min-height: 600px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-top: -130px;
    padding-top: 130px;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(45, 45, 45, 0.4);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 2rem;
    margin-bottom: 4rem;
}

.hero-content h1 {
    color: white;
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Featured Stories Section (Magazine Style)
   ========================================================================== */

.image-card-grid {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--bg-light);
  z-index: 1;
}
.image-card-grid > .container {
  position: relative;
  z-index: 2;
}

.image-card-grid .grid-3 {
    gap: 1.5rem;
}

/* Featured Story Cards - Magazine Style */
.image-card-grid .card {
    background: var(--bg-white);
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
    position: relative;
}

.image-card-grid .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border-color: #D0D0D0;
}

.image-card-grid .card-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.image-card-grid .card:hover .card-image {
    transform: scale(1.02);
}

.image-card-grid .card-content {
    padding: 2rem 1.5rem;
    position: relative;
}

.image-card-grid .card-category {
    display: none;
}

/* Hide categories on blog page cards to match featured posts style */
.blog .image-card-grid .card-category,
.home .image-card-grid .card-category {
    display: none;
}

.image-card-grid .card h3 {
    margin-bottom: 1rem;
    color: var(--text-dark);
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 600;
}

.image-card-grid .card h3 a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color var(--transition-normal);
}

.image-card-grid .card h3 a:hover {
    color: var(--primary-color);
}

.image-card-grid .card p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

.image-card-grid .btn {
    display: inline-block;
    background: transparent;
    color: var(--text-dark);
    padding: 0;
    border: none;
    border-bottom: 2px solid var(--text-dark);
    border-radius: 0;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all var(--transition-normal);
    cursor: pointer;
    text-decoration: none;
}

.image-card-grid .btn:hover {
    background: transparent;
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* ==========================================================================
   Generic Card Styles (for Gutenberg Block and other uses)
   ========================================================================== */

.card {
    background: var(--bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 1.5rem;
}

.card-category {
    display: inline-block;
    background: var(--secondary-color);
    color: var(--text-white);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.card h3 {
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.card p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.btn {
    display: inline-block;
    background: var(--primary-color);
    color: var(--text-white);
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 500;
    transition: background var(--transition-normal);
    border: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--primary-hover);
    color: var(--text-white);
}

.btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */

.site-footer {
    background: var(--footer-bg);
    color: var(--text-white);
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
}

/* ==========================================================================
   Blog Styles
   ========================================================================== */

.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.post-meta {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.post-content {
    line-height: 1.8;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1.5rem 0;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 1024px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    
    .main-navigation {
        display: block;
    }
    
    /* Hide desktop menu items on mobile */
    .main-navigation ul {
        display: none;
    }
    
    .header-content {
        padding: 1.75rem 0;
        min-height: var(--mobile-header-height);
    }
    
    .site-header {
        min-height: var(--mobile-header-height);
    }
    
    .site-main {
        padding-top: 120px;
    }
    
    .front-page .site-main {
        padding-top: 0;
    }
    
    .blog .site-main,
    .archive .site-main,
    .search .site-main,
    .single .site-main,
    .page:not(.front-page) .site-main {
        padding-top: 30px;
    }
    
    .mobile-navigation {
        top: var(--mobile-header-height);
        max-height: calc(100vh - var(--mobile-header-height));
    }
    
    .hero-section {
        height: 100vh;
        margin-top: -120px;
        padding-top: 120px;
        align-items: flex-end;
    }
    
    .hero-content {
        margin-bottom: 2rem;
    }
    
    .site-title a {
        font-size: 1.2rem;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    .grid-3 {
        grid-template-columns: 1fr;
    }
    
    /* Featured Stories Mobile Adjustments */
    .image-card-grid .card-image {
        height: 200px;
    }
    
    .image-card-grid .card-content {
        padding: 1.5rem 1rem;
    }
    
    .image-card-grid .card h3 {
        font-size: 1.1rem;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
}

/* ==========================================================================
   Search Form Styles
   ========================================================================== */

.search-form {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.search-input-container {
    position: relative;
    display: flex;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-field {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-right: none;
    font-size: 1rem;
    outline: none;
    transition: border-color var(--transition-normal);
}

.search-field:focus {
    border-color: var(--primary-color);
}

.search-submit {
    background: var(--primary-color);
    color: var(--text-white);
    border: 2px solid var(--primary-color);
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: background var(--transition-normal);
    border-left: none;
}

.search-submit:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.search-submit-text {
    display: none;
}

@media (min-width: 768px) {
    .search-submit-text {
        display: inline;
        margin-left: 0.5rem;
    }
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Mobile Menu Styles (copied from tripeak-test-five)
   ========================================================================== */

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    width: 30px;
    height: 30px;
    position: relative;
    padding: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Remove checkbox styles - no longer needed */

.menu-toggle .sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.menu-toggle .menu-icon {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Create hamburger lines using CSS */
.menu-toggle .menu-icon::before,
.menu-toggle .menu-icon::after,
.menu-toggle .menu-icon {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: currentColor;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

.menu-toggle .menu-icon {
    top: 50%;
    transform: translateY(-50%);
}

.menu-toggle .menu-icon::before {
    top: -8px;
}

.menu-toggle .menu-icon::after {
    bottom: -8px;
}

/* Make sure mobile menu works properly */
@media (max-width: 768px) {
    /* Show menu toggle on mobile */
    .menu-toggle {
        display: block;
        z-index: 1001;
    }
    
    /* Hide menu by default on mobile */
    .primary-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-white);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        padding: 1rem 0;
        border-radius: 0 0 10px 10px;
    }
    
    /* Mobile menu text styling */
    .primary-menu li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .primary-menu a {
        display: block;
        padding: 1rem 2rem;
        color: var(--text-dark);
        text-decoration: none;
        font-weight: 500;
        transition: background-color 0.3s ease;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .primary-menu a:hover {
        background-color: var(--bg-light);
        color: var(--primary-color);
    }
    
    .primary-menu li:last-child a {
        border-bottom: none;
    }
    
    /* Show menu when JavaScript adds is-open class */
    .primary-menu.is-open {
        display: block;
        animation: slideDown 0.3s ease-out;
    }
    
    /* Style for active menu toggle */
    .menu-toggle.is-active {
        background: var(--bg-light);
        border-radius: 5px;
    }
    
    /* Animate hamburger to X when active */
    .menu-toggle.is-active .menu-icon {
        background-color: transparent;
    }
    
    .menu-toggle.is-active .menu-icon::before {
        top: 0;
        transform: rotate(45deg);
    }
    
    .menu-toggle.is-active .menu-icon::after {
        bottom: 0;
        transform: rotate(-45deg);
    }
}

/* Slide down animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Prevent body scroll when menu is open */
body.menu-open {
    overflow: hidden;
}



/* ==========================================================================
   Enhanced Card Styles
   ========================================================================== */

.card-image-wrapper {
    position: relative;
    overflow: hidden;
}

.card-image-wrapper a {
    display: block;
}

.card-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-light);
}

.card-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.card-meta i {
    font-size: 0.8rem;
}

.card-footer {
    margin-top: auto;
    color: var(--secondary-color);
}

.card-category a {
    color: var(--text-white);
    text-decoration: none;
}

.card-category a:hover {
    color: var(--text-white);
    opacity: 0.9;
}

.card-footer .btn {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
  background: transparent;
}
.card-footer .btn:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background: transparent;
}

/* ==========================================================================
   Single Post Styles
   ========================================================================== */

.single-post {
    margin-bottom: 3rem;
}

.post-featured-image {
    margin-bottom: 2rem;
}

.featured-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.post-categories {
    margin-bottom: 1rem;
}

.post-category {
    display: inline-block;
    background: var(--secondary-color);
    color: var(--text-white);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.post-category:hover {
    background: var(--secondary-hover);
    color: var(--text-white);
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-light);
}

.entry-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.entry-meta a {
    color: var(--text-light);
}

.entry-meta a:hover {
    color: var(--primary-color);
}

.post-tags {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--bg-light);
    border-radius: 8px;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tag-link {
    display: inline-block;
    background: var(--bg-white);
    color: var(--text-light);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    text-decoration: none;
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
}

.tag-link:hover {
    background: var(--primary-color);
    color: var(--text-white);
    border-color: var(--primary-color);
}

/* ==========================================================================
   Author Bio Styles
   ========================================================================== */

.author-bio {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--bg-light);
    border-radius: 8px;
    margin: 3rem 0;
}

.author-avatar img {
    border-radius: 50%;
}

.author-info h3 {
    margin-bottom: 0.5rem;
}

.author-info h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

.author-info h3 a:hover {
    color: var(--primary-color);
}

.author-description {
    margin-bottom: 1rem;
    color: var(--text-light);
}

.author-link {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
}

.author-link:hover {
    color: var(--primary-hover);
}

/* ==========================================================================
   Related Posts Styles
   ========================================================================== */

.related-posts {
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 1px solid var(--border-color);
}

.related-posts h3 {
    text-align: center;
    margin-bottom: 2rem;
}

/* ==========================================================================
   404 Error Page Styles
   ========================================================================== */

.error-404-content {
    max-width: 600px;
    margin: 0 auto;
}

.error-number {
    font-size: 8rem;
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.search-form-container {
    margin: 2rem 0;
}

.recent-posts-section,
.categories-section,
.navigation-links {
    margin: 3rem 0;
}

.categories-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.categories-list li {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all var(--transition-normal);
}

.categories-list li:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.categories-list a {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: var(--text-dark);
}

.categories-list a:hover {
    color: var(--primary-color);
}

.post-count {
    color: var(--text-light);
    font-size: 0.9rem;
}

.nav-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Header Scroll Effects
   ========================================================================== */

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.site-header.header-hidden {
    transform: translateY(-100%);
}

/* ==========================================================================
   Page Layout Adjustments
   ========================================================================== */

.site-main {
    padding-top: 130px; /* Account for fixed header */
    min-height: calc(100vh - 130px);
}

/* Remove top padding on front page with hero section */
.front-page .site-main {
    padding-top: 130px;
}

/* Make header transparent on front page */
.front-page .site-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

/* Make header text white on front page for better visibility */
.front-page .site-title a {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.front-page .site-title a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.front-page .main-navigation a {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.front-page .main-navigation a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.front-page .social-links a {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.front-page .social-links a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.front-page .mobile-menu-toggle {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Ensure blog page and other pages maintain proper padding */
.blog .site-main,
.archive .site-main,
.search .site-main,
.single .site-main,
.page:not(.front-page) .site-main {
    padding-top: 30px;
}

.single-post-layout,
.page-layout {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

/* Legacy blog post item styles - now using card grid layout */
.blog-post-item {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.blog-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Blog, Archive, and Search pages using magazine-style card grid layout */
.blog .image-card-grid,
.home .image-card-grid,
.archive .image-card-grid,
.search .image-card-grid {
    padding: 4rem 0;
    background: var(--bg-light);
}

/* Hide categories on all listing pages to match featured posts style */
.archive .image-card-grid .card-category,
.search .image-card-grid .card-category {
    display: none;
}

/* ==========================================================================
   Pagination Styles
   ========================================================================== */

.pagination {
    margin: 3rem 0;
    text-align: center;
}

.page-numbers {
    display: inline-flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}

.page-numbers a,
.page-numbers span {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-light);
    text-decoration: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: all var(--transition-normal);
}

.page-numbers a:hover,
.page-numbers .current {
    background: var(--primary-color);
    color: var(--text-white);
    border-color: var(--primary-color);
}

/* ==========================================================================
   Enhanced Mobile Styles
   ========================================================================== */

@media (max-width: 768px) {
    .author-bio {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }
    
    .entry-meta {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .error-number {
        font-size: 4rem;
    }
    
    .nav-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .nav-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    
         .single-post-layout,
     .page-layout {
         padding: 1rem;
     }
    
    .categories-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .site-header,
    .site-footer,
    .mobile-navigation,
    .social-links,
    .search-form-container,
    .author-bio,
    .related-posts {
        display: none;
    }
    
    .site-main {
        padding-top: 0;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
}

/* ==========================================================================
   Custom Gutenberg Block Styles
   ========================================================================== */

/* Card Grid Block Editor Styles */
.tripeak-card-grid-editor {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 20px;
    background: #f9f9f9;
}

.editor-card-grid .editor-card {
    background: white;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 15px;
    position: relative;
}

.editor-card-grid .editor-card:hover {
    border-color: #007cba;
    box-shadow: 0 2px 8px rgba(0, 124, 186, 0.15);
}

/* Custom Card Grid Frontend Styles */
.custom-card-grid {
    margin: 2rem 0;
}

.custom-card-grid .grid {
    display: grid;
    gap: 2rem;
}

.custom-card-grid .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

@media (max-width: 768px) {
    .custom-card-grid .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Custom Card Grid: black only, with hover color */
.custom-card-grid .card {
  background: #111;
  color: var(--text-white);
  border: 1.5px solid #111;
  border-radius: 8px;
  box-shadow: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.custom-card-grid .card h3,
.custom-card-grid .card-title,
.custom-card-grid .card h3 a {
  color: var(--text-white);
}
.custom-card-grid .card h3 a:hover,
.custom-card-grid .card-title a:hover {
  color: var(--primary-color);
}
.custom-card-grid .card .btn {
  background: var(--secondary-color);
  color: var(--text-white);
  border: none;
}
.custom-card-grid .card .btn:hover {
  background: var(--secondary-color);
  color: var(--text-white);
  border: none;
}
.custom-card-grid .card:hover {
  background: var(--primary-color);
  color: var(--text-white);
  border-color: var(--primary-color);
}
.custom-card-grid .card:hover h3,
.custom-card-grid .card:hover .card-title,
.custom-card-grid .card:hover h3 a {
  color: var(--text-white);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } 

/* Hide page titles on all pages except the blog page (posts page) */
.page:not(.blog):not(.home):not(.front-page) h1.page-title,
.page:not(.blog):not(.home):not(.front-page) h1.entry-title,
.front-page h1.page-title,
.front-page h1.entry-title {
    display: none;
} 

/* Remove padding from page content section */
.page-content {
    padding: 0 !important;
} 

/* Indented and readable lists in content */
.entry-content ul,
.entry-content ol {
  margin-left: 2rem;
  margin-bottom: 1.5rem;
}
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
}
.entry-content li {
  margin-bottom: 0.4em;
}

/* Visually appealing blockquote styles */
.entry-content blockquote {
  position: relative;
  margin: 2.5rem 0;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
  background: linear-gradient(90deg, var(--bg-light) 80%, #eaf6fb 100%);
  border-left: 6px solid var(--primary-color);
  border-image: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  border-image-slice: 1;
  border-radius: 0 1.5rem 1.5rem 0;
  font-style: italic;
  color: var(--text-dark);
  font-size: 1.18rem;
  box-shadow: 0 2px 16px rgba(52,152,219,0.06);
}
.entry-content blockquote:before {
  content: '\201C';
  position: absolute;
  left: 1.1rem;
  top: 0.7rem;
  font-size: 3.5rem;
  color: var(--primary-color);
  opacity: 0.18;
  font-family: serif;
  line-height: 1;
  pointer-events: none;
}
.entry-content blockquote p {
  margin: 0;
  font-style: inherit;
}
.entry-content blockquote cite {
  display: block;
  margin-top: 1.2rem;
  font-size: 1rem;
  color: #888;
  font-style: normal;
  text-align: right;
}
@media (max-width: 600px) {
  .entry-content blockquote {
    padding: 1.1rem 1.2rem 1.1rem 1.5rem;
    font-size: 1.05rem;
  }
  .entry-content blockquote:before {
    left: 0.5rem;
    top: 0.3rem;
    font-size: 2.2rem;
  }
}

/* Visually appealing inline code and code block styles */
.entry-content code {
  font-family: 'Fira Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
  background: #f4f4f7;
  color: var(--primary-color);
  padding: 0.18em 0.45em;
  border-radius: 4px;
  font-size: 0.98em;
  border: 1px solid #ececec;
  box-shadow: 0 1px 2px rgba(52,152,219,0.04);
  word-break: break-word;
}
.entry-content pre {
  background: linear-gradient(90deg, var(--bg-light) 80%, #eaf6fb 100%);
  color: #222;
  font-family: 'Fira Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
  font-size: 1.01em;
  border-radius: 8px;
  border: 1.5px solid var(--border-color);
  padding: 1.2em 1.5em;
  margin: 2.2rem 0;
  overflow-x: auto;
  box-shadow: 0 2px 16px rgba(52,152,219,0.06);
  position: relative;
}
.entry-content pre code {
  background: none;
  color: inherit;
  padding: 0;
  border: none;
  font-size: inherit;
  box-shadow: none;
}
@media (max-width: 600px) {
  .entry-content pre {
    padding: 0.8em 0.6em;
    font-size: 0.97em;
  }
}

/* Padding for images with no caption */
.entry-content img:not(figure img) {
  display: block;
  margin: 2.2rem auto;
  padding: 0.7rem;
  background: #fafbfc;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(52,152,219,0.07);
  max-width: 100%;
  height: auto;
}

/* Image captions styling */
.entry-content figure figcaption {
  font-style: italic;
  color: #555;
  margin-top: 0.7rem;
  margin-bottom: 2.2rem;
  text-align: center;
  font-size: 1.04em;
  line-height: 1.5;
}

/* Visually appealing separators (hr) */
.entry-content hr {
  border: none;
  height: 4px;
  width: 80px;
  margin: 3.5rem auto;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  opacity: 0.85;
  box-shadow: 0 2px 12px rgba(52,152,219,0.08);
  position: relative;
}

/* Add bottom margin to embeds for better spacing */
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content .wp-block-embed {
  display: block;
  margin-bottom: 2.5rem;
  max-width: 100%;
}

/* ==========================================================================
   Custom Footer Grid Layout
   ========================================================================== */
.footer-content.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-widget-area h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-white);
}

.footer-widget-area {
    color: #eee;
}

.footer-social-links.spaced-icons a {
    margin-right: 1.25rem;
    font-size: 1.3rem;
    color: var(--text-white);
    transition: color var(--transition-fast);
}
.footer-social-links.spaced-icons a:last-child {
    margin-right: 0;
}
.footer-social-links.spaced-icons a:hover {
    color: var(--primary-color);
}

.footer-social-links.spaced-icons a i,
.footer-social-links.spaced-icons svg {
    font-size: 1.3rem;
    vertical-align: middle;
    display: inline-block;
}

.recent-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.recent-posts-list li {
    margin-bottom: 0.75rem;
}
.recent-posts-list li:last-child {
    margin-bottom: 0;
}
.recent-posts-list a {
    color: var(--text-white);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.recent-posts-list a:hover {
    color: var(--primary-color);
}

.footer-text {
    color: #ccc;
    font-size: 0.95rem;
    margin-top: 2rem;
}



@media (max-width: 900px) {
    .footer-content.footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .footer-content.footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .footer-widget-area {
        margin-bottom: 1.5rem;
    }
    .footer-widget-area:last-child {
        margin-bottom: 0;
    }
} 

/* Footer menu styled like recent posts */
#footer-menu.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
#footer-menu.menu li {
    margin-bottom: 0.75rem;
}
#footer-menu.menu li:last-child {
    margin-bottom: 0;
}
#footer-menu.menu a {
    color: var(--text-white);
    text-decoration: none;
    transition: color var(--transition-fast);
}
#footer-menu.menu a:hover {
    color: var(--primary-color);
} 

/* Sticky Site Header - Fallback for older browsers */
@supports not (position: sticky) {
    .site-header {
        position: fixed;
    }
}

/* Ensure main content is not hidden under sticky header */
.site-main {
    padding-top: 130px; /* Already set, adjust if header height changes */
} 

/* Fix admin bar spacing for consistent layout */
.admin-bar .site-header {
    top: 32px;
}

/* Admin bar adjustments for front page */
.front-page.admin-bar .site-header {
    top: 32px !important;
}

.front-page.admin-bar .hero-section {
    margin-top: -162px; /* -130px - 32px admin bar */
    padding-top: 162px; /* 130px + 32px admin bar */
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
    
    .front-page.admin-bar .site-header {
        top: 46px !important;
    }
    
    .front-page.admin-bar .hero-section {
        margin-top: -166px; /* -120px - 46px admin bar */
        padding-top: 166px; /* 120px + 46px admin bar */
    }
} 

/* Improved Unique Blog Pagination Styles */
.pagination-unique {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
  margin: 6.5rem auto 0 auto;
  padding: 1.5rem 0 0 0;
  list-style: none;
  width: 100%;
  max-width: 100vw;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
  border-radius: 2rem;
  box-shadow: 0 8px 32px rgba(52,152,219,0.08), 0 1.5px 8px rgba(231,76,60,0.07);
  padding-top: 2.5rem;
}
.pagination-unique .page-numbers {
  display: inline-block;
  min-width: 44px;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  background: var(--bg-white);
  color: var(--text-dark);
  border: 1.5px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.07);
  font-weight: 600;
  font-size: 1.08rem;
  transition: all 0.18s cubic-bezier(.4,1.3,.6,1);
  margin: 0 0.1rem;
  position: relative;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.pagination-unique .page-numbers.current,
.pagination-unique .page-numbers:hover {
  background: linear-gradient(90deg, var(--primary-color) 60%, var(--secondary-color) 100%);
  color: var(--text-white);
  border-color: var(--primary-color);
  box-shadow: 0 4px 16px rgba(231, 76, 60, 0.13), 0 1.5px 8px rgba(52, 152, 219, 0.09);
  transform: scale(1.10) translateY(-2px);
  z-index: 2;
}
.pagination-unique .page-numbers.prev,
.pagination-unique .page-numbers.next {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--bg-light);
  color: var(--primary-color);
  border: 1.5px solid var(--primary-color);
  box-shadow: none;
}
.pagination-unique .page-numbers.prev:hover,
.pagination-unique .page-numbers.next:hover {
  background: var(--primary-color);
  color: var(--text-white);
  border-color: var(--primary-color);
  transform: scale(1.12) translateY(-2px);
}
@media (max-width: 600px) {
  .pagination-unique {
    padding: 1rem 0 0 0;
    gap: 0.5rem;
  }
  .pagination-unique .page-numbers {
    padding: 0.5rem 0.7rem;
    font-size: 0.97rem;
  }
} 

/* Card titles use secondary color - Override default card styles */
.card h3,
.card-title,
.card h3 a {
  color: var(--secondary-color);
}
.card h3 a:hover,
.card-title a:hover {
  color: var(--primary-color);
}

/* Body/content links use secondary color except main nav */
.entry-content a {
  color: var(--secondary-color);
  text-decoration: underline;
  transition: color var(--transition-fast);
}
.entry-content a:hover {
  color: var(--primary-color);
}

.main-navigation a {
  /* keep main nav links as is */
} 

.wp-block-buttons > .wp-block-button a {
  text-decoration: none !important;
} 

.wp-block-buttons > .wp-block-button {
  font-family: var(--font-sans);
} 

/* ==========================================================================
   WordPress Block Button Styles - Enhanced & Visually Appealing
   ========================================================================== */

/* Base WordPress Block Button Container */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
    align-items: center;
}

.wp-block-buttons.aligncenter {
    justify-content: center;
}

.wp-block-buttons.alignleft {
    justify-content: flex-start;
}

.wp-block-buttons.alignright {
    justify-content: flex-end;
}

/* Individual Button Block */
.wp-block-button {
    margin: 0;
    display: inline-block;
}

/* Primary Button Link Styles */
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    text-align: center;
    color: var(--text-white) !important;
    background: var(--button-primary-bg);
    border: 2px solid var(--primary-color);
    border-radius: var(--button-border-radius);
    box-shadow: var(--button-shadow);
    transition: var(--transition-smooth);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-width: 120px;
    white-space: nowrap;
}

/* Button Hover Effects */
.wp-block-button__link:hover {
    background: var(--button-primary-hover-bg);
    border-color: var(--primary-hover);
    color: var(--text-white) !important;
    transform: translateY(-2px);
    box-shadow: var(--button-shadow-hover);
}

/* Button Focus States for Accessibility */
.wp-block-button__link:focus {
    outline: 3px solid rgba(231, 76, 60, 0.3);
    outline-offset: 2px;
    background: var(--button-primary-hover-bg);
    border-color: var(--primary-hover);
}

/* Button Active State */
.wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

/* Outline Button Style */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color);
    box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--primary-color);
    color: var(--text-white) !important;
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.25);
}

/* Secondary Button Style */
.wp-block-button.is-style-secondary .wp-block-button__link {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #2980b9 100%);
    border-color: var(--secondary-color);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
    background: linear-gradient(135deg, var(--secondary-hover) 0%, #21618c 100%);
    border-color: var(--secondary-hover);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.35);
}

/* Ghost/Text Button Style */
.wp-block-button.is-style-ghost .wp-block-button__link {
    background: transparent;
    color: var(--primary-color) !important;
    border: 2px solid transparent;
    box-shadow: none;
    padding: 0.75rem 1.5rem;
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
    background: rgba(231, 76, 60, 0.1);
    border-color: transparent;
    color: var(--primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15);
}

/* Large Button Size */
.wp-block-button.is-style-large .wp-block-button__link {
    padding: 1.125rem 2.25rem;
    font-size: 1.125rem;
    border-radius: var(--button-border-radius-large);
    min-width: 160px;
}

/* Small Button Size */
.wp-block-button.is-style-small .wp-block-button__link {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    border-radius: var(--button-border-radius-small);
    min-width: 100px;
}

/* Button with Icon Support */
.wp-block-button__link svg,
.wp-block-button__link i {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

/* Button with Loading State */
.wp-block-button.is-loading .wp-block-button__link {
    position: relative;
    color: transparent !important;
}

.wp-block-button.is-loading .wp-block-button__link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: button-spin 1s linear infinite;
}

@keyframes button-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Disabled Button State */
.wp-block-button__link:disabled,
.wp-block-button__link[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Button Group Styles */
.wp-block-buttons.is-vertical {
    flex-direction: column;
    align-items: stretch;
}

.wp-block-buttons.is-vertical .wp-block-button {
    width: 100%;
}

.wp-block-buttons.is-vertical .wp-block-button__link {
    width: 100%;
    justify-content: center;
}

/* Responsive Button Adjustments */
@media (max-width: 768px) {
    .wp-block-buttons {
        gap: 0.75rem;
        margin: 1.5rem 0;
    }
    
    .wp-block-button__link {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
        min-width: 100px;
    }
    
    .wp-block-button.is-style-large .wp-block-button__link {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
    
    .wp-block-button.is-style-small .wp-block-button__link {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    /* Stack buttons vertically on very small screens */
    @media (max-width: 480px) {
        .wp-block-buttons:not(.is-vertical) {
            flex-direction: column;
            align-items: stretch;
        }
        
        .wp-block-buttons:not(.is-vertical) .wp-block-button {
            width: 100%;
        }
        
        .wp-block-buttons:not(.is-vertical) .wp-block-button__link {
            width: 100%;
            justify-content: center;
        }
    }
}

/* Button Animation on Page Load */
.wp-block-button {
    animation: button-fade-in 0.6s ease-out;
}

@keyframes button-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Button Variations */
.wp-block-button.is-style-gradient .wp-block-button__link {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-color: transparent;
}

.wp-block-button.is-style-gradient .wp-block-button__link:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--secondary-hover) 100%);
    transform: translateY(-2px) scale(1.02);
}

.wp-block-button.is-style-soft .wp-block-button__link {
    background: rgba(231, 76, 60, 0.1);
    color: var(--primary-color) !important;
    border-color: transparent;
    box-shadow: none;
}

.wp-block-button.is-style-soft .wp-block-button__link:hover {
    background: var(--primary-color);
    color: var(--text-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.25);
}

/* Button with Border Animation */
.wp-block-button.is-style-border-animate .wp-block-button__link {
    position: relative;
    overflow: hidden;
    background: transparent;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color);
    z-index: 1;
}

.wp-block-button.is-style-border-animate .wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    transition: left 0.3s ease;
    z-index: -1;
}

.wp-block-button.is-style-border-animate .wp-block-button__link:hover::before {
    left: 0;
}

.wp-block-button.is-style-border-animate .wp-block-button__link:hover {
    color: var(--text-white) !important;
    transform: translateY(-2px);
}

/* Remove default WordPress button styles that might conflict */
.wp-block-button__link:not(.has-background) {
    background: var(--primary-color);
}

.wp-block-button__link:not(.has-text-color) {
    color: var(--text-white) !important;
}

/* Ensure buttons work well in content areas */
.entry-content .wp-block-buttons,
.wp-block-post-content .wp-block-buttons {
    margin: 2rem 0;
}

/* Button spacing in different contexts */
.wp-block-buttons + .wp-block-buttons {
    margin-top: 1rem;
}

/* Enhanced focus styles for better accessibility */
.wp-block-button__link:focus-visible {
    outline: 3px solid rgba(231, 76, 60, 0.4);
    outline-offset: 3px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wp-block-button__link {
        border-width: 3px;
    }
    
    .wp-block-button__link:focus {
        outline-width: 4px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .wp-block-button__link,
    .wp-block-button__link:hover,
    .wp-block-button__link:focus {
        transition: none;
        transform: none;
    }
    
    .wp-block-button {
        animation: none;
    }
    
    .wp-block-button.is-loading .wp-block-button__link::after {
        animation: none;
    }
}

/* ==========================================================================
   WordPress Block Table Styles
   ========================================================================== */

.wp-block-table {
    margin-bottom: 2rem;
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--button-border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.wp-block-table th {
    background-color: var(--bg-light);
    font-weight: 600;
    color: var(--text-dark);
    font-family: var(--font-sans);
}

.wp-block-table td {
    background-color: var(--bg-white);
    color: var(--text-dark);
}

.wp-block-table tr:hover td {
    background-color: rgba(231, 76, 60, 0.05);
}

/* Table alignment options */
.wp-block-table.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-table.alignfull {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Responsive table */
@media (max-width: 768px) {
    .wp-block-table {
        margin-bottom: 1.5rem;
        font-size: 0.9rem;
    }
    
    .wp-block-table th,
    .wp-block-table td {
        padding: 0.5rem 0.75rem;
    }
}

/* ==========================================================================
   WordPress Block Image Styles
   ========================================================================== */

.wp-block-image {
    margin-bottom: 2rem;
}

/* ==========================================================================
   WordPress Block Gallery Styles
   ========================================================================== */

.wp-block-gallery {
    margin-bottom: 2rem;
}

/* Gallery without caption - extra margin bottom */
.wp-block-gallery:not(:has(figcaption)) {
    margin-bottom: 2.5rem;
}

/* Gallery with caption - remove margin between gallery and caption */
.wp-block-gallery:has(figcaption) {
    margin-bottom: 0;
}

/* Gallery caption positioning */
.wp-block-gallery figcaption {
    margin-top: 0;
    margin-bottom: 2rem;
}

.wp-block-image img {
    border-radius: var(--button-border-radius);
    margin-bottom: 1rem;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Image with caption */
.wp-block-image figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: left;
    font-style: italic;
    line-height: 1.4;
}

/* Image without caption - extra margin bottom */
.wp-block-image:not(:has(figcaption)) img {
    margin-bottom: 1.5rem;
}

/* Responsive image adjustments */
@media (max-width: 768px) {
    .wp-block-image {
        margin-bottom: 1.5rem;
    }
    
    .wp-block-image img {
        margin-bottom: 0.75rem;
        border-radius: var(--button-border-radius-small);
    }
    
    .wp-block-image:not(:has(figcaption)) img {
        margin-bottom: 1rem;
    }
    
    .wp-block-image figcaption {
        font-size: 0.8rem;
        margin-top: 0.25rem;
    }
    
    /* Gallery responsive adjustments */
    .wp-block-gallery {
        margin-bottom: 1.5rem;
    }
    
    .wp-block-gallery:not(:has(figcaption)) {
        margin-bottom: 2rem;
    }
    
    .wp-block-gallery figcaption {
        margin-bottom: 1.5rem;
    }
}

/* ==========================================================================
   WordPress Block Caption Styles - Universal Caption Styling
   ========================================================================== */

/* All WordPress block captions */
.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-block-embed figcaption,
.wp-block-video figcaption,
.wp-block-audio figcaption,
.wp-block-file figcaption,
.wp-block-media-text figcaption,
.wp-block-cover figcaption,
.wp-element-caption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: left !important;
    font-style: italic;
    line-height: 1.4;
    font-family: var(--font-serif);
}

/* Gallery captions */
.wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-gallery .blocks-gallery-caption {
    margin-top: 0;
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: left !important;
    font-style: italic;
    line-height: 1.4;
    font-family: var(--font-serif);
}

/* Embed captions */
.wp-block-embed .wp-block-embed__caption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: left !important;
    font-style: italic;
    line-height: 1.4;
    font-family: var(--font-serif);
}

/* Video and audio captions */
.wp-block-video .wp-block-video__caption,
.wp-block-audio .wp-block-audio__caption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: left !important;
    font-style: italic;
    line-height: 1.4;
    font-family: var(--font-serif);
}

/* File block captions */
.wp-block-file .wp-block-file__caption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: left !important;
    font-style: italic;
    line-height: 1.4;
    font-family: var(--font-serif);
}

/* Media text captions */
.wp-block-media-text .wp-block-media-text__caption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: left !important;
    font-style: italic;
    line-height: 1.4;
    font-family: var(--font-serif);
}

/* Cover block captions */
.wp-block-cover .wp-block-cover__caption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: left !important;
    font-style: italic;
    line-height: 1.4;
    font-family: var(--font-serif);
}

/* Responsive caption adjustments */
@media (max-width: 768px) {
    .wp-block-image figcaption,
    .wp-block-gallery figcaption,
    .wp-block-embed figcaption,
    .wp-block-video figcaption,
    .wp-block-audio figcaption,
    .wp-block-file figcaption,
    .wp-block-media-text figcaption,
    .wp-block-cover figcaption,
    .wp-element-caption,
    .wp-block-gallery .blocks-gallery-item figcaption,
    .wp-block-gallery .blocks-gallery-caption,
    .wp-block-embed .wp-block-embed__caption,
    .wp-block-video .wp-block-video__caption,
    .wp-block-audio .wp-block-audio__caption,
    .wp-block-file .wp-block-file__caption,
    .wp-block-media-text .wp-block-media-text__caption,
    .wp-block-cover .wp-block-cover__caption {
        font-size: 0.8rem;
        margin-top: 0.25rem;
        text-align: left !important;
    }
}

/* Override WordPress default caption styles */
.entry-content figcaption,
.post-content figcaption,
.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-block-embed figcaption,
.wp-block-video figcaption,
.wp-block-audio figcaption,
.wp-block-file figcaption,
.wp-block-media-text figcaption,
.wp-block-cover figcaption,
.wp-element-caption {
    text-align: left !important;
    text-align-last: left !important;
}

/* Additional specificity for WordPress core styles */
.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-block-embed figcaption,
.wp-block-video figcaption,
.wp-block-audio figcaption,
.wp-block-file figcaption,
.wp-block-media-text figcaption,
.wp-block-cover figcaption,
.wp-element-caption,
.wp-block-image .wp-element-caption,
.wp-block-gallery .wp-element-caption,
.wp-block-embed .wp-element-caption {
    text-align: left !important;
    text-align-last: left !important;
    justify-content: flex-start !important;
}

/* ==========================================================================
   CSS Fixes Summary
   ========================================================================== 
   
   This file has been optimized with the following improvements:
   
   1. Added CSS Custom Properties (variables) for consistent theming
   2. Fixed conflicting header positioning (sticky vs relative)
   3. Consolidated duplicate CSS rules
   4. Updated all color references to use CSS variables
   5. Improved accessibility with proper focus states
   6. Fixed mobile responsive header height inconsistencies
   7. Standardized transition timing across components
   8. Removed redundant style declarations
   9. Improved maintainability and readability
   
   ========================================================================== */