/*
Theme Name: Robustus
Theme URI: http://www.robustus.se/
Author: Robustus Wear Components
Description: Rebuild of the Robustus Wear Components site.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: robustus
*/

/* ============ Base ============ */
* { box-sizing: border-box; }

/* Inline SVG icons (contact / PDF) — align with adjacent text */
.rb-icon { vertical-align: middle; margin-right: 4px; }

/* Gradient pill button (replaces las_mer / om_robustus / mer_om gifs) */
a.rb-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px 8px 13px;
    background: linear-gradient(to bottom, #7e8590 0%, #4d545f 48%, #242932 100%);
    border: none;
    border-radius: 10px;
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}
a.rb-btn::after {
    content: "";
    display: inline-block;
    width: 9px;
    height: 15px;
    margin-left: 9px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%209%2015'%3E%3Cpath d='M1.5,1.5 L7,7.5 L1.5,13.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    vertical-align: middle;
}
a.rb-btn:hover {
    background: linear-gradient(to bottom, #9aa1ab 0%, #626a76 48%, #333a45 100%);
    color: #ffffff !important;
    text-decoration: none;
}

html, body { height: 100%; margin: 0; padding: 0; }

body {
    min-width: 0;
    color: #52554A;
    background-color: #B3B5AA;
    background-image: radial-gradient(circle, #a6a89d 1px, transparent 1.5px);
    background-size: 16px 16px;
    background-attachment: fixed;
    background-position: top left;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-weight: normal;
}

#page-middle {
    position: relative;
    background-image: url('/wp-content/themes/robustus/assets/img/middle_texture.jpg');
    background-position-y: bottom;
    background-color:#F9F9F9;
    background-repeat: repeat-x;
    background-attachment: fixed;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

a { color: #00529C; text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: 0; }
h1, h2, h3, h4, h5, h6, p, ul, ol, li { margin: 0; padding: 0; }

/* ============ Nav bar ============ */
.cdi-nav {
    width: 100%;
    margin: 0 auto;
    min-height: 80px;
    z-index: 100;
    background-color: #fff;
    background-image: linear-gradient(to bottom, #fff 0, #fff calc(100% - 2px), #e9e9e9 calc(100% - 2px), #e9e9e9 calc(100% - 1px), #cccccc calc(100% - 1px), #cccccc 100%);
    background-repeat: no-repeat;
}
.cdi-nav-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.cdi-nav-inner { margin: 0 1px; }

.cdi-hmenu-logo { float: left; }
.cdi-hmenu-logo h1 { margin: 0; }
/* Header logo: Customizer → Site Identity → Header Logo. */
.cdi-hmenu-logo h1.has-custom-logo a {
    position: relative;
    float: left;
    top: 0;
    margin-left: 10px;
    display: block;
    text-decoration: none;
    outline: none;
}
.cdi-hmenu-logo h1.has-custom-logo img {
    display: block;
    width: 240px;
    height: 65px;
    object-fit: contain;
}

.cdi-hmenu-menupane {
    position: relative;
    top: 0;
    display: block;
    float: right;
    width: 694px;
    height: 55px;
    background: linear-gradient(to bottom, #f5f5f5 0%, #dedede 55%, #a6a6a6 100%);
    border-radius: 0 0 10px 10px;
}

/* The horizontal tab menu (recreated from the DNN table, original sprites) */
.hmenu {
    width: 100%;
    height: 55px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.hmenu td { height: 55px; padding: 0; vertical-align: middle; }

/* Language flag button (CSS gradient, flag image on the link) */
.hmenu td.lang-en {
    border-right: 1px solid rgba(0, 0, 0, 0.18);
    width: 53px;
    height: 55px;
}
/* Home button (CSS gradient, house icon on the link) */
.hmenu td.lang-sv {
    width: 53px;
    height: 55px;
}
.hmenu td.lang-en a,
.hmenu td.lang-sv a {
    display: block;
    width: 100%;
    height: 55px;
    color: transparent;
    text-transform: uppercase;
    background-repeat: no-repeat;
    background-position: center;
}
.hmenu td.lang-en a { background-size: 26px auto; }
.hmenu td.lang-sv a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h6v-6h2v6h6v-8h3z' fill='%235a5a5a'/%3E%3C/svg%3E");
    background-size: 22px auto;
}

/* Dark rounded transition piece (left end of the dark bar) */
.hmenu td.border-gray {
    background: linear-gradient(to bottom, #838a94 0%, #484f5b 48%, #191e27 100%);
    border-bottom-left-radius: 10px;
    width: 12px;
    height: 55px;
}

/* Dark tab */
.hmenu td.tab {
    background: linear-gradient(to bottom, #838a94 0%, #484f5b 48%, #191e27 100%);
    height: 55px;
    white-space: nowrap;
}
.hmenu td.tab a {
    position: relative;
    top: 20px;
    display: block;
    width: 100%;    
    height: 100%;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    font-size: 10px;
    padding: 0 3px;
}
.hmenu td.tab a:hover { color: #CDCDCD; text-decoration: none; }

/* Thin vertical separator between tabs (soft groove: light left, dark right) */
.hmenu td.tab-line {
    position: relative;
    white-space: nowrap;
    background:
        linear-gradient(to right, rgba(255, 255, 255, 0.14) 0 1px, rgba(0, 0, 0, 0.28) 1px 2px),
        linear-gradient(to bottom, #838a94 0%, #484f5b 48%, #191e27 100%);
    color: transparent;
    width: 2px;
    height: 55px;
}

/* Login tab (right end, rounded) */
.hmenu td.tab-login {
    background: linear-gradient(to bottom, #838a94 0%, #484f5b 48%, #191e27 100%);
    height: 55px;
    width: 88px;
}
.hmenu td:last-child {
    border-bottom-right-radius: 10px;
}
.hmenu td.tab-login a {
    position: relative;
    top: 20px;
    display: block;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    font-size: 10px;
}
.hmenu td.tab-login a:hover { color: #CDCDCD; text-decoration: none; }

/* ============ Header (sliders) ============ */
.cdi-header {
    margin: 0 auto;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 374px;
    background-color: #000;
    background-image: url('/wp-content/themes/robustus/assets/img/slider/ritningblk_left.gif'), url('/wp-content/themes/robustus/assets/img/slider/ritningblk_right.gif');
    background-repeat: no-repeat, no-repeat;
    background-position: top left, top right;
}
.cdi-header table { width: 100%; max-width: 1000px; margin: 0 auto; border-collapse: collapse; }
.cdi-header td { vertical-align: top; width: 50%; }
.slider-left { text-align: right; }
.slider-right { text-align: left; }
.slider {
    position: relative;
    width: 100%;
    height: 374px;
    overflow: hidden;
}
.slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.slider img.active { opacity: 1; }

/* ============ Accordion gallery (replaces Flash) ============ */
.accordion {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 350px;
    overflow: hidden;
    background: #f9f9f9;
    border: 1px solid #d8d8d8;
}
.accordion-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    transition: flex-grow .45s ease;
}
.accordion-item.is-active {
    flex-grow: 5;
}
.accordion-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}
/* Keep the gallery images filling the strip even inside .cdi-postcontent
   (whose img rule sets height:auto for content images). */
.cdi-postcontent .accordion-item img {
    height: 100%;
    max-width: none;
}
.accordion-item .acc-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 6px 10px;
    box-sizing: border-box;
    background: rgba(0, 82, 156, 0.6);
    color: #fff;
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity .3s ease;
}
.accordion-item.is-active .acc-title { opacity: 1; }
.accordion-item .acc-desc {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 6px 10px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.7);
    color: #333842;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.3;
    opacity: 0;
    transition: opacity .3s ease .1s;
}
.accordion-item.is-active .acc-desc { opacity: 1; }

/* ============ Content sheet ============ */
.cdi-sheet {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    background: #fff;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    padding: 1px;
    flex-grow: 1;
}
.cdi-sheet-body { padding: 1px; }

.cdi-layout {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.cdi-layout-row { display: table-row; }
.cdi-layout-cell { display: table-cell; vertical-align: top; }
.cdi-sidebar1 { width: 33%; }
.cdi-content { width: 67%; }

table.position { width: 100%; table-layout: fixed; border-collapse: collapse; }
table.position td { vertical-align: top; }

/* ============ Posts / content ============ */
.cdi-post { margin: 15px; }
.cdi-post-body { padding: 10px; }

.cdi-postcontent { text-align: left; }
.cdi-postcontent p { margin: 12px 0; }
.cdi-postcontent h1 {
    color: #00529C;
    margin: 10px 0 0;
    font-size: 23px;
    text-transform: uppercase;
    font-weight: bold;
}
.cdi-postcontent h2 {
    color: #00529C;
    margin: 10px 0 0;
    font-size: 20px;
    font-weight: bold;
}
.cdi-postcontent h3 {
    color: #00529C;
    margin: 10px 0 0;
    font-size: 16px;
    font-weight: bold;
}
.cdi-postcontent a { color: #00529C; text-decoration: none; }
.cdi-postcontent a:hover { color: #56768F; text-decoration: underline; }
.cdi-postcontent ul, .cdi-postcontent ol { margin: 1em 0 1em 2em; }
.cdi-postcontent li { font-size: 12px; color: #333842; margin: 3px 0 0 -15px; padding: 0 0 0 13px; }
.cdi-postcontent img { margin: 7px; max-width: 100%; height: auto; }
/* Images inside content tables (DNN-era layout) keep their set width,
   otherwise the table's auto layout starves the image cell. */
.cdi-postcontent table img { max-width: none; }
.cdi-postdate { color: #777; font-size: 11px; margin: 2px 0 6px; }
.newsback { margin-top: 14px; }
.newsback a { color: #00529C; text-decoration: none; }
.newsback a:hover { text-decoration: underline; }

/* News block */
.news .newstitle a { color: #00529C; font-weight: bold; }
.news .newspostdate { color: #777; font-size: 11px; }
.news .normal { margin-top: 6px; }
.news .las-mer { margin-top: 6px; }

/* ============ Footer ============ */
.cdi-footer {
    position: relative;
    margin-top: 0;
    width: 100%;
    background-color: #2b2b2b;
    background-image: radial-gradient(circle, #232323 1px, transparent 1.5px);
    background-size: 12px 12px;
    background-position: bottom left;
}
/* Decorative strip along the bottom edge (from the original DNN skin). */
.cdi-footer:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background-image: url('/wp-content/themes/robustus/assets/img/footer_b.png');
    background-position: bottom left;
    background-repeat: repeat-x;
    pointer-events: none;
}
.cdi-footer-center {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.cdi-footer-body {
    padding: 20px;
    color: #D4D7DE;
    font-size: 11px;
    line-height: 200%;
}
.cdi-footer-text { margin: 0 0 0 20px; }
.cdi-footerleft { float: left; }
.cdi-footerleft h1 { margin: 0; }
/* Footer logo: the Customizer site logo (Customizer → Site Identity). */
.cdi-footerleft h1.has-custom-logo { display: block; float: left; }
.cdi-footerleft h1.has-custom-logo a { display: inline-block; }
.cdi-footerleft h1.has-custom-logo img { max-width: 76px; max-height: 70px; width: auto; height: auto; }
.cdi-footermiddle {
    float: left;
    text-align: left;
    width: 360px;
    height: 100px;
    margin-left: 15px;
}
.cdi-footerright {
    vertical-align: bottom;
    float: right;
}
.cdi-footerright img { margin: 0; }
.cdi-footer-body a, .cdi-footer-body a:link { color: #DFE0DC; text-decoration: none; }
.cdi-footer-body a:visited { color: #C5CAD3; }
.cdi-footer-body a:hover { color: #0079DB; text-decoration: underline; }

.cleared { display: block; clear: both; height: 0; overflow: hidden; }

/* ============ Sub-navigation (left sidebar on sub-pages) ============ */
.subnav .submenu { list-style: none; margin: 0; padding: 0; }
.subnav .submenu li { margin: 0; padding: 0; }
.subnav .submenu li a {
    display: block;
    padding: 8px 12px;
    color: #5C5F53;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid #e5e5e5;
}
.subnav .submenu li a:hover { color: #4E5565; background: #f5f5f5; text-decoration: none; }
.subnav .submenu li a.active { color: #435B70; font-weight: bold; background: #f0f0f0; }

/* ============ Image galleries ============ */
.gallery { margin: 15px 0; }
.gallery img {
    display: inline-block;
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin: 5px;
    border: 1px solid #ccc;
    padding: 3px;
    background: #fff;
}
.gallery img:hover { border-color: #00529C; }
.gallery img { cursor: zoom-in; }

/* ============ Lightbox ============ */
.rb-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    text-align: center;
}
.rb-lightbox.open { display: flex; align-items: center; justify-content: center; }
.rb-lightbox figure {
    margin: 0;
    display: inline-block;
    max-width: 92vw;
    max-height: 92vh;
}
.rb-lightbox-img {
    max-width: 92vw;
    max-height: 84vh;
    object-fit: contain;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
.rb-lightbox-caption {
    color: #fff;
    font-size: 14px;
    margin-top: 10px;
}
.rb-lightbox-counter {
    position: absolute;
    top: 12px;
    right: 18px;
    color: #fff;
    font-size: 14px;
}
.rb-lightbox button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.rb-lightbox-close {
    position: absolute;
    top: 8px;
    right: 14px;
    font-size: 36px;
    z-index: 1;
}
.rb-lightbox-prev,
.rb-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 64px;
    font-family: Georgia, serif;
    opacity: 0.7;
    padding: 20px 14px;
}
.rb-lightbox-prev { left: 8px; }
.rb-lightbox-next { right: 8px; }
.rb-lightbox-prev:hover,
.rb-lightbox-next:hover,
.rb-lightbox-close:hover { opacity: 1; }
body.rb-lightbox-active { overflow: hidden; }

/* Reference list on top-level pages */
.ref-list { margin: 1em 0 1em 2em; }
.ref-list li { margin: 4px 0; }

/* ============ Contact page ============ */
.contact-grid { width: 100%; border-collapse: collapse; }
.contact-grid td.contact-person {
    vertical-align: top;
    padding: 10px 12px 10px 0;
    width: 33%;
}
.contact-grid h4 {
    color: #00529C;
    font-size: 14px;
    margin: 0 0 6px;
    line-height: 1.3;
}
.contact-grid div, .contact-grid p {
    font-size: 12px;
    margin: 3px 0;
    line-height: 1.5;
}
.contact-grid img { vertical-align: text-bottom; margin-right: 4px; }

/* ============ Responsive ============ */
/* Hamburger toggle + mobile nav (hidden on desktop) */
.hmenu-toggle {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: linear-gradient(to bottom, #7e8590 0%, #4d545f 48%, #242932 100%);
    border-radius: 8px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
    z-index: 210;
}
.hmenu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background: #fff;
    border-radius: 2px;
}
.hmenu-mobile {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.hmenu-mobile.open { max-height: 480px; }
.hmenu-mobile a {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #435B70;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}
.hmenu-mobile a:hover { background: #f5f5f5; }
.hmenu-mobile-flag {
    width: 20px;
    height: auto;
    margin-right: 8px;
}

/* Tablet / narrow: switch to hamburger menu */
@media (max-width: 960px) {
    .cdi-nav { position: relative; min-height: 0; height: 55px; }
    .cdi-nav-wrapper { position: static; }
    .cdi-hmenu-logo h1.has-custom-logo a { top: 3px; }
    .cdi-hmenu-logo h1.has-custom-logo img {
        width: 180px;
        height: 49px;
    }
    .cdi-hmenu-menupane { float: none; width: auto; position: static; border-radius: 0; }
    .hmenu { display: none; }
    .hmenu-toggle {
        display: block;
        top: 27px;
        transform: translateY(-50%);
    }
    .hmenu-mobile { display: block; }
}

/* Phone: stack header sliders, two-column content, footer, contact grid */
@media (max-width: 768px) {
    .cdi-header { height: auto; }
    .cdi-header table, .cdi-header tbody, .cdi-header tr, .cdi-header td { display: block; width: 100%; }
    .slider { height: 240px; }

    .accordion { height: 260px; }

    .cdi-layout, .cdi-layout-row, .cdi-layout-cell { display: block; width: 100%; }

    .gallery img { width: 45%; height: auto; }

    .cdi-footerleft, .cdi-footermiddle, .cdi-footerright {
        float: none;
        width: auto;
        margin: 0 0 15px;
    }

    /* Collapse the contact page's two-column layout (company info | people) to one column. */
    table.position:has(.contact-grid),
    table.position:has(.contact-grid) tbody,
    table.position:has(.contact-grid) tr,
    table.position:has(.contact-grid) td {
        display: block;
        width: 100%;
    }
    .contact-grid, .contact-grid tbody, .contact-grid tr, .contact-grid td {
        display: block;
        width: 100%;
    }
    .contact-grid td.contact-person { width: 100%; }
}

/* Small phones: hide the accordion's lower description text — it covers too much of the image. */
@media (max-width: 500px) {
    .accordion-item .acc-desc { display: none; }
}