/*
 Theme Name:   Sydney CKYIT
 Theme URI:    https://athemes.com/theme/sydney/
 Description:  Child theme for Central Kentucky IT Services
 Author:       Central Kentucky IT Services
 Template:     sydney
 Version:      1.0.0
*/

/* Custom Hero Section Overlay & Contrast Styles */
.sydney-hero-area::before,
.header-image::before,
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 17, 30, 0.75);
    z-index: 1;
}
.sydney-hero-area {
    overflow: hidden;
    display: none;
}

.hero-content, 
.slide-inner, 
.header-info {
    position: relative;
    z-index: 2;
}

.hero-content h1, 
.slide-inner h2, 
.header-text {
    color: #FFFFFF !important;
    font-size: 3.2rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.8);
}

.hero-content p, 
.slide-inner p, 
.header-subtext {
    color: #E2E8F0 !important;
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.9);
}
/* 1. Dark Backdrop Card for Maximum Text Contrast */
.hero-content-wrapper,
section.relative .max-w-4xl {
    background: rgba(10, 17, 30, 0.85) !important; /* Dark solid backdrop */
    backdrop-filter: blur(8px) !important; /* Modern glassmorphism blur */
    padding: 2.5rem 2rem !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
    margin-top: 2rem !important;
}

/* 2. Fix Heading Size and Color Overrides */
section.relative h1 {
    font-size: 4.25rem !important; /* Force large heading size */
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #FFFFFF !important; /* Solid white for absolute clarity */
    background: none !important; /* Remove transparent gradient bleed */
    -webkit-text-fill-color: initial !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
    margin-bottom: 1.25rem !important;
}

/* 3. Fix Subtitle Paragraph Size */
section.relative p {
    font-size: 1.5rem !important; /* Scale up paragraph text */
    line-height: 1.7 !important;
    color: #E2E8F0 !important; /* Bright off-white */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

/* 4. Highlight Span Styling */
section.relative h1 span,
section.relative h1 .text-amber-500,
section.relative h1 .text-blue-400 {
    color: #38BDF8 !important; /* Crisp light blue accent */
    -webkit-text-fill-color: #38BDF8 !important;
    background: none !important;
}

/* 5. Mobile Responsiveness Adjustments */
@media (max-width: 768px) {
    section.relative h1 {
        font-size: 2rem !important;
    }
    section.relative p {
        font-size: 1rem !important;
    }
}
/* 6. Hero Call-to-Action Buttons */
.hero-content-wrapper a {
    font-size: 1.5rem !important;        /* Change button text size */
    padding: 1.5rem 2rem !important;       /* Change button size (top/bottom, left/right) */
    font-weight: 700 !important;
    border-radius: 0.75rem !important;   /* Corner roundness */
}

/* Primary Button (Request IT Consultation) */
.hero-content-wrapper a[href="#contact"] {
    background-color: #FF6B35 !important; /* Orange background */
    color: #FFFFFF !important;            /* Text color */
}

.hero-content-wrapper a[href="#contact"]:hover {
    background-color: #E85A24 !important; /* Hover background color */
}

/* Secondary Button (Explore Services) */
.hero-content-wrapper a[href="#services"] {
    background-color: rgba(30, 41, 59, 0.8) !important; /* Dark semi-transparent background */
    color: #FFFFFF !important;                          /* Text color */
    border: 1px solid #475569 !important;               /* Border outline */
}

.hero-content-wrapper a[href="#services"]:hover {
    background-color: rgba(51, 65, 85, 0.9) !important;  /* Hover background color */
}
/* Target the standalone Tailwind header navigation specifically */
header nav {
    gap: 2rem !important; /* Adjust spacing between menu items */
}

/* Style and resize all header navigation links */
header nav a {
    font-size: 1.2rem !important; /* INCREASE OR DECREASE LINK SIZE HERE */
    font-weight: 600 !important;
    color: #E2E8F0 !important;   /* Normal link color */
    transition: color 0.2s ease !important;
}

/* Hover state for header navigation links */
header nav a:hover {
    color: #38BDF8 !important;   /* Hover accent color */
}

/* Style the top header 'Get a Quote' button */
header a[href="#contact"],
header a.bg-sydney-accent {
    font-size: 1rem !important;  /* Button text size */
    padding: 0.6rem 1.25rem !important;
    font-weight: 700 !important;
}
/* 8. Quick Feature Cards (Under Hero) */
/* Card Box Container */
section .grid > div {
    padding: 2.5rem 2rem !important; /* Internal padding of each card */
}

/* Icon Styling & Size */
section .grid > div i,
section .grid > div svg {
    font-size: 3rem !important; /* Increase/decrease icon size */
    margin-bottom: 0.75rem !important;
}

/* Card Title Text (e.g., Local Expertise, Custom Software) */
section .grid > div h3,
section .grid > div .font-bold {
    font-size: 1.5rem !important; /* Increase/decrease title size */
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin-bottom: 0.5rem !important;
}

/* Subtitle / Description Text (e.g., Lexington & Surrounding) */
section .grid > div p,
section .grid > div .text-slate-400,
section .grid > div .text-slate-300 {
    font-size: 1.15rem !important; /* Increase/decrease description size */
    color: #94A3B8 !important;    /* Light slate color */
    line-height: 1.4 !important;
}
/* 9. Services Section Styling & Readability Fixes */

/* Section Sub-heading ("COMPLETE TECH SOLUTIONS") */
#services .text-sydney-accent,
#services .text-xs.font-bold {
    font-size: 0.9rem !important;
    letter-spacing: 0.08em !important;
    color: #0284C7 !important; /* Darker blue for visibility on light background */
}

/* Section Title ("Services Tailored for Business & Home") */
#services h2 {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: #0F172A !important; /* Dark navy heading */
    margin-bottom: 0.75rem !important;
}

/* Section Description Paragraph */
#services p.text-slate-600,
#services header + p {
    font-size: 1.1rem !important;
    color: #334155 !important; /* Darker slate for strong readability */
}

/* Tab Filter Buttons (All Services / Business IT / Home & Residential) */
#services button {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.5rem !important;
}

/* Active Tab Button Style */
#services button.bg-sydney-dark,
#services button.active {
    background-color: #0F172A !important;
    color: #FFFFFF !important;
}

/* --- Service Cards --- */
#services .grid > div {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 1rem !important;
    padding: 2rem 1.5rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#services .grid > div:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.1) !important;
}

/* Service Badges ("BUSINESS", "HOME & RESIDENTIAL") */
#services .grid > div span.uppercase {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 0.375rem !important;
}

/* Business Badge High-Contrast Colors */
#services .grid > div span:contains("BUSINESS"),
#services .grid > div .bg-blue-50 {
    background-color: #EFF6FF !important;
    color: #1D4ED8 !important; /* Vivid dark blue text */
    border: 1px solid #BFDBFE !important;
}

/* Home Badge High-Contrast Colors */
#services .grid > div span:contains("HOME"),
#services .grid > div .bg-amber-50 {
    background-color: #FFFBEB !important;
    color: #B45309 !important; /* Dark amber/orange text */
    border: 1px solid #FDE68A !important;
}

/* Service Card Description Text - FIXES LIGHT GREY READABILITY ISSUE */
#services .grid > div p {
    font-size: 1.25rem !important;
    color: #334155 !important; /* Crisp dark slate instead of washed-out grey */
    line-height: 1.6 !important;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
}

/* Bottom Action Links ("Inquire about software", "Get business support", etc.) */
#services .grid > div a {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0284C7 !important;
    transition: color 0.2s ease !important;
}

#services .grid > div a:hover {
    color: #0369A1 !important;
}
/* 10. Contact Form Section Styling */

/* Section Outer Header & Sub-title */
#contact .text-sydney-accent,
#contact .text-xs.font-bold {
    font-size: 1.15rem !important;
    letter-spacing: 0.08em !important;
    color: #0284C7 !important;
}

#contact h2 {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin-bottom: 0.5rem !important;
}

#contact p {
    font-size: 1.15rem !important;
    color: #475569 !important;
}

/* Contact Form Container Card */
#contact form,
#contact .max-w-2xl {
    background-color: #FFFFFF !important;
    border-radius: 1.15rem !important;
    padding: 2.5rem 2rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
}

/* Form Field Labels (e.g., MESSAGE / DETAILS *) */
#contact label {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

/* All Input Fields, Select Dropdown & Textarea */
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact select,
#contact textarea {
    font-size: 1.15rem !important;
    color: #0F172A !important;             /* Typed text color */
    background-color: #F8FAFC !important;   /* Soft grey field background */
    border: 1px solid #CBD5E1 !important;     /* Visible field border */
    border-radius: 0.5rem !important;
    padding: 0.85rem 1rem !important;
    width: 100% !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Input Focus States */
#contact input:focus,
#contact select:focus,
#contact textarea:focus {
    outline: none !important;
    border-color: #0284C7 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* Placeholder Text Color (Fixes light grey visibility) */
#contact ::placeholder {
    color: #64748B !important;
    opacity: 1 !important;
}

/* Textarea Specific Height */
#contact textarea {
    min-height: 140px !important;
    resize: vertical !important;
}

/* Submit Button ("Send Request") */
#contact button[type="submit"],
#contact input[type="submit"] {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    background-color: #FF6B35 !important;   /* Accent orange */
    color: #FFFFFF !important;
    padding: 1rem 2rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
}

#contact button[type="submit"]:hover,
#contact input[type="submit"]:hover {
    background-color: #E85A24 !important;
}
/* Title & Heading Font Sizes */
.footer-title {
    font-size: 1.5rem; /* ~24px */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.875rem;
}

.footer-subtitle {
    font-size: 1.25rem; /* ~20px */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.875rem;
}

/* Body Text Font Size */
.footer-text {
    font-size: 1rem; /* ~16px */
    color: #e2e8f0;
    line-height: 1.625;
}

/* Social Link Font Size */
.facebook-link {
    font-size: 1rem; /* ~16px */
    font-weight: 600;
    color: #f97316;
}

/* Copyright Font Size */
.footer-copyright {
    padding-top: 2rem;
    text-align: center;
    font-size: 0.875rem; /* ~14px */
    color: #94a3b8;
}