/*
Theme Name: Overseas Expat Mortgages MTC
Theme URI: https://overseasexpatmortgages.com/
Author: Marketing the Change
Author URI: https://marketingthechange.com/
Description: FSE block theme for Overseas Expat Mortgages. Dual-track expat + overseas property mortgage brokerage. Prussian Navy, Amber Gold, Olive, Old Cream palette. Includes FCA-mandated compliance blocks (badge 966902, dual-track disclosure, overseas carve-out, currency-risk, commission), CPT country + service page, cartographic hero motif, five overseas country patterns.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: overseasexpatmortgages-mtc
Tags: full-site-editing, block-theme, financial-services, mortgages, fca
*/

/* ---------------------------------------------------------------
 * Overseas Expat Mortgages MTC front-end + editor styles
 * ------------------------------------------------------------- */

:root{
  --oem-navy: #0B1D3A;
  --oem-ink:  #152A4E;
  --oem-ash:  #1F3252;
  --oem-gold: #D4A24C;
  --oem-gold-warm: #E4B968;
  --oem-olive: #3E5C3A;
  --oem-cream: #F4EDDC;
  --oem-cream-alt: #F8F2E4;
  --oem-parchment: #F7F1E1;
  --oem-ink-black: #0A1220;
  --oem-fog: #94A0B5;
  --oem-copper: #B04A2C;
}

body{
  background: var(--oem-cream);
  color: var(--oem-ink-black);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

a{ color: var(--oem-navy); text-underline-offset: 3px; }
a:hover{ color: var(--oem-olive); }

.wp-block-button__link.wp-element-button{
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 14px 22px;
}

.wp-block-button.is-style-primary .wp-block-button__link{
  background: var(--oem-gold);
  color: var(--oem-ink-black);
  border: 0;
}
.wp-block-button.is-style-primary .wp-block-button__link:hover{
  background: var(--oem-gold-warm);
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background: transparent;
  color: var(--oem-parchment);
  border: 1.5px solid var(--oem-parchment);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background: var(--oem-parchment);
  color: var(--oem-navy);
}

*:focus-visible{
  outline: 2px solid var(--oem-gold);
  outline-offset: 2px;
}

/* ---------------- FCA badge ---------------- */
.oem-fca-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1.5px solid var(--oem-gold);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--oem-parchment);
  background: rgba(212,162,76,0.08);
}
.oem-fca-badge__ref{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  color: var(--oem-gold);
  font-size: 12px;
}
.oem-fca-badge--light{
  color: var(--oem-ink-black);
  background: rgba(212,162,76,0.12);
}

/* ---------------- FCA disclosure ---------------- */
.oem-fca{
  background: var(--oem-navy);
  color: var(--oem-parchment);
  padding: 32px 24px;
  border-top: 1px solid var(--oem-ash);
  font-size: 14px;
  line-height: 1.6;
}
.oem-fca__label{
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oem-gold);
  margin-bottom: 12px;
}
.oem-fca p{ margin: 0 0 10px; }
.oem-fca p:first-of-type{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
}
.oem-fca p:last-child{ color: var(--oem-fog); font-size: 12px; }

/* ---------------- Dual-track disclosure ---------------- */
.oem-dualtrack{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px;
  background: var(--oem-cream-alt);
  border-left: 4px solid var(--oem-gold);
  margin: 24px 0;
}
@media (min-width: 720px){ .oem-dualtrack{ grid-template-columns: 1fr 1fr; } }
.oem-dualtrack__col{ padding: 12px; }
.oem-dualtrack__col--a{ border-right: 1px solid rgba(11,29,58,0.08); }
.oem-dualtrack__eyebrow{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oem-olive);
  margin: 0 0 4px;
}
.oem-dualtrack__col--a .oem-dualtrack__eyebrow{ color: var(--oem-gold); }
.oem-dualtrack__title{
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--oem-navy);
}
.oem-dualtrack__body{ font-size: 14px; margin: 0; color: var(--oem-ink-black); line-height: 1.55; }

/* ---------------- Overseas carve-out ---------------- */
.oem-carveout{
  padding: 20px 24px;
  background: rgba(62,92,58,0.08);
  border-left: 4px solid var(--oem-olive);
  border-radius: 4px;
  margin: 24px 0;
  color: var(--oem-ink-black);
  font-size: 14px;
  line-height: 1.55;
}
.oem-carveout strong{ display: block; color: var(--oem-olive); margin-bottom: 6px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------------- Risk warning ---------------- */
.oem-risk{
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(176,74,44,0.06);
  border-left: 4px solid var(--oem-copper);
  border-radius: 4px;
  margin: 20px 0;
  font-size: 14px;
  align-items: flex-start;
}
.oem-risk strong{ color: var(--oem-copper); letter-spacing: 0.02em; text-transform: uppercase; font-size: 12px; }

/* ---------------- Currency risk ---------------- */
.oem-currency-risk{
  padding: 16px 20px;
  background: rgba(212,162,76,0.08);
  border-left: 4px solid var(--oem-gold);
  border-radius: 4px;
  margin: 20px 0;
  font-size: 14px;
}
.oem-currency-risk strong{ display: block; color: var(--oem-ink-black); margin-bottom: 4px; font-size: 13px; }

/* ---------------- Trust strip ---------------- */
.oem-trust-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0;
  align-items: center;
  justify-content: flex-start;
}
.oem-pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(247,241,225,0.08);
  color: var(--oem-parchment);
  border: 1px solid rgba(247,241,225,0.18);
}
.oem-pill--gold{
  background: rgba(212,162,76,0.14);
  color: var(--oem-gold-warm);
  border-color: rgba(212,162,76,0.4);
}
.oem-pill--olive{
  background: rgba(62,92,58,0.22);
  color: #B7C9A6;
  border-color: rgba(62,92,58,0.5);
}

/* ---------------- Hero (cartographic) ---------------- */
.oem-hero{
  position: relative;
  overflow: hidden;
  background: var(--oem-navy);
  color: var(--oem-parchment);
  padding: 96px 24px;
}
.oem-hero__grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,162,76,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,162,76,0.06) 1px, transparent 1px);
  background-size: 96px 96px;
  pointer-events: none;
}
.oem-hero__compass{
  position: absolute;
  right: -80px; top: 50%;
  width: 340px; height: 340px;
  transform: translateY(-50%);
  opacity: 0.14;
  color: var(--oem-gold);
  pointer-events: none;
}
.oem-hero__inner{ position: relative; max-width: 1180px; margin: 0 auto; z-index: 2; }
.oem-hero__eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oem-gold);
  margin: 0 0 16px;
}
.oem-hero__title{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  max-width: 20ch;
}
.oem-hero__lede{
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  max-width: 60ch;
  color: rgba(247,241,225,0.86);
  margin: 0 0 28px;
}

/* ---------------- Service card ---------------- */
.oem-service-card{
  background: var(--oem-cream-alt);
  padding: 28px;
  border-radius: 8px;
  border-top: 4px solid var(--oem-gold);
  height: 100%;
}
.oem-service-card--introducer{ border-top-color: var(--oem-olive); }
.oem-service-card__track{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(212,162,76,0.16);
  color: var(--oem-navy);
  margin-bottom: 12px;
}
.oem-service-card--introducer .oem-service-card__track{
  background: rgba(62,92,58,0.18);
  color: var(--oem-olive);
}
.oem-service-card__title{
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--oem-navy);
}
.oem-service-card__body{ font-size: 15px; color: var(--oem-ink-black); margin: 0 0 16px; }
.oem-service-card__link{
  font-weight: 600;
  color: var(--oem-navy);
  text-decoration: none;
  border-bottom: 2px solid var(--oem-gold);
  padding-bottom: 2px;
}

/* ---------------- Country card ---------------- */
.oem-country-card{
  background: var(--oem-cream-alt);
  padding: 24px;
  border-radius: 8px;
  transition: transform 150ms cubic-bezier(0.16,1,0.3,1);
}
.oem-country-card:hover{ transform: translateY(-2px); }
.oem-country-card__flag{
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--oem-navy);
  color: var(--oem-parchment);
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.oem-country-card__name{
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--oem-navy);
}
.oem-country-card__note{ font-size: 13px; color: var(--oem-ink-black); margin: 0 0 10px; }
.oem-country-card__meta{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.oem-country-card__meta span{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--oem-olive);
  background: rgba(62,92,58,0.08);
  padding: 3px 8px;
  border-radius: 4px;
}
.oem-country-card__arrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--oem-navy);
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}
.oem-country-card__arrow::after{ content: "→"; color: var(--oem-gold); }

/* ---------------- Scenario tile ---------------- */
.oem-scenario{
  padding: 24px;
  background: var(--oem-ink);
  border-radius: 8px;
  color: var(--oem-parchment);
  border-top: 3px solid var(--oem-gold);
  height: 100%;
}
.oem-scenario__eyebrow{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oem-gold);
  margin: 0 0 8px;
}
.oem-scenario__title{
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--oem-parchment);
}
.oem-scenario__body{ font-size: 14px; color: rgba(247,241,225,0.82); margin: 0 0 12px; line-height: 1.55; }
.oem-scenario__link{ color: var(--oem-gold); text-decoration: none; font-weight: 600; font-size: 14px; }

/* ---------------- Testimonial ---------------- */
.oem-testimonial{
  padding: 32px;
  background: var(--oem-cream);
  border-radius: 8px;
  border-top: 3px solid var(--oem-olive);
}
.oem-testimonial__quote{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--oem-navy);
  margin: 0 0 16px;
}
.oem-testimonial__quote::before{ content: '\201C'; font-size: 32px; color: var(--oem-gold); vertical-align: -8px; margin-right: 4px; }
.oem-testimonial__attrib{ font-size: 13px; color: var(--oem-ink-black); font-weight: 600; }
.oem-testimonial__attrib span{ color: var(--oem-olive); font-weight: 400; }

/* ---------------- Application form placeholder ---------------- */
.oem-apply{
  padding: 32px;
  background: var(--oem-cream-alt);
  border-radius: 8px;
  border-top: 4px solid var(--oem-gold);
}
.oem-apply__title{
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--oem-navy);
}
.oem-apply__lede{ font-size: 15px; margin: 0 0 20px; color: var(--oem-ink-black); }
.oem-apply__step{
  padding: 14px 18px;
  background: white;
  border-left: 3px solid var(--oem-gold);
  border-radius: 4px;
  margin-bottom: 10px;
}
.oem-apply__step-title{ font-weight: 600; margin: 0 0 4px; color: var(--oem-navy); font-size: 15px; }
.oem-apply__step-desc{ font-size: 13px; margin: 0; color: var(--oem-ink-black); }
.oem-apply__cta{
  display: inline-block;
  margin: 20px 0 12px;
  padding: 12px 20px;
  background: var(--oem-navy);
  color: var(--oem-parchment);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.oem-apply__consent{ font-size: 12px; color: var(--oem-fog); margin: 0; }

/* ---------------- Consultant callout ---------------- */
.oem-consultant{
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  background: var(--oem-cream-alt);
  border-radius: 8px;
  align-items: center;
  border-left: 3px solid var(--oem-olive);
  margin: 20px 0;
}
.oem-consultant__avatar{
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--oem-navy);
  color: var(--oem-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 18px;
}
.oem-consultant__name{ margin: 0; font-weight: 600; color: var(--oem-navy); }
.oem-consultant__role{ margin: 0; font-size: 13px; color: var(--oem-ink-black); }

/* ---------------- Legal/no-guarantee note ---------------- */
.oem-noguarantee{
  font-size: 12px;
  color: var(--oem-fog);
  font-style: italic;
  margin: 12px 0 0;
}