/*
Theme Name:   CIMW Child
Theme URI:    https://cimechanical.ca
Description:  Child theme for Creative Mechanical & Welding — based on Astra
Author:       Creative Industries Ltd
Author URI:   https://cimechanical.ca
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  cimw-child
*/

/* ============================================================
   BRAND COLOURS
   Primary Red:    #DB0000
   Dark Burgundy:  #741314
   Dark Grey:      #3F3F41
   White:          #FFFFFF
   ============================================================ */

:root {
    --ci-red:       #DB0000;
    --ci-burgundy:  #741314;
    --ci-grey:      #3F3F41;
    --ci-white:     #FFFFFF;
}

/* ---- Global Typography ---- */
body {
    font-family: 'Francker Pro', 'Franklin Gothic Medium', Arial, sans-serif;
    color: var(--ci-grey);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
    font-family: 'Trajan Pro', 'Palatino Linotype', Georgia, serif;
    font-weight: 700;
    color: var(--ci-grey);
}

/* ---- Site Header ---- */
.site-header,
.ast-site-header-wrap {
    background-color: var(--ci-grey) !important;
}

.site-title a,
.site-title a:hover {
    color: var(--ci-white) !important;
}

/* ---- Navigation ---- */
.main-navigation a,
.ast-main-navigation a {
    color: var(--ci-white);
    font-family: 'Trajan Pro', 'Palatino Linotype', Georgia, serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.main-navigation a:hover,
.ast-main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--ci-red) !important;
}

/* ---- Buttons ---- */
.ast-btn,
.button,
input[type="submit"],
button[type="submit"],
.wp-block-button__link {
    background-color: var(--ci-red);
    color: var(--ci-white);
    border: none;
    font-family: 'Trajan Pro', Georgia, serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 12px 28px;
    border-radius: 0;
    transition: background-color 0.2s ease;
}

.ast-btn:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background-color: var(--ci-burgundy);
    color: var(--ci-white);
}

/* ---- Hero / Banner ---- */
.ci-hero {
    background-color: var(--ci-grey);
    color: var(--ci-white);
    padding: 80px 40px;
    text-align: center;
}

.ci-hero h1 {
    color: var(--ci-white);
    font-size: 2.8rem;
    margin-bottom: 16px;
}

.ci-hero p {
    font-size: 1.15rem;
    max-width: 680px;
    margin: 0 auto 28px;
}

/* ---- Section Headings ---- */
.ci-section-title {
    color: var(--ci-red);
    font-family: 'Trajan Pro', Georgia, serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 3px solid var(--ci-red);
    padding-bottom: 8px;
    margin-bottom: 24px;
}

/* ---- Service Cards (Industrial/Heavy-duty feel) ---- */
.ci-service-card {
    border-top: 4px solid var(--ci-red);
    border-left: 1px solid #ddd;
    padding: 24px;
    background: var(--ci-white);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-bottom: 24px;
    position: relative;
}

.ci-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--ci-red), var(--ci-burgundy));
}

.ci-service-card h3 {
    color: var(--ci-grey);
    font-family: 'Trajan Pro', Georgia, serif;
}

/* ---- Certifications / Badges strip ---- */
.ci-certs-strip {
    background-color: var(--ci-burgundy);
    color: var(--ci-white);
    padding: 16px 0;
    text-align: center;
    font-family: 'Trajan Pro', Georgia, serif;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---- Footer ---- */
.site-footer,
.ast-footer-copyright {
    background-color: var(--ci-grey);
    color: var(--ci-white);
}

.site-footer a,
.ast-footer-copyright a {
    color: var(--ci-red);
}

.site-footer a:hover {
    color: var(--ci-white);
}

/* ---- Utility ---- */
.ci-red    { color: var(--ci-red); }
.ci-grey   { color: var(--ci-grey); }
.bg-ci-red { background-color: var(--ci-red); color: var(--ci-white); }
.bg-ci-grey{ background-color: var(--ci-grey); color: var(--ci-white); }