/*
  Global styles for Clutch & Lee website.

  The palette is inspired by the neutral, warm tones used on blunspark.com.
  Feel free to tweak the colour variables below to better match your own
  branding. The design keeps a generous amount of whitespace to ensure a
  clean, modern look – less is more.
*/

/*
  Custom font declarations

  We embed the DIN Pro Condensed font family provided by the user. Each
  weight/style has its own file in the fonts folder. The shared family
  name "DINProCond" allows us to use the weight property to switch
  between regular, medium and bold weights.
*/

@font-face {
  font-family: 'DINProCond';
  src: url('fonts/DINPro-Cond.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'DINProCond';
  src: url('fonts/DINPro-CondMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'DINProCond';
  src: url('fonts/DINPro-CondBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'DINProCond';
  src: url('fonts/DINPro-CondMediIta.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}

/* Colour palette */
:root {
  --colour-dark: #1a1a1a;
  --colour-accent: #b89a78;
  --colour-light: #f7f5f0;
  --colour-white: #ffffff;
}

/* Reset & base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* Use the custom DIN Pro Condensed family for body text with sans-serif fallback */
  font-family: 'DINProCond', sans-serif;
  background-color: var(--colour-light);
  color: var(--colour-dark);
  line-height: 1.6;
  font-size: 16px;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  /* Apply the bold weight of our custom font to headings */
  font-family: 'DINProCond', sans-serif;
  font-weight: 700;
  color: var(--colour-dark);
  line-height: 1.2;
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1em;
}

/* Container utility to constrain content width */
.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Navbar */
.navbar {
  background-color: var(--colour-light);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid #e0ded7;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.logo {
  height: 40px;
}

.nav-links a {
  margin-left: 1.5rem;
  text-decoration: none;
  color: var(--colour-dark);
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--colour-accent);
}

.cta {
  padding: 0.5rem 1rem;
  border: 1px solid var(--colour-accent);
  border-radius: 4px;
  color: var(--colour-accent);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cta:hover {
  background-color: var(--colour-accent);
  color: var(--colour-white);
}

/* Hero */
.hero {
  /*
    Use a high‑resolution image of a retail environment as the hero background
    with a tinted overlay. The linear gradient uses a deep brown base on the
    left fading into the warm accent colour, both with opacity for readability.
    The image is positioned centrally and covers the entire area. Adjust the
    RGBA alpha values if you need more or less tint.
  */
  /*
    Use a lighter overlay on top of the blurred retail image so the picture
    beneath is more visible. Reducing the alpha value from 0.85 to 0.6 makes
    the scene feel less dark while still ensuring that text remains readable.
  */
  background: linear-gradient(
      135deg,
      rgba(43, 27, 14, 0.6),
      rgba(184, 154, 120, 0.6)
    ),
    url('images/hero.jpg') center / cover no-repeat;
  color: var(--colour-white);
  padding: 6rem 0;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--colour-white);
}

.hero p {
  max-width: 600px;
  margin: 0 auto 2rem auto;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--colour-white);
}

.btn-primary {
  display: inline-block;
  background-color: var(--colour-accent);
  color: var(--colour-white);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  /* When hovering the primary button we slightly darken the accent colour.
     CSS does not support the SASS darken() function, so we define an explicit
     darker shade here. */
  background-color: #a07e5b;
}

/* Section generic */
.section {
  padding: 4rem 0;
}

.light-bg {
  background-color: var(--colour-white);
}

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.service-card {
  background-color: var(--colour-light);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.service-card h3 {
  margin-bottom: 0.5rem;
  color: var(--colour-dark);
  font-size: 1.25rem;
}

.service-card p {
  font-size: 0.95rem;
  color: #3d3d3d;
}

/* Approach list */
.approach-list {
  list-style: none;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.5rem;
}

.approach-list li {
  padding: 0.5rem 0;
  font-weight: 500;
  position: relative;
}

.approach-list li::before {
  content: "\2022";
  color: var(--colour-accent);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/* Contact section */
.contact {
  text-align: center;
}

.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--colour-dark);
  border-radius: 4px;
  color: var(--colour-dark);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-secondary:hover {
  background-color: var(--colour-dark);
  color: var(--colour-white);
}

/* Footer */
.footer {
  background-color: var(--colour-light);
  padding: 2rem 0;
  border-top: 1px solid #e0ded7;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-logo {
  height: 32px;
}

.small {
  font-size: 0.8rem;
  color: #666;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .navbar .nav-content {
    justify-content: center;
  }
  .hero {
    padding: 4rem 0;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .services-grid,
  .approach-list {
    grid-template-columns: 1fr;
  }
}

/*
  Chat widget styles

  The following rules define the appearance of the floating chat button and the
  chat interface. The widget sits fixed at the bottom right of the page on
  larger screens and adapts gracefully on mobile. Colours are derived from
  the existing palette to ensure a cohesive look.
*/

#chat-toggle {
  position: fixed;
  /* Place the toggle higher up the page so it is more visible. Adjust the
     bottom value to move it further up or down. */
  bottom: 150px;
  right: 20px;
  z-index: 10000;
  background-color: var(--colour-accent);
  color: var(--colour-white);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 0.75rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#chat-toggle:hover {
  background-color: #a07e5b;
}

#chat-widget {
  position: fixed;
  /* Position the chat window higher on the page. The bottom value here is
     relative to the viewport and should be greater than the toggle’s
     bottom value so that the window does not overlap the button. */
  bottom: 220px;
  right: 20px;
  width: 320px;
  max-width: calc(100% - 40px);
  height: 420px;
  display: none;
  flex-direction: column;
  background-color: var(--colour-white);
  border: 1px solid #dcd6ce;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 10000;
  font-family: 'DINProCond', sans-serif;
}

#chat-header {
  background-color: var(--colour-dark);
  color: var(--colour-white);
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1rem;
}

#chat-close {
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

#chat-messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  background-color: var(--colour-light);
  font-size: 0.9rem;
  line-height: 1.4;
}

#chat-messages .message {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border-radius: 4px;
  max-width: 100%;
  word-wrap: break-word;
}

#chat-messages .message.user {
  background-color: var(--colour-accent);
  color: var(--colour-white);
  align-self: flex-end;
}

#chat-messages .message.assistant {
  background-color: #e8e2d9;
  color: var(--colour-dark);
  align-self: flex-start;
}

#chat-input-container {
  display: flex;
  border-top: 1px solid #dcd6ce;
  padding: 0.5rem;
  background-color: var(--colour-white);
}

#chat-input {
  flex: 1;
  resize: none;
  border: 1px solid #c9c3b9;
  border-radius: 4px;
  padding: 0.5rem;
  font-family: 'DINProCond', sans-serif;
  font-size: 0.9rem;
  line-height: 1.3;
}

#chat-send {
  margin-left: 0.5rem;
  background-color: var(--colour-accent);
  color: var(--colour-white);
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
}

#chat-send:hover {
  background-color: #a07e5b;
}

#chat-inquiry {
  border: none;
  padding: 0.6rem 1rem;
  margin: 0.5rem;
  margin-top: 0;
  background-color: var(--colour-dark);
  color: var(--colour-white);
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  display: none;
}

#chat-inquiry:hover {
  background-color: var(--colour-accent);
  color: var(--colour-white);
}

@media (max-width: 480px) {
  #chat-widget {
    width: calc(100% - 30px);
    right: 15px;
    bottom: 80px;
    height: 400px;
  }
  #chat-toggle {
    width: 48px;
    height: 48px;
  }
}