/*
 * Fratelli base overrides — loaded LAST, after the inherited Artusi custom.css.
 * This is the layer where Fratelli supersedes Artusi's legacy child-theme CSS
 * while that file is gradually replaced. Element base + global grounds only;
 * component styling lives in its own stylesheet.
 */

body {
	background: var(--bg-page) !important; /* beat Salient's white body ground */
	color: var(--text-primary);
	font-family: var(--font-sans);
}

/* Artusi's homepage painted the content area black (`.home .container-wrap`
   in the inherited custom.css) — Fratelli is paper everywhere. !important
   because this layer deliberately supersedes the legacy child-theme CSS. */
body .container-wrap,
body.home .container-wrap,
#ajax-content-wrap,
#ajax-content-wrap .container-wrap {
	background: var(--bg-page) !important;
}

a {
	color: var(--text-primary);
	transition: color var(--duration-fast) var(--ease-standard);
}
a:hover {
	color: var(--accent-primary);
}

h1, h2, h3, h4 {
	font-family: var(--font-sans);
	color: var(--text-primary);
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------
 * Primary nav — hover / current colour to garnet (Salient's own hover effect
 * is a reveal animation, not a colour change).
 * ------------------------------------------------------------------------ */
#header-outer #top nav > ul.sf-menu > li > a:hover,
#header-outer #top nav > ul.sf-menu > li.sfHover > a,
#header-outer #top nav > ul.sf-menu > li.current-menu-item > a,
#header-outer #top nav > ul.sf-menu > li.current-menu-ancestor > a {
	color: var(--accent-primary);
}

/* ---------------------------------------------------------------------------
 * Range Cookers mega-menu — Salient native (menu_item nectar_menu_options:
 * enable_mega_menu). Two children (Moderna / Rustica) each carry a
 * menu_item_bg_img; restyled here into the reference's two image tiles.
 * ------------------------------------------------------------------------ */
#header-outer #top nav ul.sf-menu > li.megamenu > ul.sub-menu {
	background: var(--ivory-100) !important; /* #F2EFE7 — same as the page ground (user, 2026-08-30) */
	box-shadow: var(--shadow-lg) !important;
	border: 0 !important;
	border-radius: 0;
	width: auto;
	min-width: 0;
	left: 0;
	padding: 28px 28px 58px;
	display: flex;
	gap: 20px;
}
#header-outer #top nav ul.sf-menu > li.megamenu > ul.sub-menu > li {
	width: 220px;
	margin: 0;
	background-color: var(--white);
	background-size: 88%;
	background-repeat: no-repeat;
	background-position: center 58%;
	aspect-ratio: 4 / 3;
	position: relative;
	overflow: visible;
	border: 0;
}
/* The whole tile is the link — image area + the label strip below it */
#header-outer #top nav .sf-menu > li.megamenu > .sub-menu > li > a {
	position: absolute;
	inset: 0 0 -32px 0;
	display: flex;
	align-items: flex-end;
	padding: 0;
	background: none;
	border: 0;
	color: var(--text-primary);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.3;
}
#header-outer #top nav .sf-menu > li.megamenu > .sub-menu > li > a:hover {
	color: var(--accent-primary);
}
#header-outer #top nav .sf-menu > li.megamenu > .sub-menu > li {
	margin-bottom: 32px; /* room for the label the link now extends into */
}

/* ---------------------------------------------------------------------------
 * Secondary header bar (Salient native, header_layout = header_with_secondary).
 * The "centered-menu" header format forces the origin text to centre with no
 * option to change it — the reference has it left-aligned in a compact bar.
 * ------------------------------------------------------------------------ */
#header-secondary-outer .container nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#header-secondary-outer nav .nectar-center-text {
	position: static;
	left: auto;
	transform: none;
	text-align: left;
	margin: 0;
	order: 0;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: none;
	color: rgba(255, 255, 255, .75);
}
#header-secondary-outer nav .sf-menu {
	order: 1;
	margin-left: auto;
}
#header-secondary-outer nav .sf-menu > li > a {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: none;
}

/* WPML language switcher, right side of the secondary bar
 * (include/language-switcher.php — flat EN · IT · FR · NL list). */
#header-secondary-outer nav .fratelli-lang-switcher {
	order: 1;
	margin-left: auto;
}
#header-secondary-outer nav .fratelli-lang-switcher ul {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#header-secondary-outer nav .fratelli-lang-switcher li {
	margin: 0;
	padding: 0;
}
#header-secondary-outer nav .fratelli-lang-switcher a {
	display: block;
	padding: 0;
	background: transparent;
	text-decoration: none;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	transition: color var(--duration-fast) var(--ease-standard);
}
#header-secondary-outer nav .fratelli-lang-switcher .is-current a {
	color: #fff;
}
#header-secondary-outer nav .fratelli-lang-switcher a:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Fratelli section headings — the inherited Artusi rule in custom.css sets
   .kooka-text-intro/.kooka-split-copy/.kooka-text-split/.kooka-form h2 to
   42px/400 UPPERCASE. The Fratelli reference uses sentence case, a touch
   heavier. Override site-wide (fratelli-home.css already does this for the
   front page; this covers Technology / About / Contact / interior pages).
   ------------------------------------------------------------------------- */
.kooka-text-intro h2,
.kooka-split-copy h2,
.kooka-text-split-heading h2,
.kooka-form-heading h2 {
  text-transform: none;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
}

/* ---------------------------------------------------------------------------
   Gravity Forms (Contact page) — constrain width, give inputs a visible
   border on the pale ground, square the submit to match the site's CTAs.
   ------------------------------------------------------------------------- */
.gform_wrapper {
  max-width: 760px;
}
.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
  border: 1px solid rgba(20, 19, 17, 0.18);
  border-radius: 0;
  background: #fff;
  padding: 14px 16px;
}
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield select:focus,
.gform_wrapper .gfield textarea:focus {
  border-color: var(--accent-primary, #8c1c1c);
  outline: none;
}
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button {
  border-radius: 0;
  padding: 16px 34px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Mini-cart / off-canvas cart drawer (site-wide). The drawer markup is
   `.nectar-slide-in-cart .widget_shopping_cart ...` (Salient's slide-in
   cart); `#slide-out-widget-area` is the older off-canvas mode - cover both.
   View cart = outline, Checkout = solid black square. !important + this depth
   is needed to beat salient-dynamic-styles' `border-radius:200px !important`.
   ------------------------------------------------------------------------- */
.nectar-slide-in-cart .widget_shopping_cart .buttons,
#slide-out-widget-area .widget_shopping_cart .buttons {
  display: flex;
  gap: 10px;
}
.nectar-slide-in-cart .widget_shopping_cart .buttons a.button,
#slide-out-widget-area .widget_shopping_cart .buttons a.button {
  flex: 1 1 auto;
  border-radius: 0 !important;
  padding: 15px 18px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
  background: transparent !important;
  color: var(--text-primary, #141311) !important;
  border: 1px solid var(--text-primary, #141311) !important;
}
.nectar-slide-in-cart .widget_shopping_cart .buttons a.button:hover,
#slide-out-widget-area .widget_shopping_cart .buttons a.button:hover {
  background: var(--text-primary, #141311) !important;
  color: #fff !important;
}
.nectar-slide-in-cart .widget_shopping_cart .buttons a.button.checkout,
#slide-out-widget-area .widget_shopping_cart .buttons a.button.checkout {
  background: var(--text-primary, #141311) !important;
  color: #fff !important;
}
.nectar-slide-in-cart .widget_shopping_cart .buttons a.button.checkout:hover,
#slide-out-widget-area .widget_shopping_cart .buttons a.button.checkout:hover {
  background: #000 !important;
}
.nectar-slide-in-cart .widget_shopping_cart .total,
#slide-out-widget-area .widget_shopping_cart .total {
  border-top: 1px solid rgba(20, 19, 17, 0.14);
  padding-top: 16px;
  font-size: 15px;
}
.nectar-slide-in-cart .widget_shopping_cart .total .amount,
#slide-out-widget-area .widget_shopping_cart .total .amount {
  font-weight: 600;
}
.nectar-slide-in-cart .widget_shopping_cart a.remove,
#slide-out-widget-area .widget_shopping_cart a.remove {
  color: var(--accent-primary, #8c1c1c) !important;
}
/* salient-dynamic-styles pins border-radius:200px !important on these buttons
   with a selector deep enough to beat the rules above - doubled class to
   genuinely exceed it (see CLAUDE.md guidance on tied !important). */
.nectar-slide-in-cart.nectar-slide-in-cart .widget_shopping_cart .buttons a.button,
#slide-out-widget-area.slide-out-widget-area .widget_shopping_cart .buttons a.button {
  border-radius: 0 !important;
}
/* close (X) is white by default - invisible on the light drawer. */
.nectar-slide-in-cart.style_slide_in_click .close-cart .close-line,
#slide-out-widget-area .close-cart .close-line,
.nectar-slide-in-cart .slide_out_area_close .close-line {
  background-color: var(--text-primary, #141311) !important;
}
/* mini-cart quantity line: "N × price" then "Remove" on its own line */
.nectar-slide-in-cart .widget_shopping_cart .quantity,
#slide-out-widget-area .widget_shopping_cart .quantity {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: rgba(20, 19, 17, 0.7);
}
.nectar-slide-in-cart .widget_shopping_cart .mini-cart-remove,
#slide-out-widget-area .widget_shopping_cart .mini-cart-remove {
  display: block;
  margin-top: 6px;
}
.nectar-slide-in-cart .widget_shopping_cart .mini-cart-remove a,
#slide-out-widget-area .widget_shopping_cart .mini-cart-remove a {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(20, 19, 17, 0.45) !important;
  text-decoration: none;
}
.nectar-slide-in-cart .widget_shopping_cart .mini-cart-remove a:hover,
#slide-out-widget-area .widget_shopping_cart .mini-cart-remove a:hover {
  color: var(--accent-primary, #8c1c1c) !important;
}