/* ==========================================================
   PDSTYLE — PROADIGN TOOLKIT DESIGN SYSTEM
   Version: 1.0

   Portable frontend design system for Proadign website builds.

   PURPOSE:
   PDSTYLE provides reusable presentation components and
   layout utilities. It does not contain project content,
   business logic, or Dealer Engine functionality.

   NEW PROJECT SETUP:
   1. Update the project values in :root below.
   2. Keep the pdstyle-* class names unchanged.
   3. Use only the components required by the project.
   4. Site-specific CSS should remain outside this master file.

   ARCHITECTURE:
   PDSTYLE = frontend presentation
   PDE     = Proadign Dealer Engine / inventory functionality

   DESIGN RULE:
   - Global values hold shared project design tokens.
   - Each component owns its unique styling.
   - Components use global values where appropriate.
   - Divi-specific dependencies are identified where required.
   ========================================================== */


/* ==========================================================
   01 — GLOBAL PROJECT VALUES
   ========================================================== */

:root {

  /* Project brand colors */
  --pdstyle-primary: #3333CC;
  --pdstyle-accent: #FF9900;
  --pdstyle-highlight: #FFD400;
  --pdstyle-cream: #F5F5F5;
  --pdstyle-charcoal: #333333;
  --pdstyle-text: #4A4A4A;
  --pdstyle-white: #FFFFFF;

  /* Project brand assets */
  --pdstyle-logo-url: url("https://dealer.limitoutmarine.com/wp-content/uploads/2026/08/limit-out-marine-logo.png");
  --pdstyle-icon-url: url("https://dealer.limitoutmarine.com/wp-content/uploads/2026/08/limit-out-marine-icon.png");

  /* Standard site content width */
  --pdstyle-content-width: 1280px;

}


/* ==========================================================
   02 — COMPONENT: MOBILE MENU LABEL
   Builder dependency: Divi

   Adds "MENU" beside Divi's mobile hamburger icon.

   Divi Menu module class:
   pdstyle-mobile-menu
   ========================================================== */

.pdstyle-mobile-menu .mobile_menu_bar {
  display: flex;
  align-items: center;
  gap: 0;
}

.pdstyle-mobile-menu .mobile_menu_bar:after {
  content: "MENU";
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}


/* ==========================================================
   03 — COMPONENT: PAGE TITLE

   Visual page-name treatment used inside interior scenic
   hero sections.

   This is NOT the page's primary SEO H1.

   Standard:
       PAGE TITLE
       ─── icon ───

   No-icon option:
   Add "no-icon" to .pdstyle-page-title-divider
   ========================================================== */

.pdstyle-page-title {
  display: table;
  width: auto;
  margin: 0 auto;
  text-align: center;
}


/* Page-name typography */

.pdstyle-page-title h2 {
  margin: 0;
  padding: 0;

  color: rgba(255, 255, 255, 0.6);

  font-size: 50px;
  font-weight: 600;
  line-height: 1;

  text-transform: uppercase;
}


/* Divider wrapper */

.pdstyle-page-title-divider {
  display: flex;
  align-items: center;

  width: 95%;
  gap: 10px;

  margin: 5px auto 0;
}


/* Accent lines */

.pdstyle-page-title-line {
  flex: 1;
  height: 3px;
  background: var(--pdstyle-accent);
}


/* Optional decorative brand icon */

.pdstyle-page-title-icon {
  display: block;
  width: 27px;
  height: auto;
  flex: 0 0 22px;
}


/* Page Title — No Icon */

.pdstyle-page-title-divider.no-icon {
  display: block;
}

.pdstyle-page-title-divider.no-icon .pdstyle-page-title-icon {
  display: none;
}

.pdstyle-page-title-divider.no-icon .pdstyle-page-title-line:first-child {
  display: block;
  width: 100%;
}

.pdstyle-page-title-divider.no-icon .pdstyle-page-title-line:last-child {
  display: none;
}


/* Page Title — Tablet */

@media (max-width: 980px) {

  .pdstyle-page-title h2 {
    font-size: 46px;
  }

  .pdstyle-page-title-icon {
    width: 20px;
    flex-basis: 20px;
  }
}


/* Page Title — Phone */

@media (max-width: 767px) {

  .pdstyle-page-title h2 {
    font-size: 36px;
  }

  .pdstyle-page-title-divider {
    gap: 8px;
    margin-top: 8px;
  }

  .pdstyle-page-title-icon {
    width: 18px;
    flex-basis: 18px;
  }
}


/* ==========================================================
   04 — COMPONENT: HEADING TREATMENT

   Reusable treatment for H1, H2 and H3 content headings.

   Optional eyebrow:
   .pdstyle-heading-eyebrow

   Standard short accent:
   .pdstyle-heading-accent

   Full-width accent:
   .pdstyle-heading-accent.full

   Centered accent:
   .pdstyle-heading-accent.center

   Accent closer to heading:
   .pdstyle-heading-accent.tight

   Eyebrow and accent use the global PDSTYLE accent color.
   ========================================================== */


/* Optional Eyebrow */

.pdstyle-heading-eyebrow {
  margin: 0 0 2px;
  padding: 0;

  color: var(--pdstyle-accent);

  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 1.4px;

  text-transform: uppercase;
}


/* H1 Treatment */

.pdstyle-heading h1 {
  margin: 0;
  padding: 0;

  color: var(--pdstyle-primary);

  font-size: clamp(23px, 1.7vw, 26px);
  font-weight: 700;
  line-height: 1.15;
}


/* H2 / H3
   Divi continues to control base typography.
   PDSTYLE controls spacing around the custom treatment. */

.pdstyle-heading h2,
.pdstyle-heading h3 {
  margin-bottom: 0;
  padding-bottom: 0;
}


/* ----------------------------------------------------------
   HEADING OPTION — CENTERED
   ---------------------------------------------------------- */

.pdstyle-heading.center {
  text-align: center;
}


/* ----------------------------------------------------------
   HEADING OPTION — DARK BACKGROUND
   ---------------------------------------------------------- */

.pdstyle-heading.dark h1,
.pdstyle-heading.dark h2,
.pdstyle-heading.dark h3 {
  color: var(--pdstyle-white);
}


/* Standard Short Accent */

.pdstyle-heading-accent {
  display: block;

  width: 52px;
  height: 3px;

  margin-top: 18px;
  margin-bottom: 20px;

  background: var(--pdstyle-accent);
}


/* Heading Accent — Full Width */

.pdstyle-heading-accent.full {
  width: 100%;
}


/* Heading Accent — Centered */

.pdstyle-heading-accent.center {
  margin-left: auto;
  margin-right: auto;
}


/* Heading Accent — Tight */

.pdstyle-heading-accent.tight {
  margin-top: 8px;
}


/* Heading Treatment — Phone */

@media (max-width: 767px) {

  .pdstyle-heading-eyebrow {
    font-size: 12px;
    letter-spacing: 1.2px;
  }
}


/* ==========================================================
   05 — COMPONENT: BUTTON

   Reusable CTA button used throughout the website.

   DEFAULT:
   Accent button designed for dark backgrounds.

   LIGHT:
   Primary-color button designed for cream or white backgrounds.

   Usage:

   Dark background:
   class="pdstyle-button"

   Light background:
   class="pdstyle-button light"
   ========================================================== */


/* Base Button — Dark Background */

.pdstyle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 14px;
  padding: 12px 22px;

  background: var(--pdstyle-accent);
  border: 2px solid var(--pdstyle-accent);
  color: var(--pdstyle-primary);

  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.8px;

  text-transform: uppercase;
  text-decoration: none;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}


/* Base Button — Hover */

.pdstyle-button:hover {
  background: transparent;
  color: var(--pdstyle-white);
}


/* ----------------------------------------------------------
   BUTTON OPTION — LIGHT BACKGROUND

   Primary-color treatment for cream or white backgrounds.
   ---------------------------------------------------------- */

.pdstyle-button.light {
  background: var(--pdstyle-primary);
  border-color: var(--pdstyle-primary);
  color: var(--pdstyle-white);
}


/* Light Background Button — Hover */

.pdstyle-button.light:hover {
  background: transparent;
  border-color: var(--pdstyle-primary);
  color: var(--pdstyle-primary);
}


/* ==========================================================
   06 — UTILITY: EQUAL-HEIGHT CARD ROW
   Builder dependency: Divi

   Makes neighboring HTML cards inside Divi Code Modules
   stretch to equal height.

   Divi Row class:
   pdstyle-equal-card-row
   ========================================================== */

.pdstyle-equal-card-row {
  display: flex;
  align-items: stretch;
}

.pdstyle-equal-card-row > .et_pb_column {
  display: flex;
  flex-direction: column;
}

.pdstyle-equal-card-row > .et_pb_column > .et_pb_module {
  display: flex;
  flex: 1;
  width: 100%;
}

.pdstyle-equal-card-row .et_pb_code_inner {
  display: flex;
  flex: 1;
  width: 100%;
}

.pdstyle-equal-card-row .et_pb_code_inner > * {
  width: 100%;
}


/* Phone — return to normal Divi stacking */

@media (max-width: 767px) {

  .pdstyle-equal-card-row {
    display: block;
  }

  .pdstyle-equal-card-row > .et_pb_column {
    margin-bottom: 24px;
  }

  .pdstyle-equal-card-row > .et_pb_column:last-child {
    margin-bottom: 0;
  }
}


/* ==========================================================
   07 — UTILITY: MOBILE COLUMN STACK ORDER
   Builder dependency: Divi

   Allows alternating desktop layouts while maintaining a
   consistent mobile reading order.

   Add this class to a Divi row whose desktop layout is:

   CONTENT | IMAGE

   pdstyle-mobile-image-first

   On mobile, the second column (image) moves above the first
   column (content).

   Rows already structured IMAGE | CONTENT do not need this
   class.
   ========================================================== */

@media (max-width: 767px) {

  .pdstyle-mobile-image-first {
    display: flex;
    flex-direction: column;
  }

  .pdstyle-mobile-image-first > :nth-child(2) {
    order: -1;
  }
}