/* ==========================================================================
   Theme-aware image toggling
   (Light is default when no [data-theme] attribute is set)
   ========================================================================== */

[data-theme="dark"]  .theme-light { display: none; }
[data-theme="dark"]  .theme-dark  { display: block; }
[data-theme="light"] .theme-dark  { display: none; }
[data-theme="light"] .theme-light { display: block; }

/* ==========================================================================
   General layout & utilities
   ========================================================================== */

.header-icon {
  padding-top: 5px;
}

.full-width-insets {
  padding-left: 5px;
  padding-right: 10px;     /* tighter defaults for mobile */
}

.center {
  text-align: center;
}

.left {
  float: left;
}

.right {
  float: right;
}

a {
  text-decoration: none;
}

button {
  margin-bottom: 10px;
}

/* ==========================================================================
   SVG theme icons (sun/moon) – assuming these are used in toggle buttons
   ========================================================================== */

svg#sun {
  color: white;
}

svg#sun path,
svg#sun circle {
  transform-origin: center;
  transition: transform 260ms cubic-bezier(0, 0, 0.5, 1),
              d 240ms cubic-bezier(0, 0, 0.5, 1);
}

svg#moon {
  color: black;
}

svg#moon circle {
  transform: scale(1.4);
  transition: transform 260ms cubic-bezier(0, 0, 0, 1.25) 0s;
}

svg#moon path {
  transform: scale(0.75);
  transition: transform 260ms cubic-bezier(0, 0, 0, 1.25) 0s;
}

svg#moon :first-child path {
  transition-delay: 160ms;
  transition-timing-function: cubic-bezier(0, 0, 0, 1.25);
}

/* ==========================================================================
   Images, badges, typography & content blocks
   ========================================================================== */

img.badge {
  max-height: 65px;
  height: auto;
  width: auto;
  margin: 10px;
}

.pre-order {
  display: block;
  margin: 30px 0 20px;
}

.byline {
  display: inline-block;
  font-size: 0.75em;
  margin: 0 15px;
}

.media {
  margin-top: 45px;
}

footer {
  text-align: center;
}

footer a {
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Media Queries – Mobile-first
   Base styles above are for small screens; enhance progressively
   ========================================================================== */

/* Tablets & up (≈ portrait iPad, landscape phones) */
@media only screen and (min-width: 768px) {
  .full-width-insets {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Add tablet-specific tweaks here if needed, e.g. larger badges */
  img.badge {
    max-height: 80px;
  }
}

/* Small laptops / large tablets */
@media only screen and (min-width: 1024px) {
  /* Example: more breathing room, centered content blocks if desired */
  .media {
    margin-top: 60px;
  }

  .pre-order {
    margin: 40px 0 30px;
  }
}

/* Desktops & larger screens – only add if layout needs it */
@media only screen and (min-width: 1200px) {
  /* e.g. constrain max-width of main content if you have .container class */
  /* .full-width-insets { max-width: 1140px; margin: 0 auto; } */
}