/* =============================================================================
   RookiDroid theme — Design tokens and armour plate details
   ============================================================================= */

/* ── Design Tokens ─────────────────────────────────────────────────────────────
   Mobile suit theme, after the RX-78-2 restyle of Hexapod Link: white armour
   plates framed in navy, square corners, hard offset shadows and chamfered
   corners on the controls. RookiDroid purple takes the place of Federation
   blue as the accent; red and V-fin yellow stay on as trim.
   ── */
:root {
  --rd-primary:        #9c27b0;
  --rd-primary-dark:   #7b1fa2;
  --rd-primary-active: #6a1b9a;
  --rd-primary-rgb:    156, 39, 176;
  --rd-primary-light:  #ce93d8;
  --rd-primary-subtle: #f3e5f5;
  --rd-primary-ghost:  #faf5fb;
  --rd-surface:        #ffffff;
  --rd-surface-alt:    #f3f5f9;   /* White armour */
  --rd-panel:          #dde3ec;   /* Panel-line grey */
  --rd-navy:           #1b2a4a;   /* Navy frame */
  --rd-outline:        #0f1a30;   /* Heavy outline on the solid buttons */
  --rd-red:            #d62828;   /* Chest and shield red */
  --rd-yellow:         #f2b705;   /* V-fin yellow */
  --rd-text:           #0f1a30;
  --rd-text-secondary: #4a5875;
  --rd-text-muted:     #7a879f;
  --rd-border:         #a9b6cc;
  --rd-border-light:   #c9d2e0;
  --rd-success:        #16a34a;
  --rd-danger:         #d62828;
  --rd-radius-sm:      0;
  --rd-radius-md:      0;
  --rd-radius-lg:      0;
  --rd-radius-xl:      0;
  --rd-shadow-sm:      3px 3px 0 rgba(15,26,48,.12);
  --rd-shadow-md:      4px 4px 0 rgba(15,26,48,.18);
  --rd-shadow-lg:      6px 6px 0 rgba(15,26,48,.24);
  --rd-shadow-hard:    4px 4px 0 rgba(15,26,48,.18);
  --rd-shadow-hover:   6px 6px 0 rgba(15,26,48,.24);
  /* Focus ring rather than a soft purple bloom. */
  --rd-shadow-glow:    0 0 0 2px rgba(156,39,176,.25);
  --rd-accent:         #e040fb;

  /* Mecha corners: the top-right and bottom-left cut off at 45 degrees. */
  --rd-chamfer:        8px;
  --rd-chamfer-clip:   polygon(
    0 0,
    calc(100% - var(--rd-chamfer)) 0,
    100% var(--rd-chamfer),
    100% 100%,
    var(--rd-chamfer) 100%,
    0 calc(100% - var(--rd-chamfer))
  );

  /* Along the top edge of every plate: a red chip, purple, then yellow vent
     slats at the right-hand end. */
  --rd-trim:
    repeating-linear-gradient(90deg, var(--rd-yellow) 0 5px, transparent 5px 9px)
      right 6px top / 32px 100% no-repeat,
    linear-gradient(90deg,
      var(--rd-red) 0 28px,
      var(--rd-primary) 28px calc(100% - 44px),
      transparent calc(100% - 44px));

  /* Chest trim along the bottom of the heroes: a red block, then yellow vent
     slats on purple. */
  --rd-chest-trim:
    linear-gradient(90deg, var(--rd-red) 0 160px, transparent 160px),
    repeating-linear-gradient(90deg, var(--rd-yellow) 0 14px, transparent 14px 22px),
    var(--rd-primary);

  /* Faint navy panel lines behind the heroes. */
  --rd-panel-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0 48 H40 L56 32 H96 M48 0 V20 M48 96 V76 M56 32 V0' stroke='%231b2a4a' stroke-width='1' fill='none'/%3E%3C/svg%3E");

  /* Stencilled unit marking in the corner of the larger plates. */
  --rd-marking:        'RD-01';

  --rd-transition:     .15s cubic-bezier(.4,0,.2,1);
  --rd-font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --rd-font-display:   'Space Grotesk', 'Inter', system-ui, sans-serif;
  --rd-font-mono:      'IBM Plex Mono', 'Courier New', monospace;
}

/* ── Armour plate details ─────────────────────────────────────────────────────
   The larger plates carry a trim strip along the top edge and, in the
   bottom-right corner, a navy reinforcing plate with a small stencilled
   marking. Both are pseudo-elements, so no markup knows about them; the
   marking sits inside each card's bottom padding, clear of its content. */
.rd-product-card::before,
.rd-shop-grid .product-card::before,
.product-card::before,
.cat-card::before,
.card::before,
.servo-group::before,
.hero-res-card::before,
.part-card::before,
.config-item::before,
.home-hero__float-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 3;
  pointer-events: none;
  background: var(--rd-trim);
}

.rd-product-card::after,
.rd-shop-grid .product-card::after,
.product-card::after,
.cat-card::after,
.card::after,
.servo-group::after {
  content: var(--rd-marking);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 20px 3px 0;
  font-family: var(--rd-font-mono);
  font-size: .55rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.5px;
  color: rgba(74, 88, 117, .65);
  pointer-events: none;
  background: linear-gradient(135deg, transparent 50%, var(--rd-navy) 50%)
    right bottom / 14px 14px no-repeat;
}

/* Tricolour underline: purple, then a red and a yellow chip at the end. */
.rd-shop-banner__highlight,
.guide-hero-highlight,
.home-hero__title span {
  color: var(--rd-primary) !important;
  padding-bottom: 6px;
  background: linear-gradient(90deg,
    var(--rd-primary) 0 calc(100% - 56px),
    var(--rd-red) calc(100% - 56px) calc(100% - 24px),
    var(--rd-yellow) calc(100% - 24px)) bottom / 100% 4px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


.wc-block-grid__product-rating .star-rating span:before,
.wc-block-grid__product-rating .wc-block-grid__product-rating__stars span:before {
  color: #ffb100;
}

/* =============================================================================
   RookiDroid theme — Base
   Reset, typography, page layout, forms and WordPress / WooCommerce basics.
   This is what Neve used to provide; everything else builds on it.
   ============================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--rd-surface);
  color: var(--rd-text);
  font-family: var(--rd-font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, video, svg, iframe { max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  font-family: var(--rd-font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: inherit;   /* dark sections (the purple gadgets box) set white on the container */
}
h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }
h5, h6 { font-size: 1rem; }

p, ul, ol, dl, blockquote, figure, table, pre { margin: 0 0 1.2em; }
ul, ol { padding-left: 1.4em; }

a {
  color: var(--rd-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--rd-transition);
}
a:hover { color: var(--rd-primary-dark); }

:focus-visible {
  outline: 2px solid var(--rd-primary);
  outline-offset: 2px;
}

hr { border: 0; border-top: 2px solid var(--rd-border-light); margin: 2em 0; }

blockquote {
  padding: 12px 20px;
  border-left: 4px solid var(--rd-primary);
  background: var(--rd-primary-ghost);
}

code, kbd, pre, samp { font-family: var(--rd-font-mono); font-size: .9em; }
pre {
  padding: 16px;
  overflow-x: auto;
  background: var(--rd-surface-alt);
  border: 2px solid var(--rd-border-light);
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--rd-border-light); text-align: left; }
th { font-family: var(--rd-font-display); font-weight: 600; }

/* ── Forms ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  max-width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: .95rem;
  color: var(--rd-text);
  background: var(--rd-surface);
  border: 2px solid var(--rd-border);
  border-radius: 0;
  transition: border-color var(--rd-transition), box-shadow var(--rd-transition);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--rd-primary);
  box-shadow: var(--rd-shadow-glow);
}
label { font-weight: 600; font-size: .9rem; }

/* Form submits and WooCommerce's .button: the chamfered purple plate. Bare
   <button>s are left alone; the components style their own. */
.search-submit,
.woocommerce-product-search button,
input[type="submit"],
input[type="button"],
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  --rd-chamfer: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  font-family: var(--rd-font-body);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: var(--rd-primary);
  border: 2px solid var(--rd-outline);
  border-radius: 0;
  clip-path: var(--rd-chamfer-clip);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--rd-transition), transform var(--rd-transition);
}
.search-submit:hover,
.woocommerce-product-search button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  color: #fff;
  background: var(--rd-primary-dark);
  transform: translate(-1px, -1px);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--rd-primary);
  color: #fff;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--rd-primary-dark);
  color: #fff;
}
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce a.button.disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ── Accessibility helpers ── */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  width: auto;
  height: auto;
  padding: 10px 16px;
  clip: auto;
  background: var(--rd-surface);
  border: 2px solid var(--rd-navy);
  color: var(--rd-navy);
  font-weight: 700;
}

/* ── Page layout ── */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;   /* the 100vw full-bleed heroes never cause a side scroll */
}
.site-main { flex: 1 0 auto; }

.rd-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.rd-container--narrow { max-width: 800px; }
/* Pages match the width Neve gave them, so pasted layouts (the evolution
   timeline) keep their room. */
.rd-container--page { max-width: 1170px; }

.rd-content-area { padding: 56px 0 72px; }

/* Full-width pages (homepage, build guides): the content owns the layout. */
.rd-full-width .rd-content-area { padding: 0; }
.rd-full-width .entry-content > *:last-child { margin-bottom: 0; }

.rd-container--page .entry-content > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote) {
  max-width: 760px;
}

/* Pages set to the "Wide" template (cart, checkout). */
.rd-wide .rd-container--page { max-width: 1240px; }

/* ── Entries ── */
.entry-header { margin-bottom: 28px; }
.entry-title {
  margin: 0;
  padding-bottom: 10px;
  width: fit-content;
  border-bottom: 3px solid var(--rd-yellow);
}
.entry-title a { color: inherit; text-decoration: none; }
.entry-title a:hover { color: var(--rd-primary); }
.entry-meta {
  margin-top: 10px;
  font-family: var(--rd-font-mono);
  font-size: .8rem;
  color: var(--rd-text-muted);
}
.entry-thumbnail { margin: 0 0 28px; }
.entry-thumbnail img { display: block; width: 100%; }

.entry-content::after { content: ''; display: table; clear: both; }
.entry-content .alignleft { float: left; margin: 0 1.5em 1em 0; }
.entry-content .alignright { float: right; margin: 0 0 1em 1.5em; }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; }
.entry-content .alignwide { margin-left: -60px; margin-right: -60px; max-width: none; }
.entry-content .alignfull {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
}
.wp-caption-text,
figcaption {
  font-size: .85rem;
  color: var(--rd-text-muted);
  text-align: center;
  margin-top: 6px;
}

/* Post list (blog, archives, search) */
.rd-post-list { display: grid; gap: 28px; }
.rd-post-card {
  --rd-chamfer: 10px;
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 24px;
  background: var(--rd-surface);
  border: 2px solid var(--rd-navy);
  clip-path: var(--rd-chamfer-clip);
  box-shadow: var(--rd-shadow-sm);
}
.rd-post-card:not(:has(.rd-post-card__thumb)) { grid-template-columns: 1fr; }
.rd-post-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.rd-post-card .entry-title { font-size: 1.35rem; }
.rd-post-card p:last-child { margin-bottom: 0; }

.archive-header { margin-bottom: 36px; }
.archive-header .archive-description { color: var(--rd-text-secondary); }

/* Pagination */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 40px;
}
.nav-links .page-numbers {
  --rd-chamfer: 6px;
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  font-family: var(--rd-font-mono);
  font-weight: 700;
  color: var(--rd-text-secondary);
  text-decoration: none;
  border: 2px solid var(--rd-navy);
  clip-path: var(--rd-chamfer-clip);
}
.nav-links .page-numbers.current { background: var(--rd-primary); color: #fff; }
.post-navigation .nav-links { justify-content: space-between; }

/* Comments */
.comments-area { margin-top: 56px; padding-top: 32px; border-top: 2px solid var(--rd-border-light); }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; }
.comment-body { padding: 16px 0; border-bottom: 1px solid var(--rd-border-light); }
.comment-meta { font-size: .85rem; color: var(--rd-text-muted); }
.comment-form input:not([type="checkbox"]):not([type="submit"]),
.comment-form textarea { width: 100%; }

/* Search form */
.search-form,
.woocommerce-product-search { display: flex; gap: 8px; max-width: 520px; }
.woocommerce-product-search .search-field { flex: 1; }
.search-form label { flex: 1; }
.search-form .search-field { width: 100%; }

/* 404 */
.rd-404 { text-align: center; padding: 40px 0; }
.rd-404__code {
  font-family: var(--rd-font-mono);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rd-primary);
}
.rd-404 .search-form { margin: 24px auto 0; }

@media (max-width: 760px) {
  .rd-content-area { padding: 36px 0 56px; }
  .rd-container { padding: 0 16px; }
  .rd-post-card { grid-template-columns: 1fr; padding: 18px; }
  .entry-content .alignwide { margin-left: 0; margin-right: 0; }
}

/* ── WooCommerce: notices and account pages ── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--rd-primary);
  background: var(--rd-surface-alt);
  border-radius: 0;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--rd-primary); }
.woocommerce-error { border-top-color: var(--rd-danger); }

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  border: 2px solid var(--rd-navy);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 16px;
  color: var(--rd-text-secondary);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--rd-primary);
  background: var(--rd-primary-ghost);
  border-left-color: var(--rd-primary);
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password {
  border: 2px solid var(--rd-border-light);
  border-radius: 0;
}

.woocommerce table.shop_table {
  border: 2px solid var(--rd-navy);
  border-radius: 0;
}
.woocommerce table.shop_table th { font-family: var(--rd-font-display); }
.woocommerce .quantity .qty { width: 4.5em; text-align: center; }

/* Price shown as "Free" for zero-price products. */
.rd-price-free {
  --rd-chamfer: 4px;
  display: inline-block;
  padding: 2px 10px;
  font-family: var(--rd-font-mono);
  font-weight: 700;
  font-size: .85em;
  color: #fff;
  background: var(--rd-success);
  border: 1px solid var(--rd-outline);
  clip-path: var(--rd-chamfer-clip);
  line-height: 1.5;
}

/* Bare buttons: a neutral reset, so no browser chrome leaks into components. */
button {
  font: inherit;
  color: inherit;
}