/* =========================================================
   Home Exterior Insider — PMPro Brand Styling
   Paste into: Appearance → Customize → Additional CSS
   (or Elementor → Site Settings → Custom CSS if using Elementor Pro)
   ========================================================= */

/* --- Fonts: make sure Lora & DM Sans are enqueued site-wide.
   If they're already loading for your other pages, these @import
   lines aren't needed — remove them to avoid double-loading fonts. */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=DM+Sans:wght@400;500;600&display=swap');

/* --- Brand variables (kept as comments for reference — CSS below uses literal values for max compatibility) ---
   Navy:       #282864
   Orange:     #DC783C
   Blue light: #C8DCF0
   Warm white: #F7F4F0
*/

/* ===== Global type inside PMPro pages ===== */
.pmpro_login,
.pmpro_checkout,
.pmpro_account,
.pmpro_levels,
body.page-template-default .entry-content {
  font-family: 'DM Sans', sans-serif;
  color: #282864;
  background-color: #F7F4F0;
}

.pmpro_login h1, .pmpro_login h2,
.pmpro_checkout h1, .pmpro_checkout h2, .pmpro_checkout h3,
.pmpro_account h1, .pmpro_account h2, .pmpro_account h3,
.pmpro_levels h1, .pmpro_levels h2, .pmpro_levels h3,
.entry-title {
  font-family: 'Lora', serif;
  color: #282864;
  font-weight: 600;
}

/* ===== Buttons ===== */
.pmpro_btn,
.pmpro_btn-submit,
input[type="submit"].pmpro_btn,
#pmpro_btn-submit {
  background-color: #DC783C !important;
  border: none !important;
  color: #F7F4F0 !important;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.pmpro_btn:hover,
.pmpro_btn-submit:hover,
input[type="submit"].pmpro_btn:hover {
  background-color: #c76a30 !important;
  color: #F7F4F0 !important;
}

.pmpro_btn-cancel,
.pmpro_btn-cancel:hover {
  background-color: transparent !important;
  color: #282864 !important;
  border: 1px solid #282864 !important;
}

/* ===== Form fields (checkout, login, account edit) ===== */
.pmpro_checkout input[type="text"],
.pmpro_checkout input[type="email"],
.pmpro_checkout input[type="password"],
.pmpro_login input[type="text"],
.pmpro_login input[type="password"],
.pmpro_account input[type="text"],
.pmpro_account input[type="email"],
.pmpro_account input[type="password"],
select {
  border: 1px solid #C8DCF0;
  border-radius: 4px;
  padding: 10px 12px;
  font-family: 'DM Sans', sans-serif;
  color: #282864;
  background-color: #ffffff;
}

.pmpro_checkout input:focus,
.pmpro_login input:focus,
.pmpro_account input:focus {
  border-color: #DC783C;
  outline: none;
}

/* ===== Membership Levels page — level "cards" ===== */
.pmpro_level,
table.pmpro_level,
.pmpro-level-boxes .pmpro_level_box {
  background-color: #ffffff;
  border: 1px solid #C8DCF0;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
}

.pmpro_level .pmpro_level_name,
.pmpro_level_box .pmpro_level_box-name {
  font-family: 'Lora', serif;
  color: #282864;
  font-size: 1.4em;
  font-weight: 600;
}

.pmpro_level .pmpro_level_price,
.pmpro_level_box .pmpro_level_box-price {
  color: #DC783C;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 1.2em;
}

/* ===== Account page — membership summary box ===== */
.pmpro_account-membership-level,
.pmpro_box {
  background-color: #ffffff;
  border: 1px solid #C8DCF0;
  border-radius: 8px;
  padding: 20px;
}

/* ===== Messages (success/error) ===== */
.pmpro_message.pmpro_success {
  background-color: #C8DCF0;
  color: #282864;
  border-left: 4px solid #282864;
  padding: 14px 18px;
  border-radius: 4px;
}

.pmpro_message.pmpro_error {
  background-color: #fbe4e4;
  color: #8a2c2c;
  border-left: 4px solid #cc3333;
  padding: 14px 18px;
  border-radius: 4px;
}

/* ===== Links ===== */
.pmpro_login a,
.pmpro_checkout a,
.pmpro_account a,
.pmpro_levels a {
  color: #DC783C;
}

.pmpro_login a:hover,
.pmpro_checkout a:hover,
.pmpro_account a:hover,
.pmpro_levels a:hover {
  color: #282864;
}