/* Shared legacy-site design for transactional pages (account, login, checkout, directory, quote).
 * Page files retain layout; this file owns visual language.
 * Editorial/Premium pages (Bli medlem, paywall, Medlemserbjudanden, startsida) keep their own
 * warm serif presentation from vn-premium.css / reader.css / offers.css and only share the
 * button, focus and palette rules below.
 */
:root {
  --vn-page-ink: #202622;
  --vn-page-muted: #536258;
  --vn-page-surface: #fff;
  --vn-page-tint: #f2f5f1;
  --vn-page-line: #dce4dc;
  --vn-page-action: var(--vn-shell-interactive, #1a4837);
  --vn-page-dark: var(--vn-shell-green, #0b2f24);
  --vn-page-radius: 4px;
  --vn-page-h1: clamp(32px, 4vw, 46px);
  --vn-page-h2: clamp(26px, 3vw, 40px);
  --vn-page-h3: 24px;
  --vn-page-width: 1240px;
}

.vn-member-page {
  color: var(--vn-page-ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.65;
}
.vn-member-page,
.vn-member-page:has(.woocommerce),
.vn-member-page:has(.woocommerce-form-login, .woocommerce-ResetPassword) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--vn-page-width);
  margin: 0 auto;
  padding: 40px 24px 72px;
  background: var(--vn-page-surface);
  --vn-account-ink: var(--vn-page-ink);
  --vn-account-green: var(--vn-page-action);
  --vn-account-tint: var(--vn-page-tint);
  --vn-account-line: var(--vn-page-line);
}
.vn-member-page__content { font-size: 16px; }
.vn-member-page .vn-offers { padding: 0; margin: 28px 0 0; }

.vn-member-page .woocommerce :is(h2, h3),
.vn-member-page:has(.woocommerce-form-login, .woocommerce-ResetPassword) .vn-member-page__heading h1,
.vn-member-page .woocommerce #customer_login h2 {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.2;
}
.vn-member-page .vn-member-page__heading h1,
.vn-member-page:has(.woocommerce) .vn-member-page__heading h1,
.vn-member-page:has(.woocommerce-form-login, .woocommerce-ResetPassword) .vn-member-page__heading h1 {
  font-family: inherit;
  font-size: var(--vn-page-h1);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: normal;
  color: var(--vn-page-ink);
  max-width: none;
  margin: 0 0 24px;
}
.vn-member-page:has(.woocommerce) .vn-member-page__heading,
.vn-member-page:has(.woocommerce-form-login, .woocommerce-ResetPassword) .vn-member-page__heading {
  margin-bottom: 32px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vn-page-line);
}
.vn-member-page .woocommerce h2,
.vn-member-page .woocommerce #customer_login h2 { font-size: var(--vn-page-h3); color: var(--vn-page-ink); }

/* One button treatment shared by editorial blocks, purchases, account and offers. */
.vn-premium-page .wp-block-button__link,
.vn-premium-page .vn-membership-action,
.vn-member-page__content .wp-block-button__link,
.vn-member-page .woocommerce :is(a.button, button.button, input.button),
.vn-offers :is(button, .vn-offers__button),
.vn-members-preview .vn-members-button--primary,
.vn-member-page .pmpro .pmpro_section :is(#loginform, #lostpasswordform, #resetpassform) :is(.button, input[type=submit]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 46px;
  padding: 11px 22px;
  border: 1px solid var(--vn-page-action);
  border-radius: var(--vn-page-radius);
  background: var(--vn-page-action);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: none;
}
.vn-premium-page .vn-membership-action:hover,
.vn-premium-page .wp-block-button__link:hover,
.vn-members-preview .vn-members-button--primary:hover { background: var(--vn-page-dark); color: #fff; box-shadow: none; }
/* PMPro inverts its submit on hover and focus (1,5,0); keep the shared dark hover instead. */
.vn-member-page .pmpro .pmpro_section :is(#loginform, #lostpasswordform, #resetpassform) :is(.button, input[type=submit]):is(:hover, :focus) { border-color: var(--vn-page-dark); background: var(--vn-page-dark); color: #fff; box-shadow: none; }
:is(.vn-member-page, .vn-premium-page, .vn-members-issue, .vn-offers) :focus-visible { outline: 3px solid var(--vn-page-action); outline-offset: 4px; }
.vn-premium-page .vn-premium-closing :focus-visible { outline-color: #fff; }
.vn-offers :is(input, select) { border-color: #b9c9bf; border-radius: var(--vn-page-radius); }
.vn-offers button[hidden] { display: none; }

/* Keep the existing account navigation and WooCommerce controls accessible.
 * Long e-mail addresses and order keys may still break, but 'break-word' (unlike 'anywhere')
 * leaves min-content sizes alone, so table columns no longer collapse to one letter per line. */
.vn-member-page .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; overflow-wrap: break-word; }
:is(.woocommerce-MyAccount-content, .vn-member-page__content) :is(table, th, td) { overflow-wrap: normal; word-break: normal; }
.vn-member-page .woocommerce .vn-account-summary { padding: 28px; background: var(--vn-page-tint); border: 1px solid var(--vn-page-line); border-top: 3px solid var(--vn-page-action); border-radius: var(--vn-page-radius); }
.vn-member-page .woocommerce .vn-account-summary h2 { margin: 0 0 18px; }
.vn-account-summary p { margin: 0 0 20px; }
.vn-account-summary__status { font-weight: 700; color: var(--vn-page-action); }
.vn-account-summary__actions:empty { display: none; }
.vn-account-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.vn-account-shortcuts a { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 18px; border: 1px solid var(--vn-page-line); border-radius: var(--vn-page-radius); color: var(--vn-page-action); font-weight: 600; line-height: 1.5; text-decoration: none; }
.vn-account-shortcuts a:hover { background: var(--vn-page-tint); text-decoration: underline; }
.vn-account-intro { color: var(--vn-page-muted); margin: 0 0 28px; }
.vn-member-page .woocommerce #customer_login { border-radius: var(--vn-page-radius); }

/* Existing directory and quote templates share the same palette and typography. */
.vp-catalog {
  --vp-font: proxima-nova, Roboto, Helvetica, Arial, sans-serif;
  --vp-green: var(--vn-page-action);
  --vp-green-dark: var(--vn-page-dark);
  --vp-green-light: var(--vn-page-action);
  --vp-green-soft: var(--vn-page-tint);
  --vp-green-muted: var(--vn-page-line);
  --vp-bg: var(--vn-page-surface);
  font-family: inherit;
  background: var(--vn-page-surface);
}
.vp-catalog .vp-hero__title { font-family: inherit; font-size: var(--vn-page-h1); font-weight: 600; letter-spacing: normal; }
.vp-catalog .vp-section-title { font-family: inherit; font-size: var(--vn-page-h2); font-weight: 600; letter-spacing: normal; }
.vp-catalog :is(.vp-company-card__title, .vp-company-card__description, .vp-company-card__placeholder) { font-family: inherit; }
.vp-catalog .vp-btn { border-radius: var(--vn-page-radius); font-weight: 600; min-height: 46px; }
body:has(.offert-hero) {
  --color-primary: var(--vn-page-action);
  --color-primary-dark: var(--vn-page-dark);
  --color-accent: var(--vn-page-action);
  --color-accent-hover: var(--vn-page-dark);
  --color-accent-soft: var(--vn-page-tint);
  --color-bg: var(--vn-page-surface);
  --color-text: var(--vn-page-ink);
  --color-text-muted: var(--vn-page-muted);
  --color-border: var(--vn-page-line);
}
body:has(.offert-hero) .offert-hero__text h1 { font-size: var(--vn-page-h1); font-weight: 600; letter-spacing: normal; }
body:has(.offert-hero) :is(.offert-benefits__header, .offert-cta) h2 { font-size: var(--vn-page-h2); font-weight: 600; }
body:has(.offert-hero) .offert-btn { border-radius: var(--vn-page-radius); box-shadow: none; }
body.page:has(.tack-page) { font-family: proxima-nova, Roboto, Helvetica, Arial, sans-serif; background: var(--vn-page-surface); }
.tack-page .tack-card { border: 1px solid var(--vn-page-line); border-radius: var(--vn-page-radius); box-shadow: none; }
.tack-page .tack-card::before { background: var(--vn-page-action); }
.tack-page .tack-icon { background: var(--vn-page-tint); animation: none; }
.tack-page .tack-icon svg { fill: var(--vn-page-action); }
.tack-page .tack-card h1 { font-size: var(--vn-page-h1); font-weight: 600; color: var(--vn-page-ink); }
.tack-page .tack-card :is(p, .tack-info) { font-size: 16px; color: var(--vn-page-muted); }
.tack-page .tack-card .tack-cta a { background: var(--vn-page-action); border-radius: var(--vn-page-radius); }
.tack-page .tack-card .tack-cta a:hover { background: var(--vn-page-dark); transform: none; box-shadow: none; }

/* Account pages on small screens (WooCommerce, Subscriptions). The theme dequeues WooCommerce's
 * small-screen sheet, so its account layout is restored here by WooCommerce classes, not page IDs.
 * Order, subscription and download tables stack into one card per row, each value with its column name;
 * PMPro account tables already stack through PMPro's own CSS. */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce .woocommerce-MyAccount-content { float: none; width: 100%; min-width: 0; }
  .woocommerce-account .woocommerce:not(.vn-member-page .woocommerce) .woocommerce-MyAccount-navigation { margin-bottom: 1.5rem; }
  .woocommerce-account .woocommerce table.shop_table_responsive { display: block; max-width: 100%; overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .woocommerce-account .woocommerce table.shop_table_responsive thead { display: none; }
  .woocommerce-account .woocommerce table.shop_table_responsive :is(tbody, tfoot) { display: block; }
  .woocommerce-account .woocommerce table.shop_table_responsive tr { display: block; margin: 0 0 12px; border: 1px solid var(--vn-page-line); border-radius: var(--vn-page-radius); background: var(--vn-page-surface); }
  .woocommerce-account .woocommerce table.shop_table_responsive tr :is(th, td) { display: block; padding: 10px 14px; border: 0; border-top: 1px solid var(--vn-page-line); background: transparent; color: inherit; font-size: inherit; font-weight: inherit; text-align: right !important; overflow-wrap: break-word; }
  .woocommerce-account .woocommerce table.shop_table_responsive tr > :first-child { border-top: 0; }
  .woocommerce-account .woocommerce table.shop_table_responsive tr :is(th, td)[data-title]::before { content: attr(data-title) ": "; float: left; margin-right: 12px; color: var(--vn-page-muted); font-weight: 600; }
  .woocommerce-account .woocommerce table.shop_table_responsive tr td:is(.order-actions, .woocommerce-orders-table__cell-order-actions) { text-align: left !important; }
  .woocommerce-account .woocommerce table.shop_table_responsive tr td:is(.actions, .product-remove)::before { display: none; }
}

@media (max-width: 760px) {
  .vn-member-page,
  .vn-member-page:has(.woocommerce),
  .vn-member-page:has(.woocommerce-form-login, .woocommerce-ResetPassword) { padding: 28px 20px 48px; }
  .vn-account-shortcuts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vn-member-page .woocommerce .vn-account-summary { padding: 22px; }
}