/* ============================================================
   SMARTLY WEBBeD -- Section-by-Section Style Control
   First Step Driving School (firststepdrivingschool.ca)
   ============================================================
   HOW TO USE
   ------------------------------------------------------------
   Every section below defines a small set of CSS custom
   properties right at the top of its block:

       --h-size    heading font-size
       --h-weight  heading font-weight
       --h-color   heading color
       --p-size    paragraph font-size
       --p-weight  paragraph font-weight
       --p-color   paragraph color
       --radius    border-radius (buttons/boxes only, where present)

   To restyle a section, edit ONLY the values inside its own
   custom-property block. Nothing else in the file needs to
   change, and no other section is affected.

   LOAD ORDER -- add this line as the LAST item in <head>, after
   style.css, responsive.css, AND after any inline <style> block
   the page already has (several pages have one for the breadcrumb
   / FAQ accordion). Loading it last guarantees it always wins:
       <link rel="stylesheet" href="assets/css/sections.css">
   If you place it right after responsive.css instead, it will
   lose to any later inline <style> block on that same page for
   anything both of them target (e.g. the breadcrumb).

   SHARED VS PAGE-SPECIFIC
   ------------------------------------------------------------
   Some sections (About-heading, Footer, Package pricing cards,
   Sign-up button, FAQ accordion, Contact info blocks) are the
   same component reused across several pages. Editing that one
   block updates it everywhere it appears, which keeps the site
   visually consistent. Each block's comment lists every page
   that uses it.
   ============================================================ */


/* ============================================================
   SHARED -- Page Heading Block (.about-heading)
   Used on: Home (H1 not used here) About Us, BDE In-Class,
   BDE Online, Private Lessons, Certificate, Service Areas,
   FAQ, Contact -- every inner page's H1/H2 title block.
   ============================================================ */
.about-heading h1 {
  --h-size: 26px;
  --h-weight: 700;
  --h-color: #0051dd;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
  line-height: 1.3;
}
.about-heading h1 span { color: #1a1a1a; }

.about-heading h2 {
  --h-size: 19px;
  --h-weight: 600;
  --h-color: #245fe3;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
  line-height: 1.3;
}
.about-heading h2 span { color: #1a1a1a; }

/* Page-intro subtitle line under the heading (About Us, Service
   Areas, and the FAQ intro -- see FAQ note near the bottom). */
.page-subtitle {
  --p-size: 18px;
  --p-weight: 500;
  --p-color: #6a6a6a;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
  line-height: 32px;
}


/* ============================================================
   SHARED -- Body Copy inside the intro area
   Used on: About Us, BDE In-Class (.abouts-wrap / .about-info-row)
   ============================================================ */
.abouts-wrap p {
  --p-size: 18px;
  --p-weight: 700;
  --p-color: #000000;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
  line-height: 30px;
}
.about-info-row p {
  --p-size: 14px;
  --p-weight: 100;
  --p-color: #000000;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
  line-height: 30px;
}


/* ============================================================
   SHARED -- "Sign Up" Button (.btn-box)
   Used on: BDE In-Class, BDE Online, Private Lessons pricing
   cards, and the Certificate page's "Reach Us" button.
   ============================================================ */
.btn-box {
  --radius: 50px;
  --p-size: 14px;
  --p-weight: 500;
  --p-color: #ffffff;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
  border-radius: var(--radius);
}


/* ============================================================
   SHARED -- "Our Courses" Link Buttons (.prcodrbtn)
   Used on: Home ("OUR COURSES" section, 3 buttons)
   ============================================================ */
.prcodrbtn {
  --radius: 50px;
  --p-size: 16px;
  --p-weight: bold;
  --p-color: #ffffff;
  font-weight: var(--p-weight);
  color: var(--p-color);
  border-radius: var(--radius);
}


/* ============================================================
   SHARED -- Pricing Package Cards (.package-heading / .package-box)
   Used on: BDE In-Class, BDE Online, Private Lessons
   ============================================================ */
.package-heading {
  --h-size: 16px;
  --h-weight: 700;
  --h-color: #ffffff;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
  border-radius: 5px 5px 0 0;
}
.package-box {
  --radius: 5px;
  border-radius: var(--radius);
}
.price-display {
  --p-size: 1.2em;
  --p-weight: bold;
  --p-color: #245fe3;
}
.price-display .sale-price {
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
}
/* Plain (non ".price-display") price shown on BDE Online + Private
   Lessons package cards -- an <h5> instead of a <p>, same family. */
.offer-package h5 {
  --h-size: 18px;
  --h-weight: 700;
  --h-color: #1a1a1a;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
}


/* ============================================================
   SHARED -- Enrollment Step Copy (.online-wrapper)
   Used on: BDE In-Class (.online-text on <p>), BDE Online
   (currently on <h3> -- see flag below)
   ============================================================ */
.online-wrapper .online-text,
.online-wrapper h3 {
  --p-size: 18px;
  --p-weight: 400;
  --p-color: #2b2b2b;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
}
.online-wrapper h3 strong,
.online-wrapper .online-text strong { color: #245fe3; }
/* FLAG: on bde-online-packages.php this same step-by-step copy is
   marked up as <h3> rather than <p class="online-text"> (BDE
   In-Class uses the correct <p>). Both render identically via this
   rule, but the <h3> creates a duplicate, out-of-order heading
   level for screen readers/SEO. Recommend swapping those <h3> tags
   to <p class="online-text"> on that page when convenient. */


/* ============================================================
   SHARED -- Footer (all pages)
   ============================================================ */
footer h5.text-white {
  --h-size: 1.125rem;
  --h-weight: 600;
  --h-color: #ffffff;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
}
footer .widget_item p,
footer p {
  --p-size: 14px;
  --p-weight: 400;
  --p-color: #ffffff;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
}
.main_footer p {
  --p-size: 13px;
  --p-weight: 400;
  --p-color: #ffffff;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
}


/* ============================================================
   SHARED -- Contact Info Blocks (.contact-box / .office-hours-text)
   Used on: Contact page, and structurally similar to Home's
   "Our Office" block (kept separate below since Home uses its
   own class names: .our_ofc_hdng / .cnctnmbrs)
   ============================================================ */
.contact-box h2,
.contact-row h2 {
  --h-size: 28px;
  --h-weight: 700;
  --h-color: #1a1a1a;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
}
.contact-value {
  --p-size: 20px;
  --p-weight: 400;
  --p-color: #1a1a1a;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
}
.office-hours-text {
  --p-size: 16px;
  --p-weight: 400;
  --p-color: #2b2b2b;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
  line-height: 26px;
}
.office-hours-text strong { color: #1a1a1a; }


/* ============================================================
   SHARED -- FAQ Accordion (.faq-panel / .faq-question / .faq-answer-body)
   Used on: FAQ page only, but kept in its own block since it's
   a distinct interactive component.
   ============================================================ */
.faq-panel {
  --radius: 4px;
  border-radius: var(--radius);
}
.faq-question {
  --p-size: 16px;
  --p-weight: 700;
  --p-color: #222222;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
}
.faq-answer-body {
  --p-size: 16px;
  --p-weight: 400;
  --p-color: #2b2b2b;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
  line-height: 1.6;
}
/* FLAG (FAQ page only): the intro line under the "Frequently Asked
   Questions" heading is currently marked up as
   <h4 class="text-center"> rather than a paragraph. It's body copy,
   not a heading -- recommend changing it to
   <p class="page-subtitle text-center"> so it uses the shared
   .page-subtitle rule above like every other page's intro line,
   instead of having its own one-off h4 size. Left as-is here (no
   rule added for it) until that markup change is made, since
   targeting the bare <h4> would risk catching other real h4s. */


/* ============================================================
   HOME -- Hero Slider Caption
   ============================================================ */
.main-slider .banner-title {
  --h-size: 55px;
  --h-weight: 700;
  --h-color: #ffffff;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
}
.main-slider h2 {
  --h-size: 50px;
  --h-weight: 700;
  --h-color: #ffffff;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
}


/* ============================================================
   HOME -- "Friendly Innovative Reliable Safe Training" Banner
   ============================================================ */
.about-wrapper .five_words {
  --h-size: 26px;
  --h-weight: 400;
  --h-color: #1a1a1a;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
  line-height: 3rem;
}
.about-wrapper .five_words strong {
  font-size: 30px;
  margin-left: 5px;
}


/* ============================================================
   HOME -- Welcome / About Intro
   ============================================================ */
.abtus_cntnt h2 {
  --h-size: 26px;
  --h-weight: 700;
  --h-color: #0051dd;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
}
.abtus_cntnt .sbhdng_abtus {
  --p-size: 18px;
  --p-weight: 100;
  --p-color: #000000;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
  line-height: 26px;
}
.abtus_cntnt .kingsville p {
  --p-size: 14px;
  --p-weight: 100;
  --p-color: #000000;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
  line-height: 30px;
}


/* ============================================================
   HOME -- "In our courses you'll learn..." List
   ============================================================ */
.abtus_ftrs .ftrs_ttls {
  --h-size: 18px;
  --h-weight: bold;
  --h-color: #0051dd;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
}
.abtus_ftrs .abtinfo-list-lft,
.abtus_ftrs .abtinfo-list-rt {
  --p-size: 16px;
  --p-weight: 200;
  --p-color: #000000;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
  line-height: 30px;
}


/* ============================================================
   HOME -- Service-Area / "96% Pass Rate" Strip
   ============================================================ */
.leamington-part h2 {
  --h-size: 28px;
  --h-weight: 100;
  --h-color: #eee;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
}


/* ============================================================
   HOME -- "OUR COURSES" and "Why We Are The Best" Headings
   (.srv_hdng is reused for both blocks on Home)
   ============================================================ */
.srv_hdng {
  --h-size: 26px;
  --h-weight: 700;
  --h-color: #0051dd;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
  line-height: 30px;
}


/* ============================================================
   HOME -- 9 "Why Choose Us" Feature Boxes
   ============================================================ */
.serv-bx .srv-ttl {
  --h-size: 14px;
  --h-weight: 700;
  --h-color: #000000;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
}
.serv-bx .srtinfo {
  --p-size: 15px;
  --p-weight: 400;
  --p-color: #000000;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
}


/* ============================================================
   HOME -- "Our Office" Contact Block
   ============================================================ */
.our_ofc_hdng {
  --h-size: 18px;
  --h-weight: 100;
  --h-color: #000000;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
}
.cnctnmbrs p,
.addr p,
.mail_info p {
  --p-size: 15px;
  --p-weight: 600;
  --p-color: #6a6a6a;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
}
.cnctnmbrs strong,
.addr strong,
.mail_info strong { color: #000000; }


/* ============================================================
   SERVICE AREAS -- Area Name List
   ============================================================ */
.about-info-row h3,
.container.abouts-wrap h3 {
  --h-size: 1.5rem;
  --h-weight: 400;
  --h-color: #1a1a1a;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
}


/* ============================================================
   CERTIFICATE -- "Reach us for any queries" Callout
   ============================================================ */
.about-info-row h4 {
  --h-size: 22px;
  --h-weight: 700;
  --h-color: #1a1a1a;
  font-size: var(--h-size);
  font-weight: var(--h-weight);
  color: var(--h-color);
}


/* ============================================================
   BDE IN-CLASS -- Price Callout Banner (.offer_cad)
   NOTE: this element currently animates between blue and red via
   a @keyframes rule in style.css (colorchange). --p-color below
   only sets the base color; the animation itself is untouched.
   ============================================================ */
.offer_cad {
  --p-size: 40px;
  --p-weight: 600;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  line-height: 54px;
}


/* ============================================================
   SHARED -- Breadcrumb Strip
   Used on: every inner page (not Home) -- currently defined as an
   identical inline <style> block repeated in each page's <head>.
   This rule targets the same classes so it can become the single
   source of truth once you're ready to delete those inline blocks.

   IMPORTANT -- LOAD ORDER: for this block to actually win over the
   inline <style> tag still sitting in each page's <head>, the
   <link> to sections.css needs to be the LAST thing in <head>,
   after that inline <style> block -- not right after responsive.css
   as originally suggested. Move it to just before </head> on every
   page.
   ============================================================ */
.fsds-breadcrumb-list li {
  --p-size: 14px;
  --p-weight: 400;
  --p-color: #666666;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
}
.fsds-breadcrumb-current {
  --p-color: #333333;
  --p-weight: 600;
  color: var(--p-color);
  font-weight: var(--p-weight);
}


/* ============================================================
   SHARED -- Package Feature List Items (inside each pricing card)
   Used on: BDE In-Class, BDE Online, Private Lessons
   e.g. "20hrs in classroom", "Insurance discount", etc.
   ============================================================ */
.offer-package ul li p,
.package-content p {
  --p-size: 16px;
  --p-weight: 500;
  --p-color: #6a6a6a;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
}


/* ============================================================
   SHARED -- Struck-through Original Price
   Used on: BDE In-Class, BDE Online pricing cards
   (the "was $X" text next to the discounted price)
   ============================================================ */
.price-display .original-price {
  --p-size: 1em;
  --p-color: #888888;
  font-size: var(--p-size);
  color: var(--p-color);
  text-decoration: line-through;
}


/* ============================================================
   HOME -- "Why We Are The Best" Intro Line (.following)
   The sentence right under the "OUR COURSES" / "Why We Are..."
   heading: "What makes us the Best Driving School... We promise..."
   ============================================================ */
.following p {
  --p-size: 15px;
  --p-weight: 400;
  --p-color: #000000;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
}


/* ============================================================
   SHARED -- Post-Package Disclaimer Paragraphs (.offer-wrap p)
   Used on: BDE In-Class, BDE Online -- the e-Transfer / pick-up /
   winter-weather notice paragraphs below the pricing cards.
   ============================================================ */
.offer-wrap p {
  --p-size: 15px;
  --p-weight: 400;
  --p-color: #6a6a6a;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
}


/* ============================================================
   SHARED -- Floating "Request A Call" Tab Button
   Used on: every page (fixed to the right edge of the viewport)
   ============================================================ */
.feedback-form-btn {
  --radius: 0px;
  --p-size: 15px;
  --p-weight: 400;
  --p-color: #ffffff;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
  border-radius: var(--radius);
}


/* ============================================================
   SHARED -- "Call Me Now!" Form Submit Button
   Used on: every page, inside the Request A Call popout form
   ============================================================ */
.callmenow input[type="submit"] {
  --radius: 50px;
  --p-size: 16px;
  --p-weight: 500;
  --p-color: #ffffff;
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  color: var(--p-color);
  border-radius: var(--radius);
}


/* ============================================================
   NOT COVERED -- Main Navigation Menu Links
   (Home / About Us / Our Courses / etc. in the top navbar)

   These are styled by bootsnav.css (a vendor file), and no
   override for their color/size/weight exists in style.css --
   meaning I don't have a real current value to preserve here.
   Adding a guessed value risks visibly changing the nav on
   upload. If you want the nav menu editable the same way as
   everything else, send bootsnav.css and I'll add a matching
   block using its actual current values.
   ============================================================ */
