/* ==========================================================
   PDE DESIGN SYSTEM — STABLE COMPONENTS

   Grassy Narrows Lodge production design system.

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


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

:root {

  /* Grassy Narrows Lodge brand colors */
  --pde-primary: #1F3A2A;
  --pde-accent: #C89B3C;
  --pde-cream: #F5F3EE;
  --pde-charcoal: #0F1115;
  --pde-text: #4A4A4A;
  --pde-white: #FFFFFF;

  /* Standard site content width */
  --pde-content-width: 1280px;
}


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

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

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

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

.pde-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 .pde-page-title-divider
   ========================================================== */

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


/* Page-name typography */

.pde-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 */

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

  width: 95%;
  gap: 10px;

  margin: 5px auto 0;
}


/* Accent lines */

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


/* Optional decorative brand icon */

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


/* Page Title — No Icon */

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

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

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

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


/* Page Title — Tablet */

@media (max-width: 980px) {

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

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


/* Page Title — Phone */

@media (max-width: 767px) {

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

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

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


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

   Reusable treatment for H1, H2 and H3 content headings.

   Optional eyebrow:
   .pde-heading-eyebrow

   Standard short accent:
   .pde-heading-accent

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

   Centered accent:
   .pde-heading-accent.center

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

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


/* Optional Eyebrow */

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

  color: var(--pde-accent);

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

  text-transform: uppercase;
}


/* H1 Treatment */

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

  color: var(--pde-primary);

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


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

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


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

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


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

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


/* Standard Short Accent */

.pde-heading-accent {
  display: block;

  width: 52px;
  height: 3px;

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

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


/* Heading Accent — Full Width */

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


/* Heading Accent — Centered */

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


/* Heading Accent — Tight */

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


/* Heading Treatment — Phone */

@media (max-width: 767px) {

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


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

   Reusable CTA button used throughout the website.

   DEFAULT:
   Gold button designed for dark backgrounds.

   LIGHT:
   Green button designed for cream or white backgrounds.

   Usage:

   Dark background:
   class="pde-button"

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


/* Base Button — Dark Background */

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

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

  background: var(--pde-accent);
  border: 2px solid var(--pde-accent);
  color: var(--pde-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 */

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


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

   Green treatment for cream or white backgrounds.
   ---------------------------------------------------------- */

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


/* Light Background Button — Hover */

.pde-button.light:hover {
  background: transparent;
  border-color: var(--pde-primary);
  color: var(--pde-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:
   pde-equal-card-row
   ========================================================== */

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

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

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

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

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


/* Phone — return to normal Divi stacking */

@media (max-width: 767px) {

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

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

  .pde-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

   pde-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) {

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

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