/*
 * Value Construction — global presentation
 *
 * WEB-A03.8: reset, typography, links, containers, button system, forms,
 * tables, blog, breadcrumbs, images, dividers, pagination, a11y, utilities.
 * Rules moved intact from legacy-v4.css.
 */
/* --- from legacy-v4.css lines 46-173 --- */
/* ----------------------------------------------------------------------
   02. GLOBAL RESET / FOUNDATION
   ---------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--vc-text);
    background: var(--vc-white);
    font-family: var(--vc-font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

::selection {
    background: var(--vc-navy-900);
    color: var(--vc-white);
}

/* ----------------------------------------------------------------------
   03. TYPOGRAPHY
   ---------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title {
    margin-top: 0;
    color: var(--vc-navy-900);
    font-family: var(--vc-font-heading);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

h1,
.elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(2.6rem, 5vw, 5.2rem);
    font-weight: 750;
    letter-spacing: -0.045em;
}

h2,
.elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(2rem, 3.6vw, 3.45rem);
    letter-spacing: -0.035em;
}

h3,
.elementor-widget-heading h3.elementor-heading-title {
    font-size: clamp(1.45rem, 2.3vw, 2.05rem);
}

h4 {
    font-size: 1.25rem;
}

p {
    margin-top: 0;
    margin-bottom: 1.2rem;
    color: var(--vc-muted);
}

strong,
b {
    color: var(--vc-text);
    font-weight: 700;
}

small {
    font-size: 0.875rem;
}

/* ----------------------------------------------------------------------
   04. LINKS
   ---------------------------------------------------------------------- */
a {
    color: var(--vc-navy-700);
    text-decoration: none;
    transition: color var(--vc-transition), opacity var(--vc-transition);
}

a:hover,
a:focus {
    color: var(--vc-accent);
    text-decoration: none;
}

.entry-content a:not(.button):not(.elementor-button):not(.wp-block-button__link) {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* ----------------------------------------------------------------------
   05. CONTAINERS / PAGE WIDTH
   ---------------------------------------------------------------------- */
.container,
.site-content > .container,
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner {
    width: min(100% - 40px, var(--vc-container));
    max-width: var(--vc-container);
    margin-left: auto;
    margin-right: auto;
}

.site-content,
#content {
    background: var(--vc-white);
}


/* --- from legacy-v4.css lines 280-367 --- */
/* ----------------------------------------------------------------------
   08. BUTTON SYSTEM
   ---------------------------------------------------------------------- */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
a.button,
.wp-block-button__link,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 24px !important;
    border: 1px solid var(--vc-navy-900) !important;
    border-radius: var(--vc-radius-sm) !important;
    background: var(--vc-navy-900) !important;
    color: var(--vc-white) !important;
    font-family: var(--vc-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.035em;
    text-transform: none;
    box-shadow: none !important;
    cursor: pointer;
    transition: background var(--vc-transition), border-color var(--vc-transition), color var(--vc-transition), transform var(--vc-transition);
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.button:hover,
a.button:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: var(--vc-accent) !important;
    border-color: var(--vc-accent) !important;
    color: var(--vc-white) !important;
    transform: translateY(-1px);
}

button:focus,
input[type="submit"]:focus,
.button:focus,
a.button:focus,
.elementor-button:focus {
    outline: 3px solid rgba(217, 107, 39, 0.24);
    outline-offset: 2px;
}


/* Keep nested Elementor/WooCommerce button text readable */
.elementor-button .elementor-button-text,
.elementor-button span,
.woocommerce a.button span,
.woocommerce button.button span,
input#submit {
    color: inherit !important;
}

/* Secondary / outline buttons */
.vc-button-outline,
.button.alt.vc-button-outline,
.elementor-button.vc-button-outline {
    background: transparent !important;
    color: var(--vc-navy-900) !important;
    border-color: var(--vc-navy-900) !important;
}

.vc-button-outline:hover,
.button.alt.vc-button-outline:hover,
.elementor-button.vc-button-outline:hover {
    background: var(--vc-navy-900) !important;
    color: var(--vc-white) !important;
}


/* --- from legacy-v4.css lines 553-703 --- */
/* ----------------------------------------------------------------------
   14. FORMS
   ---------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--vc-steel-200) !important;
    border-radius: var(--vc-radius-sm) !important;
    background: var(--vc-white) !important;
    color: var(--vc-text) !important;
    font-family: var(--vc-font);
    font-size: 15px;
    box-shadow: none !important;
    transition: border-color var(--vc-transition), box-shadow var(--vc-transition);
}

textarea {
    min-height: 150px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    outline: none !important;
    border-color: var(--vc-navy-700) !important;
    box-shadow: 0 0 0 3px rgba(28, 69, 104, 0.10) !important;
}

label,
.woocommerce form .form-row label {
    color: var(--vc-navy-900);
    font-size: 14px;
    font-weight: 650;
}

/* ----------------------------------------------------------------------
   15. TABLES
   ---------------------------------------------------------------------- */
table,
.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--vc-steel-100) !important;
    border-radius: 0 !important;
    background: var(--vc-white);
}

thead,
.woocommerce table.shop_table thead {
    background: var(--vc-navy-900);
    color: var(--vc-white);
}

th,
.woocommerce table.shop_table th {
    padding: 13px 16px !important;
    color: var(--vc-white);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}

td,
.woocommerce table.shop_table td {
    padding: 14px 16px !important;
    border-top: 1px solid var(--vc-steel-100) !important;
    color: var(--vc-text);
}

tbody tr:nth-child(even) {
    background: #fafbfc;
}

/* ----------------------------------------------------------------------
   16. BLOG / INSIGHTS
   ---------------------------------------------------------------------- */
article,
.post,
.blog-post,
.mg-blog-post-box {
    color: var(--vc-text);
}

.entry-title a,
.post-title a,
.blog-title a {
    color: var(--vc-navy-900) !important;
}

.entry-title a:hover,
.post-title a:hover,
.blog-title a:hover {
    color: var(--vc-accent) !important;
}

.entry-meta,
.post-meta,
.blog-meta {
    color: var(--vc-steel-500);
    font-size: 13px;
}

/* ----------------------------------------------------------------------
   17. BREADCRUMBS / PAGE TITLES
   ---------------------------------------------------------------------- */
.page-header,
.page-title-section,
.breadcrumb-area,
.mg-breadcrumb-section {
    background: var(--vc-navy-950) !important;
    color: var(--vc-white) !important;
    border: 0 !important;
}

.page-header h1,
.page-title-section h1,
.breadcrumb-area h1,
.mg-breadcrumb-section h1,
.mg-breadcrumb-section .title {
    color: var(--vc-white) !important;
}

.breadcrumb,
.breadcrumb a,
.mg-breadcrumb-section a {
    color: rgba(255, 255, 255, 0.74) !important;
}

.breadcrumb a:hover,
.mg-breadcrumb-section a:hover {
    color: var(--vc-white) !important;
}


/* --- from legacy-v4.css lines 1019-1127 --- */
/* ----------------------------------------------------------------------
   26. CORPORATE IMAGE TREATMENT
   ---------------------------------------------------------------------- */
.vc-project-image,
.vc-service-image,
.vc-feature-image {
    overflow: hidden;
    background: var(--vc-steel-100);
}

.vc-project-image img,
.vc-service-image img,
.vc-feature-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.vc-project-image:hover img,
.vc-service-image:hover img,
.vc-feature-image:hover img {
    transform: scale(1.035);
}

/* ----------------------------------------------------------------------
   27. HORIZONTAL RULES / DIVIDERS
   ---------------------------------------------------------------------- */
hr,
.elementor-divider-separator {
    border-color: var(--vc-steel-100) !important;
}

/* ----------------------------------------------------------------------
   28. PAGINATION
   ---------------------------------------------------------------------- */
.pagination .page-numbers,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border: 1px solid var(--vc-steel-100) !important;
    color: var(--vc-navy-900) !important;
    background: var(--vc-white) !important;
}

.pagination .current,
.woocommerce nav.woocommerce-pagination ul li span.current,
.pagination .page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--vc-navy-900) !important;
    border-color: var(--vc-navy-900) !important;
    color: var(--vc-white) !important;
}

/* ----------------------------------------------------------------------
   29. ACCESSIBILITY
   ---------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid rgba(217, 107, 39, 0.42);
    outline-offset: 2px;
}

.screen-reader-text:focus {
    background: var(--vc-white);
    color: var(--vc-navy-900);
}

/* ----------------------------------------------------------------------
   30. UTILITY CLASSES FOR FUTURE ELEMENTOR/SKYWORk PAGES
   ---------------------------------------------------------------------- */
.vc-text-white,
.vc-text-white h1,
.vc-text-white h2,
.vc-text-white h3,
.vc-text-white h4,
.vc-text-white p {
    color: var(--vc-white) !important;
}

.vc-text-muted {
    color: var(--vc-muted) !important;
}

.vc-accent {
    color: var(--vc-accent) !important;
}

.vc-border-top {
    border-top: 1px solid var(--vc-steel-100);
}

.vc-border-bottom {
    border-bottom: 1px solid var(--vc-steel-100);
}

.vc-no-shadow {
    box-shadow: none !important;
}

.vc-shadow {
    box-shadow: var(--vc-shadow-md) !important;
}

/* ----------------------------------------------------------------------
   D01. DESIGN-SYSTEM UTILITIES (new classes only — not used by live pages)
   Do not restyle existing Elementor/Woo selectors here.
   ---------------------------------------------------------------------- */
.vc-container-site {
    width: min(100% - (var(--vc-gutter) * 2), var(--vc-container-site));
    max-width: var(--vc-container-site);
    margin-left: auto;
    margin-right: auto;
}

.vc-container-content {
    width: min(100% - (var(--vc-gutter) * 2), var(--vc-container-content));
    max-width: var(--vc-container-content);
    margin-left: auto;
    margin-right: auto;
}

.vc-container-reading {
    width: min(100% - (var(--vc-gutter) * 2), var(--vc-container-reading));
    max-width: var(--vc-container-reading);
    margin-left: auto;
    margin-right: auto;
}

.vc-section {
    padding-block: var(--vc-section-space);
}

.vc-section-sm {
    padding-block: var(--vc-section-space-sm);
}

.vc-display {
    font-family: var(--vc-font-heading);
    font-size: var(--vc-text-display);
    font-weight: 700;
    line-height: var(--vc-leading-tight);
    letter-spacing: var(--vc-tracking-display);
    color: var(--vc-heading);
}

.vc-lead {
    font-size: var(--vc-text-body-lg);
    line-height: var(--vc-leading-body);
    color: var(--vc-text-muted);
}

.vc-caption {
    font-size: var(--vc-text-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vc-text-muted);
}

.vc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vc-btn-height);
    padding: 0 var(--vc-space-6);
    border-radius: var(--vc-radius-xs);
    font-family: var(--vc-font);
    font-size: var(--vc-text-small);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--vc-transition), border-color var(--vc-transition), color var(--vc-transition);
}

.vc-btn:focus-visible {
    outline: 3px solid rgba(28, 69, 104, 0.35);
    outline-offset: 2px;
}

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

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

.vc-btn--secondary {
    background: transparent;
    border: 1px solid var(--vc-navy-900);
    color: var(--vc-navy-900);
}

.vc-btn--secondary:hover,
.vc-btn--secondary:focus {
    background: var(--vc-navy-900);
    color: var(--vc-white);
}

.vc-btn--accent {
    background: var(--vc-gold);
    border: 1px solid var(--vc-gold);
    color: var(--vc-navy-950);
}

.vc-btn--accent:hover,
.vc-btn--accent:focus {
    background: var(--vc-navy-900);
    border-color: var(--vc-navy-900);
    color: var(--vc-white);
}