/* ========================================================================
   BELCAN ARCHITECTS + ENGINEERS
   File 00 — Foundation

   Purpose:
   Shared design variables and general layout rules used throughout
   the Belcan website.

   Used on:
   Entire website

   Source:
   Master Homepage CSS — Version 4

   Last Updated:
   2026-07-26
======================================================================== */


/* ==========================================================
   1. DESIGN VARIABLES
========================================================== */

:root {
    --belcan-blue: #4B5D67;
    --belcan-text: #252525;
    --belcan-muted: #5F6A70;

    --belcan-services-bg: #D4DCAA;
    --belcan-page-bg: #FAF9F7;

    --belcan-divider: rgba(75, 93, 103, 0.62);
    --belcan-line: rgba(75, 93, 103, 0.16);
    --belcan-line-light: rgba(75, 93, 103, 0.09);

    --belcan-site-width: 1180px;

    --belcan-desktop-padding: 34px;
    --belcan-tablet-padding: 22px;
    --belcan-mobile-padding: 18px;
}


/* ==========================================================
   2. GENERAL LAYOUT
========================================================== */

/*
Large desktop:

1/5 blank
3/5 content
1/5 blank
*/

.belcan-constrained-section {
    width: calc(100% - 48px) !important;
    max-width: var(--belcan-site-width) !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
}


.belcan-section {
    color: var(--belcan-text);
}


.belcan-centered {
    text-align: center;
}


/* ==========================================================
   RESPONSIVE CONSTRAINED WIDTH
========================================================== */

@media (max-width: 1100px) {

    .belcan-constrained-section {
        width: calc(100% - 36px) !important;
        min-width: 0;
    }
}


@media (max-width: 767px) {

    .belcan-constrained-section {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================
   BELCAN CONTENT PAGE TEMPLATE
   White background / no footer
   ========================================================== */

body.page-template-page-white-no-footer,
body.page-template-page-white-no-footer #wrapper,
body.page-template-page-white-no-footer .site,
body.page-template-page-white-no-footer .site-content,
body.page-template-page-white-no-footer .centered-wrapper,
body.page-template-page-white-no-footer .percent-page,
body.page-template-page-white-no-footer .begin-content{
    background-color: #ffffff !important;
}

body.page-template-page-white-no-footer .centered-wrapper,
body.page-template-page-white-no-footer .percent-page,
body.page-template-page-white-no-footer .begin-content{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================
   SITE HEADER
   ========================================================== */

header#header.solid-header{
    border-bottom: 1px solid #e6e6e6 !important;
    box-shadow: none !important;
}