/* ==========================================================================
   IRONBEASTS - ORDINARY PAGES

   Everything that goes through template-parts/single.php and is not one of
   the pages that owns a stylesheet: the policies, the returns page, about us,
   a blog post, and the account screens, which build on this.

   None of it was styled at all -- `.site-main`, `.page-content` and
   `.entry-title` appear in no stylesheet -- so these pages rendered with no
   container, no width and no spacing, at whatever size the browser chose.

   Written from cart.css. The same measure, the same rules between sections,
   the same treatment of a table. A shopper reading the returns policy should
   not feel they have left the shop.
   ========================================================================== */

/* ---- The shell ----------------------------------------------------------- */
.site-main {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--sp-7) clamp(1rem, 4vw, 2.5rem) var(--sp-9);
}

.page-header {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.entry-title {
  margin: 0;
  font-size: var(--fs-fluid-xl);
}

/* ---- What the editor puts in it ------------------------------------------ */
/* A measure, not a column the width of the screen. Long lines are the reason
   nobody reads a returns policy twice. */
.page-content {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--text);
}

.page-content > * + * {
  margin-top: var(--sp-4);
}

.page-content h2,
.page-content h3,
.page-content h4 {
  margin-top: var(--sp-7);
  font-size: var(--fs-fluid-md);
}

.page-content h3 {
  font-size: var(--fs-18);
}

.page-content h4 {
  font-size: var(--fs-15);
  letter-spacing: var(--ls-5);
}

/* The heading and what it introduces belong together, so the space goes above
   the heading and not between it and its first line. */
.page-content h2 + *,
.page-content h3 + *,
.page-content h4 + * {
  margin-top: var(--sp-3);
}

.page-content a {
  color: var(--heading);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t);
}

.page-content a:hover {
  color: var(--accent);
}

.page-content ul,
.page-content ol {
  padding-left: var(--sp-5);
}

.page-content li + li {
  margin-top: var(--sp-2);
}

.page-content blockquote {
  margin-inline: 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--border);
  color: var(--text-muted);
}

.page-content img {
  height: auto;
}

.page-content hr {
  border: 0;
  border-top: 1px solid var(--border);
}

/* Long enough to overflow on a phone, so it scrolls inside itself rather than
   taking the page sideways with it.
 
   WooCommerce's own tables are left out: they carry `shop_table`, they are
   laid out by account.css, and turning one into a block takes its columns
   apart. */
.page-content table:not(.shop_table) {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.page-content table:not(.shop_table) th,
.page-content table:not(.shop_table) td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.page-content table:not(.shop_table) th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-6);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--heading);
}

/* ---- Withdrawal / returns ------------------------------------------------ */
/* The contact form's fields share these rules: see contact.css. */
/* Declared here rather than in account.css because the flow is drawn in two
   places -- its own page and inside My Account -- and page.css is loaded by
   both. Every value is a token, so it follows the account forms rather than
   drifting from them. */
.returns {
  max-width: 34rem;
}

.returns__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-fluid-md);
}

.returns__lead {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-16);
}

.returns__note {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-13);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

.returns__notice {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  border-left: 2px solid var(--heading);
  background: var(--surface-2);
  font-size: var(--fs-14);
  color: var(--text);
}

/* Nothing here is an error the shopper made -- a closed window or a spent link
   is the shop reporting a fact -- so none of them shout. */
.returns__notice--info {
  border-left-color: var(--border);
  color: var(--text-muted);
}

/* Number, date and total, so the order is recognisable before confirming. */
.returns__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.returns__summary dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-6);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--text-muted);
}

.returns__summary dd {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
  color: var(--text);
}

.returns__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.returns__error {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-13);
  line-height: var(--lh-snug);
  color: var(--text);
}

.returns__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* The button is enabled in the markup and only the script turns it off, so
   without JavaScript nothing here applies and the form still submits. */
.returns__actions .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.returns__cancel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-6);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: underline;
  transition: color var(--t);
}

.returns__cancel:hover {
  color: var(--heading);
}

.returns__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
}

.returns__field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-6);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* `background-color`, not the `background` shorthand: the shorthand resets
   background-image and would erase the arrow base.css draws on a select. */
.returns input[type="text"],
.returns input[type="email"],
.returns select,
.returns textarea,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: var(--control-h);
  padding-block: var(--sp-2);
  padding-left: var(--sp-3);
  border: 1px solid var(--border);
  background-color: var(--surface);
  font-family: var(--font-body);
  font-size: var(--fs-field);
  line-height: var(--lh-body);
  color: var(--text);
  transition: border-color var(--t);
}

/* `padding` as a shorthand would reset the room base.css leaves on the right
   of a select for its arrow, so the sides are set separately and the select
   keeps that room. */
.returns input[type="text"],
.returns input[type="email"],
.returns textarea,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  padding-right: var(--sp-3);
}

.returns input:hover,
.returns select:hover,
.returns textarea:hover,
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
  border-color: var(--heading);
}

.returns textarea,
.contact-form textarea {
  resize: vertical;
}

/* ---- Picking the items --------------------------------------------------- */
.returns__items {
  margin: 0;
  padding: 0;
  border: 0;
}

.returns__legend {
  margin-bottom: var(--sp-3);
  padding: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-6);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--text-muted);
}

.returns__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
}

.returns__item + .returns__item {
  border-top: 1px solid var(--border);
}

/* The whole row is the target, so the tick box is not a 13px thing to hit on a
   phone. */
.returns__item-pick {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
}

.returns__item-media {
  flex: 0 0 auto;
  width: 56px;
}

.returns__item-media img {
  display: block;
  width: 100%;
  height: auto;
}

.returns__item-name {
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
  color: var(--text);
}

.returns__item-qty {
  flex: 0 0 auto;
}

.returns__item-qty input {
  width: 4.5rem;
  min-height: var(--control-h);
  padding-inline: var(--sp-2);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--fs-field);
  text-align: center;
  color: var(--text);
}

/* The sentence that makes the click a legal act. Set apart so it is read, not
   scrolled past. */
.returns__legal {
  margin: 0;
  padding: var(--sp-3);
  background: var(--surface-2);
  font-size: var(--fs-12);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

/* ---- Comments ------------------------------------------------------------ */
/* Off on pages and closed on the shop's posts, so this is only the space it
   would take if either were ever turned on. */
.comments-area {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}