/* 
Theme Name: Rival Child
Theme URI: https://rivaldigital.com
Description: Rival Digital Child Theme
Author: Rival Team
Author URI: https://rivaldigital.com
Template: yootheme
Version: 1.0.1
Text Domain: yootheme-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* Hide the mobile floating footer CTA bar while a popup/scheduler overlay is open.
   The bar (#true-fixed-mobile-cta) is JS-injected with inline display:flex !important
   and a max z-index, so it otherwise sits on top of the scheduler and blocks its
   buttons. cta-scheduler.js toggles the data-cta-hidden attribute (and inline display)
   when an overlay opens/closes. The double-attribute selector + !important out-specifies
   the injector's "html body #true-fixed-mobile-cta[style]" rule. */
html body #true-fixed-mobile-cta[data-cta-hidden],
html body #true-fixed-mobile-cta[data-cta-hidden][style] {
    display: none !important;
}

/* ==========================================================================
   Conversion hero + site-wide conversion callouts
   Added 2026-09-10 for the Woodside conversion brief.
   Colors are pulled from the YOOtheme customizer values, not invented.
   ========================================================================== */

:root{
  --np-navy:#012D72;
  --np-navy-deep:#043673;
  --np-navy-hover:#184A87;
  --np-teal:#05A399;
  --np-teal-light:#29D2C9;
  --np-teal-pale:#7DCDCB;
  --np-mint:#BDE4E1;
  --np-gold:#FECA7A;
  --np-gold-hover:#FFDE8E;
  --np-gold-deep:#FFC56E;
  --np-brown:#5C4738;
}

/* --- Hero spacing ---------------------------------------------------------
   The hero's background SVG carries a teal swoosh anchored to the bottom of the
   section. Without generous bottom padding the swoosh cuts straight through the
   call button and the trust strip, and the navy text on it goes unreadable.
   The padding pushes the swoosh down, it does not just add whitespace. */
.np-hero-desktop.uk-section,.np-hero-desktop > .uk-section,.np-hero-desktop .uk-section{
  padding-bottom:220px !important}
@media (min-width:1600px){
  .np-hero-desktop.uk-section,.np-hero-desktop > .uk-section,.np-hero-desktop .uk-section{
    padding-bottom:280px !important} }
@media (max-width:1200px){
  .np-hero-desktop.uk-section,.np-hero-desktop > .uk-section,.np-hero-desktop .uk-section{
    padding-bottom:180px !important} }
.np-hero-mobile.uk-section,.np-hero-mobile > .uk-section,.np-hero-mobile .uk-section{
  padding-bottom:60px !important}

/* Left column runs tight — YOOtheme's own uk-margin classes are too generous
   for a hero that has to fit a headline, a subhead, two coupons and a trust
   strip above the fold. */
/* The logo is oversized and hangs ~38px BELOW the header into the hero
   (header bottom 156, logo bottom 194 at 1440px). The eyebrow badge has to
   start below that or it sits under the logo. */
.np-hero-left{padding-top:72px}
@media (max-width:1200px){ .np-hero-left{padding-top:60px} }

/* Explicit rhythm rather than one flat gap — the headline pair belongs
   tight together, the coupons and the trust strip need air.
   Order: 1 badge, 2 H1, 3 subhead, 4 offers, 5 trust. */
.np-hero-left > *{margin-top:0 !important;margin-bottom:0 !important}
.np-hero-left > *:nth-child(2){margin-top:26px !important}  /* H1        */
.np-hero-left > *:nth-child(3){margin-top:0 !important}   /* subhead   */
.np-hero-left > *:nth-child(4){margin-top:34px !important}  /* offers    */
.np-hero-left > *:nth-child(5){margin-top:32px !important}  /* trust     */
.np-hero-left h1,.np-hero-left .uk-h1,.np-hero-left .uk-heading-medium{margin-bottom:0 !important}
/* uk-h4 carries a lot of leading; trim it so the subline tucks under the
   headline instead of floating away from it. */
.np-hero-left > *:nth-child(3){line-height:1.28 !important}
.np-hero-left > *:nth-child(3) p,
.np-hero-left > *:nth-child(3) strong{line-height:1.28 !important}
.np-hero-left p{margin:0 !important}

/* --- Locally owned & operated badge -------------------------------------
   Deliberately ONE treatment everywhere. There used to be a light-on-dark
   variant for `.uk-section-primary`, but the only section that triggered it was
   the mobile hero — whose navy fill is covered by a LIGHT background image, and
   whose form card is white. White text was landing on light imagery, and the
   call note was rendering light teal on a white card. Solid pill, navy text. */
.np-local-badge{
  display:inline-flex;align-items:center;gap:10px;background:#fff;
  border:3px solid var(--np-teal);border-radius:50px;padding:12px 26px 12px 18px;
  font-weight:700;font-size:16px;line-height:1.2;color:var(--np-navy);
  text-transform:uppercase;letter-spacing:1px;
  box-shadow:1px 4px 5px 1px rgba(0,0,0,.1);
}
.np-local-badge svg{width:24px;height:24px;flex:none;fill:var(--np-teal)}



/* --- Offer coupon cards -------------------------------------------------- */
.np-offers{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.np-offer{
  position:relative;background:var(--np-navy);color:#fff;border-radius:20px;
  padding:20px 22px 18px;box-shadow:0 14px 40px rgba(1,45,114,.18);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease;
}
.np-offer:hover,.np-offer:focus{
  transform:translateY(-4px);box-shadow:0 20px 46px rgba(1,45,114,.28);
  color:#fff;text-decoration:none;
}
.np-offer::after{
  content:"";position:absolute;right:-42px;top:-42px;width:130px;height:130px;
  border-radius:50%;background:rgba(41,210,201,.16);
}
.np-offer .np-kicker{
  font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1.6px;
  color:var(--np-teal-light);margin-bottom:2px;position:relative;z-index:1;
}
.np-offer .np-big{
  font-family:bufalino,sans-serif;font-weight:800;line-height:.95;letter-spacing:.5px;
  font-size:clamp(2.2rem,3.6vw,3rem);color:var(--np-gold);position:relative;z-index:1;
}
.np-offer .np-big small{font-size:.42em;letter-spacing:1px}
.np-offer .np-what{font-weight:700;font-size:15px;line-height:1.25;margin-top:4px;position:relative;z-index:1}
.np-offer .np-claim{
  margin-top:8px;font-weight:700;font-size:13px;color:var(--np-teal-light);
  text-transform:uppercase;letter-spacing:1px;position:relative;z-index:1;
}
.np-offer .np-claim::after{content:" \2192"}
.np-offer .np-fine{
  font-size:11px;line-height:1.35;color:rgba(255,255,255,.72);
  margin-top:8px;padding-top:0;position:relative;z-index:1;
}
.np-offer.np-alt{background:var(--np-teal)}
.np-offer.np-alt .np-kicker{color:#062C2A}
.np-offer.np-alt .np-big{color:#fff}
.np-offer.np-alt .np-claim{color:var(--np-navy)}
.np-offer.np-alt .np-fine{color:rgba(255,255,255,.85)}
.np-offer.np-alt::after{background:rgba(255,255,255,.18)}

/* --- Hero CTA row -------------------------------------------------------- */
.np-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;
  text-align:center}

/* "or" divider between the form and the call option, inside the card */
.np-card-divider{display:flex;align-items:center;gap:14px;margin:18px 0 16px}
.np-card-divider::before,.np-card-divider::after{
  content:"";flex:1 1 auto;height:2px;background:rgba(1,45,114,.14);border-radius:2px}
.np-card-divider span{
  font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:2px;
  color:var(--np-brown);opacity:.7}

.np-form-card .np-cta-row{flex-direction:column;gap:9px;margin:0}
.np-form-card .np-cta-row .np-btn{width:100%;max-width:100%;justify-content:center;padding-left:20px;padding-right:20px}
.np-form-card .np-cta-note{font-size:13px;line-height:1.4}
.np-btn{
  box-sizing:border-box;
  display:inline-flex;align-items:center;gap:10px;border-radius:50px;
  font-family:bufalino,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:2px;
  text-decoration:none;padding:15px 30px;font-size:17px;line-height:1;
  box-shadow:1px 4px 5px 1px rgba(0,0,0,.1);border:none;cursor:pointer;
  transition:background .25s ease,transform .25s ease,color .25s ease;
}
.np-btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.np-btn-gold{background:var(--np-gold);color:var(--np-navy-deep)}
.np-btn-gold:hover{background:var(--np-gold-hover);color:var(--np-navy-deep);transform:translateY(-2px);text-decoration:none}
.np-btn-call{background:var(--np-navy);color:var(--np-teal-pale)}
.np-btn-call:hover{background:var(--np-navy-hover);color:var(--np-teal-pale);transform:translateY(-2px);text-decoration:none}
.np-cta-note{font-size:13px;font-weight:600;color:var(--np-teal);letter-spacing:.3px}

/* --- Trust strip --------------------------------------------------------- */
.np-trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  padding:18px 0 0;border-top:1px solid rgba(1,45,114,.12);
}
.np-trust img{height:116px;width:auto}
/* The whole rating block links through to the reviews page, matching the
   toolbar's "See For Yourself!" link. Weight matches the toolbar's bold too. */
.np-stars{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;
  color:var(--np-navy);white-space:nowrap;text-decoration:none;
  transition:color .2s ease}
a.np-stars:hover,a.np-stars:focus{color:var(--np-teal);text-decoration:none}
a.np-stars:hover .np-count,a.np-stars:focus .np-count{color:var(--np-teal)}
.np-stars .np-score{margin-right:2px}
.np-stars .np-s{color:var(--np-gold-deep);font-size:24px;letter-spacing:2px;
  text-shadow:0 1px 2px rgba(0,0,0,.18)}
.np-stars .np-count{font-weight:700;color:var(--np-navy);transition:color .2s ease}

/* --- Hero form card ------------------------------------------------------ */
.np-form-card{
  background:#fff;border-radius:20px;box-shadow:0 18px 50px rgba(1,45,114,.20);
  padding:26px 26px 22px;border-top:8px solid var(--np-gold);
}
.np-form-card .np-form-title{
  font-family:bufalino,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  font-size:1.5rem;line-height:1.05;color:var(--np-navy);margin:0;
}
.np-form-card .np-form-lede{font-size:14px;font-weight:600;color:var(--np-teal);margin:4px 0 0}
.np-form-card .np-form-privacy{font-size:11px;line-height:1.5;color:#7A6C60;margin:10px 0 0;text-align:center}

/* Gravity Forms inside the hero card — compact, brand-styled.
   GF 2.10 ships the "orbital" theme, whose classes are gform-theme--orbital
   (NOT the older .gravity-theme). Selectors below must match orbital or the
   card falls back to the plugin's default blue/teal controls. */
.np-form-card .gform_wrapper{margin:0}
.np-form-card .gform_wrapper .gform_fields{row-gap:12px !important}
.np-form-card .gform_wrapper .gfield_label,
.np-form-card .gform_wrapper legend.gfield_label{
  font-size:12px !important;font-weight:600 !important;
  text-transform:uppercase;letter-spacing:1px;
  color:var(--np-navy) !important;margin-bottom:5px !important;
}
.np-form-card .gform_wrapper .gfield_required{color:var(--np-teal) !important}
/* Inputs deliberately NOT restyled here: theme.1.css (the YOOtheme customizer)
   already brand-styles GF controls site-wide — white fill, navy border, 20px
   radius, Akhand. Overriding them only in the hero would make this one form
   look foreign. Only spacing, labels and the submit button are changed. */
.np-form-card .gform_wrapper .gform_footer{margin:14px 0 0 !important;padding:0 !important}
.np-form-card .gform_wrapper .gform_button,
.np-form-card .gform_wrapper input[type=submit].gform_button,
.np-form-card .gform_wrapper .gform_footer input[type=submit]{
  display:block !important;width:100% !important;max-width:none !important;
  border-radius:50px !important;border:none !important;cursor:pointer;
  background:var(--np-gold) !important;color:var(--np-navy-deep) !important;
  font-family:bufalino,sans-serif !important;font-weight:800 !important;
  text-transform:uppercase !important;letter-spacing:2px !important;
  font-size:17px !important;line-height:1 !important;padding:16px 28px !important;
  box-shadow:1px 4px 5px 1px rgba(0,0,0,.1) !important;
  transition:background .25s ease,transform .25s ease;
}
.np-form-card .gform_wrapper .gform_button:hover,
.np-form-card .gform_wrapper .gform_footer input[type=submit]:hover{
  background:var(--np-gold-hover) !important;color:var(--np-navy-deep) !important;
  transform:translateY(-2px);
}
.np-form-card .gform_wrapper .gform_validation_errors{
  border-radius:10px;font-size:13px;
}

/* --- Hero mascot (variant B) ---------------------------------------------
   The mascot is brand personality, not decoration. It peeks out from behind
   the top-left corner of the form card so the pair reads as one unit. */
/* --- Hero mascot -----------------------------------------------------------
   The mascot now lives INSIDE the form card, to the left of the card heading,
   so the two read as one unit. It hangs out past the card's top-left corner
   for personality; negative margins keep it from inflating the header row. */
.np-card-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.np-card-mascot{
  flex:none;height:132px;width:auto;
  margin:-46px 0 -12px -18px;
  filter:drop-shadow(0 8px 18px rgba(1,45,114,.22));
}
.np-card-headings{min-width:0}
.np-card-headings .np-form-lede{margin-bottom:0}

@media (max-width:1300px){ .np-card-mascot{height:118px;margin-top:-38px} }
@media (max-width:960px){
  .np-card-head{gap:10px}
  .np-card-mascot{height:96px;margin:-30px 0 -10px -12px}
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:960px){
  .np-offers{grid-template-columns:1fr}
  .np-cta-row .np-btn{flex:1 1 100%;justify-content:center}
  /* Accreditation marks are trust signals, not decoration. On small screens
     they sat directly on a busy light photo, which washed them out — so the
     strip gets a solid panel to sit on as well as more size. */
  .np-trust{gap:18px}
  .np-trust img{height:100px}
  .np-stars{font-size:16px}
  .np-stars .np-s{font-size:22px}
  .np-mascot-mini{display:none}
  .np-local-badge{font-size:15px;letter-spacing:.8px;padding:11px 22px 11px 15px}
  .np-local-badge svg{width:22px;height:22px}
}

@media (max-width:480px){
  .np-trust{gap:14px}
  .np-trust img{height:86px}
  .np-stars{font-size:15px}
  .np-stars .np-s{font-size:20px}
  .np-local-badge{font-size:13.5px;letter-spacing:.5px;padding:10px 18px 10px 13px}
  .np-local-badge svg{width:20px;height:20px}
}

/* ==========================================================================
   Conversion band — shared by the service page template and any page that
   drops the same markup in. Reuses the hero's .np-* components verbatim so
   there is one place to restyle offers, trust marks and the form card.
   ========================================================================== */

.np-badge-center{display:flex;justify-content:center;margin-bottom:16px}

.np-band .uk-container > .uk-grid{align-items:center}
.np-band-left > * + *{margin-top:16px !important}
.np-band-lede{
  font-size:1.05rem;line-height:1.5;color:var(--np-brown);max-width:48ch;margin:0;
}
.np-band-lede strong{color:var(--np-navy)}
.np-band .np-trust{border-top-color:rgba(1,45,114,.18)}

/* The band section has no background colour, so a white card on white would
   read only as a shadow. Borrow the site's existing card treatment — the footer
   cards already use a thick #7DCDCB frame — instead of inventing a new one. */
.np-band .np-form-card{
  border:6px solid var(--np-teal-pale);
  border-top:6px solid var(--np-teal-pale);
  border-radius:16px;
  box-shadow:0 14px 38px rgba(1,45,114,.12);
}

@media (max-width:960px){
  .np-band-left > * + *{margin-top:14px !important}
  .np-band .np-form-card{margin-top:26px}
}

/* --- Offer strip: the high-placement conversion block ----------------------
   The service body runs ~9,000px, so the closing conversion band alone sits far
   below the fold. This strip repeats the offers directly under the page hero. */
/* Tight top/bottom so the strip clears the fold without scrolling. The class
   can land on the section element itself or on an outer wrapper depending on
   whether the section has a background image, so cover both. */
.np-strip-section.uk-section,
.np-strip-section > .uk-section,
.np-strip-section .uk-section{padding-top:8px !important;padding-bottom:8px !important}
.np-strip-section .uk-grid-margin{margin-top:0 !important}

.np-strip{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:20px;align-items:center}
.np-strip .np-offer{padding:12px 16px 11px}
.np-strip .np-offer .np-fine{display:none}
.np-strip .np-big{font-size:clamp(1.9rem,3vw,2.5rem)}
.np-strip-cta{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.np-strip .np-btn{padding:12px 20px;font-size:15px;letter-spacing:1.4px}
.np-strip-cta .np-btn{width:100%;justify-content:center}
.np-strip-lede{font-size:.95rem;line-height:1.4;color:var(--np-brown);margin:0 0 2px}
.np-strip-lede strong{color:var(--np-navy)}

@media (max-width:960px){
  .np-strip{grid-template-columns:1fr;gap:20px}
}

/* --- Site-wide locally-owned band (printed from functions.php) ------------- */
.np-owner-band{background:var(--np-navy);color:#fff;padding:26px 0}
.np-owner-band__inner{
  max-width:1200px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.np-owner-band__mark{
  flex:none;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(41,210,201,.18);border:3px solid var(--np-teal-light);
}
.np-owner-band__mark svg{width:28px;height:28px;fill:var(--np-teal-light)}
.np-owner-band__text{
  flex:1 1 320px;margin:0;font-size:1rem;line-height:1.5;color:rgba(255,255,255,.86);
}
.np-owner-band__text strong{display:block;color:#fff;font-size:1.15rem;margin-bottom:3px}
.np-owner-band__cta{flex:none}

@media (max-width:768px){
  .np-owner-band{padding:22px 0}
  .np-owner-band__inner{gap:14px}
  .np-owner-band__text{flex:1 1 100%;font-size:.95rem}
  .np-owner-band__cta{width:100%;justify-content:center}
}

/* --- Page-level "locally owned" callout -----------------------------------
   Deliberately NOT the navy footer band, which already appears on every page.
   This is the lighter, editorial version so a page carrying both does not read
   as the same message printed twice. */
.np-local-callout{
  display:flex;align-items:flex-start;gap:22px;
  background:linear-gradient(180deg,#F2FAF9 0%,#FFFFFF 100%);
  border-left:10px solid var(--np-teal);
  border-radius:14px;
  padding:26px 30px;
  box-shadow:0 8px 26px rgba(1,45,114,.08);
}
.np-local-callout__mark{
  flex:none;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:3px solid var(--np-teal);
}
.np-local-callout__mark svg{width:28px;height:28px;fill:var(--np-teal)}
.np-local-callout__body{min-width:0}
.np-local-callout__title{
  font-family:bufalino,sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:1px;line-height:1.1;
  font-size:clamp(1.25rem,2.2vw,1.7rem);
  color:var(--np-navy);margin:0 0 8px;
}
.np-local-callout__text{
  margin:0;font-size:1.02rem;line-height:1.55;color:var(--np-brown);max-width:70ch;
}

@media (max-width:768px){
  .np-local-callout{gap:16px;padding:20px 20px 20px 22px;border-left-width:8px}
  .np-local-callout__mark{width:46px;height:46px}
  .np-local-callout__mark svg{width:22px;height:22px}
  .np-local-callout__text{font-size:.97rem}
}