/* Japandi facelift for the desktop layout (Layout.php).
   Loaded after angular-material, style.min.css and style_rtl.css, so it only
   overrides colours, borders and radii: no layout changes. Remove the <link>
   in Layout.php to go back to the old look. */

:root {
    --jp-bg: #f3efe8;          /* washi paper */
    --jp-surface: #fbf9f5;     /* cards */
    --jp-surface-2: #f6f2eb;   /* inner panels, hover */
    --jp-line: #e4ddd2;        /* hairlines */
    --jp-ink: #2f2c28;         /* text */
    --jp-muted: #7d766c;       /* secondary text */
    --jp-accent: #4f7385;      /* muted indigo (ai-iro), replaces the bright blue in text */
    --jp-accent-soft: #e6ecee;
    --jp-wood: #b39572;        /* light oak, for small accents */
    --jp-radius: 14px;
    --jp-shadow: 0 1px 2px rgba(70, 55, 40, 0.04), 0 6px 18px rgba(70, 55, 40, 0.05);
}

body {
    background: var(--jp-bg) none;
    color: var(--jp-ink);
}

md-content, md-content.md-default-theme {
    background-color: transparent;
    color: var(--jp-ink);
}

/* Top bar: flat, paper-coloured, a single hairline instead of a shadow */
md-toolbar.md-whiteframe-2dp {
    background-color: rgba(251, 249, 245, 0.92) !important;
    box-shadow: none;
    border-bottom: 1px solid var(--jp-line);
    color: var(--jp-ink);
}

md-sidenav, md-sidenav.md-default-theme { background-color: var(--jp-surface); }
md-sidenav header { background-color: var(--jp-surface-2) !important; color: var(--jp-ink) !important; }

/* Cards: soft paper, thin border, gentle radius */
md-card, md-card.md-default-theme {
    background-color: var(--jp-surface);
    color: var(--jp-ink);
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
    box-shadow: var(--jp-shadow);
}
.compAd_side, .compAd_side.md-default-theme { border: 0; box-shadow: none; background-color: transparent; }
.compAd_in, .compAd_top { background-color: var(--jp-surface-2); border-color: var(--jp-line); }
.comp-related { background-color: var(--jp-surface); }

md-list-item, md-list-item.md-default-theme { color: var(--jp-ink); }
.comp-list-item { border-bottom-color: var(--jp-line); }
md-list-item .md-button:not([disabled]):hover,
md-list-item.md-default-theme .md-button:not([disabled]):hover { background-color: var(--jp-surface-2); }
md-divider, md-divider.md-default-theme { border-top-color: var(--jp-line); }

/* Home header */
.Home-Header-logo h1 { color: var(--jp-ink); font-weight: 500; letter-spacing: 0.5px; }
.Home-Header-logo h2 { color: var(--jp-accent); font-weight: 300; }
.Home-Header-logo h3, .Home-Header-logo h4 { color: var(--jp-muted); font-weight: 400; }

/* Search */
md-autocomplete, md-autocomplete.md-default-theme {
    background-color: var(--jp-surface-2);
    border: 1px solid var(--jp-line);
    border-radius: 10px;
}

/* Categories */
.cat-listitem-selected { color: var(--jp-accent); background-color: var(--jp-accent-soft); text-decoration: none; }
.cat-listitem-menu-selected { color: var(--jp-accent); background-color: var(--jp-accent-soft); }

/* Company page */
.comp-section { background-color: transparent; }
.comp-header-subtext { color: var(--jp-muted); }
.comp-h4, .comp-channel-subtext { color: var(--jp-muted); }

md-tabs-wrapper.md-stretch-tabs, md-tabs.md-default-theme md-tabs-wrapper {
    background-color: var(--jp-surface);
    border-bottom: 1px solid var(--jp-line);
}
md-tabs.md-default-theme .md-tab.md-active, md-tabs .md-tab.md-active,
md-tabs.md-default-theme .md-tab.md-active md-icon, md-tabs .md-tab.md-active md-icon { color: var(--jp-accent); }
md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar { color: var(--jp-wood); background: var(--jp-wood); }
md-tabs-content-wrapper, md-tab-content { background-color: transparent; }

.comp-contact-box {
    background-color: var(--jp-surface);
    border: 1px solid var(--jp-line);
    border-radius: 12px;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.comp-contact-box:hover { background-color: var(--jp-surface-2); border-color: #d6cdbf; transform: translateY(-1px); }
.comp-contact-box-selected {
    background-color: var(--jp-accent-soft) !important;
    border-color: #c9d6db;
    box-shadow: none !important;
}
.comp-contact-box h3 { color: var(--jp-ink); }

.comp-contact-action {
    background-color: var(--jp-surface);
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-radius);
}

/* Ratings: warm oak instead of electric blue */
.RatingStar { color: var(--jp-wood); }
.RatingStarMini { color: var(--jp-wood); opacity: 0.85; }

/* Footer: quiet text on paper instead of a dark strip */
.PageFooter {
    background-color: transparent;
    color: var(--jp-muted);
    border-top: 1px solid var(--jp-line);
}
.PageFooter a, .PageFooter_links a { color: var(--jp-muted); }
.PageFooter a:hover, .PageFooter_links a:hover { color: var(--jp-ink); }
.CompFooter a { color: var(--jp-muted); }

/* Buttons */
.md-button.md-primary:not(.md-raised), .md-button.md-default-theme.md-primary:not(.md-raised) { color: var(--jp-accent); }
.md-button.md-raised.md-primary, .md-button.md-default-theme.md-raised.md-primary {
    background-color: var(--jp-accent);
    color: #fff;
    box-shadow: none;
    border-radius: 10px;
}

.sn-sticky-ad, .sn-sticky-close { background: rgba(251, 249, 245, 0.97); }

/* The inline panel and rating colours in content/comp*.php and home*.php read
   --jp-surface-2 / --jp-wood with the old colours as fallback. */
.md-nav-bar, md-nav-bar.md-default-theme .md-nav-bar { background-color: var(--jp-surface) !important; }
md-nav-bar .md-nav-item .md-button.md-active, md-nav-bar.md-default-theme .md-button._md-nav-button.md-active { color: var(--jp-accent); }
md-nav-ink-bar, md-nav-bar.md-default-theme md-nav-ink-bar { color: var(--jp-wood); background: var(--jp-wood); }
.comp-contact-action-title { background-color: var(--jp-surface-2) !important; border: 1px solid var(--jp-line) !important; }
.comp-guide-item { border-bottom-color: var(--jp-line); }
.comp-guide-item:hover { background-color: var(--jp-surface-2); }