/* MileMark Directory v4.0 — Theme-Integrated
 * 
 * When used with MileMark Theme v4+, all colors/fonts/radii are inherited 
 * from the theme's CSS variables (--hd, --ac, --bg, etc.)
 * When used standalone or with other themes, sensible defaults apply.
 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Source+Sans+3:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ================================================================
   VARIABLE BRIDGE
   Maps theme vars to plugin vars. Falls back to defaults when 
   MileMark Theme is not active.
   ================================================================ */
:root {
    /* Pull from theme if available, otherwise use defaults */
    --mm-primary: var(--hd, #1a2744);
    --mm-primary-rgb: var(--hd-rgb, 26,39,68);
    --mm-primary-light: var(--bg2, #2a3a5c);
    --mm-accent: var(--ac, #c9a84c);
    --mm-accent2: var(--ac2, #d4b85e);
    --mm-accent-light: var(--al, #fef3c7);
    --mm-bg: var(--bg, #faf8f3);
    --mm-white: var(--card, #fff);
    --mm-white-rgb: var(--card-rgb, 255,255,255);
    --mm-text: var(--tx, #2c3e50);
    --mm-text-light: var(--tx2, #6b7c93);
    --mm-muted: var(--mu, #9ca3af);
    --mm-border: var(--bd, #e2e0db);
    --mm-glow: var(--glow, rgba(26,39,68,.1));
    --mm-glow2: var(--glow2, rgba(26,39,68,.05));
    --mm-grad: var(--grad-accent, linear-gradient(135deg, #1a2744, #c9a84c));
    --mm-radius: var(--radius, 8px);
    --mm-radius-lg: var(--radius-lg, 14px);
    --mm-font-display: var(--fh, 'Playfair Display', Georgia, serif);
    --mm-font-body: var(--fb, 'Source Sans 3', -apple-system, sans-serif);
    --mm-highlight: var(--hh, #d4a44c);
    --mm-header-text: var(--ht, #fff);

    /* Computed from bridge vars */
    --mm-shadow: 0 2px 8px rgba(var(--mm-primary-rgb), .08);
    --mm-shadow-lg: 0 8px 30px rgba(var(--mm-primary-rgb), .12);
    --mm-hero-gradient: linear-gradient(135deg, rgba(var(--mm-primary-rgb),1) 0%, rgba(var(--mm-primary-rgb),.85) 100%);
}

/* ================================================================
   RESET
   ================================================================ */
.mm-directory-wrapper *,.mm-single-wrapper *,.mm-directory-grid *,.mm-table-grid *{box-sizing:border-box}

/* ================================================================
   THEME CONTAINER BREAKOUT (unchanged — works with any theme)
   ================================================================ */
.post-type-archive-mm_listing #page,.post-type-archive-mm_listing .site,.tax-mm_category #page,.tax-mm_category .site,.single-mm_listing #page,.single-mm_listing .site{max-width:100%!important;padding-left:0!important;padding-right:0!important}
.post-type-archive-mm_listing #content,.post-type-archive-mm_listing .site-content,.tax-mm_category #content,.tax-mm_category .site-content,.single-mm_listing #content,.single-mm_listing .site-content{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important}
.post-type-archive-mm_listing .grid-container,.post-type-archive-mm_listing .inside-article,.post-type-archive-mm_listing .content-area,.post-type-archive-mm_listing #primary,.tax-mm_category .grid-container,.tax-mm_category .inside-article,.tax-mm_category .content-area,.tax-mm_category #primary,.single-mm_listing .grid-container,.single-mm_listing .inside-article,.single-mm_listing .content-area,.single-mm_listing #primary{max-width:100%!important;width:100%!important;padding-left:0!important;padding-right:0!important}
.post-type-archive-mm_listing .separate-containers .inside-article,.post-type-archive-mm_listing .separate-containers .site-main>article,.tax-mm_category .separate-containers .inside-article,.tax-mm_category .separate-containers .site-main>article,.single-mm_listing .separate-containers .inside-article,.single-mm_listing .separate-containers .site-main>article{padding:0!important;margin:0!important;border:none!important;box-shadow:none!important;background:transparent!important}
.post-type-archive-mm_listing #secondary,.post-type-archive-mm_listing .is-right-sidebar,.post-type-archive-mm_listing .is-left-sidebar,.post-type-archive-mm_listing .sidebar,.tax-mm_category #secondary,.tax-mm_category .is-right-sidebar,.tax-mm_category .is-left-sidebar,.single-mm_listing #secondary,.single-mm_listing .is-right-sidebar,.single-mm_listing .is-left-sidebar{display:none!important}
.post-type-archive-mm_listing .site-content .content-area,.tax-mm_category .site-content .content-area,.single-mm_listing .site-content .content-area{width:100%!important}
.post-type-archive-mm_listing .ast-container,.tax-mm_category .ast-container,.single-mm_listing .ast-container,.post-type-archive-mm_listing .content-container,.tax-mm_category .content-container,.single-mm_listing .content-container{max-width:100%!important;padding-left:0!important;padding-right:0!important}

/* ================================================================
   ARCHIVE WRAPPER
   ================================================================ */
.mm-directory-wrapper{
    max-width:1440px;margin:0 auto;padding:0 24px 60px;
    font-family:var(--mm-font-body);color:var(--mm-text);
}
.mm-shortcode-wrap{max-width:1440px;margin:0 auto}

/* ================================================================
   DIRECTORY HERO HEADER
   ================================================================ */
.mm-directory-header{
    background:var(--mm-hero-gradient);
    margin:24px -24px 48px;padding:56px 40px 48px;
    text-align:center;position:relative;overflow:hidden;
    border-radius:var(--mm-radius-lg);
}
.mm-directory-header::before{
    content:'';position:absolute;top:0;left:0;right:0;bottom:0;
    background-image:var(--tex, url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"));
    pointer-events:none;
}
/* Glass shimmer at top */
.mm-directory-header::after{
    content:'';position:absolute;top:0;left:0;right:0;height:40%;
    background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%);
    pointer-events:none;
}
.mm-directory-header h1{
    font-family:var(--mm-font-display);font-size:2.6em;font-weight:700;
    color:var(--mm-header-text);margin:0 0 12px;position:relative;letter-spacing:-.02em;
}
.mm-directory-header p{
    color:rgba(255,255,255,.7);font-size:1.15em;font-weight:300;margin:0;position:relative;
}
.mm-directory-header h1::after{
    content:'';display:block;width:60px;height:3px;
    background:var(--mm-accent);margin:16px auto 0;border-radius:2px;
}

/* ================================================================
   LAYOUT
   ================================================================ */
.mm-directory-content{display:flex;gap:48px;align-items:flex-start}

/* ================================================================
   SIDEBAR
   ================================================================ */
.mm-sidebar{
    width:220px;flex-shrink:0;position:sticky;top:32px;
    background:rgba(var(--mm-white-rgb),.88);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border:1px solid var(--mm-border);
    border-radius:var(--mm-radius-lg);
    padding:24px;box-shadow:var(--mm-shadow);
    transition:box-shadow .2s;
}
.mm-sidebar:hover{box-shadow:var(--mm-shadow-lg)}
.mm-sidebar h4{
    font-family:var(--mm-font-display);font-size:1.05em;font-weight:700;
    color:var(--mm-text);margin:0 0 16px;padding-bottom:12px;
    border-bottom:2px solid var(--mm-accent);
}
.mm-sidebar ul{list-style:none;padding:0;margin:0}
.mm-sidebar li{margin-bottom:0}
.mm-sidebar li a{
    display:block;padding:9px 12px;color:var(--mm-text);
    text-decoration:none;font-size:.92em;font-weight:500;
    border-radius:var(--mm-radius);transition:all .15s ease;
}
.mm-sidebar li a:hover{
    background:var(--mm-accent-light);color:var(--mm-text);
    text-decoration:none;padding-left:16px;
}

/* ================================================================
   LISTING CARDS
   ================================================================ */
.mm-directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.mm-listings{flex:1;min-width:0}

.mm-listing-card{
    background:rgba(var(--mm-white-rgb),.92);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid var(--mm-border);
    border-radius:var(--mm-radius-lg);
    overflow:hidden;display:flex;flex-direction:column;
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
/* Gradient accent stripe on hover */
.mm-listing-card::before{
    content:'';display:block;height:3px;
    background:var(--mm-grad);
    opacity:0;transition:opacity .25s;
}
.mm-listing-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 40px var(--mm-glow), 0 4px 12px rgba(0,0,0,.06);
    border-color:rgba(var(--mm-primary-rgb),.12);
}
.mm-listing-card:hover::before{opacity:1}

.mm-card-image,.mm-listing-card>a:first-child{display:block;position:relative;overflow:hidden}
.mm-card-image img,.mm-listing-card>a:first-child>img{
    width:100%;height:180px;object-fit:cover;display:block;
    transition:transform .3s ease;
}
.mm-listing-card:hover .mm-card-image img,
.mm-listing-card:hover>a:first-child>img{transform:scale(1.04)}

/* Placeholder gradient image */
.mm-placeholder-img{
    width:100%;height:180px;
    background:var(--mm-hero-gradient);
    position:relative;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:6px;padding:16px 20px;text-align:center;
}
.mm-placeholder-img::before{
    content:'';position:absolute;top:0;left:0;right:0;bottom:0;
    background-image:var(--tex, url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"));
    pointer-events:none;
}
/* Glass overlay on placeholder */
.mm-placeholder-img::after{
    content:'';position:absolute;top:0;left:0;right:0;height:50%;
    background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 100%);
    pointer-events:none;
}
.mm-placeholder-name{
    color:rgba(255,255,255,.95);font-family:var(--mm-font-display);
    font-size:1.1em;font-weight:700;line-height:1.25;max-width:90%;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    position:relative;z-index:1;
}
.mm-placeholder-icon{font-size:28px;opacity:.3;color:#fff;line-height:1;position:relative;z-index:1}
.mm-placeholder-img.large{height:300px}
.mm-placeholder-img.large .mm-placeholder-name{font-size:1.6em}
.mm-placeholder-img.large .mm-placeholder-icon{font-size:40px}

.mm-card-content{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.mm-category{
    font-size:.72em;font-weight:600;text-transform:uppercase;
    letter-spacing:.08em;color:var(--mm-accent);margin:0 0 6px;
}
.mm-listing-card h3{font-family:var(--mm-font-display);font-size:1.05em;font-weight:700;margin:0 0 8px;line-height:1.3}
.mm-listing-card h3 a{color:var(--mm-text);text-decoration:none;transition:color .15s ease}
.mm-listing-card h3 a:hover{color:var(--mm-accent)}
.mm-website{margin:0;padding-top:10px;border-top:1px solid var(--mm-border);margin-top:auto;font-size:.88em}
.mm-website a{color:var(--mm-text-light);text-decoration:none;font-weight:500;transition:color .15s ease}
.mm-website a::before{content:'→ '}
.mm-website a:hover{color:var(--mm-accent)}

/* ================================================================
   PAGINATION
   ================================================================ */
.mm-pagination{margin:48px 0 0;text-align:center}
.mm-pagination .nav-links{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.mm-pagination a,.mm-pagination span{
    padding:10px 16px;border:1px solid var(--mm-border);
    border-radius:var(--mm-radius);text-decoration:none;color:var(--mm-text);
    font-size:.9em;font-weight:500;transition:all .2s ease;
    font-family:var(--mm-font-body);
}
.mm-pagination a:hover{
    background:var(--mm-accent-light);border-color:var(--mm-accent);
    color:var(--mm-text);box-shadow:0 2px 8px var(--mm-glow);
}
.mm-pagination .current{
    background:var(--mm-grad);color:#fff;border-color:transparent;
}

/* ================================================================
   SINGLE LISTING
   ================================================================ */
.mm-single-wrapper{
    max-width:960px;margin:0 auto;padding:40px 24px 60px;
    font-family:var(--mm-font-body);color:var(--mm-text);
}
.mm-single-header{
    margin-bottom:32px;display:flex;align-items:center;
    justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.mm-single-header h1{
    font-family:var(--mm-font-display);font-size:2.1em;font-weight:700;
    color:var(--mm-text);margin:0;
}
.mm-back-link{
    color:var(--mm-text-light);text-decoration:none;font-size:.9em;font-weight:500;
    padding:8px 16px;border:1px solid var(--mm-border);
    border-radius:var(--mm-radius);transition:all .15s ease;white-space:nowrap;
}
.mm-back-link:hover{
    background:var(--mm-accent-light);border-color:var(--mm-accent);
    color:var(--mm-text);text-decoration:none;
}
.mm-single-content{
    display:flex;gap:40px;
    background:rgba(var(--mm-white-rgb),.92);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid var(--mm-border);
    border-radius:var(--mm-radius-lg);
    padding:32px;box-shadow:var(--mm-shadow);
}
.mm-single-image{width:280px;flex-shrink:0}
.mm-single-image img{
    width:100%;height:auto;border-radius:var(--mm-radius);
    border:1px solid var(--mm-border);
}
.mm-listing-title{
    font-family:var(--mm-font-display);font-weight:700;font-size:1.05em;
    margin-top:16px;color:var(--mm-text);
}
.mm-single-details{flex:1}
.mm-single-details h4{
    font-family:var(--mm-font-display);font-size:1em;font-weight:700;
    color:var(--mm-text);margin:0 0 14px;padding-bottom:10px;
    border-bottom:2px solid var(--mm-accent);
}
.mm-description{line-height:1.75;color:var(--mm-text);margin-bottom:28px;font-size:.98em}
.mm-contact{list-style:none;padding:0;margin:0}
.mm-contact li{margin-bottom:10px}
.mm-contact a{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 20px;background:var(--mm-grad);
    color:#fff;text-decoration:none;
    border-radius:var(--mm-radius);
    font-weight:600;font-size:.92em;transition:all .2s ease;
}
.mm-contact a:hover{
    opacity:.9;transform:translateY(-1px);
    box-shadow:0 4px 16px var(--mm-glow);text-decoration:none;
}
.mm-contact a::before{content:'🌐';font-size:.9em}

/* ================================================================
   TABLE / COMPACT GRID
   ================================================================ */
.mm-table-grid{
    display:grid;gap:1px;background:var(--mm-border);
    border:1px solid var(--mm-border);border-radius:var(--mm-radius-lg);
    overflow:hidden;font-family:var(--mm-font-body);
}
.mm-table-cell{
    background:rgba(var(--mm-white-rgb),.95);
    padding:14px 16px;display:flex;flex-direction:column;
    justify-content:center;min-height:68px;transition:background .15s ease;
}
.mm-table-cell:hover{background:var(--mm-accent-light)}
.mm-table-cell a.mm-cell-name{
    color:var(--mm-text);text-decoration:none;font-weight:600;
    font-size:.88em;line-height:1.3;transition:color .15s ease;
}
.mm-table-cell a.mm-cell-name:hover{color:var(--mm-accent);text-decoration:none}
.mm-table-cell .mm-cell-meta{
    font-size:.7em;color:var(--mm-accent);margin-top:4px;line-height:1.2;
    font-weight:600;text-transform:uppercase;letter-spacing:.05em;
}
.mm-table-cell .mm-cell-link{font-size:.72em;margin-top:5px}
.mm-table-cell .mm-cell-link a{color:var(--mm-text-light);text-decoration:none;transition:color .15s ease}
.mm-table-cell .mm-cell-link a:hover{color:var(--mm-accent)}

/* Shortcode overrides */
.entry-content .mm-directory-grid,.page-content .mm-directory-grid,.post-content .mm-directory-grid{margin:24px 0}
.entry-content .mm-listing-card,.page-content .mm-listing-card{border:1px solid var(--mm-border)}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:900px){
    .mm-directory-content{flex-direction:column}
    .mm-sidebar{width:100%;position:static}
    .mm-sidebar ul{display:flex;flex-wrap:wrap;gap:4px}
    .mm-sidebar li a{padding:6px 12px;background:var(--mm-accent-light);border-radius:20px;font-size:.85em}
    .mm-table-grid{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:768px){
    .mm-directory-header{padding:40px 24px 36px}
    .mm-directory-header h1{font-size:1.8em}
    .mm-single-content{flex-direction:column;padding:24px}
    .mm-single-image{width:100%}
    .mm-single-header{flex-direction:column;align-items:flex-start}
    .mm-single-header h1{font-size:1.6em}
    .mm-directory-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
}
@media(max-width:600px){
    .mm-directory-grid{grid-template-columns:1fr}
    .mm-table-grid{grid-template-columns:repeat(2,1fr)!important}
    .mm-directory-wrapper{padding:0 16px 40px}
    .mm-directory-header{margin:0 -16px 32px;padding:32px 20px 28px;border-radius:0}
}