/**
 * My Account.
 *
 * The shared Woo chrome — tables, forms, prices, the classic-form elements that
 * lost their styling when woocommerce-general.css was dequeued — lives in
 * woocommerce.css, because the order-received page uses the same markup without
 * being an account page. This file is the account layout itself: the navigation,
 * the address blocks and the order view.
 *
 * Loaded by osj_current_page_stylesheet() on is_account_page().
 */

/* ============================================================
   Navigation

   Below 1001px the sidebar stacks, and seven full-width 46px rows plus their
   gaps came to 381px of navigation before a single line of content — on every
   page of the account, so the orders list started at y=690 on a 844px screen.

   A dropdown costs one 54px control. Markup is woocommerce/myaccount/navigation.php:
   a <details> that ships `open`, so the toggle is native and works with no
   JavaScript. Above 1000px the summary is hidden and the list is the ordinary
   sidebar again, so there is only ever one copy of the links in the document.
   ============================================================ */
@media (max-width: 1000px) {
  .woocommerce-MyAccount-navigation {
    /* The open panel is positioned against this, and must sit over the content. */
    position: relative;
    z-index: var(--z-raised);
    margin-bottom: var(--space-6);
  }

  .osj-account-nav__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-h-lg);
    padding: 0 var(--space-4);
    border: 1px solid var(--border-field);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    cursor: pointer;
    /* Both are needed to drop the native disclosure triangle. */
    list-style: none;
  }
  .osj-account-nav__toggle::-webkit-details-marker { display: none; }
  .osj-account-nav__toggle:focus-visible {
    outline: var(--focus-ring-width) solid var(--brand);
    outline-offset: 2px;
  }

  .osj-account-nav__label {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .osj-account-nav__current {
    font-weight: var(--weight-semibold);
    color: var(--text-strong);
  }
  .osj-account-nav__chevron {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--text-muted);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .osj-account-nav[open] .osj-account-nav__chevron { transform: rotate(180deg); }

  /*
   * The panel overlays the content rather than pushing it down — that is the
   * difference between a dropdown and an accordion, and it keeps the page from
   * reflowing under the thumb while the menu is open.
   *
   * Shown and hidden explicitly on [open] rather than leaning on the browser's
   * own collapse. A closed <details> hides its content with
   * `::details-content { content-visibility: hidden }`, which an absolutely
   * positioned child escapes when its containing block — the <nav> above — is
   * outside that subtree. The panel stayed painted over the page with
   * details.open === false. This is deterministic in every engine and still
   * needs no JavaScript, because <summary> toggles the attribute natively.
   */
  .woocommerce-MyAccount-navigation ul {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    gap: 2px;
    padding: var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: var(--shadow-lg);
    /* Short viewports in landscape cannot show seven rows plus the header. */
    max-height: min(60vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .osj-account-nav[open] ul { display: flex; }

  .woocommerce-MyAccount-navigation a {
    display: flex;
    align-items: center;
    min-height: 48px;
  }

  /*
   * No JavaScript. The <details> ships `open` so that the desktop sidebar is
   * correct without a script — which on a phone would otherwise leave the panel
   * permanently overlaying the page. Fall back to the plain stacked list and
   * hide the control, the same shape as the .no-js paths in shop.css and
   * about.css. Tall, but it is the navigation it replaces, and there is never a
   * panel sitting on top of the content.
   */
  html.no-js .osj-account-nav__toggle { display: none; }
  html.no-js .woocommerce-MyAccount-navigation ul {
    position: static;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .osj-account-nav__chevron { transition: none; }
}

/* The dropdown is a phone control; the desktop sidebar is the list on its own. */
@media (min-width: 1001px) {
  .osj-account-nav__toggle { display: none; }
}

/* ============================================================
   Addresses
   ============================================================ */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.woocommerce-Address {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/*
 * Woo emits <h2> here, which inherits the display face at its full heading
 * size — "BILLING ADDRESS" was set larger than the page's own <h1> felt like
 * it should allow. These are card titles, not page titles.
 */
.woocommerce-Address-title h2,
.woocommerce-order-details__title,
.woocommerce-column__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  text-transform: uppercase;
  color: var(--text-strong);
}

/*
 * Was a 20px text link, and it is the only control on the card.
 *
 * Woo's own text is "Edit Billing address", which repeats the heading it sits
 * next to and will not fit beside it at 390px. font-size: 0 collapses the
 * rendered string and ::before draws "Edit" in its place, so the accessible
 * name stays the full, unambiguous one while the visible label stops repeating
 * the card title.
 */
.woocommerce-Address-title .edit {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--space-3);
  margin-right: calc(var(--space-3) * -1);
  font-size: 0;
  text-decoration: none;
}
.woocommerce-Address-title .edit::before {
  content: "Edit";
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.woocommerce-Address-title .edit:hover::before { text-decoration: underline; }

.woocommerce-Address address { margin: 0; }

/* ============================================================
   Order view
   ============================================================ */
.woocommerce-order-details,
.woocommerce-customer-details { margin-top: var(--space-7); }

.woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.woocommerce-customer-details .woocommerce-column {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.woocommerce-customer-details .woocommerce-column__title { margin-bottom: var(--space-3); }
.woocommerce-customer-details address { margin: 0; }

/* The "Order #x was placed on…" line, above the details table. */
.woocommerce-MyAccount-content > p:first-of-type { color: var(--text-body); }

@media (min-width: 761px) {
  .woocommerce-Addresses,
  .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}