/* 1. FONTS & ROOT VARIABLES 
----------------------------------------------*/
:root {
    --body-font: "Work Sans", sans-serif;
    --bs-btn-font-family: "Work Sans", sans-serif;

    /* Primary Colors */
    --bs-blue: #4BA1A7;
    --bs-red: #F0756C;
    --bs-orange: #F5E9E9;
    --bs-yellow: #EFEAEA;
    --bs-green: #F5F8F1;
    --bs-teal: #EFE8EF;
    --bs-cyan: #F3F3F3;
    --bs-black: #111111; 
    --bs-white: #FFFFFF;
    --bs-gray: #777777; 
    
    --bs-link-color: #111111;
    --bs-link-color-rgb: 17, 17, 17;
    --bs-link-hover-color: #F0756C;
    --bs-link-hover-color-rgb: 240, 117, 108;
    
    --bs-primary: #F0756C;
    --bs-primary-rgb: 240, 117, 108;
    --bs-body-color: #111111;   
    --bs-info: #C3C3C3; 
    --bs-light-text-emphasis: #c3c3c3;
    
    --swiper-pagination-color: #F0756C;
}

/* Light Theme forced colors */
body, body [data-bs-theme=light] {
    --bs-blue: #4BA1A7;
    --bs-red: #F0756C;
    --bs-orange: #F5E9E9;
    --bs-yellow: #EFEAEA;
    --bs-green: #F5F8F1;
    --bs-teal: #EFE8EF;
    --bs-cyan: #F3F3F3;
    --bs-black: #111111; 
    --bs-white: #FFFFFF;
    --bs-gray: #777777;   
    --bs-info: #C3C3C3;
}

/* 2. BASE STYLES
----------------------------------------------*/
body {
    font-family: var(--body-font);
}

h2, h3, h4, h5, h6 {
    font-weight: 700;
}

.display-1 {
    /* Using clamp for fluid typography: Min 3rem, Preferred 4.5vw, Max 8rem */
    font-size: clamp(3rem, 4.375rem + 4.5vw, 8.5rem);
    font-weight: 900;
    font-family: var(--body-font); 
    line-height: 80%;
}

.display-2, .display-3, .display-4, .display-5 {
    font-weight: 700;
}

p.a { line-height: 10%; }
.lh-small { line-height: 80%; }
.ls-4 { letter-spacing: 0.2rem; }

/* 3. COMPONENTS
----------------------------------------------*/

/* Buttons */
.btn-primary {
    --bs-btn-color: var(--bs-black);
    --bs-btn-bg: var(--bs-orange);
    --bs-btn-border-color: var(--bs-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-black);
    --bs-btn-hover-border-color: var(--bs-black);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-bg: var(--bs-black); 
}

/* Masonry/Checked State */
.btn.is-checked {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

/* Pagination */
.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-hover-bg: var(--bs-black);
    --bs-pagination-active-bg: #F5E9E9;
    --bs-pagination-active-border-color: #F5E9E9;
    display: flex;
    padding-left: 0;
    list-style: none;
}

.page-link { color: var(--bs-black); }
.active > .page-link, .page-link.active {
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
}

/* Accordion/FAQs */
.accordion-item { background: var(--bs-yellow); }
h5 button.accordion-button {
    font-family: var(--body-font);
    background: var(--bs-yellow);
}
.accordion-button:focus { box-shadow: none; outline: 0; border: none; }
.accordion-button:not(.collapsed) { background: none; box-shadow: none; }
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z'/%3E%3C/svg%3E");
}

/* Utilities */
.bg-gray { background-color: var(--bs-gray) !important; }
.bg-yellow { background-color: var(--bs-yellow) !important; }
.bg-green { background-color: var(--bs-green) !important; }
.bg-teal { background-color: var(--bs-teal) !important; }
.postf { color: var(--bs-gray); }
.postg { color: var(--bs-info); }
.p-6 { padding: 4rem !important; }

/* 4. MEDIA QUERIES (RESPONSIVENESS)
----------------------------------------------*/

/* Large Desktop / Wide Screens */
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1460px;
    }
}

/* Tablets and Small Laptops (Bootstrap 'lg' breakpoint) */
@media (max-width: 991px) {
    .p-6 {
        padding: 2.5rem !important; /* Scale down large spacing */
    }
    .display-1 {
        line-height: 100%; /* More readable on smaller screens */
    }
}

/* Mobile Devices (Bootstrap 'md' and 'sm' breakpoints) */
@media (max-width: 768px) {
    .ls-4 {
        letter-spacing: 0.1rem; /* Tighten letter spacing on small screens */
    }
    .p-6 {
        padding: 1.5rem !important;
    }
    
    /* Ensure images or columns don't overflow */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Contact page responsiveness and header spacing so fixed-top doesn't cover content */
@media (max-width: 991px) {
    .contact-hero { margin-top: 5.5rem; }
    .contact-hero .container { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .glass { background: rgba(0,0,0,0.45); border-color: rgba(255,255,255,0.06); }
    .glass .form-control { background: rgba(255,255,255,0.02); }
}

@media (min-width: 992px) {
    .contact-hero { margin-top: 7rem; }
    .contact-hero .container { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* Ensure navbar toggler and offcanvas are visible on small screens (same behavior as home) */
@media (max-width: 991px) {
    .navbar-toggler.d-lg-none { display: inline-flex !important; }
    .d-none.d-lg-flex { display: none !important; }
}

/* Extra Small Phones */
@media (max-width: 480px) {
    .display-1 {
        font-size: 2.8rem; /* Fallback for very small screens */
    }
    h2 { font-size: 1.75rem; }

    /* Slight adjustments for very small screens */
    .navbar .nav-link,
    .offcanvas .nav-link {
        font-size: 1rem;
        padding: 0.7rem 0.9rem;
    }
}

/* Link hover + touch feedback */
.navbar .nav-link,
.offcanvas .nav-link,
footer .list-unstyled a {
    position: relative;
    transition: color .18s ease, transform .06s ease;
}

.navbar .nav-link::after,
.offcanvas .nav-link::after,
footer .list-unstyled a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 2px;
    width: 0;
    background: var(--bs-link-hover-color);
    transition: width .18s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.offcanvas .nav-link:hover,
.offcanvas .nav-link:focus,
footer .list-unstyled a:hover,
footer .list-unstyled a:focus {
    color: var(--bs-link-hover-color);
    text-decoration: none;
    outline: none;
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after,
.offcanvas .nav-link:hover::after,
.offcanvas .nav-link:focus::after,
footer .list-unstyled a:hover::after,
footer .list-unstyled a:focus::after {
    width: 100%;
}

/* Small 'press' feedback for touch devices */
.navbar .nav-link:active,
.offcanvas .nav-link:active,
footer .list-unstyled a:active {
    transform: translateY(1px);
}

/* Compact navbar spacing (reduce padding) */
.navbar {
    padding: 0.3rem 0.75rem !important;
}
.navbar .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }
.navbar .navbar-brand { padding: 0; margin-right: 0.5rem; }
.navbar .nav-link { padding: 0.35rem 0.5rem; font-size: 0.95rem; }
.navbar .nav-link.text-uppercase { letter-spacing: 0.06rem; }

/* Ensure the hamburger/menu icon is always visible and black for good contrast */
.navbar .navbar-toggler {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.navbar .navbar-toggler svg,
.navbar .navbar-toggler svg use,
.navbar .navbar-toggler .menu,
.navbar .navbar-toggler .menu path {
    display: block;
    width: 24px;
    height: 24px;
    color: var(--bs-black);
    fill: var(--bs-black) !important;
    stroke: var(--bs-black);
    opacity: 1 !important;
}

.navbar .navbar-toggler .menu { display: block; }

/* Accessible focus ring for toggler (more subtle) */
.navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.12rem rgba(var(--bs-primary-rgb), 0.12);
    outline: none;
}

/* Brand logo utility */
.brand-logo { max-width: 160px; height: auto; }
@media (max-width: 575px) {
  .brand-logo { max-width: 100px; }
}

@media (max-width: 991px) {
    .navbar { padding: 0.25rem 0.5rem !important; }
    .offcanvas .offcanvas-body { padding: 0.75rem 1rem; }

    /* Make nav items more touch-friendly and readable on small screens */
    .navbar .nav-link,
    .offcanvas .nav-link {
        padding: 0.75rem 0.9rem;
        font-size: 1.05rem;
        min-height: 44px;
        display: block;
    }

    /* Slightly larger toggler for easier tapping */
    .navbar .navbar-toggler {
        padding: 0.45rem 0.6rem;
        font-size: 1.05rem;
    }
}

/* Contact page video background and glass panels */
.contact-hero { position: relative; overflow: hidden; border-radius: 12px; }
.contact-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.contact-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.45), rgba(0,0,0,0.55)); z-index: 1; }
.contact-hero .container { position: relative; z-index: 2; }

/* Portfolio hero - video background with accessible overlay */
.portfolio-hero { position: relative; overflow: hidden; border-radius: 12px; }
.portfolio-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.portfolio-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55)); z-index: 1; }
.portfolio-hero .container { position: relative; z-index: 2; }

/* Ensure hero text is readable: force white text and add subtle shadow */
.portfolio-hero h1,
.portfolio-hero .display-4,
.portfolio-hero p,
.portfolio-hero .lead,
.portfolio-hero a {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.portfolio-hero a { text-decoration: underline; }


/* Ensure hero doesn't get hidden behind fixed header */
@media (max-width: 991px) {
    .portfolio-hero { margin-top: 5.5rem; }
    .portfolio-hero .container { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

@media (min-width: 992px) {
    .portfolio-hero { margin-top: 7rem; }
    .portfolio-hero .container { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}


.glass { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.glass h2, .glass h3, .glass p { color: #fff; }
.glass .form-control { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.12); color: #fff; }
.glass .form-control::placeholder { color: rgba(255,255,255,0.6); }
.glass .form-control:focus { border-color: rgba(240,117,108,0.9); box-shadow: 0 0 0 0.15rem rgba(240,117,108,0.12); }

@media (max-width: 768px) {
  .contact-hero { border-radius: 0; }
  .glass { padding: 1.25rem !important; }
}

/* Project overlay for portfolio cards */
.project-card { position: relative; }
.project-card .project-overlay {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.project-card:hover .project-overlay,
.project-card:focus-within .project-overlay,
.project-card.overlay-visible .project-overlay {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.project-card .overlay-inner { max-width: 100%; }

/* On small screens, make overlay more prominent and easier to tap */
@media (max-width: 991px) {
  .project-card .project-overlay { align-items: flex-start; padding: 1rem; }
  .project-card .overlay-inner { padding: 1rem; }
}

/* Ensure overlay text is readable and links/buttons contrast */
.project-card .overlay-inner h6 { margin-bottom: .5rem; }
.project-card .overlay-inner ul { padding-left: 1rem; margin-bottom: .5rem; }
.project-card .overlay-inner li { line-height: 1.2; }

/* Allow overlay content to scroll if it exceeds the image height */
.project-card .overlay-inner {
  max-height: calc(100% - 1.5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: .5rem; /* room for scrollbar */
}

/* Slight visual offset for overlay-visible state on touch devices */
@media (max-width: 991px) {
  .project-card.overlay-visible { z-index: 5; transform: translateY(-4px); }
}