.activebread{
    background-color: #717372;
    padding: 7px 14px;
    color: #fff;
    text-transform: uppercase;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    /*text-decoration: none !important;*/
}
.activebread a{
    text-decoration: none !important;
    font-weight: bold;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: #f1f1f1;
    overflow-x: hidden;
    transition: 1s all;
    padding-top: 25px;
    display: none;
}
.sidenav a {
    text-decoration: none;
}
.shownav {
    width: 100%;
    display: block;
}

.sidenav .closebtn {
    color: black;
    position: absolute;
    top: 6px;
    right: 16px;
    font-size: 36px;
    margin-left: 50px;
}
td.center {
    text-align: center !important;
}
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

/* Mobile/tablet header bar (hamburger + menu shows on these devices):
   vertically center the bar content so the icon and the menu buttons have equal
   space above and below. Also drop the Semantic UI grid negative margins so the
   bar keeps its original height (the logo block below it isn't pushed under it).
   On phones the buttons (14px padding -> ~49px) were taller than the 42px bar
   and got clipped, so their vertical padding is trimmed there. */
@media screen and (max-width: 1024px) {
    header #user-menu {
        display: flex !important;
        align-items: center !important;
    }
    header #user-menu .ui.grid {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    header #user-menu .ui.grid > .column {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}
@media screen and (max-width: 767px) {
    header #user-menu .dropdown > a.button {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

/* FPC-safe: gallery always in HTML, hidden on phone */
@media screen and (max-width: 767px) {
    .jp-block-gallery-desktop { display: none !important; }
}

/* Keep Sign in / My Cabinet / Cars auction / Contact on one line */
header #user-menu .ui.grid > .column {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}
/* Always in HTML (FPC-safe); show only on tablet/phone (Semantic computer starts at 992px). */
header #user-menu #sideMenu {
    display: none;
    margin-right: auto;
    cursor: pointer;
}
@media screen and (max-width: 991px) {
    header #user-menu #sideMenu {
        display: inline-flex;
        align-items: center;
    }
}
header #user-menu .user-menu-links {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: auto;
    white-space: nowrap;
}
header #user-menu .user-menu-links .dropdown,
header #user-menu .user-menu-links > a.button {
    flex: 0 0 auto;
    white-space: nowrap;
}
header #user-menu .user-menu-links > a.button {
    padding-left: 0.9em !important;
    padding-right: 0.9em !important;
}

/* Fixed red bar is position:fixed; keep logo below it on phones.
   Do not touch logo grid margins/flex — that pulls the brand under the bar. */
@media screen and (max-width: 767px) {
    header #header {
        margin-top: 3.2em !important;
    }
}

/* Brand title: always two lines — "JUC Inc." / "japanese car auctions" */
header #header .company.label b,
header #header .company.label .description {
    display: block !important;
    margin: 0 !important;
    line-height: 1.2;
}
header #header .company.label .description {
    margin-top: 0.15em !important;
}

/* Logo + brand text on one horizontal line (vertically centered).
   Only override row alignment — do not touch grid margins. */
header #header .bottom.aligned.row {
    align-items: center !important;
}
header #header .bottom.aligned.row > .logo.column {
    align-self: center !important;
    float: none !important;
}

/* User-menu dropdowns: open on click, not hover */
header #user-menu .dropdown > a.button {
    cursor: pointer;
}
header #user-menu .dropdown:hover .user.login {
    display: none !important;
}
header #user-menu .dropdown.open .user.login,
header #user-menu .dropdown.open:hover .user.login {
    display: block !important;
}

/* Dropdown panels must not inherit the bar's white-space:nowrap,
   and icons must stay left of the label (Semantic often floats them right). */
header #user-menu .dropdown .user.login {
    white-space: normal !important;
    box-sizing: border-box;
}
header #user-menu .dropdown .user.login .vertical.menu .item {
    display: flex !important;
    align-items: center;
    gap: 0.45em;
    white-space: normal !important;
    overflow: visible;
}
header #user-menu .dropdown .user.login .vertical.menu .item > i.icon {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
    order: -1;
}
header #user-menu .dropdown .user.login .name,
header #user-menu .dropdown .user.login .login {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Mobile: real width instead of 150% of the short trigger button;
   drop the right:-85px shift that shoved panels off-alignment. */
@media screen and (max-width: 767px) {
    header #user-menu .dropdown .user.login {
        min-width: 16.5rem !important;
        width: max-content;
        max-width: calc(100vw - 1.25rem);
        left: 0;
        right: auto !important;
    }
    header #user-menu .user-menu-links > .dropdown:last-of-type .user.login {
        left: auto;
        right: 0 !important;
    }
}

/* Keep "Stay signed in" on one line */
header #user-menu .dropdown .user.login .ui.checkbox {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
}
header #user-menu .dropdown .user.login .ui.checkbox label {
    white-space: nowrap !important;
    display: inline-block !important;
    width: auto !important;
}
/* Center checkmark inside checkbox */
header #user-menu .dropdown .user.login .ui.checkbox label:after {
    top: 0 !important;
    left: 0 !important;
    width: 17px !important;
    height: 17px !important;
    line-height: 17px !important;
    font-size: 12px !important;
    text-align: center !important;
}

.margin-one-top {
    margin-top: -1em; !important;
}
.margin-one-bottom {
    margin-bottom: -1em; !important;
}
.margin-one-left {
    margin-left: -1em; !important;
}
.margin-one-right {
    margin-right: -1em; !important;
}

/* Homepage intro: override #main h1/h2 right-align and give the SEO block a layout */
#main .home-seo-intro {
    padding: 2.25rem 1.25rem 2.5rem;
    color: #1f2937;
}

#main .ui.container.white.block:has(.home-seo-intro) {
    margin-bottom: 0;
}

#main .home-seo-intro h1,
#main .home-seo-intro h2,
#main .home-seo-intro h5,
#main .home-seo-intro h6 {
    text-align: left;
    color: #1f2937;
}

#main .home-seo-intro h1 {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-transform: none;
    margin: 0 0 0.85rem;
}

#main .home-seo-intro h2 {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0 0 1rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #e5e7eb;
}

#main .home-seo-intro .home-seo-steps a {
    color: #2563eb;
    text-decoration: underline;
}

#main .home-seo-intro .home-seo-steps a:hover {
    color: #4fbd4a;
}

.home-seo-hero {
    margin-bottom: 2.25rem;
}

.home-seo-lead {
    max-width: 46rem;
    margin: 0 0 1.35rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: #4b5563;
}

.home-seo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.home-seo-actions .ui.button {
    margin: 0 !important;
}

.home-seo-section {
    margin-top: 2rem;
}

.home-seo-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    counter-reset: none;
}

.home-seo-steps li {
    background: #f5f7fa;
    border-radius: 14px;
    padding: 1.15rem 1.1rem 1.2rem;
    min-height: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.home-seo-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    margin-bottom: 0.7rem;
    border-radius: 999px;
    background: #4fbd4a;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
}

.home-seo-steps p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #374151;
}

.home-seo-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.home-seo-info-card {
    display: block;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.15rem 1.2rem 1.25rem;
    text-decoration: none !important;
    color: #1f2937 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.home-seo-info-card:hover {
    transform: translateY(-2px);
    border-color: #4fbd4a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    color: #1f2937 !important;
}

.home-seo-info-card strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    color: #1f2937;
}

.home-seo-info-card span {
    display: block;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #6b7280;
}

.home-seo-makes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.home-seo-makes a {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #f5f7fa;
    border-radius: 999px;
    text-decoration: none !important;
    font-weight: 700;
    color: #1f2937 !important;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease;
}

.home-seo-makes a:hover {
    background: #4fbd4a;
    color: #ffffff !important;
}

@media (max-width: 767px) {
    #main .home-seo-intro {
        padding: 1.5rem 0.25rem 1.75rem;
    }

    #main .home-seo-intro h1 {
        font-size: 1.45rem;
    }

    .home-seo-steps,
    .home-seo-info-grid {
        grid-template-columns: 1fr;
    }

    .home-seo-actions .ui.button {
        width: 100%;
        text-align: center;
    }
}

/* Company profile */
#blogpage .company-profile {
    color: #1f2937;
    max-width: 100%;
}

#blogpage .company-profile h1,
#blogpage .company-profile h2,
#blogpage .company-profile h3 {
    text-align: left;
    color: #1f2937;
    text-transform: none;
    letter-spacing: 0;
}

#blogpage .company-profile h1 {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
}

#blogpage .company-profile h2 {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0 0 1rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #e5e7eb;
}

#blogpage .company-profile h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 0.55rem;
}

#blogpage .company-profile p {
    margin: 0 0 1rem;
    font-size: 0.98rem;
    line-height: 1.65;
    color: #374151;
}

#blogpage .company-profile p:last-child {
    margin-bottom: 0;
}

#blogpage .company-profile img {
    margin: 0;
}

.company-hero-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0 0 1.5rem;
}

.company-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 1rem 0 0;
}

.company-photo-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-hero-photos a,
.company-photo-grid a {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: #f3f4f6;
    aspect-ratio: 4 / 3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.company-hero-photos img,
.company-photo-grid img,
.company-map img,
.company-chart img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.company-hero-photos a:hover img,
.company-photo-grid a:hover img {
    transform: scale(1.04);
}

.company-lead {
    max-width: 46rem;
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: #4b5563;
}

.company-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin: 0 0 1.75rem;
}

.company-actions .ui.button {
    margin: 0 !important;
}

.company-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.75rem;
}

.company-toc a {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    background: #f5f7fa;
    border-radius: 999px;
    text-decoration: none !important;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1f2937 !important;
    line-height: 1.2;
}

.company-toc a:hover {
    background: #4fbd4a;
    color: #fff !important;
}

.company-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.75rem;
}

.company-stat {
    background: #f5f7fa;
    border-radius: 14px;
    padding: 1rem 0.9rem 1.05rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    min-width: 0;
}

.company-stat b {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.15;
    margin-bottom: 0.25rem;
}

.company-stat span {
    display: block;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #6b7280;
}

.company-section {
    margin: 2.1rem 0 0;
    scroll-margin-top: 4.5rem;
}

.company-callout {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 1.1rem 1.2rem 1.15rem;
    margin: 0 0 1.25rem;
}

.company-callout strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: #166534;
    margin-bottom: 0.35rem;
}

.company-callout p {
    color: #14532d !important;
    margin: 0 !important;
}

.company-photo-grid.count-5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.company-photo-grid.count-5 a {
    grid-column: span 2;
}

.company-photo-grid.count-5 a:nth-child(-n+2) {
    grid-column: span 3;
}

.company-map {
    overflow: hidden;
    border-radius: 14px;
    margin: 0 0 1.1rem;
    background: #fff;
}

.company-map img {
    height: auto;
    object-fit: contain;
}

.company-countries {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.company-countries li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0.38rem 0.55rem;
    background: #f5f7fa;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.25;
    color: #1f2937;
    min-width: 0;
}

.company-countries img {
    width: 22px;
    height: 15px;
    object-fit: cover;
    flex: 0 0 22px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.company-countries b {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-services {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.company-services li {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.05rem 1.1rem 1.15rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    min-width: 0;
}

.company-services .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-bottom: 0.55rem;
    border-radius: 999px;
    background: #4fbd4a;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

.company-services strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
    color: #1f2937;
}

.company-services span {
    display: block;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #6b7280;
}

.company-facility {
    margin-top: 1.5rem;
}

.company-chart {
    margin: 1rem 0 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    text-align: center;
}

.company-chart img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.company-facts {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-top: 0.75rem;
}

.company-facts .fact {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid #e5e7eb;
}

.company-facts .fact:last-child {
    border-bottom: 0;
}

.company-facts .fact:nth-child(even) {
    background: #f9fafb;
}

.company-facts dt {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    padding-top: 0.15rem;
}

.company-facts dd {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #1f2937;
}

.company-facts ul {
    margin: 0;
    padding-left: 1.1rem;
}

.company-facts li {
    margin: 0.15rem 0;
}

.company-facts a {
    color: #2563eb !important;
    text-decoration: underline;
}

.company-facts a:hover {
    color: #4fbd4a !important;
}

@media (max-width: 1199px) {
    .company-stats,
    .company-countries {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .company-photo-grid.count-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .company-photo-grid.count-5 a,
    .company-photo-grid.count-5 a:nth-child(-n+2) {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    #blogpage .company-profile h1 {
        font-size: 1.45rem;
    }

    .company-hero-photos,
    .company-photo-grid,
    .company-photo-grid.cols-2,
    .company-photo-grid.count-5,
    .company-services,
    .company-facts .fact {
        grid-template-columns: 1fr;
    }

    .company-photo-grid.count-5 a,
    .company-photo-grid.count-5 a:nth-child(-n+2) {
        grid-column: auto;
    }

    .company-hero-photos a {
        aspect-ratio: 16 / 10;
    }

    .company-actions .ui.button {
        width: 100%;
        text-align: center;
    }

    .company-stat b {
        font-size: 1.2rem;
    }

    .company-facts dt {
        padding-top: 0;
    }
}

/* IMG_OPTIMIZE: reserve space for lot photos (CLS). */
.car-images,
.bike-images,
.bike-main-image,
.car-image-section,
.bike-image-section {
    aspect-ratio: 4 / 3;
}
.car-image,
.bike-image,
.bike-main-image .main-image,
.bike-details-page .main-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.bike-info-card,
.bike-info-column {
    min-height: 1px;
}
.bike-info-card img,
.bike-details-page .bike-info-card {
    max-width: 100%;
}