/*
Theme Name: Incart Lite Child
Theme URI: https://movingwater.example/
Description: Child theme of Incart Lite. All custom style changes for the
             MovingWater site should go here so they survive parent theme
             updates. Loads the parent theme's full stylesheet first, then
             appends overrides below.
Author: MovingWater
Template: incart-lite
Version: 1.0.0
Text Domain: incart-lite-child
*/

@import url("../incart-lite/style.css");

/* ---------------------------------------------------------------------
   Step 8 — Visual redesign. Applied incrementally, validated with the
   Playwright suite after each block. Desktop-first; mobile pass later.
   ------------------------------------------------------------------- */

:root {
	--mw-primary: #315b7c;
	--mw-primary-dark: #24435d;
	--mw-primary-light: #4a7ba3;
	--mw-white: #ffffff;
}

/* --- 8a. Links & headings: swap the old teal (#1abc9c) accent for the
   new primary blue. Body copy/typography left as-is for now. --- */
a { color: var(--mw-primary); }
a:hover { color: var(--mw-primary-dark); }

/* --- 8b. Replace the old red/orange (#F54336) UI-chrome accent with the
   primary blue across buttons, hovers, pagination and back-to-top.
   This is pure re-color of existing elements; no layout changes. --- */
.continue a,
form input[type="date"]:focus, form input[type="file"]:focus, form textarea:focus,
form input[type="submit"],
.comments-template .reply a,
#respond input[type="submit"],
#content .contact-left form input[type="date"]:focus,
#content .contact-left form input[type="file"]:focus,
#content .contact-left form textarea:focus,
#content .contact-left form input[type="submit"] {
	border-color: var(--mw-primary);
}
.continue a:hover,
form input[type="submit"]:hover,
.comments-template .reply a:hover,
#respond input[type="submit"]:hover,
#content .contact-left form input[type="submit"]:hover,
.widget_tag_cloud a:hover, .widget_product_tag_cloud a:hover,
#incart-paginate a:hover,
#incart-paginate .incart-current,
a#backtop {
	background-color: var(--mw-primary);
	border-color: var(--mw-primary);
}
.mid-box:hover .iconbox-icon i,
#footer .third_wrapper a:hover {
	color: var(--mw-primary);
}
blockquote,
#wp-calendar {
	background-color: var(--mw-primary);
}

/* --- 8c. WooCommerce buttons: give the primary "add to cart" / submit
   actions the new brand color with a white label (was plain gray). --- */
.woocommerce #content input.button, .woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce-page #content input.button, .woocommerce-page #respond input#submit,
.woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button,
.woocommerce div.product form.cart .button, .woocommerce #content div.product form.cart .button,
.woocommerce-page div.product form.cart .button, .woocommerce-page #content div.product form.cart .button {
	background-color: var(--mw-primary);
	border-color: var(--mw-primary);
	color: var(--mw-white);
}
.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover,
.woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {
	background-color: var(--mw-primary-dark);
	border-color: var(--mw-primary-dark);
	color: var(--mw-white);
}

/* --- 8d. Promotional highlight text: the site currently hardcodes
   color:#ff0000 inline on ~29 product/page bodies to call out prices and
   offers. Red-on-white for emphasis isn't accessible/on-brand; repoint
   it to the primary blue with a bold weight instead so it still reads
   as "important" without relying on red. Content itself (in the DB) is
   untouched — this is a pure CSS override, fully reversible by deleting
   this rule. --- */
[style*="color: #ff0000"], [style*="color:#ff0000"],
[style*="color: #FF0000"], [style*="color:#FF0000"],
[style*="color: red"], [style*="color:red"] {
	color: var(--mw-primary) !important;
	font-weight: 600;
}

/* --- 8e. Typography pass. Body copy keeps the existing Roboto 300/15px/
   25px-line-height (already loaded by the parent theme, so no new font
   request is added) — only headings and title-style elements are given a
   heavier weight (500/700, both already loaded via Roboto:400,300,400italic,
   500,700), a tighter line-height, and slight letter-spacing so they read
   as modern section titles instead of the previous thin/undifferentiated
   headings. Pure re-style of existing elements; no markup/layout change. */
h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.bread-title-holder h1.title,
.woocommerce div.product .product_title, .woocommerce-page div.product .product_title,
#logo #site-title a {
	font-weight: 700;
	letter-spacing: -0.02em;
}
.post-title a, .title a,
h3#comments-title, h3#reply-title,
.woocommerce #reviews #comments h2, .woocommerce-page #reviews #comments h2 {
	font-weight: 500;
}
.ske-title, .ske-title.ske-footer-title,
#sidebar .ske-title, #footer .sitename {
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* --- 8f. Buttons/spacing polish. The parent theme's buttons are square
   (border-radius: 0) and flat. Round the corners slightly and add a soft
   hover lift for a more modern feel, without touching padding/height/font
   sizing (so no layout reflow). Pagination and the "In offerta" badge get
   the same rounded treatment for visual consistency. --- */
.woocommerce #content input.button, .woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce-page #content input.button, .woocommerce-page #respond input#submit,
.woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button,
.woocommerce div.product form.cart .button, .woocommerce #content div.product form.cart .button,
.woocommerce-page div.product form.cart .button, .woocommerce-page #content div.product form.cart .button,
.continue a,
form input[type="submit"],
#respond input[type="submit"],
#content .contact-left form input[type="submit"] {
	border-radius: 4px;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover,
.woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover,
.continue a:hover,
form input[type="submit"]:hover,
#respond input[type="submit"]:hover,
#content .contact-left form input[type="submit"]:hover {
	box-shadow: 0 2px 6px rgba(49, 91, 124, 0.35);
	transform: translateY(-1px);
}
#incart-paginate a,
#incart-paginate .incart-current {
	border-radius: 4px;
}
.woocommerce ul.products li.product .onsale, .woocommerce-page ul.products li.product .onsale,
.woocommerce span.onsale, .woocommerce-page span.onsale {
	border-radius: 4px;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	transition: box-shadow 0.2s ease;
}
.woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* --- 8g. Header/footer modernization. Main nav hover/active state was a
   plain dark gray (#333) with no brand connection; switch it to the primary
   blue. A thin blue accent border is added to the dark header-top bar and
   footer to tie both chrome regions to the new palette without changing
   their existing dark backgrounds/layout. Social/topbar icons get a subtle
   blue hover accent instead of plain white. --- */
#skenav li a:hover, #skenav .sfHover, #skenav ul ul li,
#skenav ul li.current_page_item > a,
#skenav ul li.current-menu-ancestor > a,
#skenav ul li.current-menu-item > a,
#skenav ul li.current-menu-parent > a {
	background-color: var(--mw-primary) !important;
	color: var(--mw-white) !important;
}
#skenav .sfHover a { color: var(--mw-white) !important; }
#header-top {
	border-bottom: 2px solid var(--mw-primary);
}
.social_icon a:hover, .topbar_info i:hover {
	border-color: var(--mw-primary) !important;
	background-color: var(--mw-primary) !important;
}
#footer {
	border-top: 3px solid var(--mw-primary);
}

/* --- 8h. Mobile responsiveness pass. Pre-existing bug (present before this
   redesign, confirmed against the v0.8-redesign-baseline tag): the Form
   Manager plugin (contact form) sets a fixed inline `width:300px` on its
   text inputs, which overflows the viewport below ~360px and causes
   horizontal scroll on the whole page. Cap it to the container width on
   small screens; parent theme's table-based layout for the field is left
   otherwise untouched. --- */
@media (max-width: 480px) {
	.fm-form input[style*="width"],
	.fm-form select[style*="width"] {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	.fm-form table, .fm-form td {
		width: 100% !important;
		display: block;
	}
}