/*
 * Property North — design-system layer for the Elementor content pages
 * (Rent, Sell, Property Management, Free Property Appraisal).
 *
 * These pages are built in Elementor, so their layout lives in _elementor_data
 * and is left completely alone here. This applies the parts of the system that
 * are safe to impose from CSS:
 *
 *   - Marcellus headings and Mulish body copy, replacing the theme's global font
 *   - square corners and hairline borders in place of rounded/soft chrome
 *   - the teal accent on links, and the ink button treatment
 *
 * Deliberately NOT set: text colour on headings and paragraphs. Several of
 * these pages have dark panels whose type is light; forcing a dark colour would
 * make that text disappear. Colour mapping comes after a visual pass.
 */

.pn-styled {
  --pn-ink: #10201F;
  --pn-green: #1C2B29;
  --pn-teal: #27c0c0;
  --pn-teal-hover: #5fd6d4;
  --pn-teal-deep: #06393A;
  --pn-teal-ink: #0F6E6C;
  --pn-cream: #F5F1E8;
  --pn-line-light: #E4DBC9;
  --pn-serif: Marcellus, "Times New Roman", serif;
  --pn-sans: Mulish, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------- type */

.pn-styled .elementor-widget-heading .elementor-heading-title,
.pn-styled .elementor-widget-text-editor h1,
.pn-styled .elementor-widget-text-editor h2,
.pn-styled .elementor-widget-text-editor h3,
.pn-styled .elementor-widget-text-editor h4 {
  font-family: var(--pn-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-wrap: pretty;
}

.pn-styled .elementor-widget-text-editor,
.pn-styled .elementor-widget-text-editor p,
.pn-styled .elementor-widget-icon-list .elementor-icon-list-text,
.pn-styled .elementor-widget-button .elementor-button,
.pn-styled .elementor-field-group label,
.pn-styled .elementor-field-group input,
.pn-styled .elementor-field-group textarea,
.pn-styled .elementor-field-group select {
  font-family: var(--pn-sans) !important;
}

.pn-styled .elementor-widget-text-editor,
.pn-styled .elementor-widget-text-editor p {
  line-height: 1.75 !important;
}

/* --------------------------------------------------------------- shape */

/* The system is square-cornered throughout. */
.pn-styled .elementor-button,
.pn-styled .elementor-field-group input,
.pn-styled .elementor-field-group textarea,
.pn-styled .elementor-field-group select,
.pn-styled .elementor-widget-image img,
.pn-styled .e-con-inner > .elementor-widget-container {
  border-radius: 0 !important;
}

/* --------------------------------------------------------------- accent */

.pn-styled .elementor-widget-text-editor a:not(.elementor-button) {
  color: var(--pn-teal-ink) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--pn-teal);
}
.pn-styled .elementor-widget-text-editor a:not(.elementor-button):hover {
  color: var(--pn-green) !important;
}

/* Buttons: square ink, teal on hover. Elementor writes per-element colours, so
   these only take effect where the page has not set its own. */
.pn-styled .elementor-button {
  text-transform: uppercase;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

/* --------------------------------------------------------------- forms */

/* PN Suite renders the enquiry and appraisal forms
   (LeadFormBlock::renderContextualContactForms). Square fields, hairline
   borders, Mulish labels, teal focus ring. */
.pn-styled input[type="text"],
.pn-styled input[type="email"],
.pn-styled input[type="tel"],
.pn-styled input[type="url"],
.pn-styled input[type="number"],
.pn-styled input[type="search"],
.pn-styled textarea,
.pn-styled select {
  font-family: var(--pn-sans) !important;
  border-radius: 0 !important;
  border: 1px solid #d8d5cf !important;
  box-shadow: none !important;
}
.pn-styled input[type="text"]:focus,
.pn-styled input[type="email"]:focus,
.pn-styled input[type="tel"]:focus,
.pn-styled input[type="url"]:focus,
.pn-styled input[type="number"]:focus,
.pn-styled input[type="search"]:focus,
.pn-styled textarea:focus,
.pn-styled select:focus {
  border-color: var(--pn-teal) !important;
  outline: 2px solid rgba(39, 192, 192, 0.35);
  outline-offset: 1px;
}
.pn-styled button[type="submit"],
.pn-styled input[type="submit"] {
  font-family: var(--pn-sans) !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  border-radius: 0 !important;
}