/*
Theme Name: Tasani Funnel
Theme URI: https://tasani-solutions.nl/
Author: Tasani Solutions
Author URI: https://tasani-solutions.nl/
Description: A high-conversion sales funnel WordPress theme for locksmith (slotenmaker) services. Optimized for paid advertising campaigns with clear CTAs and conversion-focused design.
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: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tasani-funnel
Tags: one-column, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, theme-options, translation-ready

Tasani Funnel Theme - Built for conversion and speed
*/

/* ==========================================================================
   CSS Variables / Design Tokens
   ========================================================================== */
:root {
    /* Brand Colors */
    --tf-primary: #334394;
    --tf-primary-dark: #242551;
    --tf-primary-light: #4a5bb8;
    --tf-secondary: #ffc107;
    --tf-accent: #00acad;

    /* Neutral Colors */
    --tf-white: #ffffff;
    --tf-black: #000000;
    --tf-gray-100: #f8f9fa;
    --tf-gray-200: #e9ecef;
    --tf-gray-300: #dee2e6;
    --tf-gray-400: #ced4da;
    --tf-gray-500: #adb5bd;
    --tf-gray-600: #6c757d;
    --tf-gray-700: #495057;
    --tf-gray-800: #343a40;
    --tf-gray-900: #212529;

    /* Semantic Colors */
    --tf-success: #28a745;
    --tf-warning: #ffc107;
    --tf-danger: #dc3545;
    --tf-info: #17a2b8;

    /* Typography */
    --tf-font-primary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tf-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Sizes */
    --tf-text-xs: 0.75rem;
    --tf-text-sm: 0.875rem;
    --tf-text-base: 1rem;
    --tf-text-lg: 1.125rem;
    --tf-text-xl: 1.25rem;
    --tf-text-2xl: 1.5rem;
    --tf-text-3xl: 1.875rem;
    --tf-text-4xl: 2.25rem;
    --tf-text-5xl: 3rem;

    /* Spacing */
    --tf-spacing-xs: 0.25rem;
    --tf-spacing-sm: 0.5rem;
    --tf-spacing-md: 1rem;
    --tf-spacing-lg: 1.5rem;
    --tf-spacing-xl: 2rem;
    --tf-spacing-2xl: 3rem;
    --tf-spacing-3xl: 4rem;

    /* Border Radius */
    --tf-radius-sm: 0.25rem;
    --tf-radius-md: 0.5rem;
    --tf-radius-lg: 0.5rem;
    --tf-radius-xl: 0.5rem;
    --tf-radius-full: 9999px;

    /* Shadows */
    --tf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --tf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --tf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --tf-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --tf-transition-fast: 150ms ease;
    --tf-transition-normal: 300ms ease;
    --tf-transition-slow: 500ms ease;

    /* Container */
    --tf-container-max: 1200px;
    --tf-container-padding: 1rem;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--tf-font-primary);
    font-size: var(--tf-text-base);
    line-height: 1.6;
    color: var(--tf-gray-800);
    background-color: var(--tf-white);
}

/* Prevent white flash above hero on pages with dark hero */
body.home,
body.page-template-front-page,
body.page-template-page-about,
body.page-template-page-bedankt,
body.page-privacy-policy,
body.page-template-page-privacybeleid,
body.page-template-page-algemene-voorwaarden {
    background-color: var(--tf-primary-dark);
}

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

h1 {
    font-size: var(--tf-text-5xl);
}

h2 {
    font-size: var(--tf-text-4xl);
}

h3 {
    font-size: var(--tf-text-3xl);
}

h4 {
    font-size: var(--tf-text-2xl);
}

h5 {
    font-size: var(--tf-text-xl);
}

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

p {
    margin-top: 0;
    margin-bottom: var(--tf-spacing-md);
}

a {
    color: var(--tf-primary);
    text-decoration: none;
    transition: color var(--tf-transition-fast);
}

a:hover,
a:focus {
    color: var(--tf-primary-dark);
}

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

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

/* Screen Reader Text (Accessibility) */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

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