/*
 * Vitalink Mesotech Skin — Brand palette & element overrides
 * ==================================================================
 *
 *  Colours below were sampled directly from the mesotech.it screenshot
 *  (exact pixel values, not approximations). To re-skin the whole site,
 *  edit ONLY the :root block — every rule references these variables.
 *
 *  Brand signature: solid blue (#0074BA) top bar with white text/logo,
 *  white page background, teal (#4AC3D6) as the secondary accent.
 * ================================================================== */

:root {
	/* --- Core brand blue (sampled: header bar rgb(0,116,186)) --- */
	--vlk-blue:        #0074BA; /* primary brand blue: nav bar, links, buttons */
	--vlk-blue-dark:   #005C94; /* hover / pressed                              */
	--vlk-blue-darker: #004A77; /* deep sections / footer                       */
	--vlk-blue-link:   #2A5E80; /* deeper underlined link tone (sampled)        */
	--vlk-blue-light:  #E6F2FA; /* light tint: hovers, table stripes            */
	--vlk-blue-soft:   #C2E0F2; /* borders/dividers on light backgrounds        */

	/* --- Secondary accent (sampled: 99% badge rgb(74,195,214)) --- */
	--vlk-teal:        #4AC3D6; /* badges, highlights, accent chips             */
	--vlk-teal-dark:   #2FA9BD; /* teal hover                                   */

	/* --- Neutrals --- */
	--vlk-white:       #FFFFFF; /* primary background                           */
	--vlk-offwhite:    #F6F9FD; /* subtle section background                    */

	/* --- Footer (sampled from mesotech.it footer) --- */
	--vlk-footer-top:    #2C5A7B; /* upper footer band (steel blue)             */
	--vlk-footer-bottom: #112838; /* lower footer band (dark navy)              */
	--vlk-footer-text:   #DCE7F0; /* footer body text                           */
	--vlk-footer-link:   #FFFFFF; /* footer links                               */

	/* --- Text --- */
	--vlk-text:        #1D1D1D; /* body text (near-black, matches site)         */
	--vlk-text-muted:  #5B6B7B; /* secondary text, captions                     */
	--vlk-text-on-blue:#FFFFFF; /* text on top of brand blue                    */
	--vlk-text-on-teal:#073B43; /* dark text on teal for contrast               */

	/* --- Functional --- */
	--vlk-border:      #E2E8F0;
	--vlk-radius:      8px;

	/* --- Typography --- */
	--vlk-font: "Vazirmatn", "IRANSansX", "Segoe UI", Tahoma, Arial, sans-serif;

	/* Heading font. Defaults to the body font (single-family look, like
	   mesotech.it). To pair a display font for headings, change this to
	   e.g. "Morabba", var(--vlk-font) AND enable its @font-face in fonts.css. */
	--vlk-font-heading: var(--vlk-font);
}

/* ------------------------------------------------------------------
 * 1) Base typography + canvas
 * ------------------------------------------------------------------ */
html,
body {
	font-family: var(--vlk-font);
	color: var(--vlk-text);
	background-color: var(--vlk-white);
}

body,
p, li, span, a, label, input, select, textarea, button,
h1, h2, h3, h4, h5, h6,
.entry-content, .site-content, .woocommerce {
	font-family: var(--vlk-font);
}

/* Leave icon fonts (Dashicons / Font Awesome / theme icons) untouched. */
[class^="dashicons"], [class*=" dashicons"],
[class^="fa-"], [class*=" fa-"],
[class^="icon-"], [class*=" icon-"],
.elementor-icon i, .elementor-icon svg {
	font-family: inherit;
}

/* ------------------------------------------------------------------
 * 2) Headings
 * ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--vlk-font-heading);
	color: var(--vlk-blue-dark);
	font-weight: 700;
}

/* ------------------------------------------------------------------
 * 3) Links
 * ------------------------------------------------------------------ */
a {
	color: var(--vlk-blue);
	text-decoration: none;
}
a:hover,
a:focus {
	color: var(--vlk-blue-dark);
}

/* ------------------------------------------------------------------
 * 4) Buttons (WordPress core, theme, and WooCommerce)
 *    !important is deliberate — a skin plugin must beat the theme.
 * ------------------------------------------------------------------ */
button:not(.elementor-menu-toggle),
input[type="button"],
input[type="submit"],
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce-page .button,
.single_add_to_cart_button,
.checkout-button,
.wc-block-components-button {
	background-color: var(--vlk-blue) !important;
	color: var(--vlk-text-on-blue) !important;
	border: 1px solid var(--vlk-blue) !important;
	border-radius: var(--vlk-radius) !important;
	transition: background-color .15s ease, border-color .15s ease;
}

button:not(.elementor-menu-toggle):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.woocommerce-page .button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.wc-block-components-button:hover {
	background-color: var(--vlk-blue-dark) !important;
	border-color: var(--vlk-blue-dark) !important;
	color: var(--vlk-text-on-blue) !important;
}

/* Outline variant — add class "vlk-btn-outline" in markup. */
.vlk-btn-outline {
	background-color: transparent !important;
	color: var(--vlk-blue) !important;
	border: 1px solid var(--vlk-blue) !important;
}
.vlk-btn-outline:hover {
	background-color: var(--vlk-blue-light) !important;
}

/* Teal accent button — add class "vlk-btn-teal". */
.vlk-btn-teal {
	background-color: var(--vlk-teal) !important;
	color: var(--vlk-text-on-teal) !important;
	border-color: var(--vlk-teal) !important;
}
.vlk-btn-teal:hover {
	background-color: var(--vlk-teal-dark) !important;
	border-color: var(--vlk-teal-dark) !important;
}

/* ------------------------------------------------------------------
 * 5) Forms — focus state in brand blue
 * ------------------------------------------------------------------ */
input:focus,
select:focus,
textarea:focus,
.wc-block-components-text-input input:focus {
	border-color: var(--vlk-blue) !important;
	outline-color: var(--vlk-blue) !important;
	box-shadow: 0 0 0 2px var(--vlk-blue-light) !important;
}

/* ------------------------------------------------------------------
 * 6) WooCommerce accents
 * ------------------------------------------------------------------ */
/* Sale badge in brand teal (matches the "99% pure" badge style). */
.woocommerce span.onsale,
.wc-block-components-product-badge {
	background-color: var(--vlk-teal) !important;
	color: var(--vlk-text-on-teal) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--vlk-blue-dark);
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a {
	color: var(--vlk-blue);
}

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--vlk-blue) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--vlk-blue) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--vlk-blue);
}

/* ------------------------------------------------------------------
 * 7) Section helpers (use these classes in your layouts)
 * ------------------------------------------------------------------ */
.vlk-section-blue {
	background-color: var(--vlk-blue);
	color: var(--vlk-text-on-blue);
}
.vlk-section-blue h1,
.vlk-section-blue h2,
.vlk-section-blue h3,
.vlk-section-blue a {
	color: var(--vlk-text-on-blue);
}
.vlk-section-soft { background-color: var(--vlk-offwhite); }
.vlk-chip {                      /* tag pill like "innovative technology" */
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--vlk-blue);
	color: var(--vlk-blue);
	border-radius: 999px;
	font-size: .9em;
}

/* ------------------------------------------------------------------
 * 8) Selection
 * ------------------------------------------------------------------ */
::selection {
	background: var(--vlk-blue);
	color: var(--vlk-text-on-blue);
}

/* ==================================================================
 * 9) SIGNATURE HEADER / FOOTER (the solid blue top bar)
 * ------------------------------------------------------------------
 * This is Mesotech's strongest brand cue: a full-width SOLID BLUE
 * navbar with white text + white logo, and a search icon on the far
 * side. The selectors below cover common themes. Because exact header
 * markup differs per theme/page-builder, ENABLE this block and adjust
 * the selectors to your active theme (Inspect the header element).
 *
 * --- uncomment to activate ---
 *
 * .site-header,
 * header.site-header,
 * #masthead,
 * .main-header {
 *     background-color: var(--vlk-blue) !important;
 * }
 * .site-header a,
 * .main-navigation a,
 * #masthead a,
 * .site-title a,
 * .site-header .search-toggle {
 *     color: var(--vlk-text-on-blue) !important;
 * }
 * .main-navigation a:hover,
 * .site-header a:hover {
 *     color: var(--vlk-blue-light) !important;
 * }
 * .site-footer,
 * footer.site-footer,
 * #colophon {
 *     background-color: var(--vlk-blue-darker) !important;
 *     color: var(--vlk-text-on-blue) !important;
 * }
 * .site-footer a, #colophon a { color: var(--vlk-blue-light) !important; }
 * ================================================================== */