/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/* ── ACF Related Blog Posts block ─────────────────────────────────────────── */
.acf-block--related-posts {
    margin: 3rem 0;
}

.acf-block--related-posts .acf-block__title {
    text-align: center;
    margin-bottom: 1.5rem;
}

.acf-block__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .acf-block__related-grid {
        grid-template-columns: 1fr;
    }
}

.acf-block__related-card {
    background: #f9f9f9;
    border-radius: 4px;
    overflow: hidden;
}

.acf-block__related-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.acf-block__related-card-link:hover .acf-block__related-title {
    text-decoration: underline;
}

.acf-block__related-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.acf-block__related-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.acf-block__related-title {
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

/* ── FAQ Accordion ────────────────────────────────────────────────────────── */
.faq_box {
    margin: 2rem 0;
}

.faq_box .section {
    margin-bottom: 2rem;
}

/* Section title — centred, beige pill */
.faq_box .section > h2 {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    background: #f0ebe0;
    border: 1px solid #ddd6c5;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    margin-bottom: 1rem;
    color: #333;
}

/* Each FAQ item */
.faq_box .item {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    margin-bottom: 0.6rem;
    overflow: hidden;
}

/* Question row */
.faq_box .item .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    gap: 1rem;
}

.faq_box .item .title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #222;
    flex: 1;
}

/* Toggle button — shows + / − */
.faq_box .item .wl-faq-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    line-height: 1;
    color: #555;
    padding: 0;
    transition: background 0.2s ease;
}

.faq_box .item .wl-faq-toggle::before {
    content: '+';
}

.faq_box .item.is_expanded .wl-faq-toggle::before {
    content: '−';
}

.faq_box .item .wl-faq-toggle:hover {
    background: #f5f5f5;
}

/* Answer content */
.faq_box .item .content {
    padding: 0 1.25rem 1rem;
    color: #444;
    font-size: 0.95rem;
    line-height: 1.6;

}

.faq_box .item .content p {
    margin: 0;
    font-size: 18px;
    margin-left: 14px;
    line-height: 25px;
}

.item .content { display: none; }
.item.is_expanded .content { display: block; }

/* ── Heading layout ──────────────────────────────────────────────────────── */
.heading_box {
    margin: 2rem 0;
}

.heading_box .contents {
    text-align: center;
}

.heading_box .contents h1,
.heading_box .contents h2,
.heading_box .contents h3,
.heading_box .contents h4,
.heading_box .contents h5,
.heading_box .contents h6 {
    margin-bottom: 0.5rem;
}

/* ── Cards layout ────────────────────────────────────────────────────────── */
.cards_box {
    margin: 2rem 0;
    width: 100%;
}

.cards_box .fixed,
.cards_box .wrapper {
    width: 100%;
    box-sizing: border-box;
}

.cards_box .contents {
    margin-bottom: 1.5rem;
    text-align: center;
}

.cards_box .items {
    display: grid;
    gap: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

/* Column count helpers */
.cards_box .items_1 { grid-template-columns: 1fr; }
.cards_box .items_2 { grid-template-columns: repeat(2, 1fr); }
.cards_box .items_3 { grid-template-columns: repeat(3, 1fr); }
.cards_box .items_4 { grid-template-columns: repeat(4, 1fr); }

.cards_box .item {
    flex: 1;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.cards_box .item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.cards_box .item a {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.cards_box .item .image img {
    width: 100%;
    height: auto;
    display: block;
}

.cards_box .item .title {
    padding: 0.75rem 1rem 0.25rem;
    font-weight: 600;
    font-size: 20px;
    color: #222;
}

.cards_box .item .text {
    padding: 0 1rem 1rem;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
}

/* ── Content layout ──────────────────────────────────────────────────────── */
.content_box {
    margin: 2rem 0;
}

.content_box .contents > h1,
.content_box .contents > h2,
.content_box .contents > h3,
.content_box .contents > h4,
.content_box .contents > h5,
.content_box .contents > h6 {
    margin-bottom: 1rem;
}

.content_box .content {
    color: #444;
    line-height: 1.7;
}

.content_box .content p {
    margin-bottom: 1rem;
}

.content_box .content ul,
.content_box .content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.content_box .content li {
    margin-bottom: 0.4rem;
}

.content_box .content a {
    text-decoration: underline;
}

/* ── Image Left, Text Right layout ──────────────────────────────────────── */
.img_left_text_right_box {
    margin: 2rem 0;
}

.img_left_text_right_box .col-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3rem;
}

.img_left_text_right_box .col-6 {
    flex: 1;
}

/* Page intro — full width above both columns */
.img_left_text_right_box .page-heading {
    width: 100%;
    flex-basis: 100%;
    color: #444;
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* Left — image column */
.img_left_text_right_box .left-column .two_column_title h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #222;
}

.img_left_text_right_box .left-column .product-images img {
    width: 100%;
    height: auto;
    display: block;
}

/* Right — text column */
.img_left_text_right_box .right-column .two_column_title h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #222;
}

.img_left_text_right_box .right-column .two_column_title h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #222;
}

.img_left_text_right_box .right-column .two_column_title p,
.img_left_text_right_box .right-column .two_column_title ul,
.img_left_text_right_box .right-column .two_column_title ol {
    color: #444;
    line-height: 1.7;
    margin-bottom: 0.8rem;
}

.img_left_text_right_box .right-column .two_column_title ul,
.img_left_text_right_box .right-column .two_column_title ol {
    padding-left: 1.5rem;
}

/* ── Image Right, Text Left layout ──────────────────────────────────────── */
.img_right_text_left_box {
    margin: 2rem 0;
}

.img_right_text_left_box .col-container {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
}

.img_right_text_left_box .col-6 {
    flex: 1;
}

/* Left — text column */
.img_right_text_left_box .two_column_title.left-fix h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #222;
}

.img_right_text_left_box .two_column_title.left-fix p,
.img_right_text_left_box .two_column_title.left-fix ul,
.img_right_text_left_box .two_column_title.left-fix ol {
    color: #444;
    line-height: 1.7;
    margin-bottom: 0.8rem;
}

.img_right_text_left_box .two_column_title.left-fix ul,
.img_right_text_left_box .two_column_title.left-fix ol {
    padding-left: 1.5rem;
}

/* Right — image column */
.img_right_text_left_box .two_column_title h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #222;
}

.img_right_text_left_box .product-images img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Label Details layout ────────────────────────────────────────────────── */
.label_details_box {
    margin: 2rem 0;
}

.label_details_box .fixed {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
}

/* Two equal columns */
.label_details_box .item {
    flex: 1;
}

/* Image column */
.label_details_box .item .label-image {
    display: block;
    margin: 0 auto 20px;
    width: calc(100% - 10%);
    height: auto;
}

/* Title */
.label_details_box .label-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: #222;
}

/* Description paragraphs */
.label_details_box .item p {
    margin-bottom: 1rem;
    color: #444;
    line-height: 1.7;
}

/* Order button */
.label_details_box .button {
    display: inline-flex;
    position: relative;
    align-items: center;
    align-content: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 11px 20px;
    margin-top: 5px;
    border-radius: 8px;
    background: #2A7C6E;
    background-size: 19px 19px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    text-align: center;
    vertical-align: middle;
    transition: 0.2s;
    cursor: pointer;
    z-index: 2;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.label_details_box .button:hover {
    color: #fff;
    background: #2A7C6E;
    box-shadow: inset 1px 1px 20px 0px #00000080;
    border: none;
}

/* ── Links inside ACF layout blocks — always underlined ─────────────────── */
.acf-block a,
.faq_box a,
.wl-card-carousel a {
    text-decoration: underline;
}

/* ── All layout block titles — centred ────────────────────────────────────── */
.acf-block__title,
.acf-block__heading,
.acf-block__ld-title,
.new_quoter_product_heading {
    text-align: center;
}

/* ── Card Carousel dots navigation ────────────────────────────────────────── */
.wl-card-carousel .dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 1.2rem 0 1.5rem;
}

.wl-card-carousel .dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #999;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.wl-card-carousel .dot:hover {
    border-color: #555;
    background-color: #ddd;
}

.wl-card-carousel .dot.active {
    background-color: #555;
    border-color: #555;
    transform: scale(1.2);
}

/* Slide row — 3 equal columns */
.wl-card-carousel .wl-carousel-slide {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.wl-card-carousel .wl-carousel-slide .sub-container {
    flex: 1;
}

/* Middle column (image) — fixed narrower width, centred */
.wl-card-carousel .wl-carousel-slide .sub-container:nth-child(2) {
    flex: 0 0 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wl-card-carousel .wl-carousel-slide .sub-container:nth-child(2) .card-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}