/*
Theme Name: Avolunch Media
Theme URI: https://example.com/your-theme
Author: Avolunch Media
Author URI: https://example.com
Description: A brief description of your theme (1-2 sentences)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: avolunch-media
Domain Path: /languages (only if you're including translation files)
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ===== VARIABLES & RESETS ===== */
:root {
      /* Colors */
        --primary: #2563eb;
          --primary-dark: #1d4ed8;
            --secondary: #8b5cf6;
              --dark: #1e293b;
                --darker: #0f172a;
                  --light: #f8fafc;
                    --gray: #94a3b8;
                      --accent: #ec4899;
                        
                          /* Typography */
                            --font-main: 'Tw Cen MT Condensed 2', -apple-system, sans-serif;
                              --font-heading: 'Courier New', 'Inter', sans-serif;
                                --text-base: 1rem;
                                  --text-scale: 1.25;
                                    --text-xs: calc(var(--text-base) / var(--text-scale));
                                      --text-sm: calc(var(--text-base) * var(--text-scale));
                                        --text-md: calc(var(--text-sm) * var(--text-scale));
                                          --text-lg: calc(var(--text-md) * var(--text-scale));
                                            --text-xl: calc(var(--text-lg) * var(--text-scale));
                                              --text-xxl: calc(var(--text-xl) * var(--text-scale));
                                                
                                                  /* Spacing */
                                                    --space-unit: 1rem;
                                                      --space-xs: calc(var(--space-unit) / 2);
                                                        --space-sm: var(--space-unit);
                                                          --space-md: calc(var(--space-unit) * 1.5);
                                                            --space-lg: calc(var(--space-unit) * 2);
                                                              --space-xl: calc(var(--space-unit) * 3);
                                                                
                                                                  /* Borders */
                                                                    --radius-sm: 4px;
                                                                      --radius-md: 8px;
                                                                        --radius-lg: 16px;
                                                                          
                                                                            /* Shadows */
                                                                              --shadow-sm: 0 4px 6px rgb(0, 0,0, 0.1);
                                                                                --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1);
                                                                                  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1);
}

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

html {
      scroll-behavior: smooth;
        scroll-padding-top: 100px;
}

body {
      font-family: var(--font-main);
        line-height: 1.6;
        background-color:black;
        overflow-x: hidden;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5 {
      font-family: var(--font-heading);
        font-weight: 700;
        line-height: 1.2;
            margin-bottom: var(--space-md);
              color:var(--light);
}

h1 {
      font-size: var(--text-xxl);
}

h2 {
      font-size: var(--text-xl);
        position: relative;
          display: inline-block;
}

h2:after {
      content: '';
        position: absolute;
          bottom: -8px;
            left: 0;
              width: 60px;
                height: 4px;
                  background: var(--light);
                    border-radius: 2px;
}

h3 {
      font-size: var(--text-lg);
}

p {
      margin-bottom: var(--space-md);
        color:var(--light);
}
li{
  color: whitesmoke;
}
.services{
  color : white;
}
a {
      color: var(--light);
        text-decoration: none;
          transition: color 0.3s ease;
}

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

/* ===== LAYOUT UTILITIES ===== */
.container {
      width: 80%;
       
          margin: 0 auto;
            padding: 0 var(--space-md);
}

.flex {
      display: flex;
}

.grid {
      display: grid;
}

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

.text-center h2:after {
      left: 50%;
        transform: translateX(-50%);
}

/* ===== SECTIONS ===== */
.post-excerpt {
      margin-bottom: var(--space-md);
        color: var(--gray);
}
.post-excerpt p {
      margin-bottom: var(--space-sm);
}
.post-excerpt a {
  background-color: red;
      color: white ;    
        font-weight: 600;
          transition: color 0.3s ease;
}

.post-excerpt a:hover {
      color: var(--primary-dark);
}     
.post-excerpt h2 {
      margin-bottom: var(--space-xs);
        font-size: var(--text-lg);
}
.post-excerpt h2 a {
      color: var(--primary);
        font-weight: 600;
          transition: color 0.3s ease;
}     
.post-excerpt h2 a:hover {
      color: var(--primary-dark);
}
.blog-post {
          background: black;
            border-radius: 0px ;
}
article.blog-post{
 /*   background-color: black;*/
    border-radius: 0px;
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}
/* Default logo display */
.logo-mobile {
    display: none;
}

        .logo {
            transition: transform 0.3s ease;
        }

        .logo:hover {
            transform: scale(1.05);
        }

        .navbar-nav {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        .nav-item a {
            color: #fff;
            text-decoration: none;
            font-weight: 500;
            font-size: 18px;
            padding: 10px 15px;
            border-radius: 6px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-item a:hover {
            color: red;
            background: rgba(255, 255, 255, 0.1);
        }

        .nav-item a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 5px;
            left: 50%;
            background: red;
            transition: all 0.3s ease;
        }

        .nav-item a:hover:after {
            width: 70%;
            left: 15%;
        }

        .navbar-toggler {
            display: none;
            background: none;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            color: white;
            font-size: 24px;
            width: 50px;
            height: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .navbar-toggler:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: red;
        }

        .navbar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 998;
        }

        /* Demo Content */
        .demo-content {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(0, 0, 0, 0.7);
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
        }

        .demo-content h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #fdbb2d;
        }

        .demo-content p {
            line-height: 1.6;
            margin-bottom: 15px;
            font-size: 18px;
        }

        .features {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
            justify-content: center;
        }

        .feature {
            background: rgba(253, 187, 45, 0.1);
            padding: 20px;
            border-radius: 8px;
            flex: 1 1 300px;
            text-align: center;
        }

        .feature i {
            font-size: 36px;
            color: #fdbb2d;
            margin-bottom: 15px;
        }

        /* Responsive Styles */
        @media (max-width: 992px) {
            .navbar-nav {
                gap: 15px;
            }
            
            .nav-item a {
                font-size: 16px;
                padding: 8px 12px;
            }
        }

        @media (max-width: 768px) {
            .dark.container {
                padding: 15px;
            }
            
            .navbar-nav {
                flex-direction: column;
                gap: 10px;
                position: fixed;
                top: 0;
                right: -300px;
                width: 300px;
                height: 100vh;
                background: rgba(0, 0, 0, 0.95);
                padding: 100px 30px 30px;
                z-index: 999;
                transition: right 0.4s ease;
            }
            
            .navbar-nav.active {
                right: 0;
            }
            
            .navbar-toggler {
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1000;
                position: relative;
            }
            
            .navbar-overlay.active {
                display: block;
            }
            
            .nav-item a {
                display: block;
                padding: 15px;
                font-size: 18px;
                border-bottom: 1px solid red;
            }
            
            .nav-item a:after {
                display: none;
            }
        }

        @media (max-width: 576px) {
            .dark.container {
                border-radius: 8px;
            }
            
            .logo {
                width: 50px;
                height: 50px;
            }
            
            .navbar-toggler {
                width: 45px;
                height: 45px;
                font-size: 20px;
            }
            
            .navbar-nav {
                width: 250px;
                right: -250px;
            }
        }
/* Style all links in post meta */
.post-meta a {
    color: grey;
    text-decoration: none;
}

/* Hover state */
.post-meta a:hover {
    color: white;
    text-decoration: underline;
}

/* Specific meta elements */
.post-meta .author a,
.post-meta .date a,
.post-meta .categories a,
.post-meta .tags a {
    color: grey;
}