/* ============================================================
   SITE ADDITIONS
   ------------------------------------------------------------
   Loaded AFTER the base stylesheet (assets/css/styles.css) on every
   page. Nothing in this file modifies or overrides existing production
   selectors from styles.css — every rule below targets classes that are
   new with this release (the Resources/Insights section, the nav
   dropdown, the Area Guide, contact-form refinements) or applies a
   scoped, additive override documented inline. No new colors, fonts,
   radii, or shadow values are introduced; everything reuses the
   existing VPG design tokens (--vpg-navy, --vpg-gold, --vpg-sand,
   --radius, --shadow, etc.) defined in styles.css.
   ============================================================ */

/* ---- "About & Resources" nav dropdown ---- */

.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  font: inherit;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: inherit;
  /* Explicit readable white to match .site-nav a — a bare <button> does not
     inherit the nav's link color rule (which only targets <a>). */
  color: rgba(255, 255, 255, 0.82);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: color 160ms ease;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible,
.nav-dropdown.is-open .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger {
  color: var(--vpg-gold);
}

/* Panel sits flush against the trigger (top: 100%, no gap) and is itself
   transparent/unstyled — the visible card look lives on .nav-dropdown-col
   below. padding-top on this transparent panel is still part of its
   hoverable box, so the pointer can travel in a continuous line from the
   trigger straight down into the card with no dead zone in between (a
   gap here is what forces a click to open on desktop instead of hover). */
.nav-dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  padding-top: 12px;
  background: transparent;
  box-shadow: none;
  z-index: 40;
}

.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel,
.nav-dropdown.is-open .nav-dropdown-panel {
  display: flex;
}

.nav-dropdown-col {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  background: var(--vpg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
}

.nav-dropdown-col a {
  padding: 7px 0;
  color: var(--vpg-charcoal);
  text-decoration: none;
  font-size: 0.94rem;
  border-bottom: 1px solid transparent;
}

.nav-dropdown-col a:hover {
  color: var(--vpg-navy);
  border-bottom-color: var(--vpg-border);
}

.nav-dropdown-col a.is-planned {
  color: var(--muted);
  pointer-events: none;
  cursor: default;
}

.nav-dropdown-col a.is-planned::after {
  content: " (planned)";
  font-size: 0.78em;
  color: var(--muted);
}

/* ---- "Latest from VPG" third-card Facebook placeholder ----
   Supporting CSS for a section currently commented out in insights.html
   until there is a real dated update or selected post to feature. */

.vpg-feed-card.is-facebook-pending {
  opacity: 0.72;
}

.vpg-feed-card.is-facebook-pending .vpg-feed-pending-label {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--muted);
}

/* ---- Founder headshot (About page founder-led-experience section) ---- */

.founder-photo {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 330px;
  height: 410px;
  object-fit: cover;
  object-position: center top;
}

/* ---- Insights / article components ---- */

.insight-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 32px);
  align-items: stretch;
}

.insight-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(23, 47, 73, 0.08);
  overflow: hidden;
  background: var(--vpg-white);
}

.insight-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 220px;
  object-fit: cover;
}

/* align-items: stretch on the grid (above) makes all three cards match the
   tallest card in the row; flex: 1 here lets the body fill whatever extra
   room that creates, and margin-top: auto on .insight-card-read-more (below)
   pushes "Read Article" down into that extra room so it lines up on the
   same baseline across all three cards -- without pinning the card to a
   large fixed height. On mobile the cards stack in a single column, so
   stretch has nothing to equalize against and each card keeps its own
   natural height. */
.insight-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

.insight-card-body h3 {
  margin: 0 0 10px;
  line-height: 1.3;
  font-size: 1.15rem;
}

.insight-card-body h3 a {
  display: block;
  color: var(--vpg-navy);
  text-decoration: none;
}

.insight-card-body h3 a:hover,
.insight-card-body h3 a:focus-visible {
  color: var(--vpg-dark-gold);
  text-decoration: underline;
  text-decoration-color: rgba(201, 169, 97, 0.65);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.insight-card-body p {
  margin: 0;
  color: var(--muted);
}

.insight-card-body > p:not(.insight-card-tag) {
  margin-bottom: 18px;
}

.insight-card-tag {
  display: inline-block;
  min-height: 1.5rem;
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vpg-dark-gold);
}

.insight-card-read-more {
  display: inline-block;
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--vpg-dark-gold);
  text-decoration: none;
}

.insight-card-read-more:hover,
.insight-card-read-more:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--vpg-gold);
}

/* "Latest from VPG" manually-managed cards (native articles or
   selected external Facebook posts — see comments in HTML) */
.vpg-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 28px);
}

/* Used while this section only has 2 cards (see comment in HTML) so they
   don't stretch full-width or leave an awkward empty third column. */
.vpg-feed-grid.has-two-cards {
  grid-template-columns: repeat(2, 1fr);
  max-width: 780px;
}

.vpg-feed-card {
  border: 1px solid var(--vpg-border);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: var(--vpg-white);
}

.vpg-feed-card p.vpg-feed-source {
  margin: 0 0 8px;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vpg-muted-teal);
}

.article-checklist {
  background: var(--warm);
  border-radius: var(--radius);
  padding: 24px 28px;
}

.verification-note {
  border: 1px solid var(--vpg-border);
  border-left: 4px solid var(--vpg-gold);
  border-radius: var(--radius);
  padding: 16px 20px;
  background: var(--vpg-white);
  font-size: 0.92rem;
  color: var(--vpg-charcoal);
}

.verification-note strong {
  color: var(--vpg-navy);
}

/* ---- Subtle footer-style legal disclaimer ----
   A quieter, footer-style note for legal-sensitive pages: a thin top rule
   and muted small text, used once near the end of a page's content,
   before the final CTA. */
.page-disclaimer {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--vpg-border);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.page-disclaimer strong {
  color: inherit;
  font-weight: 600;
}

.breadcrumb {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0 0 6px;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: underline;
}

/* ---- Restrained editorial link treatment ----
   Production's .text-link (styles.css) uses heavy bold text with a thick,
   permanent gold underline — reads as promotional/ad-like at inline-link
   scale. This is a deliberate, scoped exception to .text-link's own use
   as a card-title/CTA link (About/Insights editorial grid); buttons, nav
   links, and headings are untouched. Body-copy links inside FAQ/resource/
   article content get their own, separate rule below with no permanent
   underline at all. Neither rule edits the base styles.css copy. */
.text-link {
  color: var(--navy);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(201, 169, 97, 0.65);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--vpg-dark-gold);
}

/* ---- FAQ / resource / article body-copy links ----
   No permanent underline by default — color and weight only. Underline
   appears solely on hover/keyboard focus. More specific than .text-link
   alone (class+tag beats a single class), so it wins for any link that
   happens to carry both classes inside these containers. Buttons, nav
   links, card CTAs (.text-link used in the About/Insights editorial
   grid), and headings are untouched by this rule. */
.article-content a,
.faq-content a,
.resource-content a {
  color: var(--vpg-navy);
  font-weight: 500;
  text-decoration: none;
}

.article-content a:hover,
.article-content a:focus-visible,
.faq-content a:hover,
.faq-content a:focus-visible,
.resource-content a:hover,
.resource-content a:focus-visible {
  color: var(--vpg-dark-gold);
  text-decoration: underline;
  text-decoration-color: var(--vpg-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---- Inline paragraph link fix ----
   Production's .text-link uses display:inline-flex and margin-top:12px,
   meant for its use as a card-title/CTA link sitting on its own line
   under a heading. Applied to a link embedded mid-sentence in a
   paragraph, those same properties break the link onto its own line and
   add unwanted top spacing. This selector is scoped specifically to <a>
   tags inside a <p> within these containers (more specific than
   .text-link alone, so it wins), and resets the link to plain inline
   text with no permanent underline. Buttons, nav links, headings, and
   card CTAs (.text-link used outside a <p>, e.g. inside an <h3>) are
   untouched. */
.split-content p a,
.two-column p a,
.article-content p a,
.faq-content p a,
.resource-content p a,
.editorial-item p a {
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: 500;
  text-decoration: none;
}

.split-content p a:hover,
.split-content p a:focus-visible,
.two-column p a:hover,
.two-column p a:focus-visible,
.article-content p a:hover,
.article-content p a:focus-visible,
.faq-content p a:hover,
.faq-content p a:focus-visible,
.resource-content p a:hover,
.resource-content p a:focus-visible,
.editorial-item p a:hover,
.editorial-item p a:focus-visible {
  color: var(--vpg-dark-gold);
  text-decoration: underline;
  text-decoration-color: var(--vpg-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---- Centered reading column for long-form content ----
   FAQ, article, and resource pages run their body copy at a narrower
   measure than the full 1180px .container, which reads as stretched for
   prose. These wrapper classes (added alongside "container" on the
   relevant pages) narrow just the text column without affecting the
   page-hero, CTA panels, or other full-width sections. */
.faq-content,
.article-content,
.resource-content {
  max-width: 900px;
  /* Left-aligned, not centered: keeps this column's left edge flush with
     the breadcrumb, eyebrow, H1, subtitle, and final CTA above/below it
     (all of which start at the .container's left padding edge) instead of
     drifting inward as a centered block would. */
  margin: 0;
}

/* ---- Resource-page editorial hero ----
   Buyer's Guide, Selling in Puerto Vallarta, Property Ownership FAQ, the
   Area Guide, and the Insights articles are text-only content pages (no
   hero image), so they use a lighter, narrower hero than the two-column
   service-page hero: ~900px column (matching the .resource-content /
   .article-content / .faq-content width below it for one consistent left
   edge), left-aligned, a smaller heading than the homepage-scale
   --text-hero, and tighter spacing below the header. Applied via
   class="resource-hero" alongside class="page-hero" on these pages only. */
.resource-hero {
  padding-top: clamp(20px, 2.6vw, 32px);
  padding-bottom: clamp(16px, 2vw, 24px);
}

.resource-hero .section-heading {
  max-width: 900px;
  text-align: left;
}

.resource-hero h1 {
  max-width: 100%;
  font-size: clamp(1.85rem, 2.4vw, 2.5rem);
  line-height: 1.2;
}

.resource-hero .eyebrow {
  margin-bottom: 10px;
}

.faq-content h2,
.article-content h2,
.resource-content h2 {
  margin-top: 36px;
  margin-bottom: 12px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.25;
}

.faq-content > h2:first-of-type,
.article-content > h2:first-of-type,
.resource-content > h2:first-of-type {
  margin-top: 8px;
}

/* ---- FAQ question headings (h3, nested under a category h2) ----
   Used on the Property Ownership FAQ, which is organized into category
   headings (h2) with individual questions (h3) underneath. */
.faq-content h3 {
  margin-top: 36px;
  margin-bottom: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vpg-navy);
}

.faq-content h2 + h3 {
  margin-top: 16px;
}

.editorial-item img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 14px;
  display: block;
}

/* ---- Area Guide lead image ----
   One short lead image only: 16:9, capped at ~380px displayed height
   regardless of the source photo's native aspect ratio, object-fit:
   cover so it crops rather than distorts. */
.area-guide-lead-image {
  margin: 0 0 32px;
}

.area-guide-lead-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
}

.area-guide-lead-image figcaption {
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ---- Area Guide neighborhood grid ----
   A concise, two-column card grid: one blended paragraph per
   neighborhood plus an optional short "Best suited for" line. Only a
   few cards carry an image (see .area-card img below); cards without one
   stay visually balanced since nothing here depends on image height. */
.area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px clamp(28px, 4vw, 56px);
  margin-top: 8px;
}

@media (max-width: 780px) {
  .area-grid {
    grid-template-columns: 1fr;
  }
}

.area-card h3 {
  margin: 0 0 10px;
  font-size: var(--text-lg);
}

.area-card p {
  margin: 0;
  color: var(--vpg-charcoal);
  font-size: 0.95rem;
  line-height: 1.65;
}

.area-card .area-best-suited {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.area-card .area-best-suited strong {
  color: var(--vpg-navy);
}

/* Card image sits inside its own card only (never a separate adjacent
   grid item), stays within the card's own width, and is cropped to a
   short 16:9 strip via object-fit: cover regardless of the source
   photo's native orientation. */
.area-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: 210px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 12px;
  display: block;
}

/* ---- "Other Areas to Explore" compact list ----
   Deliberately not full profiles: a plain list of names plus one
   supporting sentence, reusing the existing .check-list bullet style. */
.area-other-list {
  margin-top: 10px;
  columns: 2;
  column-gap: clamp(28px, 4vw, 56px);
}

@media (max-width: 600px) {
  .area-other-list {
    columns: 1;
  }
}

.faq-content p,
.article-content p,
.resource-content p {
  margin: 0 0 20px;
  font-weight: 400;
  line-height: 1.7;
}

.faq-content p:last-child,
.article-content p:last-child,
.resource-content p:last-child {
  margin-bottom: 0;
}

.faq-content .article-checklist,
.article-content .article-checklist,
.resource-content .article-checklist {
  margin-bottom: 20px;
}

/* ---- Global content alignment & spacing normalization ----
   Tightens the general-content measure to ~1120px and switches to
   explicit, responsive left/right padding so every section (hero, CTA
   panels, grids, footer) shares one consistent edge across breakpoints:
   32px desktop, 24px tablet, 20px mobile. Scoped to this file only —
   the base styles.css copy is untouched. */
.container {
  width: 100%;
  max-width: 1120px;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

.page-hero-grid {
  width: 100%;
  max-width: 1120px;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .container,
  .page-hero-grid {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 600px) {
  .container,
  .page-hero-grid {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Section padding: tighten the upper bound of the base clamp to a
   64-80px desktop range (mobile stays smaller, unchanged). */
.section {
  padding: clamp(48px, 6vw, 80px) 0;
}

/* ---- Property Management "Our Standards" grid cleanup ----
   Removes the small decorative gold dash above every heading sitewide on
   this grid, tightens the row gap, and gives every card equal height
   with consistent heading/description alignment. Scoped override only —
   the base styles.css copy is untouched. */
.standards-item::before {
  display: none;
}

.standards-list {
  row-gap: 28px;
  align-items: stretch;
}

.standards-item {
  display: flex;
  flex-direction: column;
}

.standards-item h3 {
  min-height: 2.6em;
}

@media (max-width: 900px) {
  .insight-card-grid,
  .vpg-feed-grid,
  .vpg-feed-grid.has-two-cards {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .nav-dropdown-panel {
    position: static;
    transform: none;
    min-width: 0;
    flex-direction: column;
    box-shadow: none;
    padding: 12px 0 0;
  }

  .nav-dropdown-col {
    min-width: 0;
  }

  .founder-photo {
    display: block;
    margin: 0 auto;
    max-width: 280px;
    height: auto;
  }
}

/* ---- Contact form: honeypot + status-message separation ---- */

/* Standard accessible honeypot pattern: moved off-screen with absolute
   positioning rather than display:none/hidden, so the field (and its
   "Do not fill this out" label) is still present in the accessibility
   tree and in a real screen reader's reading order, but is never visible
   or reachable for a sighted human filling out the form normally. Real
   users never see or fill it in; simple bots that fill every field do,
   which is what flags the submission as spam to Netlify. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* .contact-form is display:grid with a 22px gap (styles.css), which
   applies evenly between every direct child -- including the supporting
   "Sent directly to our team" sentence and the error message right after
   it. This adds a visible rule plus extra margin above #form-error
   specifically, so a real error is clearly set apart from ordinary
   supporting copy rather than blending into it. */
#form-error {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--vpg-border);
  color: var(--vpg-navy);
  font-weight: 700;
}