/*
 * Theme Name: My Property Network
 * Theme URI: https://mypropertynetwork.com
 * Description: Custom child theme for Hello Elementor with MPN brand colours, typography and styling.
 * Author: E.E
 * Author URI: https://aiwiz.uk
 * Template: hello-elementor
 * Version: 1.0.0
 * Requires at least: 6.0
 * Tested up to: 6.8
 * Requires PHP: 7.4
 * License: GNU General Public License v3 or later
 * License URI: https://www.gnu.org/licenses/gpl-3.0.html
 * Text Domain: my-property-network
 * Tags: elementor, property, investment
 */

/* ==========================================================================
   Font Face Declarations - Self-hosted Web Fonts
   ========================================================================== */

/* DM Sans - Regular */
@font-face {
    font-family: 'DM Sans';
    src: url('assets/fonts/DMSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* DM Sans - Medium */
@font-face {
    font-family: 'DM Sans';
    src: url('assets/fonts/DMSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* DM Sans - Bold */
@font-face {
    font-family: 'DM Sans';
    src: url('assets/fonts/DMSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Playfair Display - Regular */
@font-face {
    font-family: 'Playfair Display';
    src: url('assets/fonts/PlayfairDisplay-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Playfair Display - Bold */
@font-face {
    font-family: 'Playfair Display';
    src: url('assets/fonts/PlayfairDisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   CSS Custom Properties - MPN Brand Design System
   ========================================================================== */

:root {
    /* -------------------------------------------------------------------------
       Brand Colours - Navy Blue
       ------------------------------------------------------------------------- */
    --mpn-brand-50: #f0f4f8;
    --mpn-brand-100: #d9e2ec;
    --mpn-brand-200: #bcccdc;
    --mpn-brand-300: #9fb3c8;
    --mpn-brand-400: #829ab1;
    --mpn-brand-500: #627d98;
    --mpn-brand-600: #486581;
    --mpn-brand-700: #334e68;
    --mpn-brand-800: #243b53;
    --mpn-brand-900: #102a43;
    --mpn-brand-950: #061729;
    
    /* -------------------------------------------------------------------------
       Accent Colours - Antique Gold / Bronze
       ------------------------------------------------------------------------- */
    --mpn-accent-50: #fbf9f0;
    --mpn-accent-100: #f5f0db;
    --mpn-accent-200: #ebdeb3;
    --mpn-accent-300: #e0c985;
    --mpn-accent-400: #d6b356;
    --mpn-accent-500: #c59d32;
    --mpn-accent-600: #a68023;
    --mpn-accent-700: #85631a;
    --mpn-accent-800: #684d16;
    --mpn-accent-900: #503b13;
    
    /* -------------------------------------------------------------------------
       Neutral Colours - Slate Grey
       ------------------------------------------------------------------------- */
    --mpn-slate-50: #f8fafc;
    --mpn-slate-100: #f1f5f9;
    --mpn-slate-200: #e2e8f0;
    --mpn-slate-300: #cbd5e1;
    --mpn-slate-400: #94a3b8;
    --mpn-slate-500: #64748b;
    --mpn-slate-600: #475569;
    --mpn-slate-700: #334155;
    --mpn-slate-800: #1e293b;
    --mpn-slate-900: #0f172a;
    
    /* -------------------------------------------------------------------------
       Semantic Colours
       ------------------------------------------------------------------------- */
    --mpn-primary: var(--mpn-brand-900);
    --mpn-primary-hover: var(--mpn-brand-800);
    --mpn-secondary: var(--mpn-accent-500);
    --mpn-secondary-hover: var(--mpn-accent-600);
    
    --mpn-text-primary: var(--mpn-brand-900);
    --mpn-text-secondary: var(--mpn-slate-600);
    --mpn-text-muted: var(--mpn-slate-500);
    --mpn-text-light: var(--mpn-slate-400);
    
    --mpn-background: #ffffff;
    --mpn-background-alt: var(--mpn-brand-50);
    --mpn-background-dark: var(--mpn-brand-900);
    
    --mpn-border: var(--mpn-slate-200);
    --mpn-border-light: var(--mpn-slate-100);
    
    /* -------------------------------------------------------------------------
       Typography
       ------------------------------------------------------------------------- */
    --mpn-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --mpn-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    
    --mpn-font-size-xs: 0.75rem;    /* 12px */
    --mpn-font-size-sm: 0.875rem;   /* 14px */
    --mpn-font-size-base: 1rem;     /* 16px */
    --mpn-font-size-lg: 1.125rem;   /* 18px */
    --mpn-font-size-xl: 1.25rem;    /* 20px */
    --mpn-font-size-2xl: 1.5rem;    /* 24px */
    --mpn-font-size-3xl: 1.875rem;  /* 30px */
    --mpn-font-size-4xl: 2.25rem;   /* 36px */
    --mpn-font-size-5xl: 3rem;      /* 48px */
    
    /* -------------------------------------------------------------------------
       Spacing
       ------------------------------------------------------------------------- */
    --mpn-space-1: 0.25rem;   /* 4px */
    --mpn-space-2: 0.5rem;    /* 8px */
    --mpn-space-3: 0.75rem;   /* 12px */
    --mpn-space-4: 1rem;      /* 16px */
    --mpn-space-5: 1.25rem;   /* 20px */
    --mpn-space-6: 1.5rem;    /* 24px */
    --mpn-space-8: 2rem;      /* 32px */
    --mpn-space-10: 2.5rem;   /* 40px */
    --mpn-space-12: 3rem;     /* 48px */
    --mpn-space-16: 4rem;     /* 64px */
    
    /* -------------------------------------------------------------------------
       Shadows
       ------------------------------------------------------------------------- */
    --mpn-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --mpn-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --mpn-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --mpn-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --mpn-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --mpn-shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
    --mpn-shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.04);
    
    /* -------------------------------------------------------------------------
       Border Radius
       ------------------------------------------------------------------------- */
    --mpn-radius-sm: 0.25rem;   /* 4px */
    --mpn-radius: 0.5rem;       /* 8px */
    --mpn-radius-md: 0.75rem;   /* 12px */
    --mpn-radius-lg: 1rem;      /* 16px */
    --mpn-radius-xl: 1.5rem;    /* 24px */
    --mpn-radius-full: 9999px;
    
    /* -------------------------------------------------------------------------
       Transitions
       ------------------------------------------------------------------------- */
    --mpn-transition-fast: 150ms ease;
    --mpn-transition: 200ms ease;
    --mpn-transition-slow: 300ms ease;
    
    /* -------------------------------------------------------------------------
       Container
       ------------------------------------------------------------------------- */
    --mpn-container-max: 1140px;
    --mpn-container-padding: 24px;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--mpn-font-sans);
    font-size: var(--mpn-font-size-base);
    line-height: 1.6;
    color: var(--mpn-text-secondary);
    background-color: var(--mpn-background);
}

/* ==========================================================================
   Typography - DM Sans for ALL text, Playfair Display ONLY for logo
   ========================================================================== */

/* Headings use DM Sans (same as body), NOT Playfair Display */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mpn-font-sans);
    color: var(--mpn-text-primary);
    line-height: 1.2;
    font-weight: 700;
}

/* Playfair Display is ONLY used for the logo via .mpn-font-serif class */
.mpn-font-serif,
.font-serif {
    font-family: var(--mpn-font-serif) !important;
}

/* Links */
a {
    color: var(--mpn-primary);
    text-decoration: none;
    transition: color var(--mpn-transition);
}

a:hover {
    color: var(--mpn-primary-hover);
}

/* Selection */
::selection {
    background-color: var(--mpn-brand-100);
    color: var(--mpn-brand-900);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #ffffff;
}

::-webkit-scrollbar-thumb {
    background: var(--mpn-brand-200);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mpn-brand-300);
}

/* ==========================================================================
   Elementor Overrides
   ========================================================================== */

/* Ensure Elementor uses DM Sans throughout */
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--mpn-font-sans);
}

/* Button styling to match brand */
.elementor-button {
    font-family: var(--mpn-font-sans);
    font-weight: 500;
    border-radius: var(--mpn-radius-full);
    transition: all var(--mpn-transition-slow);
}

/* Primary button style */
.elementor-button.elementor-button-primary,
.elementor-button[style*="background-color: var(--mpn-primary)"] {
    background-color: var(--mpn-primary) !important;
    box-shadow: 0 10px 15px -3px rgba(16, 42, 67, 0.2);
}

.elementor-button.elementor-button-primary:hover {
    background-color: var(--mpn-primary-hover) !important;
    box-shadow: 0 20px 25px -5px rgba(16, 42, 67, 0.3);
}

/* ==========================================================================
   MPN Blocks Plugin Compatibility
   ========================================================================== */

/* Ensure MPN Blocks components inherit theme fonts */
[data-mpn-component] {
    font-family: var(--mpn-font-sans);
}

[data-mpn-component] h1,
[data-mpn-component] h2,
[data-mpn-component] h3,
[data-mpn-component] h4,
[data-mpn-component] h5,
[data-mpn-component] h6 {
    font-family: var(--mpn-font-sans);
}

/* Only logo elements use Playfair Display */
[data-mpn-component] .font-serif {
    font-family: var(--mpn-font-serif) !important;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.mpn-container {
    width: 100%;
    max-width: var(--mpn-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mpn-container-padding);
    padding-right: var(--mpn-container-padding);
}

.mpn-text-primary { color: var(--mpn-text-primary); }
.mpn-text-secondary { color: var(--mpn-text-secondary); }
.mpn-text-muted { color: var(--mpn-text-muted); }
.mpn-text-accent { color: var(--mpn-accent-500); }

.mpn-bg-primary { background-color: var(--mpn-primary); }
.mpn-bg-light { background-color: var(--mpn-background-alt); }
.mpn-bg-dark { background-color: var(--mpn-background-dark); }

.mpn-font-sans { font-family: var(--mpn-font-sans); }
.mpn-font-serif { font-family: var(--mpn-font-serif); }