/* logo.css */

:root {
  /* Your provided color palette */
  --beanie-orange: #AE480B;
  --text-shadow-color: #333333;
  --bg-color: #FFFFFF;
  --dog-fur: #322719;
  --sunglass-gold: #D69D58;
  
  /* Font settings */
  --logo-font: 'Georgia', 'Times New Roman', Times, serif; /* Clear, solid serif */
  --logo-text-color: #FFFFFF;
}

body {
  background-color: var(--bg-color);
  margin: 0;
  font-family: var(--logo-font);
}

/* Header Centering */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  background-color: var(--bg-color);
}

/* Logo Container: Max 200px wide, shrinks below that */
.logo-container {
  width: 100%;
  max-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Space between dog and text if using HTML elements */
}

/* SCENARIO A: If your logo is a single image */
.logo-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* SCENARIO B: If your logo is built with HTML text and an image */
.logo-container .logo-dog {
  width: 30%; /* Adjust based on your image */
  height: auto;
  border-radius: 50%; /* If the dog image is circular */
}

.logo-container .logo-text {
  font-family: var(--logo-font);
  font-size: clamp(0.8rem, 5vw, 1.5rem); /* Shrinks fluidly below 200px */
  font-weight: 900;
  color: var(--logo-text-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  white-space: nowrap; /* Keeps text on one line */
  
  /* Approximating the 3D drop shadow effect */
  text-shadow: 
    1px 1px 0px var(--text-shadow-color),
    2px 2px 0px var(--text-shadow-color),
    3px 3px 0px var(--text-shadow-color);
}