/* Custom table styling */
table {
  border-collapse: collapse;
  width: 100%;
}

table th,
table td {
  border: 1px solid #dee2e6;
  padding: 0.25rem;
  text-align: left;
}

table th {
  background-color: #f8f9fa;
  font-weight: 600;
}

table tbody tr:hover {
  background-color: #f8f9fa;
}

/* Copse font for Skate pages only */
@font-face {
  font-family: "Copse";
  src: url("/fonts/Copse-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Skate page hooks: keep styles scoped so future recolor work is isolated. */
body.section-skate .blog-single h2.display-1,
body.product-skate .blog-single h2.display-1 {
  font-size: clamp(2rem, 4.5vw, 3.75rem);
}

body.section-skate .blog-content,
body.product-skate .blog-content {
  max-width: 960px;
}

/* RollerCon palette for Skate pages only */
body.section-skate,
body.product-skate {
  --skate-bg: #201104;
  --skate-text: #a2802b;
  --skate-head: #c09733;
  --skate-emphasis: #f5bd00;
  --bs-primary-rgb: 192, 151, 51;
  --bs-link-color-rgb: 245, 189, 0;
  --bs-link-hover-color-rgb: 255, 211, 74;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  background-color: var(--skate-bg);
  color: var(--skate-text);
}

body.section-skate .navbar,
body.product-skate .navbar,
body.section-skate .footer,
body.product-skate .footer,
body.section-skate .bg-light,
body.product-skate .bg-light,
body.section-skate .bg-blue-light,
body.product-skate .bg-blue-light {
  background-color: #201104 !important;
}

body.section-skate h1,
body.product-skate h1,
body.section-skate h2,
body.product-skate h2,
body.section-skate h3,
body.product-skate h3,
body.section-skate h4,
body.product-skate h4,
body.section-skate h5,
body.product-skate h5,
body.section-skate h6,
body.product-skate h6,
body.section-skate .text-primary,
body.product-skate .text-primary {
  font-family: "Copse", Georgia, "Times New Roman", serif;
  color: var(--skate-head) !important;
}

body.section-skate,
body.product-skate,
body.section-skate p,
body.product-skate p,
body.section-skate li,
body.product-skate li,
body.section-skate .text-black-61,
body.product-skate .text-black-61,
body.section-skate .text-black-50,
body.product-skate .text-black-50 {
  color: var(--skate-text) !important;
}

body.section-skate strong,
body.product-skate strong,
body.section-skate b,
body.product-skate b,
body.section-skate em,
body.product-skate em,
body.section-skate .text-danger,
body.product-skate .text-danger,
body.section-skate a,
body.product-skate a {
  color: var(--skate-emphasis) !important;
}

body.section-skate .text-danger,
body.product-skate .text-danger {
  font-family: "Copse", Georgia, "Times New Roman", serif;
}

body.section-skate strong,
body.product-skate strong {
  font-family: "Copse", Georgia, "Times New Roman", serif;
}

body.section-skate a:hover,
body.product-skate a:hover,
body.section-skate a:focus,
body.product-skate a:focus {
  color: #ffcf57 !important;
}

body.section-skate .btn-primary,
body.product-skate .btn-primary {
  background-color: var(--skate-head) !important;
  border-color: var(--skate-head) !important;
  color: var(--skate-bg) !important;
}

body.section-skate .btn-primary:hover,
body.product-skate .btn-primary:hover,
body.section-skate .btn-primary:focus,
body.product-skate .btn-primary:focus {
  background-color: var(--skate-emphasis) !important;
  border-color: var(--skate-emphasis) !important;
  color: var(--skate-bg) !important;
}

body.section-skate .btn-outline-primary,
body.product-skate .btn-outline-primary {
  border-color: var(--skate-emphasis) !important;
  color: var(--skate-emphasis) !important;
}

body.section-skate .btn-outline-primary:hover,
body.product-skate .btn-outline-primary:hover,
body.section-skate .btn-outline-primary:focus,
body.product-skate .btn-outline-primary:focus {
  background-color: var(--skate-emphasis) !important;
  color: var(--skate-bg) !important;
}

/* Skate-only navbar hamburger colors for narrow layouts */
body.section-skate .navbar-light .navbar-toggler,
body.product-skate .navbar-light .navbar-toggler {
  border-color: var(--skate-head) !important;
  color: var(--skate-emphasis) !important;
}

body.section-skate .navbar-light .navbar-toggler-icon,
body.product-skate .navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28245%2C 189%2C 0%2C 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

body.section-skate hr,
body.product-skate hr,
body.section-skate .border,
body.product-skate .border,
body.section-skate table th,
body.product-skate table th,
body.section-skate table td,
body.product-skate table td {
  border-color: #6b5322 !important;
}

body.section-skate table th,
body.product-skate table th {
  background-color: #3b2409;
}

/* Shared home hero split panels: subtle click affordance */
.hero-top-split-panel {
  display: block;
}

@media (min-width: 770px) {
  .chooser-top-split-col {
    flex: 0 0 auto;
    width: 50%;
  }
}

.chooser-top-split-prompt {
  margin-top: -0.75rem;
}

.hero-top-split-media {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.hero-top-split-media img {
  opacity: 0.5;
  transition: transform 220ms ease, opacity 220ms ease;
}

.hero-top-split-panel:hover .hero-top-split-media,
.hero-top-split-panel:focus-visible .hero-top-split-media {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.hero-top-split-panel:hover .hero-top-split-media img,
.hero-top-split-panel:focus-visible .hero-top-split-media img {
  transform: scale(1.01);
  opacity: 0.8;
}

.hero-top-split-panel:hover .hero-top-split-caption,
.hero-top-split-panel:focus-visible .hero-top-split-caption {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.08em;
}

.hero-top-split-caption .chooser-word-play {
  color: #f5bd00;
  text-shadow: 1px 1px 1px rgba(32, 17, 4, 0.7);
}

.hero-top-split-caption .chooser-word-work {
  color: #ff87b0;
  text-shadow: 1px 1px 1px rgba(32, 17, 4, 0.7);
}

.hero-top-split-overlay {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
font-size: clamp(2.1rem, 2vw, 3.4rem);
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.hero-top-split-overlay-skate {
  background: rgba(32, 17, 4, 0.72);
  color: #f5bd00;
  font-family: "Copse", Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(32, 17, 4, 0.35);
}

.hero-top-split-overlay-slate {
  background: rgba(236, 232, 247, 0.82);
  color: #7c76bb;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.4);
}

.chooser-signin-skate {
  border-color: #201104 !important;
  color: #201104 !important;
}

.chooser-signin-skate:hover,
.chooser-signin-skate:focus,
.chooser-signin-skate:active {
  background-color: #201104 !important;
  border-color: #201104 !important;
  color: #f5bd00 !important;
}