/*
 * Vienna Veterinary Clinic — colour palette (60 / 30 / 10)
 *
 *   60%  Base       White / crisp off-white  (page, content, section backgrounds)
 *   30%  Structure  Deep charcoal blue #1E293B  (headings, nav bar, footer, feature panels)
 *   10%  Accent     Bright blue #0EA5E9  (high-visibility CTA buttons only)
 *
 * Enqueued last from functions.php so it wins over the parent theme's
 * option-driven colours (green #4c8600 / #81d742) without touching Theme Options.
 * To change the palette later, edit the variables below.
 */

:root {
	--vvc-white: #FFFFFF;
	--vvc-offwhite: #F8FAFC;
	--vvc-navy: #1E293B;
	--vvc-accent: #0EA5E9;
	--vvc-accent-hover: #38BDF8;   /* lighter accent for button hover */
	--vvc-accent-edge: #0284C7;    /* darker accent for the button's bottom edge */
	--vvc-link: #0369A1;           /* accent-family blue dark enough for text links on white (AA) */
}

/* ADA / accessibility plugin variables */
html {
	--pColor: #1E293B;
	--sColor: #1E293B;
	--aColor: #0EA5E9;
}

/* ------------------------------------------------------------------
   1. BASE — page, text, headings, links
   ------------------------------------------------------------------ */
html body {
	background-color: var(--vvc-white);
	background-image: none;
	color: var(--vvc-navy);
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .single-title,
html body .latestPost .title a,
html body .homeBoxes h2,
html body .homeBox h3,
html body .footerboxes h3 {
	color: var(--vvc-navy);
}

html body a,
html body a:visited { color: var(--vvc-link); }
html body a:hover,
html body a:focus   { color: var(--vvc-navy); }

html body .homeBoxes { background-color: var(--vvc-offwhite); }

html body section#wda_testi h2,
html body section#wda_testi h4,
html body section#wda_testi a,
html body .dm-testmore a { color: var(--vvc-navy) !important; }

/* ------------------------------------------------------------------
   2. HEADER — contact block + navigation bar
   ------------------------------------------------------------------ */
html body .address p,
html body .address a:not(.btn) { color: var(--vvc-navy) !important; }
html body .address a:not(.btn):hover { color: var(--vvc-link) !important; }

html body .address div.social-icons a,
html body div.social-icons a,
html body div.header-social-icons a,
html body .side-social-icons a {
	background-color: var(--vvc-navy) !important;
	color: #FFFFFF !important;
}
html body div.header-social-icons:before {
	border-color: rgba(0, 0, 0, 0) var(--vvc-navy) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important;
}

html body #header { background-color: var(--vvc-navy) !important; }

html body #secondary-navigation > nav > ul > li:hover,
html body #secondary-navigation > nav > ul > li.current-menu-item,
html body #secondary-navigation > nav > ul li.current-menu-item,
html body #secondary-navigation > nav > ul > li.current-menu-parent {
	background-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow: inset 0 -4px 0 var(--vvc-accent);
}

html body #secondary-navigation .navigation ul li a,
html body #secondary-navigation .navigation ul li a:hover,
html body #secondary-navigation .navigation ul li:hover a {
	color: #FFFFFF !important;
}

html body #secondary-navigation .navigation ul ul,
html body #secondary-navigation .navigation ul ul li,
html body ul ul.wda-long-menu { background: var(--vvc-navy) !important; }
html body #secondary-navigation .navigation ul ul li:hover {
	background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), var(--vvc-navy) !important;
}

html body a#pull {
	background-color: var(--vvc-navy) !important;
	color: #FFFFFF !important;
}

/* Mobile call-to-action strip */
html body .hours { background-color: var(--vvc-navy) !important; color: #FFFFFF !important; }

/* ------------------------------------------------------------------
   3. BUTTONS — the 10% accent
   ------------------------------------------------------------------ */
html body .btn,
html body a.btn,
html body a.niceButi,
html body .carousel-caption a,
html body .mobileBtn a,
html body .col6 input[type="submit"],
html body #commentform input#submit,
html body #mtscontact_submit,
html body .gform_wrapper input[type="submit"],
html body .gform_wrapper button[type="submit"],
html body .gform_wrapper .gform_button {
	background-color: var(--vvc-accent) !important;
	background-image: none !important;
	color: var(--vvc-navy) !important;
	box-shadow: inset 0 -4px 0 0 var(--vvc-accent-edge) !important;
}

html body .btn:hover,
html body a.btn:hover,
html body a.niceButi:hover,
html body .carousel-caption a:hover,
html body .mobileBtn a:hover,
html body .col6 input[type="submit"]:hover,
html body #commentform input#submit:hover,
html body #mtscontact_submit:hover,
html body .gform_wrapper input[type="submit"]:hover,
html body .gform_wrapper button[type="submit"]:hover,
html body .gform_wrapper .gform_button:hover {
	background-color: var(--vvc-accent-hover) !important;
	color: var(--vvc-navy) !important;
}

/* The header "Download Our App" link is forced white by an ID-based rule in the theme; match its weight */
html body #regular-header > div > div.address.hide-xs > a.btn,
html body #regular-header > div > div.address.hide-xs > a.btn:hover {
	color: var(--vvc-navy) !important;
}

/* Secondary (non-CTA) controls use the structural navy */
html body #searchsubmit,
html body .sbutton,
html body .tagcloud a,
html body .currenttext,
html body .page-numbers.current,
html body .pagination a:hover,
html body .pagination .nav-previous a:hover,
html body .pagination .nav-next a:hover,
html body #load-posts a:hover,
html body #move-to-top:hover,
html body #tabber ul.tabs li a.selected,
html body #mobile-menu-wrapper ul li a:hover,
html body button.aicon_link {
	background-color: var(--vvc-navy) !important;
	color: #FFFFFF !important;
}

/* ------------------------------------------------------------------
   4. HOME PAGE — feature panels and hover overlays
   ------------------------------------------------------------------ */
html body .rightwow,
html body .newclients .rightwow,
html body .leftwow {
	background-color: var(--vvc-navy) !important;
	background-image: none !important;
}
html body .rightwow:before {
	border-color: transparent var(--vvc-navy) transparent transparent !important;
}
html body .rightwow,
html body .rightwow h1, html body .rightwow h2, html body .rightwow h3,
html body .rightwow h4, html body .rightwow h5, html body .rightwow h6,
html body .rightwow p, html body .rightwow li,
html body .rightwow a, html body .rightwow a:hover,
html body .leftwow, html body .leftwow h1, html body .leftwow h2,
html body .leftwow p, html body .leftwow label {
	color: #FFFFFF !important;
}

html body .box a:before { background-color: var(--vvc-navy) !important; }

html body .new-metro h3 {
	background-color: var(--vvc-navy) !important;
	border-color: var(--vvc-accent) !important;
	color: #FFFFFF;
}

html body .page-header,
html body section.page-header { background-color: var(--vvc-navy) !important; }
html body .page-header h1, html body .page-header h2,
html body .page-header p, html body .page-header a { color: #FFFFFF; }

html body .dm-service-section:nth-child(even) img { outline-color: var(--vvc-navy); }

/* ------------------------------------------------------------------
   5. FOOTER
   ------------------------------------------------------------------ */
html body footer,
html body footer.main-footer {
	background-color: var(--vvc-navy) !important;
	background-image: none !important;
}
html body footer a,
html body footer a:hover,
html body footer a:focus,
html body footer a:visited,
html body footer h1, html body footer h2, html body footer h3, html body footer h4,
html body .main-footer,
html body .main-footer p { color: #FFFFFF !important; }

html body .col6 input:not([type="submit"]),
html body .col6 textarea,
html body .col6 li input,
html body .col6 li textarea {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.4) !important;
	color: #FFFFFF;
}

html body .care-it .socials-list a:hover,
html body .care-it .socials-list a:hover span {
	background-color: #FFFFFF !important;
	color: var(--vvc-navy) !important;
}