/* ================================
   CIDER PRESS EXPANDING NAV
   ================================ */
header#hhs-main-nav.cw-nav {
  box-shadow: 0 0px 8px rgba(0,0,0,0.15);  /* soft ambient shadow */
}

.hhs-nav-grid {
 margin-top: -9px !important; 
}

.hhs-header-logo {
 margin-top: -8px; 
}

#column-2 {
 padding-left: 80px; 
}

#column-3 {
 padding-left: 40px;
  padding-right: 30px;
}

.hhs-header-hat .container, .hhs-top-bar .container {
 padding-left: 15px !important;
  padding-right: 15px !important;
}

/* SOCIAL ICON STYLING */
.hhs-side-menu__footer svg {
    width: 30px !important;
    height: 30px !important;
    padding: 0px 10px 5px 0px !important;
}

.hhs-side-menu__footer {
 padding: 5px 0px !important;
  text-align: left !important;
}

/* Open state: panel can grow up to 90vh and scroll internally */
.cw-nav.is-open #cwInfo.cw-info {
  max-height: 100vh;          /* 👈 controls open height */
  overflow: auto;
  opacity: 1;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid #eee;
  height: 80vh;
}


/* Tunables */
:root {
  --cw-nav-collapsed-width: 480px;   /* collapsed card width */
  --cw-nav-open-width: 1400px;       /* expanded card width */
  --cw-nav-open-max-h: 100vh;         /* max height when open */
}

/* Vertically center the nav grid when the panel is collapsed */
header#hhs-main-nav.cw-nav:not(.is-open) .hhs-nav-grid {
  margin-top: auto;
  margin-bottom: auto;
}

/* Header as a flex column:
   row 1 = normal nav bar
   row 2 = info panel (#cwInfo) */
header#hhs-main-nav.cw-nav {
  display: flex;
  flex-direction: column;

  width: var(--cw-nav-collapsed-width);
  max-height: 50px;                  /* just enough for logo + nav */
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);

  margin: 15px 0 15px 15px;          /* your offsets */
  border-radius: 0;

  transition:
    width .35s ease,
    max-height .35s ease;
}

/* Expanded state: wider and taller */
header#hhs-main-nav.cw-nav.is-open {
  background: rgba(255, 255, 255, 1);
  width: var(--cw-nav-open-width);
  max-height: var(--cw-nav-open-max-h);
}

/* Make inner HubSpot container obey header width */
header#hhs-main-nav.cw-nav > .hhs-nav-grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Make info panel width match header, too */
header#hhs-main-nav.cw-nav > #cwInfo {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* -------------------------------
   INFO PANEL (EXPANDED CONTENT)
   ------------------------------- */

.cw-info {
  /* sits under .hhs-nav-grid inside header */
  padding: 24px 28px;
  border-top: 1px solid #eee;
  background: #ffffff;

  display: flex;
  flex-direction: column;
  gap: 24px;

  opacity: 0;
  pointer-events: none;
  max-height: 0;
  overflow: auto;

  transition:
    opacity .25s ease,
    max-height .35s ease;
}

/* When header is open, show panel */
.cw-nav.is-open .cw-info {
  opacity: 1;
  pointer-events: auto;
  max-height: 999px; /* outer header max-height actually clamps it */
}

/* 3-column body area */
.cw-info__body {
  display: grid;
  gap: 24px;
  flex: 1 1 auto; /* take remaining space above footer */
}

/* Footer pinned to bottom */
.cw-info__footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #000;
}

/* --------- Typography --------- */

.cw-info__title {
  margin: 0 0 14px;
  font-weight: 600;
  font-size: 18px;
}

.cw-info h5 {
  margin: 16px 0 8px;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .08em;
  color: #000;
}

.cw-info p,
.cw-info li {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.45;
}

.cw-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --------- Toggle link (Info / Close) --------- */

.cw-info-toggle {
  background: transparent;
  border: 0;
  padding-left: 12px;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  cursor: pointer;
  color: #000;
}

/* When panel is open, force toggle to black */
.cw-nav.is-open .cw-info-toggle {
  color: #9c7a3c !important;
}

/* Optional: keep your general header spacing tweaks */
.hhs-top-bar {
  margin-left: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-top: 4px !important;
  height: auto;              /* let content define */
}

/* LINK ARROW STYLING */

.cw-link-arrow {
  position: relative;
  padding-right: 1.25rem;   /* room for arrow */
  text-decoration: none;
  color: #b1945c;
  font-weight: 500;
}

/* Right arrow */
.cw-link-arrow::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-60%);
  font-size: 1.25em;
  transition: transform 0.2s ease;
}

/* Optional hover nudge */
.cw-link-arrow:hover::after {
  transform: translateY(-60%) translateX(3px);
}


/* ================================
   RESPONSIVE GRID LAYOUTS
   ================================ */

/* Desktop: 3 columns (first wider) */
@media (min-width: 1200px) {
  .cw-info__body {
    grid-template-columns: 1.6fr 1fr 1fr;  /* col 1 wider, col 2 & 3 normal */
  }
}

/* Tablet: 
   - Column 1 full width on first row
   - Columns 2 & 3 each 50% on second row
*/
@media (min-width: 768px) and (max-width: 1199px) {
  .cw-info__body {
    grid-template-columns: 1fr 1fr;
  }

  .cw-info__body > .cw-info__col:nth-child(1) {
    grid-column: 1 / -1;  /* span both columns */
  }

  .cw-info__body > .cw-info__col:nth-child(2) {
    grid-column: 1 / 2;   /* left half */
  }

  .cw-info__body > .cw-info__col:nth-child(3) {
    grid-column: 2 / 3;   /* right half */
  }
}

/* Mobile: single column */
@media (max-width: 767px) {
  header#hhs-main-nav.cw-nav,
  header#hhs-main-nav.cw-nav.is-open {
    width: calc(100% - 30px);      /* full width minus margins */
    max-width: 100%;
  }

  .cw-info {
    padding: 16px;
  }

  .cw-info__body {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cw-info__body > .cw-info__col {
    grid-column: 1 / -1;
  }
  
  #column-2 {
 padding-left: 0px; 
}

#column-3 {
 padding-left: 0px;
  padding-right: 0px;
}
  
  .cw-nav.is-open #cwInfo.cw-info {
  height: 100vh;
}
}

/* Keep CW header nav links in a single horizontal row on mobile */
@media (max-width: 767px) {
  header#hhs-main-nav.cw-nav .hhs-nav-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  header#hhs-main-nav.cw-nav .hhs-nav-links {
    display: flex;
    flex-direction: row;   /* override HubSpot's column */
    flex-wrap: nowrap;     /* don’t wrap underneath */
    gap: .4rem;           /* adjust spacing between WORK / STORE / INFO */
  }

  header#hhs-main-nav.cw-nav .hhs-nav-links > li {
    display: block;        /* each <li> just acts like an inline block in the row */
  }
}

@media (max-width: 850px) {
    .main-nav .sc-site-header__menu {
        display: block !important;
    }
}

@media (max-width: 920px) {
    .hhs-menu-toggle {
        display: none !important;
    }