/*
Theme Name: B2B Professional
Theme URI: https://example.com/b2b-professional
Author: Theme Developer
Author URI: https://example.com
Description: Professional B2B corporate WordPress theme with product, news, and case study management. Supports ACF gallery, multi-language (Polylang/WPML), and WooCommerce.
Version: 1.0.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: b2btheme
Tags: b2b, corporate, products, news, case-studies, multi-language, woocommerce
*/

/* === Base Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: #333; background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bs-theme-color); text-decoration: none; transition: color .2s; }
a:hover { color: var(--bs-sec-theme-color); }
ul, ol { list-style: none; }

/* === Layout === */
.wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.content-area { display: flex; gap: 30px; padding: 40px 0; }
.site-main { flex: 1; min-width: 0; }
.site-sidebar { width: 300px; flex-shrink: 0; }
.full-width .site-main { width: 100%; }
.full-width .site-sidebar { display: none; }

/* === Typography === */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: var(--bs-theme-color); margin-bottom: 16px; }
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
p { margin-bottom: 16px; }


:root{

    --bs-screen-full: 100%;
    --bs-screen-xxl: 88%;
    --bs-screen-large: 78%;
    --bs-screen-mid: 68%;
    --bs-screen-small: 58%;
    --bs-screen-full-notebook: var(--bs-screen-full);
    --bs-screen-xxl-notebook: var(--bs-screen-xxl);
    --bs-screen-large-notebook: var(--bs-screen-large);
    --bs-screen-mid-notebook: var(--bs-screen-mid);
    --bs-screen-small-notebook: var(--bs-screen-small);
    --bs-screen-full-pad: var(--bs-screen-full);
    --bs-screen-xxl-pad: var(--bs-screen-xxl);
    --bs-screen-large-pad: var(--bs-screen-large);
    --bs-screen-mid-pad: var(--bs-screen-mid);
    --bs-screen-small-pad: var(--bs-screen-small);
    --bs-screen-full-mobile: var(--bs-screen-full);
    --bs-screen-xxl-mobile: var(--bs-screen-xxl);
    --bs-screen-large-mobile: var(--bs-screen-large);
    --bs-screen-mid-mobile: var(--bs-screen-mid);
    --bs-screen-small-mobile: var(--bs-screen-small);
    --bs-body-color: #333333;
    --bs-body-bg: #fff;
    --bs-theme-color: #1a3a6b;
    --bs-sec-theme-color: #2b7fff;
    --bs-link-color: #2b7fff;
    --bs-link-hover-color: #1a3a6b;
    --bs-mask-white: #ffffff;
    --bs-mask-dark: #000000;
    --bs-head-ac-bg-color: #0f790b;
    --bs-link-decoration: none;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-font-sans-serif: Arial,sans-serif;
    --bs-h-font-sans-serif: Arial,sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-h-font-family: var(--bs-h-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-h-font-size: 1rem;
    --bs-nb-h-font-size: var(--bs-h-font-size);
    --bs-pad-h-font-size: var(--bs-h-font-size);
    --bs-mob-h-font-size: var(--bs-h-font-size);
    --bs-body-font-weight: 400;
    --bs-h-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-code-color: #d63384;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-radius: 0.375rem
}


/*layout*/
.layout{max-width:100%;min-width:1080px;margin:0 auto}
[data-screen=screen-full] .layout{width:var(--bs-screen-full)}
[data-screen=screen-xxl] .layout{width:var(--bs-screen-xxl)}
[data-screen=screen-large] .layout{width:var(--bs-screen-large)}
[data-screen=screen-mid] .layout{width:var(--bs-screen-mid)}
[data-screen=screen-small] .layout{width:var(--bs-screen-small)}
@media only screen and (max-width:1366px){[data-screen=screen-full] .layout{width:var(--bs-screen-full-notebook)}
[data-screen=screen-xxl] .layout{width:var(--bs-screen-xxl-notebook)}
[data-screen=screen-large] .layout{width:var(--bs-screen-large-notebook)}
[data-screen=screen-mid] .layout{width:var(--bs-screen-mid-notebook)}
[data-screen=screen-small] .layout{width:var(--bs-screen-small-notebook)}
}
@media only screen and (max-width:1200px){.layout{max-width:unset;min-width:unset}
}
@media only screen and (max-width:1080px){[data-screen=screen-large] .layout,[data-screen=screen-mid] .layout,[data-screen=screen-small] .layout{width:90%}
section{overflow:hidden}
}
@media only screen and (max-width:820px){[data-screen=screen-full] .layout{width:var(--bs-screen-full-pad)}
[data-screen=screen-xxl] .layout{width:var(--bs-screen-xxl-pad)}
[data-screen=screen-large] .layout{width:var(--bs-screen-large-pad)}
[data-screen=screen-mid] .layout{width:var(--bs-screen-mid-pad)}
[data-screen=screen-small] .layout{width:var(--bs-screen-small-pad)}
}
@media only screen and (max-width:480px){[data-screen=screen-full] .layout{width:var(--bs-screen-full-mobile)}
[data-screen=screen-xxl] .layout{width:var(--bs-screen-xxl-mobile)}
[data-screen=screen-large] .layout{width:var(--bs-screen-large-mobile)}
[data-screen=screen-mid] .layout{width:var(--bs-screen-mid-mobile)}
[data-screen=screen-small] .layout{width:var(--bs-screen-small-mobile)}
}

/* === Buttons === */
.btn { display: inline-block; padding: 12px 28px; font-size: 15px; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; transition: all .25s; text-align: center; }
.btn-primary { background: var(--bs-theme-color); color: #fff; }
.btn-primary:hover { background: #14305a; color: #fff; }
.btn-accent { background: #e8590c; color: #fff; }
.btn-accent:hover { background: #d04e08; color: #fff; }
.btn-outline { border: 2px solid var(--bs-theme-color); color: var(--bs-theme-color); background: transparent; }
.btn-outline:hover { background: var(--bs-theme-color); color: #fff; }
.btn-sm { padding: 8px 18px; font-size: 13px; }
.btn-lg { padding: 14px 36px; font-size: 17px; }

/* === Breadcrumbs === */
.breadcrumb-bar { background: #f8f9fa; border-bottom: 1px solid #e9ecef; padding: 12px 0; font-size: 13px; color: #6c757d; }
.breadcrumb-bar a { color: #6c757d; }
.breadcrumb-bar a:hover { color: var(--bs-theme-color); }
.breadcrumb-bar .separator { margin: 0 8px; }

/* === Section === */
.section { padding: 60px 0; }
.section-title { text-align: center; margin-bottom: 40px; }
.section-title h2 { font-size: 32px; margin-bottom: 10px; position: relative; display: inline-block; }
.section-title h2::after { content: ''; display: block; width: 60px; height: 3px; background: var(--bs-sec-theme-color); margin: 12px auto 0; }
.section-title p { color: #6c757d; font-size: 16px; max-width: 600px; margin: 0 auto; }

/* === Card Grid === */
.card-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.card-grid .card { flex: 0 0 calc(33.333% - 16px); background: #fff; border: 1px solid #e9ecef; border-radius: 6px; overflow: hidden; transition: box-shadow .25s, transform .25s; }
.card-grid .card:hover { box-shadow: 0 8px 25px rgba(0,0,0,.08); transform: translateY(-3px); }
.card .card-thumb { width: 100%; height: 220px; overflow: hidden; }
.card .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card:hover .card-thumb img { transform: scale(1.05); }
.card .card-body { padding: 20px; }
.card .card-title { font-size: 17px; font-weight: 600; margin-bottom: 10px; line-height: 1.4; }
.card .card-title a { color: #333; }
.card .card-title a:hover { color: var(--bs-theme-color); }
.card .card-excerpt { font-size: 14px; color: #6c757d; line-height: 1.6; margin-bottom: 14px; }
.card .card-meta { font-size: 12px; color: #adb5bd; }
.card .card-tag { display: inline-block; background: #e8f4fd; color: var(--bs-theme-color); padding: 3px 10px; border-radius: 3px; font-size: 12px; margin-right: 6px; margin-bottom: 4px; }

/* === Pagination === */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 40px 0 20px; }
.pagination a, .pagination span { display: inline-block; padding: 8px 14px; font-size: 14px; border: 1px solid #dee2e6; border-radius: 4px; color: #495057; transition: all .2s; }
.pagination a:hover { background: var(--bs-theme-color); color: #fff; border-color: var(--bs-theme-color); }
.pagination .current { background: var(--bs-theme-color); color: #fff; border-color: var(--bs-theme-color); }

/* === Forms === */
.inquiry-form .form-group { margin-bottom: 20px; }
.inquiry-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; color: #333; }
.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form textarea,
.inquiry-form select { width: 100%; padding: 10px 14px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px; transition: border-color .2s; }
.inquiry-form input:focus,
.inquiry-form textarea:focus,
.inquiry-form select:focus { border-color: var(--bs-theme-color); outline: none; box-shadow: 0 0 0 3px rgba(26,58,107,.12); }
.inquiry-form textarea { min-height: 120px; resize: vertical; }

/* === Page Header (inner pages) === */
.page-header { background: linear-gradient(135deg, var(--bs-theme-color) 0%, #2c5f8a 100%); color: #fff; padding: 50px 0 40px; text-align: center; }
.page-header h1 { color: #fff; font-size: 32px; margin-bottom: 8px; }
.page-header p { color: rgba(255,255,255,.75); font-size: 16px; }

/* === Utilities === */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }
.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: 40px; }
.clearfix::after { content: ''; display: table; clear: both; }
.screen-reader-text { clip: rect(1px,1px,1px,1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }