/*
Theme Name: Preme Contracting
Theme URI: https://premecontracting.co.uk
Author: Jamie Collins
Author URI: https://premecontracting.co.uk
Description: A custom Bootstrap WordPress theme inspired by the Louis Vuitton aesthetic — lightweight and elegant for Preme Contracting.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: premecontracting
Tags: bootstrap, responsive, minimal, elegant
*/

/* ====== CUSTOM STYLES ====== */

/* Chosen Gold - #D4AF37 */

html,
body {
	color: #444;
	background: #f9f9f9;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}


.btn,
.wp-block-buttons>.wp-block-button.has-custom-width .wp-block-button__link {
	background-color: #D4AF37;
	border: 2px solid #DAA520;
}

.bi::before {
    font-size: 1.3em;
}

.card-body h3 a,
h1, h2, h3, h4, h5 {
	font-family: 'Academy Engraved LET', sans-serif;
	letter-spacing: 1.2px;
	color: #444;
	font-weight: bold;
}

h2 {
	font-size:250%;
}

h3 {
	font-size:190%;
}

.page-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
}

.page-hero .hero-inner {
  position: relative;
  z-index: 2;
}

.page-hero .hero-overlay {
  z-index: 1;
}

.hero-inner h1 {
	color: #fff;
}

/* example typography similar feel */
h1.display-5 {
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* =========================================
   WORDPRESS ADMIN BAR FIX
========================================= */
/* Desktop admin bar is 32px tall */
.admin-bar .navbar {
    top: 32px;
}

/* Mobile admin bar is slightly thicker at 46px */
@media screen and (max-width: 782px) {
    .admin-bar .navbar {
        top: 46px;
    }
}

/* =========================================
   HEADER & NAVIGATION
========================================= */

/* Make navbar sticky, ready for transitions, and add default shadow */
.navbar {
    position: -webkit-sticky; 
    position: sticky;
    top: 0;
    height: 120px;
    z-index: 1040; 
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06); /* New: Soft shadow so it doesn't blend in */
}

/* Scrolled State triggered by JS */
.navbar.scrolled {
    height: 85px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Updated: Deeper, more pronounced shadow when scrolling */
}

/* Center logo wrapper */
.custom-logo-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: all 0.3s ease-in-out;
}

/* Logo image transitions */
.custom-logo-link img.custom-logo {
    max-height: 100px; /* Slight tweak to fit nicely in the 120px space */
    max-width: 100%; /* Ensures it never overflows its container laterally */
    width: auto;
    height: auto;
    object-fit: contain; /* Forces the image to maintain ratio without cropping */
    display: block;
    transition: all 0.3s ease-in-out; /* Smoothly scales all dimensions at once */
}

/* Shrink logo on scroll */
.navbar.scrolled .custom-logo-link img.custom-logo {
    max-height: 60px;
}

/* make navbar-brand centered with hamburger to the left */
.navbar-brand img {
  max-height: 48px;
}

.nav-link {
    font-family: 'Academy Engraved LET', sans-serif;
    font-weight: bold;
    font-size: 120%;
    letter-spacing: 1.2px;
    color: #333;
}

/* make the offcanvas full height on mobile */
.offcanvas.offcanvas-start {
  width: 320px;
}

/* Ensure offcanvas close button is above WordPress admin bar */
.offcanvas-header .btn-close {
    position: relative;
    z-index: 1055; 
}

/* Add some spacing from top to avoid overlapping admin bar */
.offcanvas.offcanvas-start {
    padding-top: 60px; 
}

/* Rotate the chevron when open */
#mobileServices.show + .bi-chevron-down,
.nav-link[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* =========================================
   MOBILE OFFCANVAS NAVIGATION
========================================= */

/* Dark background for the mobile menu */
#mobileNav.offcanvas {
    background-color: #222;
    color: #fff; /* Sets default text to white */
}

/* Tidy up the mobile links */
#mobileNav .nav-link {
    color: #ffffff; /* White links */
    font-size: 100%; /* Reduced from 120% for a cleaner, professional look */
    font-weight: 500; /* Slightly lighter than bold to look modern */
    letter-spacing: 1px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Optional: Adds subtle dividers */
}

/* Hover state for mobile links */
#mobileNav .nav-link:hover,
#mobileNav .nav-link:focus {
    color: #D4AF37; /* Scorcha Orange (or use #ccc for simple grey) */
}

/* Make sure the dropdown chevron is white */
#mobileNav .bi-chevron-down {
    color: #ffffff;
}

/* Remove border from the last item */
#mobileNav .nav-item:last-child .nav-link {
    border-bottom: none;
}

.header-left .btn {
    background: transparent;
    color: inherit;
    border: none;
    box-shadow: none;
}

/* Ensure left and right elements stay on the same line */
.header-left, .header-right {
    z-index: 3;
}

.header-right a {
    font-weight: 600;
    font-size: 90%;
	text-decoration: none;
}

/* =========================================
   GENERAL & BLOCKS
========================================= */

@media (min-width: 992px) {
  .page-hero {
    min-height: 70vh;
  }
}

.page-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.page-card .card-img-top {
    width: 100%;
    height: 180px; 
    object-fit: cover;
}

.wp-block-image img {
    margin-top: 1.5rem;
    border-radius: 10px;
    box-shadow: 4px 2px 2px #ddd; /* Fixed the typo 'xbox-shadow' here! */
}

ul.wp-block-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

ul.wp-block-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.6rem;
}

ul.wp-block-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #c9a24d; /* gold */
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.4;
}

.wp-block-separator {
    border-top: 5px solid #06402B;
    border-radius: 20px;
}

/* =========================================
   FOOTER
========================================= */
#footer h5,
#footer a {
    color: #fff;
}

#footer a:hover,
#footer ul li a:hover{
    color: #d4af37!important;
}