@import url("../country-guide-base.css");

.canada-article-page {
  --article-accent:#c3484d;
  --article-accent-light:#f7dfe1;
  --article-accent-dark:#893237;
  --article-tint:#fffafa;
  margin:0;
}

.canada-article-page .article-hero.notes {
  --article-accent:#c3484d;
  --article-accent-light:#f7dfe1;
  --article-accent-dark:#893237;
}

.canada-article-page .article-hero.tax {
  --article-accent:#d29b28;
  --article-accent-light:#fff0bd;
  --article-accent-dark:#805b10;
}

.canada-article-page .article-hero.cards {
  --article-accent:#27827c;
  --article-accent-light:#d9f2ef;
  --article-accent-dark:#185752;
}

.canada-article-page .article-hero.transit {
  --article-accent:#3578a8;
  --article-accent-light:#dcecf7;
  --article-accent-dark:#234f70;
}

.canada-article-page .article-hero.tipping {
  --article-accent:#795a95;
  --article-accent-light:#ece3f4;
  --article-accent-dark:#513c65;
}

.canada-coin-board,
.canada-tax-map,
.canada-payment-split,
.canada-city-grid,
.canada-tip-grid {
  display:grid;
  gap:14px;
  margin:28px 0;
  padding:20px;
  border:3px solid var(--ink);
  border-radius:6px;
}

.canada-coin-board {
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:linear-gradient(145deg,#f7dfe1,#fff 48%,#d9f2ef);
  box-shadow:5px 6px 0 #893237;
}

.canada-coin-board > span,
.canada-tax-map > span,
.canada-payment-split > div,
.canada-tip-grid > span {
  min-width:0;
  padding:16px 10px;
  border:3px solid var(--ink);
  border-radius:5px;
  background:#fff;
  box-shadow:3px 4px 0 var(--ink);
  text-align:center;
}

.canada-coin-board b,
.canada-coin-board small,
.canada-tax-map strong,
.canada-tax-map small,
.canada-payment-split strong,
.canada-payment-split span,
.canada-tip-grid strong,
.canada-tip-grid small {
  display:block;
}

.canada-coin-board b,
.canada-tax-map strong,
.canada-payment-split strong,
.canada-tip-grid strong {
  font-size:1.05rem;
}

.canada-coin-board small,
.canada-tax-map small,
.canada-payment-split span,
.canada-tip-grid small {
  margin-top:5px;
  color:var(--muted);
  font-weight:750;
}

.canada-tax-map {
  grid-template-columns:repeat(5,minmax(0,1fr));
  background:linear-gradient(145deg,#fff0bd,#fff 52%,#f7dfe1);
  box-shadow:5px 6px 0 #805b10;
}

.canada-tax-map > span:nth-child(1) strong {
  color:#805b10;
}

.canada-tax-map > span:nth-child(2) strong {
  color:#893237;
}

.canada-tax-map > span:nth-child(3) strong {
  color:#185752;
}

.canada-tax-map > span:nth-child(4) strong {
  color:#513c65;
}

.canada-tax-map > span:nth-child(5) strong {
  color:#234f70;
}

.canada-checkout-slip,
.canada-tip-slip {
  width:min(100%,620px);
  margin:28px auto;
  padding:22px;
  border:3px solid var(--ink);
  border-radius:5px;
  background:linear-gradient(150deg,#fff,#fff0bd);
  box-shadow:5px 6px 0 #805b10;
}

.canada-checkout-slip > span,
.canada-tip-slip > span {
  display:block;
  font-size:.78rem;
  font-weight:950;
}

.canada-checkout-slip > strong,
.canada-tip-slip > strong {
  display:block;
  margin:7px 0 16px;
  padding:9px;
  border:3px double var(--ink);
  text-align:center;
  font-size:clamp(1.35rem,4vw,2.1rem);
}

.canada-checkout-slip > strong {
  color:#805b10;
}

.canada-tip-slip > strong {
  color:#513c65;
}

.canada-checkout-slip div,
.canada-tip-slip div {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:9px 0;
  border-bottom:2px dotted rgba(22,22,22,.32);
}

.canada-checkout-slip div:last-child,
.canada-tip-slip div:last-child {
  border-bottom:0;
}

.canada-payment-split {
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:linear-gradient(145deg,#d9f2ef,#fff 52%,#fff0bd);
  box-shadow:5px 6px 0 #185752;
}

.canada-city-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:linear-gradient(145deg,#dcecf7,#fff 50%,#f7dfe1);
  box-shadow:5px 6px 0 #234f70;
}

.canada-city-grid > div {
  min-width:0;
  padding:18px 14px;
  border:3px solid var(--ink);
  border-radius:5px;
  background:#fff;
  box-shadow:3px 4px 0 var(--ink);
}

.canada-city-grid b {
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  margin-bottom:14px;
  border:3px solid var(--ink);
  border-radius:50%;
  color:#fff;
  background:#3578a8;
  box-shadow:2px 3px 0 var(--ink);
}

.canada-city-grid strong,
.canada-city-grid span,
.canada-city-grid small {
  display:block;
}

.canada-city-grid span {
  min-height:76px;
  margin-top:7px;
  color:var(--muted);
  font-weight:700;
}

.canada-city-grid small {
  margin-top:14px;
  padding-top:10px;
  border-top:2px dotted rgba(22,22,22,.3);
  font-weight:900;
}

.canada-tip-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:linear-gradient(145deg,#ece3f4,#fff 52%,#fff0bd);
  box-shadow:5px 6px 0 #513c65;
}

.canada-article-page .article-money-explorer {
  background:linear-gradient(145deg,#fffafa,#fff 52%,#edf7f6);
}

@media (max-width:780px) {
  .canada-tax-map {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .canada-tax-map > span:last-child {
    grid-column:1 / -1;
  }
}

@media (max-width:700px) {
  .canada-coin-board,
  .canada-payment-split,
  .canada-city-grid,
  .canada-tip-grid {
    grid-template-columns:1fr;
  }

  .canada-city-grid span {
    min-height:0;
  }

  .canada-checkout-slip div,
  .canada-tip-slip div {
    display:grid;
    gap:3px;
  }
}