/**
 * OfficeSupplier.uk - Custom Styles
 * Custom styles for OfficeSupplier.uk
 *
 * This file contains custom styles that extend Tailwind CSS
 * for the OfficeSupplier.uk directory website.
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
    /* Primary Blues */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;

    /* Accent Orange */
    --color-accent-50: #fff7ed;
    --color-accent-100: #ffedd5;
    --color-accent-200: #fed7aa;
    --color-accent-300: #fdba74;
    --color-accent-400: #fb923c;
    --color-accent-500: #f97316;
    --color-accent-600: #ea580c;
    --color-accent-700: #c2410c;
    --color-accent-800: #9a3412;
    --color-accent-900: #7c2d12;

    /* Spacing */
    --section-spacing: clamp(4rem, 8vw, 7rem);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Shadows */
    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-glow-primary: 0 0 40px -10px var(--color-primary-500);
    --shadow-glow-accent: 0 0 40px -10px var(--color-accent-500);
}

/* ============================================
   Base Styles
   ============================================ */

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selection styling */
::selection {
    background-color: var(--color-primary-100);
    color: var(--color-primary-900);
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

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

/* Gradient text effect for headings */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-accent {
    background: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Better line heights for large text */
.leading-tight-custom {
    line-height: 1.15;
}

/* ============================================
   Animation Classes
   ============================================ */

/* Blob animation for hero backgrounds */
@keyframes blob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(20px, -30px) scale(1.1);
    }
    50% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    75% {
        transform: translate(30px, 30px) scale(1.05);
    }
}

.animate-blob {
    animation: blob 15s infinite ease-in-out;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Slide up animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

/* Pulse glow effect */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px -5px var(--color-primary-500);
    }
    50% {
        box-shadow: 0 0 30px -5px var(--color-primary-500);
    }
}

.animate-pulse-glow {
    animation: pulseGlow 2s infinite ease-in-out;
}

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

/* Interactive card with lift effect */
.card-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* Card with border glow on hover */
.card-glow {
    position: relative;
    transition: border-color var(--transition-base);
}

.card-glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--color-primary-400), var(--color-accent-400));
    opacity: 0;
    z-index: -1;
    transition: opacity var(--transition-base);
}

.card-glow:hover::before {
    opacity: 0.5;
}

/* ============================================
   Button Styles
   ============================================ */

/* Primary button with gradient */
.btn-primary-gradient {
    background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
    color: white;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-primary-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.btn-primary-gradient:hover::before {
    opacity: 1;
}

.btn-primary-gradient span {
    position: relative;
    z-index: 1;
}

/* Accent button with shine effect */
.btn-accent-shine {
    position: relative;
    overflow: hidden;
}

.btn-accent-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}

.btn-accent-shine:hover::after {
    left: 150%;
}

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

/* Custom focus ring for inputs */
.input-focus-ring {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-focus-ring:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Floating label effect (optional enhancement) */
.form-group-floating {
    position: relative;
}

.form-group-floating input:focus + label,
.form-group-floating input:not(:placeholder-shown) + label {
    transform: translateY(-24px) scale(0.85);
    color: var(--color-primary-600);
}

.form-group-floating label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: all var(--transition-base);
    pointer-events: none;
    color: #6b7280;
}

/* ============================================
   Navigation Styles
   ============================================ */

/* Active nav link indicator */
.nav-link-active {
    position: relative;
}

.nav-link-active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary-600);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.nav-link-active:hover::after,
.nav-link-active.active::after {
    transform: scaleX(1);
}

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

/* Mesh gradient background */
.bg-mesh {
    background-color: #f8fafc;
    background-image:
        radial-gradient(at 40% 20%, rgba(59, 130, 246, 0.1) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(249, 115, 22, 0.08) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(59, 130, 246, 0.08) 0px, transparent 50%),
        radial-gradient(at 80% 50%, rgba(249, 115, 22, 0.06) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(59, 130, 246, 0.06) 0px, transparent 50%);
}

/* ============================================
   Grid Pattern Overlay
   ============================================ */

.pattern-grid {
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.pattern-dots {
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ============================================
   Breadcrumb Styles
   ============================================ */

.breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    color: #9ca3af;
}

.breadcrumb-item:last-child {
    font-weight: 500;
    color: #111827;
}

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

.footer-link {
    position: relative;
    transition: color var(--transition-fast);
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width var(--transition-base);
}

.footer-link:hover::after {
    width: 100%;
}

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

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Custom scrollbar styling */
.scrollbar-custom {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary-300) transparent;
}

.scrollbar-custom::-webkit-scrollbar {
    width: 6px;
}

.scrollbar-custom::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
    background-color: var(--color-primary-300);
    border-radius: 3px;
}

/* Aspect ratio containers */
.aspect-card {
    aspect-ratio: 4 / 3;
}

.aspect-hero {
    aspect-ratio: 16 / 9;
}

/* Glass morphism effect */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   Responsive Adjustments
   ============================================ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .card-lift,
    .card-glow {
        border: 2px solid currentColor;
    }

    .btn-primary-gradient,
    .btn-accent-shine {
        border: 2px solid white;
    }
}

/* Dark mode support (future-proofing) */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles here when needed */
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a {
        text-decoration: underline;
    }

    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}