/*
Theme Name:  Valurey
Theme URI:   https://valurey.com
Author:      Valurey
Author URI:  https://valurey.com
Description: Premium event & experience management theme. Built for Elementor with Fluent Forms integration. Deep navy & gold aesthetic for Valurey — Kashmir rooted, globally delivered.
Version:     1.0.0
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       valurey
Tags:              full-width-template, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =====================================================
   CSS CUSTOM PROPERTIES
   These are referenced throughout all CSS files
   and inside Elementor via custom class names.
===================================================== */
:root {
    /* Navy palette */
    --v-navy:          #080E1A;
    --v-navy2:         #0C1424;
    --v-navy3:         #111B2E;
    --v-navy4:         #162238;
    --v-navy5:         #1C2C46;
    --v-navy6:         #243656;

    /* Gold palette */
    --v-gold:          #B8924A;
    --v-gold-light:    #D4A85C;
    --v-gold-pale:     #EED9B0;
    --v-gold-dim:      rgba(184, 146, 74, 0.10);
    --v-gold-border:   rgba(184, 146, 74, 0.20);
    --v-gold-border-hover: rgba(184, 146, 74, 0.45);

    /* Text */
    --v-text:          #EEE8F0;
    --v-text-muted:    #7A7D90;
    --v-text-dim:      #3E4255;

    /* Typography */
    --v-serif:         'Cormorant Garamond', Georgia, serif;
    --v-sans:          'Jost', system-ui, sans-serif;

    /* Animation */
    --v-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --v-duration:      0.28s;
}

/* =====================================================
   GLOBAL RESET
===================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--v-sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--v-text);
    background-color: var(--v-navy);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* =====================================================
   TYPOGRAPHY DEFAULTS
===================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--v-serif);
    font-weight: 300;
    line-height: 1.15;
    color: var(--v-text);
    margin: 0 0 1rem;
}

p {
    margin: 0 0 1rem;
    color: var(--v-text-muted);
    font-weight: 300;
    line-height: 1.85;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--v-gold);
    text-decoration: none;
    transition: color var(--v-duration) var(--v-ease);
}

a:hover {
    color: var(--v-gold-light);
}

a:focus-visible {
    outline: 2px solid var(--v-gold);
    outline-offset: 3px;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

button,
input,
select,
textarea {
    font-family: inherit;
}

/* =====================================================
   SCROLLBAR
===================================================== */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: var(--v-navy);
}
::-webkit-scrollbar-thumb {
    background: var(--v-gold);
    border-radius: 2px;
}

/* =====================================================
   WORDPRESS CORE HELPERS
===================================================== */
.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 !important;
    width: 1px;
    word-wrap: normal !important;
}

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

.alignleft  { float: left;  margin-right: 1.5rem; }
.alignright { float: right; margin-left:  1.5rem; }
.aligncenter { display: block; margin: 0 auto 1.5rem; }

.wp-caption {
    max-width: 100%;
    margin-bottom: 1rem;
}
.wp-caption-text {
    font-size: 12px;
    color: var(--v-text-muted);
    text-align: center;
    padding: 0.4rem 0;
}

/* =====================================================
   ELEMENTOR COMPATIBILITY
===================================================== */

/* Full-width sections */
.elementor-section-wrap > .elementor-section {
    max-width: 100%;
}

/* Remove default Elementor widget margins that fight our layout */
.elementor-widget:not(:last-child) {
    margin-bottom: 0;
}

/* Elementor column inner padding reset — we control this per-column */
.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-column-wrap {
    padding: 0;
}

/* Heading widget — italic colour */
.elementor-widget-heading .elementor-heading-title em {
    font-style: italic;
    color: var(--v-gold);
}

/* Text editor widget paragraph color */
.elementor-widget-text-editor p {
    color: var(--v-text-muted);
}

/* Tabs widget — reset default Elementor tab styles */
.elementor-widget-tabs .elementor-tab-title {
    background: var(--v-navy3) !important;
    color: var(--v-text-dim) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-family: var(--v-sans) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    padding: 1.25rem 2rem !important;
    transition: color var(--v-duration), border-color var(--v-duration) !important;
}
.elementor-widget-tabs .elementor-tab-title:hover {
    color: var(--v-text-muted) !important;
}
.elementor-widget-tabs .elementor-tab-title.elementor-active {
    color: var(--v-gold) !important;
    border-bottom-color: var(--v-gold) !important;
    background: var(--v-navy4) !important;
}
.elementor-widget-tabs .elementor-tab-content {
    border: none !important;
    background: var(--v-navy2) !important;
    padding: 0 !important;
}

/* Elementor button widget */
.elementor-widget-button .elementor-button {
    border-radius: 0 !important;
    font-family: var(--v-sans) !important;
}

/* Elementor image widget */
.elementor-widget-image img {
    border-radius: 0;
}

/* Elementor divider */
.elementor-widget-divider .elementor-divider-separator {
    border-color: var(--v-gold-border);
}

/* =====================================================
   FLUENT FORMS STYLING
   Auto-applied whenever [fluentform] shortcode is used
===================================================== */
.fluentform,
.fluentform * {
    font-family: var(--v-sans) !important;
}

/* Labels */
.fluentform .ff-el-input--label label,
.fluentform .ff-el-input--label .ff-el-is-required.asterisk-title {
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--v-text-muted) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Inputs, textarea, select */
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform textarea,
.fluentform select {
    background-color: var(--v-navy4) !important;
    border: 1px solid var(--v-gold-border) !important;
    border-radius: 0 !important;
    color: var(--v-text) !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    padding: 11px 14px !important;
    width: 100% !important;
    outline: none !important;
    transition: border-color var(--v-duration), background-color var(--v-duration) !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.fluentform .ff-el-form-control:focus,
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
    border-color: var(--v-gold-border-hover) !important;
    background-color: var(--v-navy5) !important;
    box-shadow: none !important;
}

.fluentform .ff-el-form-control::placeholder,
.fluentform input::placeholder,
.fluentform textarea::placeholder {
    color: var(--v-text-dim) !important;
    opacity: 1 !important;
}

/* Select arrow */
.fluentform select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7D90' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
}

/* Submit button */
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
    background-color: var(--v-gold) !important;
    color: var(--v-navy) !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    cursor: pointer !important;
    transition: background-color var(--v-duration), transform 0.2s !important;
    display: inline-block !important;
    width: 100% !important;
}

.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
    background-color: var(--v-gold-light) !important;
    transform: translateY(-1px) !important;
}

/* Success / error messages */
.fluentform .ff-message-success {
    background: var(--v-gold-dim) !important;
    border: 1px solid var(--v-gold-border) !important;
    border-radius: 0 !important;
    color: var(--v-gold-light) !important;
    padding: 1rem 1.25rem !important;
    font-size: 13px !important;
}

.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea,
.fluentform .ff-el-is-error select {
    border-color: #c0392b !important;
}

.fluentform .error.text-danger {
    color: #e74c3c !important;
    font-size: 11px !important;
    margin-top: 4px !important;
    display: block !important;
}

/* Form group spacing */
.fluentform .ff-el-group {
    margin-bottom: 1rem !important;
}

/* =====================================================
   REUSABLE COMPONENT CLASSES
   Apply these via Elementor → Advanced → CSS Classes
===================================================== */

/* --- Eyebrow label --- */
.v-eyebrow {
    display: block;
    font-family: var(--v-sans);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--v-gold);
    margin-bottom: 1rem;
}

/* --- Gold rule line --- */
.v-rule {
    display: block;
    width: 36px;
    height: 1px;
    background-color: var(--v-gold);
    margin-bottom: 1.75rem;
}

/* --- Gold filled button --- */
.v-btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--v-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 14px 32px;
    background-color: var(--v-gold);
    color: var(--v-navy) !important;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--v-duration), transform 0.2s var(--v-ease), box-shadow var(--v-duration);
    position: relative;
    overflow: hidden;
}

.v-btn-gold:hover {
    background-color: var(--v-gold-light);
    color: var(--v-navy) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(184, 146, 74, 0.28);
}

.v-btn-gold:active {
    transform: translateY(0);
}

/* --- Ghost / outline button --- */
.v-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--v-sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 14px 32px;
    background-color: transparent;
    color: var(--v-gold) !important;
    border: 1px solid var(--v-gold-border);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--v-duration) var(--v-ease);
}

.v-btn-ghost:hover {
    background-color: var(--v-gold-dim);
    border-color: var(--v-gold-border-hover);
    color: var(--v-gold-light) !important;
    transform: translateY(-2px);
}

/* --- Card with gold top sweep on hover --- */
.v-card {
    position: relative;
    overflow: hidden;
    transition: background-color var(--v-duration), transform var(--v-duration);
}

.v-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--v-gold), var(--v-gold-light), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--v-ease);
}

.v-card:hover {
    transform: translateY(-4px);
}

.v-card:hover::before {
    transform: scaleX(1);
}

/* --- Stat cell --- */
.v-stat-cell {
    padding: 2.25rem 2rem;
    text-align: center;
    border-right: 1px solid var(--v-gold-border);
    position: relative;
    overflow: hidden;
    transition: background-color var(--v-duration);
    cursor: default;
}

.v-stat-cell:last-child {
    border-right: none;
}

.v-stat-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    height: 2px;
    background-color: var(--v-gold);
    transition: left 0.4s var(--v-ease), right 0.4s var(--v-ease);
}

.v-stat-cell:hover {
    background-color: var(--v-gold-dim);
}

.v-stat-cell:hover::before {
    left: 0;
    right: 0;
}

.v-stat-num {
    display: block;
    font-family: var(--v-serif);
    font-size: 2.6rem;
    font-weight: 300;
    color: var(--v-gold);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.v-stat-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--v-text-muted);
}

/* --- List item that slides right on hover --- */
.v-slide-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0.875rem 1.25rem;
    border: 1px solid var(--v-gold-border);
    margin-bottom: 0.5rem;
    font-family: var(--v-sans);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--v-text-muted);
    transition: border-color var(--v-duration), background-color var(--v-duration), transform var(--v-duration), color var(--v-duration);
}

.v-slide-item:hover {
    border-color: var(--v-gold-border-hover);
    background-color: var(--v-gold-dim);
    color: var(--v-text);
    transform: translateX(5px);
}

.v-slide-item-dot {
    width: 5px;
    height: 5px;
    background-color: var(--v-gold);
    flex-shrink: 0;
}

/* --- Testimonial card --- */
.v-testi-card {
    position: relative;
    overflow: hidden;
    transition: background-color var(--v-duration), transform var(--v-duration);
}

.v-testi-card::before {
    content: '\201C';
    position: absolute;
    top: 1rem;
    right: 2rem;
    font-family: var(--v-serif);
    font-size: 6rem;
    color: var(--v-gold);
    opacity: 0.07;
    line-height: 1;
    pointer-events: none;
    transition: opacity var(--v-duration);
}

.v-testi-card:hover {
    transform: translateY(-3px);
}

.v-testi-card:hover::before {
    opacity: 0.14;
}

.v-testi-rule {
    display: block;
    width: 28px;
    height: 1px;
    background-color: var(--v-gold);
    margin-bottom: 1.75rem;
    transition: width 0.4s var(--v-ease);
}

.v-testi-card:hover .v-testi-rule {
    width: 50px;
}

/* --- Process circle --- */
.v-proc-circle {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 1px solid var(--v-gold-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--v-serif);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--v-gold);
    background-color: transparent;
    transition: border-color var(--v-duration), background-color var(--v-duration), transform var(--v-duration);
    margin: 0 auto 2rem;
    position: relative;
}

.v-proc-circle:hover,
.proc-step:hover .v-proc-circle {
    border-color: var(--v-gold);
    background-color: var(--v-gold-dim);
    transform: scale(1.08);
}

/* --- Ticker --- */
.v-ticker-wrap {
    overflow: hidden;
    white-space: nowrap;
}

.v-ticker-inner {
    display: inline-block;
    animation: vTickerScroll 26s linear infinite;
}

@keyframes vTickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.v-ticker-item {
    display: inline-block;
    margin: 0 3rem;
    font-family: var(--v-sans);
    font-size: 11px;
    color: var(--v-text-muted);
    letter-spacing: 0.1em;
}

.v-ticker-accent {
    color: var(--v-gold);
    margin-right: 0.6rem;
}

/* --- Image frame with gold corners --- */
.v-img-frame {
    position: relative;
    overflow: hidden;
}

.v-img-frame .v-corner {
    position: absolute;
    width: 36px;
    height: 36px;
    border-color: var(--v-gold);
    border-style: solid;
    opacity: 0.45;
    transition: opacity 0.4s, width 0.4s, height 0.4s;
    z-index: 2;
}

.v-img-frame:hover .v-corner {
    opacity: 0.8;
    width: 50px;
    height: 50px;
}

.v-corner-tl { top: 16px; left: 16px; border-width: 1px 0 0 1px; }
.v-corner-tr { top: 16px; right: 16px; border-width: 1px 1px 0 0; }
.v-corner-bl { bottom: 16px; left: 16px; border-width: 0 0 1px 1px; }
.v-corner-br { bottom: 16px; right: 16px; border-width: 0 1px 1px 0; }

/* --- Nav link with animated underline --- */
.v-nav-link {
    font-family: var(--v-sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v-text-muted);
    text-decoration: none;
    padding-bottom: 4px;
    position: relative;
    transition: color var(--v-duration);
}

.v-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--v-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--v-ease);
}

.v-nav-link:hover,
.v-nav-link.current {
    color: var(--v-text);
}

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

/* =====================================================
   SCROLL REVEAL ANIMATIONS
   JS adds .v-visible class when element enters viewport
===================================================== */
[data-v-reveal] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.82s;
    transition-timing-function: var(--v-ease);
}

[data-v-reveal="up"]    { transform: translateY(38px); }
[data-v-reveal="left"]  { transform: translateX(-38px); }
[data-v-reveal="right"] { transform: translateX(38px); }
[data-v-reveal="scale"] { transform: scale(0.94); }
[data-v-reveal="fade"]  { }

[data-v-reveal].v-visible {
    opacity: 1;
    transform: none;
}

[data-v-delay="1"] { transition-delay: 0.10s; }
[data-v-delay="2"] { transition-delay: 0.22s; }
[data-v-delay="3"] { transition-delay: 0.34s; }
[data-v-delay="4"] { transition-delay: 0.46s; }
[data-v-delay="5"] { transition-delay: 0.58s; }
[data-v-delay="6"] { transition-delay: 0.70s; }

/* =====================================================
   BACKGROUND UTILITIES
===================================================== */
.v-bg-navy  { background-color: var(--v-navy);  }
.v-bg-navy2 { background-color: var(--v-navy2); }
.v-bg-navy3 { background-color: var(--v-navy3); }
.v-bg-navy4 { background-color: var(--v-navy4); }

/* =====================================================
   BORDER UTILITIES
===================================================== */
.v-border-top    { border-top:    1px solid var(--v-gold-border); }
.v-border-bottom { border-bottom: 1px solid var(--v-gold-border); }
.v-border-left   { border-left:   1px solid var(--v-gold-border); }
.v-border-right  { border-right:  1px solid var(--v-gold-border); }

/* =====================================================
   PRINT STYLES
===================================================== */
@media print {
    body {
        background: white;
        color: black;
    }
    nav, footer { display: none; }
}