/**
 * mp-base.css — MeetingsPremium Plugin CSS Foundation
 *
 * PURPOSE
 * -------
 * This file is loaded before front.css on every plugin page.
 * It does two things:
 *   1. Defines all design tokens as CSS custom properties on .mp-plugin-root,
 *      so theme stylesheets can never override them (they only scope to :root).
 *   2. Resets common theme overrides for form elements, buttons, links, and
 *      headings — scoped strictly inside .mp-plugin-root, never globally.
 *
 * SPECIFICITY STRATEGY
 * --------------------
 * Theme rules typically look like:
 *   input[type=text] { border-radius: 3px }        → specificity 0,0,1
 *   .theme-class input { border-radius: 3px }      → specificity 0,1,1
 *
 * Our reset rules look like:
 *   .mp-plugin-root input[type="text"] { ... }     → specificity 0,1,1
 *   .mp-plugin-root .mp-event-page input { ... }   → specificity 0,2,1
 *
 * Adding .mp-plugin-root to the front of selectors always wins over generic
 * theme rules — without needing !important.
 *
 * VISUAL MODES
 * ------------
 * .mp-plugin-root                  → neutral base (tokens only)
 * .mp-plugin-root.mp-plugin-root--glass  → dark/glassmorphism (event pages)
 * .mp-plugin-root.mp-plugin-root--light  → white/standalone (auth pages)
 *
 * PHP templates set the correct modifier class at render time.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   All plugin color, spacing, typography, and radius values live here.
   Defining them on .mp-plugin-root (not :root) means theme CSS that
   redeclares the same variable names on :root cannot override ours.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-plugin-root {
	/* Surface & background */
	--mp-bg:           #f5f9fe;
	--mp-surface:      #ffffff;
	--mp-surface-soft: #f8fbff;

	/* Borders */
	--mp-border:       #d5e1f1;
	--mp-border-strong:#c6d7ee;

	/* Brand palette */
	--mp-navy-deep:    #0e1a2d;
	--mp-navy:         #15253d;
	--mp-blue:         #2e4c7a;
	--mp-blue-mid:     #86a5dd;
	--mp-blue-soft:    #b8ccee;

	/* Text */
	--mp-text:         #1d2d42;
	--mp-muted:        #5e7290;

	/* Semantic colors */
	--mp-success:      #00a86b;
	--mp-success-bg:   #e9f6f0;
	--mp-warning:      #8b5f1f;
	--mp-warning-bg:   #fdf3e6;
	--mp-danger:       #8d3340;
	--mp-danger-bg:    #fdeff2;

	/* Shadows */
	--mp-shadow:       0 2px 16px rgba(14, 26, 45, 0.05);
	--mp-shadow-lg:    0 12px 30px rgba(14, 26, 45, 0.10);

	/* Shape */
	--mp-radius:       18px;
	--mp-radius-sm:    12px;

	/* Typography */
	--mp-sans:  'DM Sans', 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
	--mp-serif: 'Cormorant Garamond', 'Iowan Old Style', Palatino, serif;
	--mp-ease:  cubic-bezier(0.22, 1, 0.36, 1);

	/* Layout */
	--mp-admin-bar-offset:    0px;
	--mp-section-nav-height:  54px;
	--mp-sidebar-width:       360px;
	--mp-sidebar-gap:         14px;
	--mp-sticky-gap:          20px;

	/* ── Form element tokens ─────────────────────────────────────────────── */
	/* These are the values the reset block below uses.
	   Override them per-mode in the modifiers below. */
	--mp-input-bg:             #ffffff;
	--mp-input-border:         #d5e1f1;
	--mp-input-border-focus:   #2e4c7a;
	--mp-input-shadow-focus:   0 0 0 3px rgba(46, 76, 122, 0.12);
	--mp-input-radius:         10px;
	--mp-input-height:         44px;
	--mp-input-padding:        10px 14px;
	--mp-input-font-size:      0.9rem;
	--mp-input-color:          #1d2d42;
	--mp-input-placeholder:    #8fa3bb;

	/* ── Button tokens ──────────────────────────────────────────────────── */
	--mp-btn-radius:           10px;
	--mp-btn-height:           44px;
	--mp-btn-primary-bg:       #2e4c7a;
	--mp-btn-primary-color:    #ffffff;
}

/* ── Dark / glassmorphism mode — event pages with dark hero backgrounds ── */
.mp-plugin-root.mp-plugin-root--glass {
	/* Form inputs become semi-transparent on dark backgrounds */
	--mp-input-bg:             rgba(255, 255, 255, 0.10);
	--mp-input-border:         rgba(255, 255, 255, 0.22);
	--mp-input-border-focus:   rgba(255, 255, 255, 0.60);
	--mp-input-shadow-focus:   0 0 0 3px rgba(255, 255, 255, 0.12);
	--mp-input-color:          #ffffff;
	--mp-input-placeholder:    rgba(255, 255, 255, 0.45);

	/* Primary button inverts on dark */
	--mp-btn-primary-bg:       #ffffff;
	--mp-btn-primary-color:    #0e1a2d;
}

/* ── Light / standalone mode — auth pages with white background ── */
.mp-plugin-root.mp-plugin-root--light {
	--mp-input-bg:             #ffffff;
	--mp-input-border:         #d6e0ea;
	--mp-input-border-focus:   #2e4c7a;
	--mp-input-shadow-focus:   0 0 0 3px rgba(46, 76, 122, 0.10);
	--mp-input-color:          #17324d;
	--mp-input-placeholder:    #8fa3bb;

	--mp-btn-primary-bg:       #2e4c7a;
	--mp-btn-primary-color:    #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. BOX MODEL NORMALISATION
   Resets: themes sometimes omit box-sizing, causing padded elements to
   overflow their containers. Scoped here so we never touch the global model.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-plugin-root *,
.mp-plugin-root *::before,
.mp-plugin-root *::after {
	box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. TEXT INPUTS & TEXTAREA
   Resets: themes like Divi, Astra, OceanWP, GeneratePress apply global rules:
     input[type=text] { border-radius: 3px; border: 1px solid #666; }
   These have specificity 0,0,1. Our selector (.mp-plugin-root input[type="text"])
   has specificity 0,1,1 — always wins regardless of stylesheet load order.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-plugin-root input[type="text"],
.mp-plugin-root input[type="email"],
.mp-plugin-root input[type="password"],
.mp-plugin-root input[type="number"],
.mp-plugin-root input[type="tel"],
.mp-plugin-root input[type="url"],
.mp-plugin-root input[type="search"],
.mp-plugin-root input[type="date"],
.mp-plugin-root input[type="time"],
.mp-plugin-root textarea {
	/* Shape — most commonly overridden by themes */
	border:        1px solid var(--mp-input-border);
	border-radius: var(--mp-input-radius);

	/* Sizing */
	height:  var(--mp-input-height);
	padding: var(--mp-input-padding);
	width:   100%;

	/* Typography */
	font-family: var(--mp-sans);
	font-size:   var(--mp-input-font-size);
	color:       var(--mp-input-color);
	line-height: 1.5;

	/* Surface */
	background: var(--mp-input-bg);

	/* Appearance — removes iOS/Safari native styling */
	-webkit-appearance: none;
	appearance:         none;

	/* Remove box-shadow added by WooCommerce and some themes */
	box-shadow: none;

	outline:    none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.mp-plugin-root textarea {
	height:     auto;
	resize:     vertical;
	min-height: 80px;
}

.mp-plugin-root input::placeholder,
.mp-plugin-root textarea::placeholder {
	color:   var(--mp-input-placeholder);
	opacity: 1;
}

/* Focus ring — consistent across all plugin forms */
.mp-plugin-root input[type="text"]:focus,
.mp-plugin-root input[type="email"]:focus,
.mp-plugin-root input[type="password"]:focus,
.mp-plugin-root input[type="number"]:focus,
.mp-plugin-root input[type="tel"]:focus,
.mp-plugin-root input[type="url"]:focus,
.mp-plugin-root input[type="search"]:focus,
.mp-plugin-root input[type="date"]:focus,
.mp-plugin-root input[type="time"]:focus,
.mp-plugin-root textarea:focus {
	border-color: var(--mp-input-border-focus);
	box-shadow:   var(--mp-input-shadow-focus);
	outline:      none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. SELECT
   Resets: themes override <select> border, border-radius, and background.
   Custom arrow is preserved; native arrow removed via appearance:none.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-plugin-root select {
	border:        1px solid var(--mp-input-border);
	border-radius: var(--mp-input-radius);
	height:        var(--mp-input-height);
	padding:       var(--mp-input-padding);
	width:         100%;

	font-family: var(--mp-sans);
	font-size:   var(--mp-input-font-size);
	color:       var(--mp-input-color);

	background:  var(--mp-input-bg);

	-webkit-appearance: none;
	appearance:         none;
	box-shadow:         none;
	outline:            none;
	cursor:             pointer;
	transition:         border-color 0.18s ease;
}

.mp-plugin-root select:focus {
	border-color: var(--mp-input-border-focus);
	box-shadow:   var(--mp-input-shadow-focus);
	outline:      none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. CHECKBOXES & RADIOS
   Resets: some themes force width/height/margin on all inputs, which
   distorts checkboxes. We only restore auto sizing here.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-plugin-root input[type="checkbox"],
.mp-plugin-root input[type="radio"] {
	width:  auto;
	height: auto;
	margin: 0;
	padding: 0;
	cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. BUTTONS
   Resets: themes apply global button styling (border-radius, background,
   border, font) that overrides .mp-btn variants. We only reset appearance
   here — actual button colours live in front.css under .mp-btn.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-plugin-root button,
.mp-plugin-root [type="submit"],
.mp-plugin-root [type="button"],
.mp-plugin-root [type="reset"] {
	font-family:        var(--mp-sans);
	border:             none;
	border-radius:      var(--mp-btn-radius);
	cursor:             pointer;
	-webkit-appearance: none;
	appearance:         none;
	box-shadow:         none;
	background:         transparent;
	line-height:        1.4;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. LINKS
   Resets: themes add underline, color, or font-weight to all <a> tags.
   Plugin components handle their own link styling; this prevents bleed-in.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-plugin-root a {
	color:           inherit;
	text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. IMAGES
   Resets: theme rules like img { max-width: 100%; border: 2px solid #ccc }
   can break plugin avatars, posters, and card images.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-plugin-root img {
	display:   block;
	max-width: 100%;
	height:    auto;
	border:    none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. HEADINGS
   Resets: theme heading margins/padding break plugin card layouts where
   headings are used as labels or titles with no vertical margin needed.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-plugin-root h1,
.mp-plugin-root h2,
.mp-plugin-root h3,
.mp-plugin-root h4,
.mp-plugin-root h5,
.mp-plugin-root h6 {
	margin:      0;
	padding:     0;
	font-weight: inherit;
	line-height: inherit;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. PARAGRAPHS
   Resets: themes add margin-bottom to all <p> tags. Inside plugin cards
   and list items this creates unintended whitespace.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-plugin-root p {
	margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. LISTS
   Resets: themes style ul/ol with list-style, margin, and padding globally.
   Plugin nav items, tag lists, and step lists must be unstyled by default.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-plugin-root ul,
.mp-plugin-root ol {
	list-style: none;
	margin:     0;
	padding:    0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. TABLES
   Resets: themes apply borders, padding, and stripe colors to all tables.
   Plugin booking summaries and data tables define their own grid styles.
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-plugin-root table {
	border-collapse: collapse;
	border-spacing:  0;
	width:           100%;
}

.mp-plugin-root th,
.mp-plugin-root td {
	padding: 0;
	border:  none;
}