/*
 * Theme Name:  Rencar Theme
 * Theme URI:   https://bg0.net/
 * Description: Airport Transfer & Private Tours WordPress Theme
 * Author:      Blue Group™
 * Author URI:  https://bg0.net/
 * Version:     1.3.2
 * License:     GNU General Public License v2 or later
 * Text Domain: rencar
 * Tags:        transport, tour, booking, custom-colors, custom-logo, full-width-template
 */

/* ============================================================
   1. DESIGN TOKENS — CSS Custom Properties
   ============================================================ */
:root {
    /* Brand Colors (overrideable via Theme Options) */
    --rencar-primary:       #c4512d;
    --rencar-primary-dark:  #a64426;
    --rencar-primary-rgb:   196, 81, 45;
    --rencar-primary-light: rgba(196, 81, 45, 0.12);
    --rencar-secondary:     #173b4d;
    --rencar-secondary-rgb: 23, 59, 77;

    /* Neutral Palette */
    --rencar-white:    #ffffff;
    --rencar-black:    #091619;
    --rencar-gray-50:  #f7faf9;
    --rencar-gray-100: #eef3f2;
    --rencar-gray-200: #dce5e3;
    --rencar-gray-400: #8b9b9a;
    --rencar-gray-500: #647574;
    --rencar-gray-600: #4b5d5b;
    --rencar-gray-700: #344946;
    --rencar-gray-800: #223a3a;
    --rencar-gray-900: #102a2e;

    /* Semantic Colors */
    --rencar-success: #269e6a;
    --rencar-warning: #d99614;
    --rencar-error:   #d94a4a;
    --rencar-info:    #2f7fa3;

    /* Typography */
    --rencar-font:          'Jost', sans-serif;
    --rencar-font-size-base: 16px;
    --rencar-line-height:    1.6;

    /* Spacing Scale */
    --rencar-space-1:  4px;
    --rencar-space-2:  8px;
    --rencar-space-3:  12px;
    --rencar-space-4:  16px;
    --rencar-space-5:  20px;
    --rencar-space-6:  24px;
    --rencar-space-8:  32px;
    --rencar-space-10: 40px;
    --rencar-space-12: 48px;
    --rencar-space-16: 64px;
    --rencar-space-20: 80px;
    --rencar-space-24: 96px;

    /* Border Radius */
    --rencar-radius-sm:   6px;
    --rencar-radius:      10px;
    --rencar-radius-md:   14px;
    --rencar-radius-lg:   20px;
    --rencar-radius-xl:   28px;
    --rencar-radius-full: 9999px;

    /* Shadows */
    --rencar-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    --rencar-shadow:    0 4px 16px rgba(0, 0, 0, 0.10);
    --rencar-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
    --rencar-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
    --rencar-shadow-primary: 0 8px 24px rgba(196, 81, 45, 0.28);

    /* Transitions */
    --rencar-transition: 0.25s ease;
    --rencar-transition-slow: 0.40s ease;

    /* Layout */
    --rencar-container: 1200px;
    --rencar-header-h: 76px;
    --rencar-topbar-h: 40px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: var(--rencar-font-size-base);
    -webkit-text-size-adjust: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: var(--rencar-font);
    font-size: 1rem;
    line-height: var(--rencar-line-height);
    color: var(--rencar-gray-700);
    background: var(--rencar-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--rencar-font);
    font-weight: 700;
    line-height: 1.25;
    color: var(--rencar-gray-900);
}

h1 { font-size: clamp(2rem,   5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem);  }
h3 { font-size: clamp(1.3rem, 3vw, 1.875rem);}
h4 { font-size: 1.25rem; }
h5 { font-size: 1.0625rem; }
h6 { font-size: 0.9375rem; }

p {
    margin-bottom: var(--rencar-space-4);
    color: var(--rencar-gray-600);
}
p:last-child { margin-bottom: 0; }

a {
    color: var(--rencar-primary);
    text-decoration: none;
    transition: color var(--rencar-transition);
}
a:hover { color: var(--rencar-primary-dark); }

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

ul, ol { list-style: none; }

button {
    font-family: var(--rencar-font);
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: var(--rencar-font);
    font-size: 1rem;
}

/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.rencar-container {
    width: 100%;
    max-width: var(--rencar-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--rencar-space-6);
    padding-right: var(--rencar-space-6);
}

/* Prevent grid, flex and third-party slider children from widening mobile pages. */
#main-content, section, .swiper, .swiper-wrapper,
.rencar-container, .rencar-container > *,
[class*="-grid"] > *, [class*="__grid"] > * {
    min-width: 0;
}
iframe, embed, object, table, pre { max-width: 100%; }
pre { overflow-x: auto; }
input, textarea, select { max-width: 100%; }

@media (max-width: 768px) {
    .rencar-container { padding-left: 16px; padding-right: 16px; }
    h1, h2, h3, p, a, span { overflow-wrap: anywhere; }
}

.section-padding {
    padding-top: var(--rencar-space-20);
    padding-bottom: var(--rencar-space-20);
}

/* Screen Reader */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.screen-reader-text:focus {
    background: var(--rencar-white);
    clip: auto;
    height: auto;
    left: 5px;
    padding: 12px 20px;
    top: 5px;
    width: auto;
    z-index: 100000;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rencar-gray-900);
    border-radius: var(--rencar-radius);
    box-shadow: var(--rencar-shadow-md);
}

/* WordPress Alignment */
.alignleft  { float: left; margin-right: var(--rencar-space-6); }
.alignright { float: right; margin-left: var(--rencar-space-6); }
.aligncenter { text-align: center; margin: 0 auto var(--rencar-space-6); }