/*
Theme Name: Isomate SaaS Theme
Theme URI: https://isomate.com
Author: Isomate
Author URI: https://isomate.com
Description: A modern, SEO-optimized WordPress theme designed for SaaS marketing. Features Schema.org structured data, single pricing display, feature showcases, and blog support.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: isomate-saas
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, block-patterns, block-styles, translation-ready

Isomate SaaS Theme is a conversion-focused theme for marketing SaaS products.
*/

/* Base Reset */

/* Size-adjusted font fallback to prevent CLS during Inter web font swap.
   Metrics calibrated to match Inter's character widths so nav links and
   body text don't shift when the real font loads.
   Values from: https://developer.chrome.com/blog/font-fallbacks */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    size-adjust: 107.64%;
    ascent-override: 90.49%;
    descent-override: 22.48%;
    line-gap-override: 0%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* Colors */
    --isomate-primary: #4f46e5;
    --isomate-primary-dark: #4338ca;
    --isomate-secondary: #0ea5e9;
    --isomate-accent: #f59e0b;
    --isomate-success: #10b981;
    --isomate-warning: #f59e0b;
    --isomate-error: #ef4444;
    
    /* Neutrals */
    --isomate-white: #ffffff;
    --isomate-gray-50: #f9fafb;
    --isomate-gray-100: #f3f4f6;
    --isomate-gray-200: #e5e7eb;
    --isomate-gray-300: #d1d5db;
    --isomate-gray-400: #9ca3af;
    --isomate-gray-500: #6b7280;
    --isomate-gray-600: #4b5563;
    --isomate-gray-700: #374151;
    --isomate-gray-800: #1f2937;
    --isomate-gray-900: #111827;
    
    /* Typography - Inter Font Family with size-adjusted fallback to prevent CLS */
    --isomate-font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --isomate-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
    
    /* Spacing */
    --isomate-spacing-xs: 0.25rem;
    --isomate-spacing-sm: 0.5rem;
    --isomate-spacing-md: 1rem;
    --isomate-spacing-lg: 1.5rem;
    --isomate-spacing-xl: 2rem;
    --isomate-spacing-2xl: 3rem;
    --isomate-spacing-3xl: 4rem;
    
    /* Container */
    --isomate-container-max: 1200px;
    --isomate-container-padding: 1rem;
    
    /* Border Radius */
    --isomate-radius-sm: 0.25rem;
    --isomate-radius-md: 0.5rem;
    --isomate-radius-lg: 1rem;
    --isomate-radius-full: 9999px;
    
    /* Shadows */
    --isomate-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --isomate-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --isomate-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --isomate-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    
    /* Transitions */
    --isomate-transition-fast: 150ms ease;
    --isomate-transition-normal: 300ms ease;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--isomate-font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--isomate-gray-800);
    background-color: var(--isomate-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--isomate-spacing-md);
    font-weight: 700;
    line-height: 1.2;
    color: var(--isomate-gray-900);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    margin: 0 0 var(--isomate-spacing-md);
}

/**
 * Link Colors (WCAG 2.1 Level AA Compliant)
 * 
 * Default link color: Indigo 500 (4.8:1 on white) ✓
 * Hover/focus color: Indigo 600 (6.7:1 on white) ✓
 * 
 * Requirements: 5.3
 */
a {
    color: var(--isomate-primary);                 /* Indigo 500: 4.8:1 on white ✓ */
    text-decoration: none;
    transition: color var(--isomate-transition-fast);
}

a:hover,
a:focus {
    color: var(--isomate-primary-dark);            /* Indigo 700: 7.9:1 on white ✓ */
    text-decoration: underline;
}

/* Focus indicator for keyboard navigation */
a:focus-visible {
    outline: 2px solid var(--isomate-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--isomate-container-max);
    margin: 0 auto;
    padding: 0 var(--isomate-container-padding);
}

/* Screen Reader Text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--isomate-gray-100);
    clip: auto !important;
    clip-path: none;
    color: var(--isomate-gray-900);
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}


/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Back to Top (Integrated in Footer)
   ========================================================================== */

.footer-back-to-top {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--isomate-spacing-md) 0;
    margin-top: var(--isomate-spacing-sm);
}

.back-to-top-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    color: var(--isomate-gray-400);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--isomate-spacing-sm) var(--isomate-spacing-lg);
    border-radius: var(--isomate-radius-md);
    transition: color var(--isomate-transition-fast), 
                background-color var(--isomate-transition-fast);
    /* Reset button styles */
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.back-to-top-link:hover {
    color: var(--isomate-white);
    background-color: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

.back-to-top-link:focus {
    outline: 2px solid var(--isomate-primary);
    outline-offset: 2px;
}

.back-to-top-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--isomate-transition-fast);
}

.back-to-top-link:hover svg {
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top-link,
    .back-to-top-link svg {
        transition: none;
    }
    
    .back-to-top-link:hover svg {
        transform: none;
    }
}