/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/


/* === Fox 4WD styling === */
:root{
  --fox-red:#e60020;
  --fox-navy:#112337;
  --fox-grey:#f5f5f5;
  --fox-body:#3a4048;
}

/* --- rhythm: alternate bands so sections read as sections ------------- */
.wpb_row{ padding:56px 0; }
.wpb_row:nth-of-type(even){ background:var(--fox-grey); }

/* --- type ------------------------------------------------------------- */
body, .container-wrap{ color:var(--fox-body); }
h1,h2,h3,h4{ color:var(--fox-navy); }
h1{ font-size:2.9rem; line-height:1.12; letter-spacing:-.01em; }
h2{ font-size:2.1rem; margin-bottom:.6em; position:relative; padding-bottom:.4em; }
h2:after{ content:""; display:block; position:absolute; left:0; bottom:0;
          width:64px; height:4px; background:var(--fox-red); }
body[data-form-style] h2{ }
h3{ font-size:1.4rem; margin-top:1.4em; }
.wpb_text_column p{ line-height:1.75; }
.wpb_text_column ul li{ line-height:1.7; margin-bottom:.45em; }

/* hero sits centred with no rule under the headline.
   NB: the anchor is #hero, not #top - Salient's own <header id="top"> owns that. */
#hero h1, #hero h3, #hero p{ text-align:center; }
#hero h1{ margin-bottom:.25em; }
#hero h2:after{ display:none; }

/* --- header logo ------------------------------------------------------
   Salient keeps its logo in Theme Options (a serialised DB option with no API),
   so it renders <a id="logo" class="no-image"> with the site title as text.
   This swaps in the site's own original logo via CSS. Reversible, and it stops
   applying the moment a real logo is set in Theme Options, because Salient then
   drops the .no-image class. */
#logo.no-image{
  display:block; width:96px; height:52px;
  text-indent:-9999px; overflow:hidden; white-space:nowrap;
  background:url("http://fox4wdsuspension.com.au/wp-content/uploads/2026/08/header-logo.png") no-repeat left center;
  background-size:contain;
}
@media (max-width:690px){ #logo.no-image{ width:78px; height:42px; } }

/* --- accents ---------------------------------------------------------- */
a{ color:var(--fox-red); }
a:hover{ color:var(--fox-navy); }
.nectar-button.accent-color,
a.nectar-button{ background-color:var(--fox-red) !important; border-radius:3px;
                 padding:16px 34px; font-weight:600; letter-spacing:.02em; }
a.nectar-button:hover{ background-color:var(--fox-navy) !important; }

/* --- imagery -----------------------------------------------------------
   Most of these are tall portrait product shots on white. Unconstrained they
   render a full screen high each and swamp the copy, and white-on-white loses
   its edges - hence the height cap and the tint panel. */
.wpb_text_column img{
  max-height:400px; width:auto; height:auto;
  border-radius:4px; background:#fbfcfd; padding:10px;
  box-shadow:0 6px 22px rgba(17,35,55,.10);
}
/* hero runs full width, uncapped */
#hero .wpb_text_column img{
  max-height:none; width:100%; padding:0; background:none;
  box-shadow:0 10px 34px rgba(17,35,55,.18);
}
/* the three accessory shots sit in narrow columns - let them fill */
.vc_col-sm-4 .wpb_text_column img{ max-height:250px; }
@media (max-width:690px){ .wpb_text_column img{ max-height:280px; } }

/* --- spec tables ------------------------------------------------------ */
table.fox-specs{ border-collapse:collapse; margin-top:.5em; }
table.fox-specs td{ padding:11px 14px; border-bottom:1px solid #e2e6ea;
                    vertical-align:top; font-size:.95rem; }
table.fox-specs tr:nth-child(odd) td{ background:rgba(255,255,255,.6); }
table.fox-specs td:first-child{ color:var(--fox-navy); width:32%; }

/* --- navigation ------------------------------------------------------- */
#header-outer .sf-menu a{ font-weight:600; letter-spacing:.02em; }
#header-outer .sf-menu li a:hover{ color:var(--fox-red) !important; }

/* --- page-level footer band ------------------------------------------- */
.fox-footer-row.wpb_row{ background:var(--fox-navy) !important; padding:52px 0 34px; }
.fox-footer, .fox-footer p, .fox-footer li{ color:#c8d0da; }
.fox-footer h4{ color:#fff; font-size:1.05rem; margin:0 0 .7em; letter-spacing:.02em; }
.fox-footer-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.fox-footer ul{ list-style:none; margin:0; padding:0; }
.fox-footer li{ margin-bottom:.4em; }
.fox-footer a{ color:#c8d0da; }
.fox-footer a:hover{ color:var(--fox-red); }
.fox-copyright{ margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14);
                font-size:.85rem; color:#8b97a6; }
@media (max-width:690px){ .fox-footer-cols{ grid-template-columns:1fr; gap:26px; } }

/* --- mobile ----------------------------------------------------------- */
@media (max-width:690px){
  .wpb_row{ padding:36px 0; }
  h1{ font-size:2rem; }
  h2{ font-size:1.6rem; }
  table.fox-specs td{ display:block; width:100% !important; border-bottom:0; padding:4px 0; }
  table.fox-specs tr{ display:block; border-bottom:1px solid #e2e6ea; padding:10px 0; }
}