@import url("./tokens.css");

:where(.dag-container,.container,.site-container,.wrap){
  width:100%;
  max-width:var(--dag-container);
  margin-inline:auto;
  padding-inline:var(--dag-gutter);
}

.site-main{min-height:60vh}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(var(--color-paper-rgb),.72);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--dag-border);
}

.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(var(--color-link-rgb),.18), transparent 55%),
    radial-gradient(700px 240px at 95% 0%, rgba(var(--color-success-rgb),.12), transparent 58%);
  pointer-events:none;
  opacity:.9;
}

.site-header::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--color-link-rgb),.35), transparent);
  pointer-events:none;
}

.site-header__inner{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  min-height:86px;
  padding-block:12px;
}

.site-branding{flex:0 0 auto; min-width:0}
.site-branding__home{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  min-width:0;
}

.site-branding__logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:18px;
  background:rgba(var(--color-overlay-rgb),.06);
  border:1px solid var(--dag-border);
  flex:0 0 auto;
}

.site-branding__logo-img{
  display:block;
  width:auto;
  height:auto;
  max-height:clamp(40px, 3.2vw, 60px);
  max-width:clamp(140px, 14vw, 240px);
  object-fit:contain;
}

.site-branding__logo-fallback{
  width:18px;height:18px;border-radius:7px;
  background:rgba(var(--color-link-rgb),.7);
  box-shadow:0 10px 26px rgba(var(--color-link-rgb),.18);
}

.site-branding__name{
  font-family:var(--dag-font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(14px, 12px + .55vw, 18px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:min(38vw, 420px);
}

.site-header__nav{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.site-header__menu{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.site-header__menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;
  color:var(--dag-text);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  border:1px solid transparent;
  background:rgba(var(--color-overlay-rgb),.03);
  white-space:nowrap;
}

.site-header__menu a:hover{
  background:rgba(var(--color-overlay-rgb),.06);
  border-color:rgba(var(--color-overlay-rgb),.14);
}

.site-header__menu .is-current > a,
.site-header__menu a[aria-current="page"]{
  background:rgba(var(--color-link-rgb),.12);
  border-color:rgba(var(--color-link-rgb),.26);
}

.site-header__actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.site-header__inventory{
  min-height:42px;
  padding-inline:16px;
  border-radius:999px;
  white-space:nowrap;
}

.site-burger{ display:inline-flex; }

@media (max-width: 980px){
  .site-header__inner{
    min-height:74px;
    padding-block:10px;
    gap:12px;
  }

  .site-header__nav{
    display:none;
  }

  .site-branding__name{
    max-width:52vw;
  }
}

@media (min-width: 981px){
  .site-burger{ display:none; }
}

@media (max-width: 520px){
  .site-branding__logo{
    padding:7px 10px;
    border-radius:16px;
  }
  .site-branding__logo-img{
    max-height:46px;
    max-width:160px;
  }
  .site-branding__name{
    display:none; 
  }
}

.site-menu,
.site-menu ul,
.menu,
.menu ul,
.site-offcanvas__menu,
.site-offcanvas__menu ul,
.site-header__menu,
.site-header__menu ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

.site-offcanvas__cta{
  padding:12px 16px 0;
}

.site-offcanvas__contact{
  padding:14px 16px 18px;
  border-top:1px solid rgba(var(--color-overlay-rgb),.08);
}

.site-offcanvas__contact-title{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--dag-muted);
  margin-bottom:10px;
}

.site-offcanvas__pills{
  display:grid;
  gap:8px;
}

.site-pill{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--dag-border);
  background:rgba(var(--color-overlay-rgb),.06);
  text-decoration:none;
  color:inherit;
  white-space:nowrap;
  width:100%;
  max-width:100%;
}

.site-pill__k{
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dag-muted);
  flex:0 0 auto;
}

.site-pill__v{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
}

.site-pill:hover{
  background:rgba(var(--color-overlay-rgb),.08);
  border-color:rgba(var(--color-overlay-rgb),.18);
}

.site-footer{
  border-top:1px solid var(--dag-border);
  background:rgba(var(--color-paper-rgb),.65);
}

.site-footer__inner{
  padding-block:clamp(28px, 4vw, 44px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(18px, 2vw, 26px);
}

.footer-brand{
  font-family:var(--dag-font-display);
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:1.05rem;
  margin-bottom:10px;
}

.footer-contact-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--dag-text);
}

.footer-label{color:var(--dag-muted);font-weight:700;margin-right:6px}

.site-footer__legal{
  display:flex;
  justify-content:center;
}

.footer-legal{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.footer-legal a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--dag-border);
  background:rgba(var(--color-overlay-rgb),.06);
  color:var(--dag-text);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:12px;
}

.footer-legal a:hover{
  background:rgba(var(--color-overlay-rgb),.08);
  border-color:rgba(var(--color-overlay-rgb),.18);
}

.site-footer__copyright{
  color:var(--dag-muted);
  font-size:.95rem;
  text-align:center;
}

@media (max-width: 520px){
  .site-branding__home--text .site-branding__name{
    display:inline;
  }
}

@media (max-width: 520px){
  
  .site-branding{ flex: 1 1 auto; min-width: 0; }
  .site-branding__home{ min-width: 0; }

  
  .site-header__inner{ gap: 10px; }

  
  .site-branding__logo{ padding: 6px 8px; }
  .site-branding__logo-img{
    max-width: 140px;
    max-height: 42px;
  }

  
  .site-header__actions{ gap: 8px; }
  .site-header__inventory{
    padding-inline: 12px;
    min-height: 40px;
    font-size: 12px;
  }
}

@media (max-width: 380px){
  .site-burger__label{ display: none; }
  .site-header__inventory{
    padding-inline: 10px;
    font-size: 11px;
  }
}

.site-offcanvas__panel{
  width: min(92vw, 420px);
  max-width: 92vw;
  box-sizing: border-box;
}

.site-offcanvas .site-pill{
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  white-space: normal; 
}

.site-offcanvas .site-pill__v{
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-offcanvas .site-pill__k{
  flex: 0 0 auto;
}

.site-offcanvas .site-pill--address .site-pill__v{
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.site-offcanvas .site-offcanvas__menu a{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   Mobile footer redesign
   ───────────────────────────────────────── */

.site-footer {
	padding: 32px 0 24px;
	background: #0f172a;
	color: #cbd5e1;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 32px;
	padding: 0 24px;
}

.site-footer__contacts {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer .footer-brand {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 8px;
}

.site-footer .footer-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.site-footer .footer-contact-list li {
	font-size: 14px;
	line-height: 1.5;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: baseline;
}

.site-footer .footer-label {
	color: #94a3b8;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	min-width: 70px;
}

.site-footer .footer-contact-list a {
	color: #f1f5f9;
	text-decoration: none;
	border-bottom: 1px dashed #475569;
	transition: color 0.15s, border-color 0.15s;
}

.site-footer .footer-contact-list a:hover,
.site-footer .footer-contact-list a:focus {
	color: #fff;
	border-bottom-color: #fff;
}

.site-footer__legal {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}

.site-footer .footer-legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.site-footer .footer-legal a {
	color: #94a3b8;
	text-decoration: none;
	font-size: 13px;
	transition: color 0.15s;
}

.site-footer .footer-legal a:hover {
	color: #fff;
}

.site-footer__copyright {
	grid-column: 1 / -1;
	border-top: 1px solid #1e293b;
	padding-top: 16px;
	margin-top: 16px;
	color: #64748b;
	font-size: 12px;
	text-align: center;
}

/* Footer hours block */
.footer-hours {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.footer-hours__title {
	color: #94a3b8;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

.footer-hours__row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: #cbd5e1;
}

.footer-hours__day {
	font-weight: 500;
}

.footer-hours__time {
	color: #f1f5f9;
}

.footer-hours__row.is-closed .footer-hours__time {
	color: #f87171;
}

/* Footer mobile */
@media (max-width: 1024px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 0 18px;
	}
	.site-footer__legal {
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {
	.site-footer {
		padding: 24px 0 calc(24px + var(--mobile-cta-height, 0px));
	}
	.site-footer .footer-contact-list li {
		flex-direction: column;
		gap: 2px;
	}
	.site-footer .footer-label {
		min-width: 0;
	}
}

/* ─────────────────────────────────────────
   Header mobile phone CTA bar
   ───────────────────────────────────────── */

.site-header__mobile-phone {
	display: none;
}

@media (max-width: 980px) {
	.site-header__mobile-phone {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
		color: #fff;
		padding: 10px 14px;
		text-decoration: none;
		font-weight: 600;
		font-size: 14px;
		min-height: var(--tap-min, 44px);
		box-sizing: border-box;
	}
	.site-header__mobile-phone:hover,
	.site-header__mobile-phone:focus,
	.site-header__mobile-phone:active {
		color: #fff;
		background: #1e3a8a;
	}
	.site-header__mobile-phone__label {
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		opacity: 0.85;
	}
	.site-header__mobile-phone__number {
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0.3px;
	}
}

/* Site-pill polish for mobile */
@media (max-width: 980px) {
	.site-pill {
		min-height: var(--tap-min, 44px);
		padding: 8px 12px;
	}
	.site-pill--phone {
		background: #1e40af;
		color: #fff;
	}
	.site-pill--phone .site-pill__k,
	.site-pill--phone .site-pill__v {
		color: #fff;
	}
}