/*
Theme Name: Orion Construction
Description: A premium WordPress theme designed specifically for construction companies. Built with Elementor compatibility, featuring modern design, performance optimization, and comprehensive customization options. Perfect for construction businesses looking to showcase their projects and services professionally.
Author: WebbyCrown Solutions Pvt Ltd
Author URI: https://www.webbycrown.com/
Version: 1.0.0
Text Domain: orion-construction
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================== */
:root {
    /* Primary Colors — defaults; live Global Colors override via orion-global-colors-typography */
    --orion-primary: #186F65;
    --orion-primary-dark: #0f4a42;
    --orion-primary-light: #2a8a7e;
    
    /* Secondary Colors */
    --orion-secondary: #f8f9fa;
    --orion-secondary-dark: #e9ecef;
    --orion-accent: #ffc107;
    --orion-accent-dark: #e0a800;
    
    /* Neutral Colors */
    --orion-white: #ffffff;
    --orion-black: #000000;
    --orion-gray-100: #f8f9fa;
    --orion-gray-200: #e9ecef;
    --orion-gray-300: #dee2e6;
    --orion-gray-400: #ced4da;
    --orion-gray-500: #adb5bd;
    --orion-gray-600: #6c757d;
    --orion-gray-700: #495057;
    --orion-gray-800: #343a40;
    --orion-gray-900: #212529;
    
    /* Typography */
    --orion-font-heading: 'El Messiri', serif;
    --orion-font-body: 'Lexend', sans-serif;
    
    /* Font Sizes */
    --orion-font-size-xs: 0.75rem;
    --orion-font-size-sm: 0.875rem;
    --orion-font-size-base: 1rem;
    --orion-font-size-lg: 1.125rem;
    --orion-font-size-xl: 1.25rem;
    --orion-font-size-2xl: 1.5rem;
    --orion-font-size-3xl: 1.875rem;
    --orion-font-size-4xl: 2.25rem;
    --orion-font-size-5xl: 3rem;
    
    /* Spacing */
    --orion-spacing-xs: 0.25rem;
    --orion-spacing-sm: 0.5rem;
    --orion-spacing-md: 1rem;
    --orion-spacing-lg: 1.5rem;
    --orion-spacing-xl: 2rem;
    --orion-spacing-2xl: 3rem;
    --orion-spacing-3xl: 4rem;
    
    /* Border Radius */
    --orion-border-radius: 0.375rem;
    --orion-border-radius-lg: 0.5rem;
    --orion-border-radius-xl: 0.75rem;
    
    /* Shadows */
    --orion-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --orion-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --orion-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --orion-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --orion-transition: all 0.3s ease;
    --orion-transition-fast: all 0.15s ease;
    --orion-transition-slow: all 0.5s ease;
}
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
}

/* Shared form validation tips (non-CF7 + supplement) */
.orion-field-error {
	display: block;
	margin-top: 6px;
	color: #d21c1c;
	font-family: Lexend, sans-serif;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.4;
}
/* Never show both Orion + CF7 tips on the same field. */
.wpcf7-form-control-wrap .orion-field-error {
	display: none !important;
}
.wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip) .orion-field-error {
	display: none !important;
}
input.orion-field-invalid,
textarea.orion-field-invalid,
select.orion-field-invalid,
.orion-qt__dropdown-selected.orion-field-invalid {
	border-color: #d21c1c !important;
}

/* ==========================================
   RESET AND BASE STYLES
   ========================================== */
/* Google Fonts are enqueued via orion_construction_google_fonts_url(). */
/* Cascade-layered as "base" (same layer orion-tailwind.css's own preflight
   uses) so it doesn't silently beat Tailwind utility classes — unlayered
   rules always outrank layered ones regardless of specificity or source
   order, which was defeating every margin utility (space-x-*, space-y-*,
   mt-*, mb-*, etc.) sitewide despite them appearing to "match" in devtools. */
@layer base {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

html {
    scroll-behavior: smooth;
    /* Do NOT set overflow-x here. overflow-x:hidden forces overflow-y to
       compute as auto (CSS overflow pairing), which makes html/body a
       scroll container and breaks position:sticky (Projects stack, etc.). */
}

body {
    font-family: var(--orion-font-body);
    font-size: var(--orion-font-size-base);
    line-height: 1.6;
    color: var(--orion-gray-800);
    /* No font-smoothing override: the reference uses the browser default, and
       `antialiased` rendered every heading and paragraph noticeably thinner. */
    background-color: var(--orion-white);
}

/* Clip horizontal bleed from 100vw full-bleed sections without creating a
   scrollport on html/body (overflow-x:clip does not pair into overflow-y:auto
   the way hidden does when applied on the root). */
.site {
    overflow-x: clip;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--orion-font-heading);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--orion-spacing-md);
    color: var(--orion-gray-900);
}


p {
    margin-bottom: var(--orion-spacing-md);
    color: var(--orion-gray-700);
}

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

a:hover {
    color: var(--orion-primary-dark);
}

/* ==========================================
   LAYOUT STRUCTURE
   ========================================== */
.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1;
}

.container {
	width: 100%;
	margin: 0 auto;
	padding:  0 var(--orion-spacing-md);
}
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 769px) { .container { max-width: 769px; } }
@media (min-width: 992px) { .container { max-width: 992px; } }
@media (min-width: 1199px) { .container { max-width: 1199px; } }
@media (min-width: 1380px) { .container { max-width: 1380px; } }
@media (min-width: 1752px) { .container { max-width: 1752px;} }

.elementor-widget.container {
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--orion-spacing-md);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--orion-spacing-md);
}

/* ==========================================
   MAIN CONTENT
   ========================================== */
.site-main {
    padding: var(--orion-spacing-2xl) 0;
}

.content-area {
    margin-bottom: var(--orion-spacing-2xl);
}

/* ==========================================
   BUTTONS
   Match HTML reference (.btn / .btn-primary / .btn-primary-reverse
   in orion-2 tailwind.css). Padding + type scale come from
   orion-tailwind.css — do not flatten them here.
   ========================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    border-radius: 0;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary {
    background-color: var(--orion-primary);
    color: var(--orion-white);
    border: 1px solid var(--orion-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--orion-white);
    color: var(--orion-primary);
    border-color: var(--orion-primary);
}

.btn-primary-reverse {
    background-color: var(--orion-white);
    color: var(--orion-primary);
    border: 1px solid var(--orion-primary);
}

.btn-primary-reverse:hover,
.btn-primary-reverse:focus,
.btn-primary-reverse:active {
    background-color: var(--orion-primary);
    color: var(--orion-white);
    border-color: var(--orion-primary);
}

.btn-secondary {
    background-color: var(--orion-secondary);
    color: var(--orion-gray-800);
}

.btn-secondary:hover {
    background-color: var(--orion-secondary-dark);
    color: var(--orion-gray-800);
}

.btn-outline {
    background-color: transparent;
    color: var(--orion-primary);
    border: 2px solid var(--orion-primary);
}

.btn-outline:hover {
    background-color: var(--orion-primary);
    color: var(--orion-white);
}
.btn-primary-reveal {
    background-color: transparent;
    border: 1px solid var(--orion-primary);
    color: var(--orion-primary);
}
.btn-primary-reveal:hover {
    background-color: var(--orion-primary);
    color: var(--orion-white);
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--orion-spacing-sm);
    }

    h1 { font-size: var(--orion-font-size-3xl); }
    h2 { font-size: var(--orion-font-size-2xl); }
    h3 { font-size: var(--orion-font-size-xl); }
}

@media (max-width: 480px) {
    h1 { font-size: var(--orion-font-size-2xl); }
    h2 { font-size: var(--orion-font-size-xl); }
    h3 { font-size: var(--orion-font-size-lg); }
}

/* ==========================================
   ELEMENTOR COMPATIBILITY
   ========================================== */
.elementor-page .site-main {
    padding: 0;
    max-width: none;
}

.elementor-page .container {
    max-width: none;
    padding: 0;
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
.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;
}

.screen-reader-text:focus {
    background-color: var(--orion-primary);
    border-radius: var(--orion-border-radius);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto;
    clip-path: none;
    color: var(--orion-white);
    display: block;
    font-size: var(--orion-font-size-base);
    height: auto;
    left: 5px;
    line-height: normal;
    padding: var(--orion-spacing-sm) var(--orion-spacing-md);
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ==========================================
   LAZY LOADING
   ========================================== */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-load.loaded {
    opacity: 1;
}

/* ==========================================
   SCHEMA MARKUP STYLES
   ========================================== */
[itemtype*="schema.org"] {
    display: block;
}

/* ==========================================
   WOOCOMMERCE COMPATIBILITY
   ========================================== */
.woocommerce {
    font-family: var(--orion-font-body);
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce h5,
.woocommerce h6 {
    font-family: var(--orion-font-heading);
}

.woocommerce .button {
    background-color: var(--orion-primary);
    color: var(--orion-white);
    border: none;
    padding: var(--orion-spacing-sm) var(--orion-spacing-lg);
    border-radius: var(--orion-border-radius);
    transition: var(--orion-transition);
}

.woocommerce .button:hover {
    background-color: var(--orion-primary-dark);
    color: var(--orion-white);
}

.of-link{
    font-weight: 200;
}
.btn.btn-primary,
.btn.btn-primary-reverse {
    outline: none;
    border-radius: 0;
}
.logged-in-as{
	display:none;
}