/* Hand-drawn styling effects */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

:root {
    --hand-drawn-font: 'Kalam', cursive;
    --sketch-primary: #2c3e50;
    --sketch-secondary: #3498db;
    --sketch-accent: #e74c3c;
    --sketch-stroke: 2px;
}

/* Hand-drawn font application */
.hand-drawn-text,
.hero-title,
.section-title,
.building-card h3,
.service-card h3,
.blog-content h3,
.article-title,
.thanks-title,
.legal-title {
    font-family: var(--hand-drawn-font);
    font-weight: 400;
}

/* Sketch-style borders and elements */
.building-card,
.service-card,
.testimonial-card,
.blog-card,
.newsletter-form,
.contact-form,
.cookie-banner,
.legal-content {
    position: relative;
}

.building-card::before,
.service-card::before,
.testimonial-card::before,
.blog-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: transparent;
    border: 2px solid var(--sketch-primary);
    border-radius: 12px;
    opacity: 0.3;
    transform: rotate(0.5deg);
    z-index: -1;
}

.building-card::after,
.service-card::after,
.testimonial-card::after,
.blog-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: transparent;
    border: 1px solid var(--sketch-secondary);
    border-radius: 10px;
    opacity: 0.5;
    transform: rotate(-0.3deg);
    z-index: -1;
}

/* Hand-drawn button effects */
.btn {
    position: relative;
    overflow: hidden;
    border: 2px solid currentColor;
    background: linear-gradient(45deg, transparent 48%, currentColor 48%, currentColor 52%, transparent 52%);
    background-size: 6px 6px;
    background-repeat: repeat;
    background-position: 0 0;
    transition: all 0.3s ease;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: currentColor;
    opacity: 0.1;
    transform: skew(2deg);
    transition: transform 0.3s ease;
}

.btn:hover::before {
    transform: skew(-2deg);
}

.btn-primary {
    background: var(--sketch-secondary);
    color: white;
    border-color: var(--sketch-primary);
}

.btn-secondary {
    background: var(--sketch-primary);
    color: white;
    border-color: var(--sketch-secondary);
}

.btn-tertiary {
    background: transparent;
    color: var(--sketch-secondary);
    border-color: var(--sketch-secondary);
}

/* Sketch-style underlines */
.nav-link::after {
    background: linear-gradient(90deg, 
        var(--sketch-secondary) 0%, 
        transparent 20%, 
        var(--sketch-secondary) 40%, 
        transparent 60%, 
        var(--sketch-secondary) 80%, 
        transparent 100%);
    height: 3px;
    transform: skew(-12deg);
}

/* Hand-drawn dividers */
.section-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--sketch-accent) 20%, 
        var(--sketch-secondary) 50%, 
        var(--sketch-accent) 80%, 
        transparent 100%);
    margin: 1rem auto;
    transform: rotate(1deg);
}

/* Sketch-style form elements */
.form-group input,
.form-group textarea {
    border: 2px solid var(--sketch-primary);
    border-radius: 8px;
    background: #fafafa;
    position: relative;
}

.form-group input::before,
.form-group textarea::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid var(--sketch-secondary);
    border-radius: 6px;
    opacity: 0.5;
    transform: rotate(0.5deg);
    pointer-events: none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--sketch-secondary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    transform: rotate(-0.2deg);
}

/* Sketch-style cards with hand-drawn effects */
.building-card:hover,
.service-card:hover,
.testimonial-card:hover,
.blog-card:hover {
    transform: translateY(-5px) rotate(0.5deg);
}

.building-card:hover::before,
.service-card:hover::before,
.testimonial-card:hover::before,
.blog-card:hover::before {
    transform: rotate(1deg);
    opacity: 0.5;
}

/* Sketch-style icons and images */
.service-icon,
.testimonial-icon,
.blog-icon,
.contact-icon {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
    transition: filter 0.3s ease;
}

.service-icon:hover,
.testimonial-icon:hover,
.blog-icon:hover,
.contact-icon:hover {
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2));
}

/* Hand-drawn social media icons */
.social-links a {
    border: 2px solid var(--sketch-secondary);
    background: linear-gradient(45deg, var(--sketch-secondary) 25%, transparent 25%);
    background-size: 4px 4px;
    position: relative;
}

.social-links a::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: var(--sketch-secondary);
    border-radius: 50%;
    opacity: 0.8;
    transform: rotate(3deg);
}

.social-links a:hover::before {
    transform: rotate(-3deg);
    opacity: 1;
}

/* Sketch-style header */
.header {
    border-bottom: 3px solid var(--sketch-primary);
    position: relative;
}

.header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--sketch-secondary) 25%, 
        var(--sketch-accent) 50%, 
        var(--sketch-secondary) 75%, 
        transparent 100%);
    transform: skew(-1deg);
}

/* Hand-drawn footer */
.footer {
    border-top: 3px solid var(--sketch-secondary);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--sketch-accent) 25%, 
        var(--sketch-primary) 50%, 
        var(--sketch-accent) 75%, 
        transparent 100%);
    transform: skew(1deg);
}

/* Sketch-style hero section */
.hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(52, 152, 219, 0.05) 25%, 
        transparent 25%, 
        transparent 75%, 
        rgba(52, 152, 219, 0.05) 75%);
    background-size: 20px 20px;
    animation: sketch-pattern 20s linear infinite;
}

@keyframes sketch-pattern {
    0% { background-position: 0 0; }
    100% { background-position: 20px 20px; }
}

.hero-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.hero-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--sketch-accent) 30%, 
        var(--sketch-secondary) 70%, 
        transparent 100%);
    transform: skew(-5deg);
}

/* Sketch-style building year badges */
.building-year {
    border: 2px solid var(--sketch-secondary);
    background: linear-gradient(45deg, 
        var(--sketch-secondary) 0%, 
        #5dade2 50%, 
        var(--sketch-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.building-year::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: inherit;
    transform: rotate(1deg);
}

/* Hand-drawn blog categories */
.blog-category {
    border: 2px solid var(--sketch-secondary);
    background: linear-gradient(135deg, 
        var(--sketch-secondary) 0%, 
        #3498db 50%, 
        var(--sketch-secondary) 100%);
    position: relative;
    transform: rotate(-1deg);
}

.blog-category::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: inherit;
    transform: rotate(2deg);
}

/* Sketch-style article categories */
.article-category {
    border: 2px solid var(--sketch-secondary);
    background: linear-gradient(45deg, 
        var(--sketch-secondary) 0%, 
        #5dade2 100%);
    position: relative;
    transform: rotate(1deg);
}

.article-category::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: inherit;
    transform: rotate(-2deg);
}

/* Hand-drawn cookie banner */
.cookie-banner {
    border-top: 3px solid var(--sketch-secondary);
    position: relative;
}

.cookie-banner::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--sketch-accent) 25%, 
        var(--sketch-primary) 50%, 
        var(--sketch-accent) 75%, 
        transparent 100%);
    transform: skew(-1deg);
}

/* Sketch-style modal */
.cookie-modal-content {
    border: 3px solid var(--sketch-primary);
    position: relative;
    background: #fafafa;
}

.cookie-modal-content::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid var(--sketch-secondary);
    border-radius: inherit;
    opacity: 0.5;
    transform: rotate(0.5deg);
    z-index: -1;
}

/* Hand-drawn checkbox styling */
.cookie-category input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--sketch-primary);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    background: #fafafa;
}

.cookie-category input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid var(--sketch-secondary);
    border-radius: 2px;
    opacity: 0.5;
    transform: rotate(2deg);
}

.cookie-category input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 2px;
    color: var(--sketch-secondary);
    font-weight: bold;
    transform: rotate(-5deg);
}

/* Sketch-style thanks page */
.thanks-icon svg {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

.thanks-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hand-drawn legal page styling */
.legal-content {
    position: relative;
}

.legal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, 
        transparent 0%, 
        var(--sketch-accent) 25%, 
        var(--sketch-secondary) 50%, 
        var(--sketch-accent) 75%, 
        transparent 100%);
    transform: skew(0deg, 1deg);
}

/* Responsive hand-drawn adjustments */
@media (max-width: 768px) {
    .building-card::before,
    .service-card::before,
    .testimonial-card::before,
    .blog-card::before {
        transform: rotate(0deg);
    }
    
    .building-card::after,
    .service-card::after,
    .testimonial-card::after,
    .blog-card::after {
        transform: rotate(0deg);
    }
    
    .hero::before {
        background-size: 15px 15px;
    }
    
    .nav-link::after {
        transform: skew(-6deg);
    }
}

/* Subtle animations for hand-drawn elements */
@keyframes sketch-wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(0.5deg); }
    75% { transform: rotate(-0.5deg); }
}

.building-card:hover::before,
.service-card:hover::before,
.testimonial-card:hover::before,
.blog-card:hover::before {
    animation: sketch-wobble 2s ease-in-out infinite;
}

/* Hand-drawn loading animation */
@keyframes sketch-draw {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}

.hand-drawn-svg {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: sketch-draw 3s ease-in-out forwards;
}

/* Sketch-style focus states */
.form-group input:focus,
.form-group textarea:focus,
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    transform: rotate(-0.2deg);
}

/* Hand-drawn scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, 
        var(--sketch-secondary) 0%, 
        var(--sketch-primary) 100%);
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, 
        var(--sketch-primary) 0%, 
        var(--sketch-secondary) 100%);
}