/* header.css — The Red Bag Shop
   Drop this file into your site's /assets/ folder and link it as /assets/header.css
   Adjust --logo-size to change logo width.
*/

:root{
  --trb-red: #e3342a;
  --trb-muted: #8a2b24;
  --trb-logo-size: 140px; /* change to suit your layout */
  --trb-gap: 28px;
  --trb-max-width: 1400px;
}

/* Scoped header styles to avoid colliding with existing site styles */
.trb-header{
  max-width:var(--trb-max-width);
  margin:18px auto;
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:var(--trb-gap);
  justify-content:flex-start;
  box-sizing:border-box;
  background: transparent;
}

/* Logo */
.trb-header .trb-logo{
  width:var(--trb-logo-size);
  height:auto;
  flex:0 0 var(--trb-logo-size);
  display:block;
}

/* Brand block: two rows, right aligned on wide screens.
   Ensures the first row's container is at least 5-6 times the logo width */
.trb-header .trb-brand{
  flex:1 1 auto;
  /* reduce the forced minimum so text sits next to the logo on normal desktop widths */
  min-width: calc(var(--trb-logo-size) * 4);
  /* defensive fallback so it can shrink if the surrounding layout is tight */
  min-width: 0;
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  /* allow this block to shrink inside the header flex row if needed */
  flex-shrink: 1;
}

/* Main title: bold, comic-like, very prominent */
.trb-header .trb-brand h1{
  margin:0;
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
  font-weight:900;
  font-size: clamp(34px, 5.5vw, 84px);
  color:var(--trb-red);
  letter-spacing:3px;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  margin-right:6px;
}

/* Subtitle under the main title, smaller but also red and aligned right */
.trb-header .trb-brand .trb-subtitle{
  margin-top:8px;
  font-size:24px;
  color:var(--trb-red);
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-right:4px;
}

/* Responsive tweaks */
@media (max-width:1100px){
  .trb-header .trb-brand{ min-width: calc(var(--trb-logo-size) * 4); }
  .trb-header .trb-brand h1{ font-size: clamp(30px, 6.5vw, 64px); white-space:normal; }
}

@media (max-width:720px){
  .trb-header{
    flex-direction:column;
    gap:12px;
    text-align:center;
    padding:12px;
  }
  .trb-header .trb-logo{ width:140px; flex:0 0 140px; }
  .trb-header .trb-brand{ min-width:0; align-items:center; text-align:center; }
  .trb-header .trb-brand h1{ font-size:36px; white-space:normal; }
  .trb-header .trb-brand .trb-subtitle{ font-size:14px; }
}

/* subtle separator below header */
.trb-header::after{
  content:"";
  display:block;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
  margin-top:18px;
}

/* Make the anchor that wraps logo + brand layout children in a row */
.trb-brand-link{
  display: flex;
  align-items: center;
  gap: 18px;               /* space between logo and text */
  text-decoration: none;   /* remove underline */
  color: inherit;
  background: transparent;
  /* let the link grow but not collapse the logo; keeps predictable layout */
  flex: 0 1 auto;
}

/* Ensure the logo doesn't shrink away */
.trb-brand-link .trb-logo{
  flex: 0 0 var(--trb-logo-size);
  width: var(--trb-logo-size);
  height: auto;
  display:block;
}

/* Keep the brand text stacked and aligned to the right (or center on small screens) */
.trb-brand{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

/* Optional: avoid the brand title wrapping onto multiple lines in odd narrow states */
.trb-brand h1{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70vw;
}

/* Mobile tweak: when header stacks vertically, center the brand */
@media (max-width:720px){
  .trb-brand { align-items: center; text-align: center; }
  .trb-brand h1 { white-space: normal; }
}