/**
 * @author Diploc IT-Services Team
 * @copyright Copyright (c) Diploc IT-Services (https://www.diploc.com)
 * @package Maatstudio_Base for Magento 2
 */

/**
 * Static Page CSS - Customer Service, Servicedesk pages
 * Converted from Luma LESS: _staticpage.less
 *
 * Loaded conditionally via layout XML for specific CMS pages:
 * - customer-service
 * - kindveilig
 * - servicedesk_* pages
 */

/* ==========================================================================
   CMS Page Base Styles (1-column layout)
   ========================================================================== */

.cms-page-view.page-layout-1column .page-wrapper .columns h1 {
    font-size: 24px;
    font-weight: 400;
}

.cms-page-view.page-layout-1column .page-wrapper .columns hr {
    border-top: 1px solid var(--color-maatstudio-gray-darker, #4a4a4a);
}

.cms-page-view.page-layout-1column .page-wrapper .columns p {
    margin-bottom: 1.6rem;
}

.cms-page-view.page-layout-1column .page-wrapper .columns p a {
    text-decoration: none;
}

.cms-page-view.page-layout-1column .page-wrapper .columns p a:hover {
    text-decoration: underline;
}

.cms-page-view.page-layout-1column .page-wrapper .columns h2 {
    font-size: 22px;
    font-weight: 400;
}

/* ==========================================================================
   Kindveilig Pages
   ========================================================================== */

body.cms-kindveilig .columns .column.main,
body.cms-kindveilig- .columns .column.main {
    padding-left: 47px;
}

@media (max-width: 767px) {
    body.cms-kindveilig .columns .column.main,
    body.cms-kindveilig- .columns .column.main {
        padding-left: 0;
    }
}

/* ==========================================================================
   Page Title Wrapper
   ========================================================================== */

.cms-page-view.page-layout-1column .columns .column.main .page-title-wrapper h1.page-title {
    padding-left: 0;
}

body.cms-page-view .columns .column.main > .page-title-container {
    padding-left: 0;
    padding-right: 0;
}

body.page-layout-1column.cms-page-view .columns .column.main {
    max-width: 100%;
    flex: unset;
}

/* H1 page-title size normalisation across CMS + Mageplaza blog layouts.
 * The h1 has no Tailwind text-* class, so it inherits font-size from its
 * parent .container.text-4xl (Maatstudio Tailwind config maps text-4xl to
 * ~2.6rem on these layouts). The rule below resets to 29px to match the
 * design system baseline. body. prefix bumps specificity to (0,3,1) so it
 * reliably wins over preflight `h1 { font-size: inherit }` (0,0,1) and any
 * .container/.columns wrapper inheritance chain.
 */
body.cms-page-view h1.page-title.title-font,
body.mpblog-category-view h1.page-title.title-font,
body.mpblog-post-view h1.page-title.title-font,
body.mpblog-index-view h1.page-title.title-font,
body.mpblog-tag-view h1.page-title.title-font,
body.mpblog-author-view h1.page-title.title-font,
body.mpblog-month-view h1.page-title.title-font {
    font-size: 24px !important;
    font-weight: 400 !important;
    margin-bottom: 10px;
}

body.mpblog-category-view #maincontent h2,
body.mpblog-post-view #maincontent h2,
body.mpblog-index-view #maincontent h2,
body.mpblog-tag-view #maincontent h2,
body.mpblog-author-view #maincontent h2,
body.mpblog-month-view #maincontent h2 {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 20px;
}

body.mpblog-category-view #maincontent h3,
body.mpblog-post-view #maincontent h3,
body.mpblog-index-view #maincontent h3,
body.mpblog-tag-view #maincontent h3,
body.mpblog-author-view #maincontent h3,
body.mpblog-month-view #maincontent h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Older CMS pages may render the title via the legacy page-title-wrapper
 * structure; keep the relaxed selector for those edge cases. */
.cms-page-view .page-title-wrapper .page-title {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 10px;
}

/* ==========================================================================
   Service Desk Intro Block
   ========================================================================== */

.cms-page-view .servicedesk-intro {
    border: 1px solid var(--color-maatstudio-gray-medium, #d0d0d0);
    margin-bottom: 1.6em;
    background: var(--color-maatstudio-gray, #f3f3f3);
    display: flex;
}

.cms-page-view .servicedesk-intro .content {
    width: 25%;
    padding: 1.6em;
}

.cms-page-view .servicedesk-intro .content p {
    margin-bottom: 1.6rem;
}

.cms-page-view .servicedesk-intro .content ul {
    padding-left: 0;
    list-style: none;
}

.cms-page-view .servicedesk-intro .content ul li {
    margin-bottom: 0;
}

.cms-page-view .servicedesk-intro .content ul li a {
    text-decoration: none;
}

.cms-page-view .servicedesk-intro .content ul li a:hover {
    text-decoration: underline;
}

.cms-page-view .servicedesk-intro .content-img-small {
    min-width: 408px;
}

@media (max-width: 1440px) {
    .cms-page-view .servicedesk-intro .content-img-small {
        min-width: 100%;
    }
}

.cms-page-view .servicedesk-intro .contact-img-large {
    width: auto;
    margin: 0 0 0 20px;
}

@media (max-width: 768px) {
    .cms-page-view .servicedesk-intro .contact-img-large {
        margin: 0;
        width: 100%;
    }
}

.cms-page-view .servicedesk-intro .contact-img-large img {
    object-fit: cover;
    height: 100%;
}

.cms-page-view .servicedesk-intro .content-usps {
    padding: 1.6em;
}

@media (max-width: 1440px) {
    .cms-page-view .servicedesk-intro .content-usps {
        padding: 0.5rem;
    }
}

.cms-page-view .servicedesk-intro .content-usps .product__usp h2 {
    margin: 0 0 20px 0;
    padding: 0;
}

.cms-page-view .servicedesk-intro .content-usps .product__usp h2 span {
    font-weight: 400;
}

.cms-page-view .servicedesk-intro .content-usps .product__usp ul.usps {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 1440px) {
    .cms-page-view .servicedesk-intro .content-usps .product__usp ul.usps {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
    }
}

.cms-page-view .servicedesk-intro .content-usps .product__usp ul.usps li {
    display: block;
    margin-bottom: 10px;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    text-align: left;
}

.cms-page-view .servicedesk-intro .content-usps .product__usp ul.usps li [class^='icon'] {
    display: inline-block;
    float: unset;
    vertical-align: middle;
}

.cms-page-view .servicedesk-intro .content-usps .product__usp ul.usps li .info {
    font-weight: 400;
    padding-left: 0.8em;
    margin-bottom: 0;
    display: inline-block;
    vertical-align: middle;
}

.cms-page-view .servicedesk-intro .content-usps .product__usp ul.usps li .info br {
    display: none;
}

@media (max-width: 1440px) {
    .cms-page-view .servicedesk-intro .content-usps .product__usp ul.usps li {
        width: 370px;
        min-width: 370px;
        max-width: 370px;
        display: block;
    }
}

/* ==========================================================================
   Service Desk Navigation (3-column grid)
   ========================================================================== */

/*
 * Legacy flex/width:33% layout removed (was for old <ul>-child markup).
 * The new Hyvä markup uses Tailwind `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
 * directly on .servicedesk-nav, so no parent display override is needed here.
 */

/* Each <ul> is a grid cell — no float/width: Tailwind grid handles column layout. */
.cms-page-view .servicedesk-nav ul {
    padding-left: 0;
    list-style: none;
    border: 1px solid var(--color-maatstudio-gray-medium, #d0d0d0);
    box-sizing: border-box;
}

.cms-page-view .servicedesk-nav ul li {
    margin-bottom: 0;
}

.cms-page-view .servicedesk-nav ul li strong,
.cms-page-view .servicedesk-nav ul li a {
    display: block;
    padding: 0.4em 0.8em;
    border-bottom: 1px solid var(--color-maatstudio-gray-medium, #d0d0d0);
    margin-bottom: -1px;
    text-decoration: none;
}

.cms-page-view .servicedesk-nav ul li strong {
    background: var(--color-maatstudio-gray, #f3f3f3);
}

.cms-page-view .servicedesk-nav ul li a {
    color: var(--color-maatstudio-blue-dark, #2c6c8d);
}

.cms-page-view .servicedesk-nav ul li a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Two-Column Layout (Sidebar + Main)
   ========================================================================== */

.cms-page-view .columns {
    display: flex;
    flex-wrap: wrap;
}

.cms-page-view .columns .sidebar {
    flex: 0 0 25%;
    max-width: 25%;
    order: 0;
}

@media (max-width: 767px) {
    .cms-page-view .columns .sidebar {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.cms-page-view .columns .sidebar .servicedesk-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.cms-page-view .columns .sidebar .servicedesk-nav ul {
    width: 100%;
    margin-bottom: 20px;
}

.cms-page-view .columns .column.main {
    flex: 0 0 75%;
    max-width: 75%;
    padding-left: 0;
}

@media (max-width: 767px) {
    .cms-page-view .columns .column.main {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.cms-page-view .columns .column.main .page-title-wrapper h1.page-title {
    padding-left: 47px;
}

@media (max-width: 767px) {
    .cms-page-view .columns .column.main .page-title-wrapper h1.page-title {
        padding-left: 0;
    }
}

/* ==========================================================================
   Standard Content (.std) Styling
   ========================================================================== */

.cms-page-view .columns .column.main .std {
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .cms-page-view .columns .column.main .std {
        padding-left: 0;
    }
}

.cms-page-view .columns .column.main .std p {
    margin-bottom: 2rem;
}

.cms-page-view .columns .column.main .std p a {
    text-decoration: underline;
}

.cms-page-view .columns .column.main .std ul {
    padding-left: 17px;
}

.cms-page-view .columns .column.main .std ul li {
    margin-bottom: 0;
}

.cms-page-view .columns .column.main .std ul li a {
    text-decoration: underline;
}

.cms-page-view .columns .column.main .std ul.no-list li a {
    text-decoration: underline;
}

.cms-page-view .columns .column.main .std .flush {
    margin: 0;
    padding: 0;
}

.cms-page-view .columns .column.main .std h2 {
    margin-top: 40px;
    margin-bottom: 12px;
    line-height: 1.3;
    font-weight: 300;
    font-size: 22px;
}

.cms-page-view .columns .column.main .std .no-list {
    margin-bottom: 1.6rem;
    padding-left: 0;
    list-style: none;
}

.cms-page-view .columns .column.main .std .no-list li a {
    text-decoration: none;
}

.cms-page-view .columns .column.main .std .no-list li a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Main Column Content - Lists, Links, Headings
   ========================================================================== */

.cms-page-view .columns .column.main ul {
    margin-bottom: 20px;
}

body.cms-page-view:not(.cms-service-desk) .columns .column.main :where(ul:not(.no-list):not(.flush):not(.usps)) {
    padding-left: 2.5rem;
    list-style-position: outside;
    list-style-type: disc;
}

body.cms-page-view:not(.cms-service-desk) .columns .column.main :where(ol:not(.no-list):not(.flush)) {
    padding-left: 2.5rem;
    list-style-position: outside;
    list-style-type: decimal;
}

.cms-page-view .columns .column.main :where(ul:not(.no-list):not(.flush):not(.usps)) li {
    list-style: disc;
}

.cms-page-view .columns .column.main div.servicedesk-nav >  ul > li {
    list-style: none;
}

.cms-page-view .columns .column.main a {
    color: #2c6c8d;
}

.cms-page-view .columns .column.main a:hover {
    color: #d4dde3;
}

.cms-page-view .columns .column.main h3 {
    font-weight: 400;
    margin-bottom: 10px;
    line-height: 1.3;
}

.cms-page-view #maincontent img:not(.pagebuilder-mobile-hidden):not(.pagebuilder-mobile-only) {
    display: inline-block;
}

.cms-page-view #maincontent h4 {
    font-weight: 400;
    font-size: 16px;
}

/* Ekomi sprite (legacy) */
.cms-page-view .columns .column.main span.sprite-ekomi {
    background-size: 184px 169px;
    background-position: -134px 0;
    width: 50px;
    height: 50px;
    display: inline-block;
    background-image: url('../images/header-payment-icons.png');
}

.cms-page-view:not(.cms-maatstudio-bij-lifestylexperience-):not(.cms-service-desk) .columns .column.main p img {
    vertical-align: top;
    width: 100%;
}

/* ==========================================================================
   Betaling/Bestelling Page Specifics
   ========================================================================== */

.cms-servicedesk_betaling_bestelling .columns .column.main .std ul.flush,
.cms-servicedesk_betaling_bestelling- .columns .column.main .std ul.flush {
    list-style: none;
}

.cms-servicedesk_betaling_bestelling .columns .column.main .std .list--number,
.cms-servicedesk_betaling_bestelling- .columns .column.main .std .list--number {
    padding-left: 15px;
    margin-bottom: 1.6em;
}

.cms-servicedesk_betaling_bestelling .columns .column.main .std ul.list--disc,
.cms-servicedesk_betaling_bestelling- .columns .column.main .std ul.list--disc {
    list-style: disc;
}

.cms-servicedesk_betaling_bestelling .columns .column.main .std ul.list--disc div,
.cms-servicedesk_betaling_bestelling- .columns .column.main .std ul.list--disc div {
    display: none;
}

.cms-servicedesk_betaling_bestelling .columns .column.main .std li div ul,
.cms-servicedesk_betaling_bestelling- .columns .column.main .std li div ul {
    list-style: disc;
}

/* ==========================================================================
   Servicedesk Pages - Sidebar Width Override (20%)
   Body class added via layout XML: cms-service-desk
   ========================================================================== */

body.cms-service-desk.cms-page-view #maincontent {
    margin-top: 1rem;
}

/* Reset all CMS ul/li styling for service desk pages */
body.cms-service-desk.cms-page-view .columns .column.main ul {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

body.cms-service-desk.cms-page-view .columns .column.main ul li {
    list-style: none;
    margin-bottom: 0;
}

body.cms-service-desk.cms-page-view .columns .column.main .std ul {
    padding-left: 0;
}

body.cms-service-desk.cms-page-view .columns .column.main .std ul li {
    margin-bottom: 0;
}

body.cms-service-desk.cms-page-view .columns {
    flex-wrap: unset;
}

body.cms-service-desk.cms-page-view .columns .column.main > div.container {
    padding-left: 0;
}

body.cms-service-desk.cms-page-view .columns .sidebar {
    flex: 0 0 20%;
    max-width: 20%;
}

body.cms-service-desk.cms-page-view:not(.page-layout-1column) .columns .column.main {
    flex: 0 0 80%;
    max-width: 80%;
}

/* ==========================================================================
   Customer Service Page (Full Width Override)
   ========================================================================== */

.cms-customer-service .columns .column.main,
.cms-customer-service- .columns .column.main {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
}

.cms-customer-service .columns .column.main .page-title-wrapper h1.page-title,
.cms-customer-service- .columns .column.main .page-title-wrapper h1.page-title {
    padding-left: 0;
    margin-bottom: 20px;
    margin-top: 15px;
}

.cms-customer-service .columns .column.main .servicedesk-intro .content,
.cms-customer-service- .columns .column.main .servicedesk-intro .content {
    width: 25%;
}

@media (max-width: 768px) {
    .cms-customer-service .columns .column.main .servicedesk-intro .content,
    .cms-customer-service- .columns .column.main .servicedesk-intro .content {
        width: 100%;
    }

    .cms-customer-service .columns .column.main .servicedesk-intro,
    .cms-customer-service- .columns .column.main .servicedesk-intro {
        display: block;
    }
}