/* Modern CSS Framework for rue-montorgueil.com
   Based on ladies-market.hk responsive design
   January 25, 2025 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700&family=Verdana:wght@400;600&display=swap');

/* =====================================================
   Design Tokens (Foundation Layer – Added 2025-09-10)
   These vars map existing palette + new semantic / layout tokens
   Refactor gradually to use only vars (backwards compatible now)
===================================================== */
:root {
    /* Brand / Accent Colors (UPDATED 2025-09-10 palette shift → remove legacy purple) */
    --color-brand-primary: #24572d; /* deep green */
    --color-brand-primary-dark: #32643a; /* hover / focus */
    --color-brand-gradient-start: #24572d; /* kept for legacy gradient refs (now flat) */
    --color-brand-gradient-end: #32643a;
    --color-accent-coral: #ce5736; /* secondary accent */
    --color-accent-coral-light: #ce9e8d; /* soft background accent */
    --color-accent-warm: #f39c12; /* tertiary warm (kept) */
    --color-accent-warm-soft: #f8c25a; /* derived (optional) */

    /* Neutrals */
    --color-neutral-000: #ffffff;
    --color-neutral-050: #f5f3ee; /* softer neutral like reference site */
    --color-neutral-075: #f3f5f7; /* optional alt */
    --color-neutral-100: #ecf0f1; /* light border */
    --color-neutral-150: #dddddd; /* gradient mix */
    --color-neutral-400: #7f8c8d; /* breadcrumb text */
    --color-neutral-500: #666666; /* mid text (not yet used) */
    --color-neutral-700: #34495e; /* heading alt */
    --color-neutral-800: #2c3e50; /* h1 / footer bg alt */
    --color-text-body: #333333; /* main body text */

    /* Semantic (new) */
    --color-status-success: #76c25c;
    --color-status-warning: #ff9933;
    --color-status-danger: #e43b00;
    --color-status-info: #6e66e9;

    /* Shadows */
    --shadow-soft: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-medium: 0 4px 15px rgba(0,0,0,0.15);
    --shadow-pop: 0 2px 26px rgba(0,0,50,0.4);

    /* Radii */
    --radius-sm: 3px;
    --radius-md: 5px; /* legacy button radius */
    --radius-card: 8px;
    --radius-pill: 5000rem; /* new pill style */

    /* Spacing Scale */
    --space-4: 4px;
    --space-8: 8px;
    --space-10: 10px;
    --space-15: 15px; /* legacy */
    --space-20: 20px;
    --space-30: 30px;
    --space-40: 40px;
    --space-50: 50px; /* legacy */
    --space-60: 60px;

    /* Typography Scale */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-xxl: 2rem;
    --line-height-tight: 1.2;
    --line-height-base: 1.6;
}

/* Utility CSS Custom Props for components */
body {
    --container-max-width: 1024px;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-size: 95%;
    font-family: Verdana, Arial, sans-serif;
    line-height: var(--line-height-base);
    color: var(--color-text-body);
    background-color: var(--color-neutral-050);
    -webkit-font-smoothing: antialiased;
}

/* Typography */
h1 {
    font-family: 'Raleway', Verdana, sans-serif;
    font-size: var(--fs-xl);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: left;
    margin: 10px 0 20px 0;
    color: var(--color-brand-primary);
}

h2, h3, h4, h5, h6 {
    font-family: 'Raleway', Verdana, sans-serif;
    margin: 15px 0 10px 0;
    color: var(--color-neutral-700);
}

p {
    margin: 10px 0;
    text-align: justify;
}

/* Links */
a {
    color: var(--color-brand-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-brand-primary-dark);
    text-decoration: underline;
}

/* Main Layout Container */
#mainWrapper, #mainWrapperClip {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: var(--color-neutral-075);
    margin: 0;
    padding: 0;
}

#wrapperContent {
    position: relative;
    max-width: var(--container-max-width);
    width: 100%;
    margin: 0 auto;
    background: var(--color-neutral-000);
    min-height: 100vh;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 18px rgba(0,0,0,0.08);
    border-radius: var(--radius-card);
}

/* Header Section */
.headerWrapper, .indexheaderWrapper {
    position: relative;
    width: 100%;
    background: var(--color-brand-primary);
    color: #fff;
}

#slideWrapper {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.slideshowClass {
    width: 100%;
    height: 100%;
    position: relative;
}

.slideshowClass img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#logo {
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
    z-index: 10;
}

#logoline1 {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    line-height: 1.1;
}

.logoline2 {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 1.2em;
    font-weight: 300;
    color: var(--color-accent-coral);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Mobile Menu Button */
#mobile-menu-button {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 20;
    background: rgba(255,255,255,0.9);
    border-radius: 5px;
    padding: 10px 15px;
}

.mobile-menu-button {
    font-size: 1.5em;
    color: #333;
    text-decoration: none;
}

/* Navigation */
#nav-menu {
    background: var(--color-brand-primary);
    width: 100%;
    position: relative;
    z-index: 15;
}

#nav-menu ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

#nav-menu li {
    margin: 0;
    padding: 0;
}

#nav-menu a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    font-family: 'Raleway', Verdana, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    border-bottom: 3px solid transparent;
}

#nav-menu a:hover {
    background-color: var(--color-brand-primary-dark);
    border-bottom-color: var(--color-accent-coral);
    text-decoration: none;
}

/* Content Area */
#midWrapper {
    background: white;
    width: 100%;
    padding: 0;
    margin: 0;
}

#mainContent {
    background: white;
    padding: 30px;
    margin: 0;
    max-width: none;
    width: 100%;
}

#mainContent article {
    max-width: 800px;
    margin: 0 auto;
}

/* Content Sections for Homepage */
#mid1, #mid2, #mid3, #mid4 {
    padding: var(--space-40) var(--space-30);
    margin: var(--space-30) 0;
    background: var(--color-neutral-000);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-neutral-100);
}

.thickBorderOverBox {
    border: 1px solid var(--color-neutral-100);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    margin: var(--space-30) var(--space-20);
    background: var(--color-neutral-000);
}

/* Lists */
ul {
    margin: 15px 0 15px 20px;
    padding: 0;
}

li {
    margin: 8px 0;
    padding: 2px 0;
}

/* Legacy button classes remapped to new flat palette (deprecate in markup over time) */
.buttonGradient, .contentbutton {
    background: var(--color-brand-primary);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.85em 1.5em;
    margin: 10px 0;
    display: inline-block;
    line-height: 1.2;
    box-shadow: var(--shadow-soft);
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.buttonGradient a, .contentbutton a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
    letter-spacing: .5px;
}

.buttonGradient:hover, .contentbutton:hover {
    background: var(--color-brand-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* Variant helper (apply class .is-coral alongside .buttonGradient) */
.buttonGradient.is-coral, .contentbutton.is-coral { background: var(--color-accent-coral); }
.buttonGradient.is-coral:hover, .contentbutton.is-coral:hover { background: var(--color-accent-coral-light); color:#222; }

/* Navigation UL still using legacy .buttonGradient class should not inherit pill visuals */
#nav-menu ul.buttonGradient {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

/* Legacy semantic span helpers now mapped to new palette */
.boldheadfont { color: var(--color-brand-primary); font-weight: 700; }
.fontlight { color: var(--color-accent-coral-light); font-weight: 300; }

/* Footer */
footer {
    background: var(--color-brand-primary-dark);
    color: #fff;
    padding: var(--space-40) 0;
    text-align: center;
    margin-top: var(--space-60);
    width: 100%;
}

#footerWrapper {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-20);
}

footer a {
    color: var(--color-neutral-100);
}

footer a:hover {
    color: var(--color-accent-warm);
}

/* Breadcrumb */
.breadcrumb {
    margin: 0 0 var(--space-20) 0;
    padding: 10px 0;
    font-size: 0.9em;
    color: var(--color-neutral-400);
    border-bottom: 1px solid var(--color-neutral-100);
}

.breadcrumb a {
    color: var(--color-accent-coral);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-20) 0;
    background: var(--color-neutral-000);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--color-neutral-100);
}

th {
    background: var(--color-neutral-700);
    color: #fff;
    font-weight: 600;
}

tr:hover {
    background: var(--color-neutral-050);
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.margin-top { margin-top: 20px; }
.margin-bottom { margin-bottom: 20px; }
.padding { padding: 20px; }

/* Social Media */
.addthis_toolbox, .addthis_inline_share_toolbox {
    margin: var(--space-20) 0;
    padding: 15px 0;
    border-top: 1px solid var(--color-neutral-100);
    border-bottom: 1px solid var(--color-neutral-100);
}

/* =====================================================
   New Component Patterns (inspired by parisjetaime)
   Non-breaking additions – integrate progressively
===================================================== */

/* Button System */
.btn {
    display: inline-block;
    padding: 0.75em 1.25em;
    font-family: 'Raleway', Verdana, sans-serif;
    font-weight: 600;
    line-height: 1.2;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-primary { background: var(--color-brand-primary); color: #fff; }
.btn-primary:hover { background: var(--color-brand-primary-dark); }
.btn-warm { background: var(--color-accent-coral); color:#fff; }
.btn-warm:hover { background: var(--color-accent-coral-light); color:#222; }
.btn-outline { background: transparent; color: var(--color-brand-primary); border:2px solid var(--color-brand-primary); }
.btn-outline:hover { background: var(--color-brand-primary); color:#fff; }
.btn-soft { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.btn-soft:hover { background: var(--color-neutral-150); }
.btn-sm { padding: .5em 1em; font-size: var(--fs-sm); }
.btn-lg { padding: 1em 1.75em; font-size: var(--fs-lg); }

/* Alert Styles */
.alert { padding: var(--space-10) var(--space-20); border-radius: var(--radius-md); margin: var(--space-20) 0; font-size: var(--fs-sm); line-height: 1.4; }
.alert-success { background: rgba(118,194,92,0.15); border:1px solid var(--color-status-success); color: var(--color-status-success); }
.alert-warning { background: rgba(255,153,51,0.15); border:1px solid var(--color-status-warning); color: var(--color-status-warning); }
.alert-danger { background: rgba(228,59,0,0.15); border:1px solid var(--color-status-danger); color: var(--color-status-danger); }
.alert-info { background: rgba(110,102,233,0.15); border:1px solid var(--color-status-info); color: var(--color-status-info); }

/* Card Pattern */
.card {
    position: relative;
    background: var(--color-neutral-000);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.card-header { position: relative; width:100%; padding-top: 67%; background: var(--color-neutral-100); overflow:hidden; }
.card-header img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card-body { padding: var(--space-20); font-size: var(--fs-sm); }
.card-body h3 { margin: 0 0 var(--space-10) 0; font-size: var(--fs-lg); line-height: var(--line-height-tight); color: var(--color-neutral-800); }
.card-meta { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-neutral-400); margin-bottom: var(--space-10); }
.card:hover { box-shadow: var(--shadow-medium); }

/* Overlay / Modal Utilities */
.overlay {
    position: fixed; inset:0; background: rgba(0,0,10,0.6); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; z-index:999; padding: var(--space-40); opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.overlay.active { opacity:1; pointer-events:auto; }
.modal { background: var(--color-neutral-000); border-radius: var(--radius-card); max-width: 640px; width:100%; box-shadow: var(--shadow-pop); overflow:hidden; }
.modal-header { padding: var(--space-20); font-weight:600; background: var(--color-neutral-050); }
.modal-body { padding: var(--space-20); }
.modal-footer { padding: var(--space-20); display:flex; gap: var(--space-10); justify-content:flex-end; background: var(--color-neutral-050); }

/* Rating (basic placeholder) */
.rating { display:inline-flex; align-items:center; font-size: 1.1rem; line-height:1; }
.rating .stars { color: #f9bd00; margin-right: .5em; }

/* Spacing Utilities */
.stack > * + * { margin-top: var(--space-20); }
.mt-20 { margin-top: var(--space-20); }
.mt-40 { margin-top: var(--space-40); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-40 { margin-bottom: var(--space-40); }
.p-20 { padding: var(--space-20); }
.p-30 { padding: var(--space-30); }

/* Pill Utility */
.pill { border-radius: var(--radius-pill) !important; }

/* Responsive Type Adjustment Example */
@media (min-width: 50em) {
    h1 { font-size: var(--fs-xxl); }
}