/* --- Root Variables --- */
/* --- OBG BRAND VARIABLES --- */
:root {
    --mountain-blue: #325d81;
    --orange-climb: #e68b54;
    --peak-white: #ffffff;
    --abyss-black: #121212;
    --grit-gray: #f4f4f4;
}

/* --- TYPOGRAPHY & BASE --- */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--peak-white);
    color: var(--abyss-black);
    line-height: 1.8;
}

h2, h3, .page-header h1, .item-page h2 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--abyss-black);
}

/* --- JOOMLA NAV & MENU MAPPING --- */
/* This targets the standard Joomla menu module output */
.mod-menu, .nav.menu {
    display: flex;
    list-style: none;
    gap: 30px;
    padding: 20px 0;
}

.mod-menu li a, .nav.menu li a {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--abyss-black);
    text-decoration: none;
    transition: 0.3s;
    opacity: 0.6;
    padding-bottom: 8px;
    border-bottom: 3px solid transparent;
}

.mod-menu li a:hover, .mod-menu li.active a {
    opacity: 1;
    border-bottom: 3px solid var(--orange-climb);
}

/* --- CONTENT CONTAINERS --- */
.item-page {
    padding: 60px 0;
}

/* Creating the "Grit" Sidebar look for Joomla Modules */
.module, .moduletable {
    margin-bottom: 40px;
    border-left: 10px solid var(--orange-climb);
    padding-left: 25px;
    background: var(--grit-gray);
    padding: 30px;
}

.module h3, .moduletable h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--mountain-blue);
}

/* --- BUTTONS (JOOMLA DEFAULTS) --- */
.btn-primary, .readmore a, .btn {
    background: var(--abyss-black) !important;
    color: var(--peak-white) !important;
    padding: 15px 30px !important;
    border: none !important; 
    font-family: 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    border-radius: 2px !important;
    transition: 0.2s !important;
    display: inline-block;
    cursor: pointer;
}

.btn-primary:hover, .readmore a:hover {
    background: var(--orange-climb) !important;
}

/* --- GLOBAL LINK STYLING --- */
a {
    color: var(--mountain-blue);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(50, 93, 129, 0.2); /* Faint blue underline */
}

a:hover {
    color: var(--orange-climb);
    border-bottom: 1px solid var(--orange-climb); /* Sharp orange underline on hover */
    text-decoration: none;
}

/* Specific styling for links inside the main content area */
.item-page a, .article-details a {
    color: var(--mountain-blue);
    font-weight: 700;
}

.item-page a:hover {
    color: var(--orange-climb);
}

/* Handling links inside the "Grit" modules so they remain readable */
.module a, .moduletable a {
    color: var(--abyss-black);
    border-bottom: 1px solid rgba(18, 18, 18, 0.3);
}

.module a:hover, .moduletable a:hover {
    color: var(--orange-climb);
    border-bottom: 1px solid var(--orange-climb);
}

/* Ensure buttons/nav items don't get the global underline */
.nav.menu li a, 
.mod-menu li a, 
.btn, 
.readmore a {
    /* border-bottom: none !important; */
}

/* --- FORMS (CONTACT COMPONENT) --- */
.form-control, input, textarea {
    background: var(--grit-gray) !important;
    border: none !important;
    border-bottom: 2px solid #ddd !important;
    border-radius: 0 !important;
    padding: 12px !important;
}

.form-control:focus {
    border-bottom: 2px solid var(--orange-climb) !important;
    box-shadow: none !important;
}

/* --- LAYOUT FLUSH RESET --- */

/* 1. Ensure the body and HTML don't have hidden overflows or offsets */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* 2. Shift the entire Joomla wrapper to account for the 80px sidebar */
#joomla-main-container, 
.site-grid, 
#container-main,
.container-fluid {
    margin-left: 80px !important; /* Matches your OBG sidebar width */
    width: calc(100% - 80px) !important;
    max-width: none !important; /* Removes Bootstrap's centered max-width */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. Make Header and Banner flush */
header, 
.header, 
#header,
.banner,
#banner {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 4. Align Content-Area exactly to the left edge */
#content, 
.content-area, 
.main-content,
main {
    padding: 0 !important;
    margin: 0 !important;
}

/* 5. Section-specific internal padding */
/* While the containers are flush, you likely want text to not touch the absolute edge */
.item-page, 
.article-details, 
.module-inner {
    padding: 40px 5% !important; /* Provides horizontal breathing room for text while keeping the background flush */
}

/* 6. Remove standard Joomla/Bootstrap Gutter spacing */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.col-md-12, .col-sm-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --- Vertical Sidebar --- */
#vertical-sidebar {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 80px; /* Slightly widened to fit the 50px logo + borders */
    height: 100vh;
    background-color: var(--abyss-black); 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start; /* Keeps logo at top */
    padding-top: 40px;
    border-right: 1px solid #222; 
    z-index: 1000;
}

/* Specifically strip the underline from the logo link only */
#vertical-sidebar a, 
.side-logo-wrapper a {
    border-bottom: none !important;
}

#vertical-sidebar a:hover {
    border-bottom: none !important;
    background: transparent !important;
}

.side-logo { 
    width: 46px; 
    /* height: 50px; */
    border-radius: 50%; 
    border: 2px solid var(--orange-climb); 
    cursor: pointer;
    margin-bottom: 80px;
    transition: 0.3s;
    /* object-fit: cover; */
} 

.side-logo:hover { transform: scale(1.1); }

.vertical-text { 
    transform: rotate(-90deg); 
    color: var(--peak-white); 
    font-size: 9px; 
    letter-spacing: 5px; 
    white-space: nowrap; 
    font-weight: 900;
    /* text-transform: uppercase; */
    opacity: 0.4;
    margin-top: 90px; /* Moves text down from logo */
}

#main-wrapper { 
    margin-left: 65px; 
}

/* --- Header & Navigation --- */
#header { background-color: var(--abyss-black); padding: 20px 0; }
.header-container { 
    max-width: 100%; 
    margin: 0; 
    padding: 0 60px; 
}
.logo img { height: 40px; }

.main-nav {
    display: flex; 
    align-items: center; 
    gap: 20px;
    margin-bottom: 60px; 
    padding-top: 5px;
	padding-left: 14px;
}

.main-nav ul {
    display: flex; 
    align-items: center; 
    gap: 20px;
    list-style: none; 
    margin: 0; 
    padding: 0;
}

.main-nav ul li a {
    color: var(--peak-white); 
    text-decoration: none; 
    font-size: 0.65rem;
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 1.5px;
    cursor: pointer; 
    transition: 0.3s; 
    opacity: 0.6;
    padding-bottom: 4px; 
    border-bottom: 2px solid transparent;
}

.main-nav ul li a:hover, 
.main-nav ul li.active a,
.main-nav ul li.current a {
    opacity: 1; 
    border-bottom: 3px solid var(--orange-climb); !important
}

.main-nav ul li:last-child a {
    background: var(--orange-climb);
    color: var(--peak-white) !important;
    padding: 6px 14px; 
    border-radius: 2px;
    font-size: 0.65rem; 
    font-weight: 900; 
    text-transform: uppercase;
    letter-spacing: 1.5px; 
    text-decoration: none; 
    transition: 0.2s;
    box-shadow: 0 4px 0px rgba(0,0,0,0.1); 
    cursor: pointer;
    opacity: 1; 
    border-bottom: none;
}

.main-nav ul li:last-child a:hover { 
    background: var(--peak-white); 
    color: var(--abyss-black) !important; 
}

/* --- Banner & Content Area --- */
#banner { background-color: var(--abyss-black); color: var(--peak-white); padding-bottom: 120px; }
.page-title { 
    font-family: 'Oswald', sans-serif; 
    font-size: 85px; 
    text-transform: uppercase; 
    line-height: 1; 
    letter-spacing: -2px; 
}

.container { max-width: 1200px; margin: 0; padding: 40px 8% 80px 4.7%; } 

#content-area { padding: 80px 0; }
#content-area h3 { 
    color: var(--orange-climb); 
    font-size: 14px; 
    text-transform: uppercase; 
    font-weight: 700; 
    letter-spacing: 1.5px; 
}

/* --- Delivery Model Grid --- */
.model-grid { display: flex; gap: 25px; margin-top: 40px; }
.model-item { flex: 1; background: #fcfcfc; border: 1px solid #eee; padding: 40px; position: relative; }
.model-item h3 { font-family: 'Oswald', sans-serif; font-size: 22px; text-transform: uppercase; margin-bottom: 20px; }
.model-item::after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 5px; 
    background: var(--abyss-black); 
}

/* --- CTA & Footer --- */
#cta-block { background: #0d0d0d; color: #fff; text-align: center; padding: 100px 0; }
.cta-button { 
    background: var(--orange-climb); 
    color: #000; 
    padding: 16px 45px; 
    text-decoration: none; 
    font-weight: 700; 
    display: inline-block; 
    text-transform: uppercase; 
}

/* --- FOOTER LINK INHERITANCE --- */
/* --- Footer Layout --- */
footer { 
	/* Force it to stay within the parent #main-wrapper */
    width: 100% !important;
    max-width: 100% !important;
	/* -- */	
    box-sizing: border-box; /* Crucial: includes padding inside the width */
	padding: 10px 8%; 
    background: #f4f4f4; 
    display: flex; 
    justify-content: space-between; /* Pushes brand left, legal right */
    align-items: normal;
    font-size: 11px; 
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888; /* Subtle gray for the base text */
}

/* --- Legal Link Styles --- */
.footer-link { 
    color: inherit; 
    text-decoration: none; 
    margin-left: 20px; 
    cursor: pointer; 
    transition: 0.3s; 
    opacity: 0.6;
    font-weight: 400 !important; /* --- Force No Bold --- */
    border-bottom: none !important; /* Prevents global link underlines */
}

.footer-link:hover { 
    color: var(--orange-climb) !important; 
    opacity: 1; 
}

/* Container for the right-side elements to keep them on one line */
.footer-right {
    display: flex;
    align-items: center;
}