/*
 * Inglis listing tidy-up
 * ----------------------
 * Small, scoped overrides for the EPL-style markup the plugin emits — brand-navy for
 * listing title/address links (theme's global `<a>` = mint), price prominence, address
 * size normalisation on cards, spacing/rhythm on single, unstyled search-form polish.
 *
 * All selectors are scoped to `.epl-property-single`, `.epl-property-blog`, or the
 * search-form so this file cannot bleed onto Home/About/Team/Contact.
 *
 * Source of truth: STYLING-FIXES.md.
 */

/* Brand colours reused across the file. */
:root{
  --inglis-navy: #34495e;
  --inglis-muted: #6b7c8d;
  --inglis-line: #e7eaec;
}

/* =========================================================================
   1. LISTING TITLE + ADDRESS LINKS
   The theme's default `<a>` colour is mint green (#64ddbb). Scoped override
   so listing titles and addresses read as brand navy.
   ========================================================================= */
.epl-property-single .entry-title a,
.epl-property-single .property-address a,
.epl-property-single .epl-tab-address a,
.epl-property-blog .entry-title a,
.epl-property-blog .property-address a,
.epl-property-blog .property-address a * {
  color: var(--inglis-navy) !important;
}
.epl-property-single .entry-title a:hover,
.epl-property-single .property-address a:hover,
.epl-property-blog .entry-title a:hover,
.epl-property-blog .property-address a:hover {
  color: #1f2a36 !important;
}

/* =========================================================================
   2. PRICE / STATUS PROMINENCE
   ========================================================================= */
.epl-property-single .page-price,
.epl-property-single .property-pricing-details .page-price {
  font-size: 22px;
  color: var(--inglis-navy);
  font-weight: 600;
}
.epl-property-single .status-label,
.epl-property-blog .status-label {
  color: var(--inglis-navy);
  font-weight: 600;
}
.epl-property-single .property-pricing-details {
  margin: 12px 0;
}

/* =========================================================================
   3. SINGLE-LISTING VERTICAL RHYTHM
   ========================================================================= */
.epl-property-single .entry-image { margin-bottom: 28px; }
.epl-property-single .epl-tab-title {
  margin-top: 32px;
  margin-bottom: 12px;
  font-weight: 600;
}
.epl-property-single .epl-tab-section { margin-bottom: 24px; }
.epl-property-single .epl-property-address.property-details { margin-top: 8px; }
.epl-property-single .epl-tab-address {
  font-size: 20px;
  color: var(--inglis-navy);
  margin: 0 0 8px 0;
}
.epl-property-single .property-category,
.epl-property-single .commercial-category,
.epl-property-single .rural-category,
.epl-property-single .land-category {
  color: var(--inglis-muted);
  font-size: 14px;
  margin: 4px 0 8px 0;
}

/* Listing headline (inside Description section — currently 20px, reads small next
   to the address H1). Boost to a proper deck size. */
.epl-property-single .epl-section-description .entry-title {
  font-size: 28px;
  line-height: 1.25;
  color: var(--inglis-navy);
  margin: 24px 0 16px 0;
  font-weight: 600;
  letter-spacing: -0.005em;
}
@media (min-width: 900px) {
  .epl-property-single .epl-section-description .entry-title { font-size: 32px; }
}

/* Feature list — same size as the description body copy so the two list styles
   (the agent's "— Featuring: …" list and the auto-extracted feature bullets)
   read as one hierarchy on the page. */
.epl-property-single .epl-property-features {
  list-style: disc outside;
  padding-left: 22px;
  margin: 16px 0 20px 0;
  text-align: left;
}
.epl-property-single .epl-property-features li,
.epl-property-single .epl-section-description p,
.epl-property-single .epl-section-description li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--inglis-navy);
  text-align: left;
}
.epl-property-single .epl-property-features li { padding: 2px 0; }

/* =========================================================================
   4. AGENT / AUTHOR BOX (added by the plugin — theme has no CSS for it)
   Minimal styling to make the card readable and match the site's palette.
   ========================================================================= */
.epl-author-box-wrapper {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--inglis-line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) {
  .epl-author-box-wrapper--count-2 { grid-template-columns: repeat(2, 1fr); }
  .epl-author-box-wrapper--count-3 { grid-template-columns: repeat(3, 1fr); }
  .epl-author-box-wrapper--count-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .epl-author-box-wrapper--count-4 { grid-template-columns: repeat(4, 1fr); }
}
.epl-author-box-container {
  background: #ffffff;
  border: 1px solid var(--inglis-line);
  border-radius: 6px;
  padding: 20px;
}
.epl-author-box-outer-wrapper {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.epl-author-box.epl-author-image { flex-shrink: 0; }
.epl-author-image .avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: #f0f2f4;
}
.epl-author-title { margin: 0 0 4px 0; font-size: 18px; }
.epl-author-title a { color: var(--inglis-navy) !important; }
.epl-author-position .position { color: var(--inglis-muted); font-size: 14px; }
.epl-author-contact { font-size: 14px; margin-top: 4px; }
.epl-author-contact a { color: var(--inglis-navy) !important; }
.epl-author-contact a:hover { text-decoration: underline; }
.epl-author-description { margin-top: 10px; font-size: 13px; color: var(--inglis-muted); line-height: 1.5; }

/* =========================================================================
   5. ARCHIVE CARD — address size normalisation, title cap, price lift
   ========================================================================= */
.epl-property-blog .property-box .property-address,
.epl-property-blog .property-box .property-address .item-street,
.epl-property-blog .property-box .property-address .entry-title-sub,
.epl-property-blog .property-box .property-address .item-suburb,
.epl-property-blog .property-box .property-address .item-city,
.epl-property-blog .property-box .property-address .item-state,
.epl-property-blog .property-box .property-address .item-pcode {
  font-size: 18px !important;
  color: var(--inglis-navy) !important;
  font-weight: 400;
}
.epl-property-blog .property-box .property-address { margin: 8px 0 12px 0; }
.epl-property-blog .property-box .entry-title { font-size: 24px; margin-bottom: 8px; }
.epl-property-blog .property-box .page-price {
  font-size: 20px;
  color: var(--inglis-navy);
  font-weight: 600;
}
.epl-property-blog .property-box .price { margin-top: 8px; }
.epl-property-blog .property-box .property-content { padding: 4px 0; }

/* =========================================================================
   6. EXCERPT — remove the heavy grey box, let it read as body text
   ========================================================================= */
.epl-property-blog .property-box .entry-content,
.epl-property-blog .property-box .entry-content p {
  background: transparent !important;
  padding: 0 !important;
  color: var(--inglis-navy);
  font-size: 15px;
  line-height: 1.6;
  margin: 8px 0;
}

/* =========================================================================
   7. SEARCH FORM (`[listing_search]` shortcode output)
   Selectors from the shortcode's markup — the plugin emits classes
   `.epl-listing-search`, `.epl-search-tabs`, `.epl-search-tab`, `.epl-search-field`.
   ========================================================================= */
.epl-listing-search {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 0;
}
.epl-search-tabs {
  display: inline-flex;
  gap: 4px;
  background: #f7f9f9;
  border: 1px solid var(--inglis-line);
  border-radius: 999px;
  padding: 3px;
  align-self: flex-start;
  margin-bottom: 6px;
}
.epl-search-tab {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--inglis-muted) !important;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.epl-search-tab.epl-search-tab-active,
.epl-search-tab:hover {
  background: var(--inglis-navy);
  color: #ffffff !important;
}
.epl-search-field { margin-bottom: 6px; }
.epl-search-field label {
  display: block;
  font-size: 12px;
  color: var(--inglis-muted);
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.epl-search-field select,
.epl-search-field input[type="number"],
.epl-search-field input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--inglis-navy);
  background: #ffffff;
  border: 1px solid var(--inglis-line);
  border-radius: 6px;
  appearance: none;
  -webkit-appearance: none;
}
.epl-search-field select:focus,
.epl-search-field input:focus {
  outline: none;
  border-color: var(--inglis-navy);
  box-shadow: 0 0 0 3px rgba(52,73,94,.08);
}
.epl-search-button,
.epl-listing-search button[type="submit"] {
  margin-top: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  background: var(--inglis-navy);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s;
}
.epl-search-button:hover,
.epl-listing-search button[type="submit"]:hover {
  background: #1f2a36;
}