/*
 * Harborline — base styles (MP §6). Colors, fonts and radii come from Theme Options as CSS custom properties
 * (--b2b-*, generated into storage/customizer). Logical properties only (margin-inline, padding-block …) so
 * right-to-left languages work without a second style file (Theme Guide CP-358).
 * @version 0.1.0
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--b2b-color-page, #F4F4F4);
  color: var(--b2b-color-ink, #222);
  font-family: var(--b2b-font-body, Inter, system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.55;
}
h1, h2, h3, h4 { font-family: var(--b2b-font-headings, Inter, system-ui, sans-serif); line-height: 1.25; margin-block: 0 .6em; }
a { color: var(--b2b-color-primary-deep, #C24400); }
a:hover { color: var(--b2b-color-primary-dark, #E04F00); }
img { max-inline-size: 100%; block-size: auto; }

.hl-container { max-inline-size: 1240px; margin-inline: auto; padding-inline: 16px; }
.hl-skip { position: absolute; inset-inline-start: -9999px; }
.hl-skip:focus { inset-inline-start: 8px; inset-block-start: 8px; background: #fff; padding: 8px; z-index: 10; }

/* header */
.hl-header { background: var(--b2b-color-surface, #fff); border-block-end: 1px solid var(--b2b-color-border, #EEE); }
.hl-header__bar { display: flex; align-items: center; gap: 16px; min-block-size: 64px; }
.hl-logo { font-weight: 700; font-size: 20px; color: var(--b2b-color-ink, #222); text-decoration: none; }
.hl-logo img { block-size: var(--b2b-header-logo-height, 36px); inline-size: auto; }
.hl-search { flex: 1; display: flex; max-inline-size: 640px; }
.hl-search input {
  flex: 1; padding: 10px 14px; border: 2px solid var(--b2b-color-primary, #FF5F00);
  border-start-start-radius: var(--b2b-radius-button, 6px); border-end-start-radius: var(--b2b-radius-button, 6px);
  border-inline-end: 0; font: inherit;
}
.hl-search button { border: 0; padding-inline: 18px; background: var(--b2b-color-primary, #FF5F00); color: #fff; font-weight: 600;
  border-start-end-radius: var(--b2b-radius-button, 6px); border-end-end-radius: var(--b2b-radius-button, 6px); cursor: pointer; }
.hl-nav { display: flex; gap: 14px; margin-inline-start: auto; }
.hl-nav a { color: var(--b2b-color-text, #555); text-decoration: none; font-weight: 500; }

/* buttons, cards */
.hl-button { display: inline-block; padding: 10px 18px; border: 0; border-radius: var(--b2b-radius-button, 6px);
  background: var(--b2b-color-primary, #FF5F00); color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; }
.hl-button:hover { background: var(--b2b-color-primary-dark, #E04F00); color: #fff; }
.hl-card { background: var(--b2b-color-surface, #fff); border: 1px solid var(--b2b-color-border, #EEE); border-radius: var(--b2b-radius-card, 8px); padding: 16px; }
.hl-cards--roomy .hl-card { padding: 24px; }

/* home placeholder */
.hl-hero { padding-block: 48px; text-align: center; }
.hl-hero p { color: var(--b2b-color-text, #555); max-inline-size: 640px; margin-inline: auto; }

/* auth pages */
.hl-auth { max-inline-size: 440px; margin: 6vh auto; }
.hl-auth label { display: block; margin-block: .8rem .3rem; font-weight: 600; }
.hl-auth input[type=email], .hl-auth input[type=password], .hl-auth input[type=text] {
  inline-size: 100%; padding: .6rem; border: 1px solid #DDD; border-radius: var(--b2b-radius-button, 6px); font: inherit;
}
.hl-auth button { margin-block-start: 1.2rem; inline-size: 100%; }
.error { background: #FDECEA; color: #9B1C1C; padding: .6rem; border-radius: var(--b2b-radius-button, 6px); }
.muted { color: var(--b2b-color-muted, #666); font-size: .9rem; }

/* footer */
.hl-footer { margin-block-start: 48px; background: var(--b2b-color-surface, #fff); border-block-start: 1px solid var(--b2b-color-border, #EEE);
  padding-block: 24px; color: var(--b2b-color-muted, #666); font-size: 13px; }
.hl-footer__cols { display: grid; grid-template-columns: repeat(var(--hl-footer-cols, 4), minmax(0, 1fr)); gap: 24px; }
.hl-footer__credit { margin-block-start: 16px; }

@media (max-width: 760px) {
  .hl-header__bar { flex-wrap: wrap; padding-block: 8px; }
  .hl-search { order: 3; flex-basis: 100%; max-inline-size: none; }
  .hl-footer__cols { grid-template-columns: 1fr 1fr; }
}