/* ==========================================================================
   Payne Land Management - WordPress and Elementor bridge
   Loaded after theme.css. theme.css is the same design system the static
   build uses; everything here exists so Elementor's own markup inherits it.

   Spacing is set through Elementor's own container variables (--padding-*,
   --row-gap, --column-gap), so a value changed in the Elementor panel still
   wins over these defaults.

   Rules are prefixed with .plm (a body class) so they outrank Elementor's
   defaults without resorting to !important, except for the three max-widths
   noted below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Containers: width and gutters
   -------------------------------------------------------------------------- */
.plm .e-con.e-con-boxed > .e-con-inner {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  padding-inline: var(--gutter);
}
/* Nested containers never double the gutter. */
.plm .e-con .e-con.e-con-boxed > .e-con-inner {
  max-width: none;
  padding-inline: 0;
}

/* The bands the importer builds own their own rhythm. */
.plm .e-con.plm-section,
.plm .e-con.plm-hero-con,
.plm .e-con.plm-pagehead-con,
.plm .e-con.plm-cta-con,
.plm .e-con.plm-crumbs-con {
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
  margin: 0;
}

.plm .e-con.plm-section {
  --padding-top: var(--section-y);
  --padding-bottom: var(--section-y);
  --row-gap: clamp(30px, 4vw, 50px);
  --column-gap: 24px;
  position: relative;
}
.plm .e-con.plm-section > .e-con-inner {
  gap: var(--row-gap) var(--column-gap);
}
/* Narrow reading column, as the static build's wrap--tight. */
.plm .e-con.plm-narrow > .e-con-inner {
  max-width: calc(var(--wrap-tight) + var(--gutter) * 2);
}

/* Inner containers: no padding of their own. */
.plm .plm-section .e-con,
.plm .plm-hero-con .e-con,
.plm .plm-cta-con .e-con {
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

/* Section heading block. */
.plm .e-con.section-head {
  --row-gap: 12px;
  --width: 100%;
  width: 100%;
  max-width: 780px;
  gap: var(--row-gap) var(--column-gap, 12px);
  margin-bottom: 0;
}
.plm .e-con.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Two-column rows. */
.plm .e-con.plm-cols {
  --row-gap: clamp(28px, 4vw, 44px);
  --column-gap: clamp(26px, 4vw, 62px);
  gap: var(--row-gap) var(--column-gap);
}
.plm .e-con.plm-col {
  --row-gap: 18px;
  gap: var(--row-gap);
  min-width: 0;
  flex-shrink: 1;
}

/* Testimonials band hides itself until genuine reviews are switched on. */
.plm .e-con.plm-testimonials-con:not(:has(.plm-t-grid)) {
  display: none;
}

/* Grouped FAQ headings on the FAQs page. */
.plm .plm-faq-groups .elementor-widget-heading.plm-faq-group h3.elementor-heading-title {
  margin: 12px 0 -18px;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

/* --------------------------------------------------------------------------
   2. Section textures on Elementor containers.
      Elementor reserves .e-con::before for its background overlay, so the
      stripes and scrims live in ::after instead.
   -------------------------------------------------------------------------- */
.plm .e-con.stripes {
  isolation: isolate;
}
.plm .e-con.stripes::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.028) 0 62px,
    rgba(255, 255, 255, 0) 62px 124px
  );
}

/* --------------------------------------------------------------------------
   3. Headings and text widgets take the theme typography
   -------------------------------------------------------------------------- */
.plm .elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.plm .elementor-widget-heading h1.elementor-heading-title,
.plm .elementor-widget-heading h2.elementor-heading-title {
  text-transform: uppercase;
}

/* An eyebrow is a heading widget whose wrapper carries the .eyebrow styling
   (the leading bar included); the title inside simply inherits it. */
.plm .elementor-widget-heading.eyebrow {
  margin: 0;
}
.plm .elementor-widget-heading.eyebrow .elementor-heading-title {
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  line-height: 1.3;
  text-transform: uppercase;
  color: inherit;
}

.plm .on-dark .elementor-widget-heading .elementor-heading-title,
.plm .plm-hero-con .elementor-widget-heading .elementor-heading-title,
.plm .plm-pagehead-con .elementor-widget-heading .elementor-heading-title,
.plm .plm-cta-con .elementor-widget-heading .elementor-heading-title {
  color: var(--white);
}
.plm .on-dark .elementor-widget-heading.eyebrow .elementor-heading-title {
  color: inherit;
}

.plm .elementor-widget-text-editor {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.plm .elementor-widget-text-editor.lead {
  font-size: clamp(1.03rem, 1.6vw, 1.16rem);
  line-height: 1.72;
  color: var(--ink-soft);
}
.plm .on-dark .elementor-widget-text-editor.lead {
  color: #c3cacd;
}

/* Legal pages. */
.plm .elementor-widget-text-editor.prose {
  max-width: 74ch;
}

/* --------------------------------------------------------------------------
   4. Hero on an Elementor container
   -------------------------------------------------------------------------- */
.plm .e-con.plm-hero-con {
  --padding-top: clamp(74px, 12vw, 148px);
  --padding-bottom: clamp(74px, 12vw, 148px);
  --row-gap: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--black);
}
.plm .e-con.plm-hero-con > .e-con-inner {
  position: relative;
  z-index: 1;
  gap: 0;
  align-items: flex-start;
}

/* Scrim. Narrow screens: vertical, weighted to the bottom. */
.plm .plm-hero-con::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.93) 0%, rgba(5, 5, 5, 0.66) 48%, rgba(5, 5, 5, 0.44) 100%);
}
/* Wide screens: directional, so the photograph stays open on the right. */
@media (min-width: 900px) {
  .plm .plm-hero-con::after {
    background:
      linear-gradient(96deg, rgba(5, 5, 5, 0.93) 0%, rgba(5, 5, 5, 0.82) 32%, rgba(5, 5, 5, 0.46) 58%, rgba(5, 5, 5, 0.14) 100%),
      linear-gradient(to top, rgba(5, 5, 5, 0.7) 0%, rgba(5, 5, 5, 0) 46%);
  }
}
/* Mowing stripes and drifting motes are added by theme.js. */
.plm .plm-hero-con > .hero__stripes,
.plm .plm-hero-con > .hero__motes {
  z-index: 0;
}

/* Copy column width. Elementor forces widgets to max-width:100% with a very
   specific selector, hence !important here and in section 5. */
.plm .plm-hero-con > .e-con-inner > .elementor-element {
  max-width: 760px !important;
  animation: heroIn 780ms var(--ease-out) both;
}
.plm .plm-hero-con > .e-con-inner > .elementor-element:nth-child(1) { animation-delay: 40ms; }
.plm .plm-hero-con > .e-con-inner > .elementor-element:nth-child(2) { animation-delay: 120ms; }
.plm .plm-hero-con > .e-con-inner > .elementor-element:nth-child(3) { animation-delay: 200ms; }
.plm .plm-hero-con > .e-con-inner > .elementor-element:nth-child(4) { animation-delay: 280ms; }
.plm .plm-hero-con > .e-con-inner > .elementor-element:nth-child(5) { animation-delay: 360ms; }
.plm .plm-hero-con > .e-con-inner > .elementor-element:nth-child(6) { animation-delay: 440ms; }

.plm .plm-hero-logo,
.plm .plm-hero-logo .elementor-widget-container {
  text-align: left;
}
.plm .plm-hero-logo img {
  width: clamp(178px, 24vw, 244px);
  height: auto;
  margin-bottom: clamp(20px, 3vw, 30px);
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}
.plm .plm-hero-con .elementor-widget-heading h1.elementor-heading-title {
  margin: 0 0 20px;
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.45);
}
.plm .plm-hero-con .elementor-widget-text-editor.hero__text {
  max-width: 610px !important;
  font-size: clamp(1.03rem, 1.7vw, 1.19rem);
  line-height: 1.68;
  color: #d3d9db;
}
.plm .plm-hero-con .elementor-widget-text-editor.hero__text p {
  margin: 0 0 30px;
}

/* --------------------------------------------------------------------------
   5. Interior page header on an Elementor container
   -------------------------------------------------------------------------- */
.plm .e-con.plm-pagehead-con {
  --padding-top: clamp(46px, 7vw, 84px);
  --padding-bottom: clamp(46px, 7vw, 84px);
  --row-gap: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--charcoal);
}
.plm .e-con.plm-pagehead-con > .e-con-inner {
  position: relative;
  z-index: 1;
  gap: 0;
  align-items: flex-start;
}
.plm .plm-pagehead-con > .e-con-inner > .elementor-element {
  max-width: 780px !important;
}
.plm .plm-pagehead-con::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.72) 55%, rgba(5, 5, 5, 0.5) 100%);
}
@media (min-width: 900px) {
  .plm .plm-pagehead-con::after {
    background: linear-gradient(100deg, rgba(5, 5, 5, 0.86) 0%, rgba(5, 5, 5, 0.62) 32%, rgba(5, 5, 5, 0.26) 62%, rgba(5, 5, 5, 0.08) 100%);
  }
}
.plm .plm-pagehead-con > .page-head__stripes {
  z-index: 0;
}
.plm .plm-pagehead-con .elementor-widget-heading h1.elementor-heading-title {
  margin: 0 0 14px;
  font-size: clamp(2.2rem, 5.2vw, 3.7rem);
}
.plm .plm-pagehead-con .elementor-widget-text-editor {
  max-width: 640px !important;
  color: #cbd1d4;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}

/* Breadcrumb bar. */
.plm .e-con.plm-crumbs-con {
  --padding-top: 0px;
  --padding-bottom: 0px;
  --row-gap: 0px;
}

/* --------------------------------------------------------------------------
   6. Closing call-to-action band
   -------------------------------------------------------------------------- */
.plm .e-con.plm-cta-con {
  --padding-top: clamp(48px, 6.5vw, 84px);
  --padding-bottom: clamp(48px, 6.5vw, 84px);
  --row-gap: 24px;
  --column-gap: clamp(22px, 3vw, 44px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.plm .e-con.plm-cta-con > .e-con-inner {
  gap: var(--row-gap) var(--column-gap);
}
.plm .plm-cta-con::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(760px 380px at 12% 8%, rgba(10, 101, 29, 0.5), transparent 68%),
    repeating-linear-gradient(100deg, rgba(36, 240, 0, 0.045) 0 44px, rgba(36, 240, 0, 0) 44px 88px);
}
.plm .e-con.plm-cta-copy {
  --row-gap: 12px;
  --width: auto;
  gap: var(--row-gap);
  flex: 1 1 0;
  min-width: 0;
  max-width: 62ch;
}
.plm .e-con.plm-cta-actions {
  --width: auto;
  flex: 0 0 auto;
  width: auto;
}
.plm .plm-cta-con .elementor-widget-text-editor {
  color: #c3cacd;
}
.plm .plm-cta-con .cta-band__actions {
  margin: 0;
}
@media (max-width: 1024px) {
  .plm .e-con.plm-cta-copy,
  .plm .e-con.plm-cta-actions {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   7. Notes only administrators see
   -------------------------------------------------------------------------- */
.admin-note {
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px dashed #c8a33a;
  border-radius: var(--r-md);
  background: #fff8e1;
  color: #5c4700;
  font-size: 0.9rem;
  line-height: 1.6;
}
.admin-note a {
  color: #5c4700;
  font-weight: 700;
}
.admin-note em {
  color: #8a6d00;
  font-size: 0.82rem;
}
.review-flag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-sm);
  background: #fff5d6;
  border: 1px solid #e8cf86;
  color: #6b5108;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Owner credential badge under the owner's name. */
.owner__flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  padding: 8px 17px 8px 14px;
  border: 1px solid rgba(36, 240, 0, 0.45);
  border-radius: var(--r-pill);
  background: rgba(5, 5, 5, 0.5);
  color: var(--white);
  font-size: 0.755rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}
.owner__flag svg {
  color: var(--green);
  flex: none;
}

/* Menus WordPress renders in the footer keep the theme list styling. */
.site-footer .menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

/* Floating Call / Quote / Email buttons: exactly as on the approved site, except
   on phones, where the bar would sit on top of the hero's own Call button at
   first load - there it slides in once the visitor starts scrolling. */
@media (max-width: 560px) {
  .fab {
    opacity: 0;
    visibility: hidden;
    transform: translateY(120%);
    transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
  }
  .fab.is-shown,
  .no-js .fab {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Approved pages inside Elementor.
   The import stores each section of the approved site as one Elementor
   container holding one HTML widget. Those wrappers must add nothing.
   -------------------------------------------------------------------------- */
.plm .e-con.plm-raw {
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.plm .e-con.plm-raw > .elementor-widget,
.plm .e-con.plm-raw > .elementor-widget > .elementor-widget-container {
  width: 100%;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
}

/* Elementor's front-end stylesheet resets every image and link inside
   .elementor (height:auto, no radius, no shadow, no underline). Put back the
   approved design's rules for the components that rely on them. */
.plm .elementor .hero__media img,
.plm .elementor .page-head__media img,
.plm .elementor .card__media img,
.plm .elementor .frame img,
.plm .elementor .gallery-item img,
.plm .elementor .thumbs img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.plm .elementor .hero__logo {
  height: auto;
}
.plm .elementor .lightbox img {
  width: auto;
  height: auto;
  max-width: 100%;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.plm .elementor :is(p, li, .toc, .consent label, .form-status, .note) > a:not([class]),
.plm .elementor .muted a:not([class]) {
  text-decoration: underline;
}
.plm .elementor .developer-credit a {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   8. Elementor editor and the WordPress admin bar
   -------------------------------------------------------------------------- */
/* Widgets re-render while editing and would miss the scroll observer. */
body.elementor-editor-active .reveal {
  opacity: 1 !important;
  transform: none !important;
}
body.elementor-editor-active .site-header {
  position: relative;
}
body.elementor-editor-active .fab {
  display: none;
}

body.admin-bar .site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}
@media screen and (max-width: 600px) {
  /* WordPress un-sticks its admin bar here. */
  body.admin-bar .site-header {
    top: 0;
  }
}

/* --------------------------------------------------------------------------
   9. WordPress core
   -------------------------------------------------------------------------- */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--ink-faint);
  text-align: center;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sticky, .gallery-caption, .bypostauthor { /* required by the theme check */ }
