/* ==========================================================================
   Pacific Lodge No. 16 — WPBakery Custom CSS
   Enqueued by the pl16-custom-styles plugin.
   Uses hex values in place of --wp--preset-- tokens (Salient/WPBakery context).
   ========================================================================== */

/* Palette */
:root {
  --pl-navy:     #222A68;
  --pl-gold:     #C5A059;
  --pl-parchment:#F6F3F2;
  --pl-white:    #FFFFFF;
  --pl-charcoal: #2D2D2D;
  --pl-muted:    #6B6B6B;
  --pl-rule:     #DDDDDD;
}

/* --- Section overline label ------------------------------------------------ */
.pl-overline {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C5A059;
  margin-bottom: 0.5rem;
}

/* --- Callout / highlight box ---------------------------------------------- */
.pl-callout,
.wpb_text_column.pl-callout {
  border-left: 4px solid #C5A059;
  background: #F6F3F2;
  padding: 1.25rem 1.5rem;
  border-radius: 0 4px 4px 0;
  margin-bottom: 1rem;
}

.pl-callout p,
.wpb_text_column.pl-callout p {
  margin: 0;
  font-size: 0.875rem;
  color: #2D2D2D;
}

.pl-callout strong,
.wpb_text_column.pl-callout strong {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C5A059;
  margin-bottom: 0.4rem;
}

/* Prevent double-padding inside WPBakery column wrappers */
.wpb_column .pl-callout,
.wpb_column .wpb_text_column.pl-callout {
  margin-left: 0;
  margin-right: 0;
}

/* --- Card grid ------------------------------------------------------------- */
.pl-card,
.wpb_column.pl-card > .vc_column-inner,
.wpb_text_column.pl-card {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-top: 3px solid #C5A059;
  border-radius: 4px;
  padding: 2rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pl-card:hover,
.wpb_column.pl-card:hover > .vc_column-inner {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

/* Navy variant (Brotherhood pillar card) */
.pl-card--navy,
.wpb_column.pl-card--navy > .vc_column-inner {
  background: #222A68;
  border-color: #222A68;
  border-top-color: #C5A059;
}

/* --- Info card (meeting schedule, location) -------------------------------- */
.pl-info-card,
.wpb_text_column.pl-info-card {
  background: #F6F3F2;
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.pl-info-card p,
.wpb_text_column.pl-info-card p {
  margin-bottom: 0.5rem;
}

/* --- Misconception card ---------------------------------------------------- */
.pl-misconception-card,
.wpb_column.pl-misconception-card > .vc_column-inner,
.wpb_text_column.pl-misconception-card {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  padding: 1.75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.pl-misconception-card__myth {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B6B6B;
  margin-bottom: 0.5rem;
}

/* --- Image placeholder ----------------------------------------------------- */
.pl-img-placeholder {
  aspect-ratio: 4 / 3;
  min-height: 280px;
  background: linear-gradient(135deg, #F6F3F2 0%, #EAE4DF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #DDDDDD;
  color: #BBBBBB;
  font-size: 0.875rem;
  font-style: italic;
  text-align: center;
}

/* --- Gold rule divider ----------------------------------------------------- */
.pl-gold-rule hr,
.pl-gold-rule .divider_line {
  border-color: #C5A059 !important;
  border-top-width: 2px !important;
  width: 6rem !important;
  margin-left: 0 !important;
}

/* Full-width gold rule (used between sections) */
.pl-gold-rule-full hr,
.pl-gold-rule-full .divider_line {
  border-color: #C5A059 !important;
  border-top-width: 2px !important;
  width: 100% !important;
}

/* --- Internal link card ---------------------------------------------------- */
.pl-link-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  color: #222A68;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pl-link-card::after {
  content: '\2192';
  margin-left: auto;
  color: #C5A059;
  transition: transform 0.15s ease;
}

.pl-link-card:hover {
  border-color: #C5A059;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  color: #222A68;
  text-decoration: none;
}

.pl-link-card:hover::after {
  transform: translateX(3px);
}

/* --- Hero section ---------------------------------------------------------- */
.pl-section-hero {
  min-height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Subtle geometric pattern overlay for navy hero rows */
.pl-hero-pattern {
  position: relative;
}

.pl-hero-pattern::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 4 L76 40 L40 76 L4 40 Z' fill='none' stroke='rgba(197,160,89,0.07)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

.pl-hero-pattern > .vc_row-flex,
.pl-hero-pattern > .container {
  position: relative;
  z-index: 1;
}

/* --- Event spotlight card (dark bg callout) -------------------------------- */
.pl-event-spotlight,
.wpb_text_column.pl-event-spotlight {
  background: rgba(255,255,255,0.06);
  border-left: 3px solid #C5A059;
  border-radius: 4px;
  padding: 1.5rem;
}

/* --- "Join Our Legacy" card (navy bg glassmorphism) ----------------------- */
.pl-legacy-card,
.wpb_text_column.pl-legacy-card {
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 2rem 1.5rem;
}

/* --- FAQ sidebar ----------------------------------------------------------- */
.pl-faq-sidebar,
.wpb_text_column.pl-faq-sidebar {
  border-left: 2px solid #C5A059;
  padding-left: 1.25rem;
}

.pl-faq-nav a:hover {
  color: #222A68;
  text-decoration: underline;
}

/* --- Responsive: stack columns on mobile ---------------------------------- */
@media (max-width: 768px) {
  .pl-section-hero {
    min-height: 0;
  }

  .pl-card,
  .wpb_column.pl-card > .vc_column-inner {
    margin-bottom: 1rem;
  }
}
/* --- Timeline (vertical) ------------------------------------------------- */
.pl-timeline {
  position: relative;
  padding-left: 2.5rem;
}

.pl-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(to bottom, #C5A059 0%, #DDDDDD 100%);
}

.pl-timeline__item {
  position: relative;
  margin-bottom: 2.5rem;
}

.pl-timeline__item::before {
  content: '';
  position: absolute;
  left: -2.5rem;
  top: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #C5A059;
  border: 2px solid #F6F3F2;
  box-shadow: 0 0 0 2px #C5A059;
}

.pl-timeline__year {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C5A059;
  margin-bottom: 0.25rem;
}

.pl-timeline__item h3 {
  color: #222A68;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}
.pl-legacy-card-bordered,
.wpb_text_column.pl-legacy-card-bordered {
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid #C5A059;
  border-radius: 4px;
  padding: 2rem 1.75rem;
}