/* LAN-SERVERS -- the chrome both applications share: the dark header with its mobile
 * menu, the dark footer, the buttons, the page container.
 *
 * ONE FILE, TWO APPS (Todor, 2026-09-22: "take the template from lan-servers, and when
 * we change it, reflect it in my.lan-servers"). The marketing site loads this before
 * its theme.css; the client area loads the SAME file from this directory, through
 * $v->asset('chrome.css', 'site'), before its own theme.css. So a change to the header,
 * the footer or a button made here lands in both at once, and the two cannot drift -
 * which is the whole point of keeping it apart from theme.css.
 *
 * What does NOT belong here: anything only one app draws. Heroes, sections and the
 * configurator stay in the site's theme.css; the side menu and the account pages stay
 * in the client theme. A rule added here must look right on both, so it may assume
 * nothing about the page around the header or the footer - not even the colour of
 * <body>, which is navy on the site and light in the client area.
 *
 * Every rule below was moved verbatim from theme.css (the approved brand kit's
 * site/styles.css, v1.0, Sept 2026) on 2026-09-22, except the three marked NEW.
 */

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Buttons (min 44px touch target) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-md);
  font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap;
}
/* NEW. A <button> does not inherit the page font, and brings its own border and grey
   face - so the reseller form's submit rendered in the system font with a 2px bevel
   round it, and the configurator's Update buttons on a grey slab. :where() gives this
   no specificity at all, so every .btn-* below still decides border and background. */
:where(button.btn) { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline { border: 1px solid #334155; color: var(--text-dark-primary); font-weight: 500; }
.btn-outline:hover { border-color: #64748B; }
.btn-dark { background: var(--navy); color: var(--text-dark-primary); }
.btn-ghost { border: 1px solid #CBD5E1; color: var(--text-light-primary); font-weight: 500; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
/* NEW. The client area underlines links on hover, as a place where links sit in prose
   should; nothing in the chrome is prose, and a button is never underlined. */
.btn:hover, .site-header a:hover, .site-footer a:hover { text-decoration: none; }

/* ---------- Header (dark) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--navy); border-bottom: 1px solid var(--border-dark-soft);
}
.site-header .container { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
/* ---- The logo, inline (components/logo.php) ------------------------------
   The accent inside both files is currentColor now, so `color` on the wrapper
   is what paints the mark's bars and the wordmark's hyphen -- which is how a
   palette recolours the logo exactly instead of approximately. The letters are
   ivory inside the file and do not follow. */
.brand-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--cyan); }
.brand-logo .mark, .brand-logo .word { display: inline-flex; }
.brand-logo svg { display: block; width: auto; }
.brand-logo.is-header .mark svg { height: var(--logo-mark-header); }
.brand-logo.is-header .word svg { height: calc(var(--logo-word-header) * 720 / 700); }  /* SVG is 720 tall for a 700 cap */
.brand-logo.is-footer .mark svg { height: 44px; }
.brand-logo.is-footer .word svg { height: 23px; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 500; }
.nav a { color: var(--text-dark-nav); } .nav a:hover { color: var(--text-dark-primary); }
.header-actions { display: flex; align-items: center; gap: 22px; }
.header-actions .login { color: var(--text-dark-nav); font-size: 15px; font-weight: 500; }

/* ---------- Mobile menu: a <details>, so it works with no JavaScript -------
   The site ships none (the CSP has no 'unsafe-inline'), which is exactly why the
   old <button> never opened anything. The browser owns the open state here.
   The panel is absolute against .site-header -- sticky is a positioned element,
   so it is the containing block -- and therefore drops below the bar instead of
   pushing the page down. */
.menu { display: none; }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  color: var(--text-dark-primary); cursor: pointer;
  list-style: none;                       /* Firefox: no disclosure triangle */
}
.menu-toggle::-webkit-details-marker { display: none; }
.menu-toggle::marker { content: ""; }
.menu-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--radius-sm); }
/* The icon is the state: three bars closed, a cross open. */
.menu .i-close, .menu[open] .i-open { display: none; }
.menu[open] .i-close { display: block; }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--navy); border-bottom: 1px solid var(--border-dark);
  padding: 4px var(--gutter) 22px;
  max-height: calc(100dvh - 64px); overflow-y: auto;
}
.menu-panel nav { display: flex; flex-direction: column; }
.menu-panel nav a {
  padding: 15px 0; font-size: 17px; font-weight: 500; color: var(--text-dark-primary);
  border-bottom: 1px solid var(--border-dark-soft);
}
.menu-panel nav a[aria-current="page"] { color: var(--cyan); }
.menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.menu-actions .btn { width: 100%; }

/* ---------- Footer (dark, deeper) ---------- */
/* Less room under the legal line (Todor, 2026-11-11): 18px, it was 40. */
.site-footer { background: var(--navy-deep); color: var(--text-dark-primary); border-top: 1px solid var(--border-dark-soft); padding: 56px 0 18px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand .tagline { font-size: 15px; color: var(--text-dark-secondary); }
/* "LAN" in the on-dark accent wherever the footer is printed: the client area's theme has no
   .accent of its own, and its --accent is the deepened one for light surfaces (2026-11-11). */
.footer-brand .tagline .accent { color: var(--cyan); }
.footer-brand .about { font-size: 14px; line-height: 1.6; color: var(--text-dark-muted); max-width: 360px; }
.footer-col h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dark-nav); }
.footer-col a { display: block; color: var(--text-dark-secondary); font-size: 14px; line-height: 2; }
.footer-col a:hover { color: var(--text-dark-primary); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border-dark-soft); padding-top: 18px; margin-top: 32px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dark-muted); flex-wrap: wrap; }
/* NEW. The footer with only its bottom line, for the client area: the legal line and a
   way back to the public site, without the marketing columns. Same colours, same
   type, less height - and the line is not separated from a grid that is not there. */
.site-footer.is-compact { padding: 22px 0 16px; }
.site-footer.is-compact .footer-bottom { border-top: 0; padding-top: 0; margin-top: 0; }
.footer-bottom a { color: var(--text-dark-secondary); }
.footer-bottom a:hover { color: var(--text-dark-primary); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* The payment methods (views/components/payments.php, 2026-11-11): each mark in a frame of
   the site's own, navy with the cards' dark border and 8px radius, in one row on the right
   just under the link columns, with no line above it, and the legal line below (smaller, to
   the right and closer to the links, Todor, the same day; on a phone the row starts on the
   left, as everything else in the footer does). The
   marks are drawn light in one colour: a filter makes a one-shape mark white, and a 'mono'
   file (Bitcoin, Mastercard) is light already. Under the pointer the frame turns white and
   the mark shows its own colours (Todor, the same day): the filter comes off, or the colour
   file replaces the 'mono' one. Each mark has its own height, so a wordmark
   and a round symbol look one size. In the client area's compact footer the frames are
   smaller still and sit above the legal line, on the right like its links. */
.footer-pay { margin-top: 12px; }
.pay-strip { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pay-tile { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 62px; padding: 0 12px;
            background: var(--navy); border: 1px solid var(--border-dark); border-radius: var(--radius-lg);
            transition: background-color 0.15s ease, border-color 0.15s ease; }
.pay-tile img { display: block; width: auto; height: 14px; filter: brightness(0) invert(1); opacity: 0.8; transition: filter 0.15s ease, opacity 0.15s ease; }
.pay-tile img.is-mono { filter: none; }
.pay-tile img.is-colour { display: none; filter: none; opacity: 1; }
@media (hover: hover) {
  .pay-tile:hover { background: var(--surface-light); border-color: var(--surface-light); }
  .pay-tile:hover img { filter: none; opacity: 1; }
  .pay-tile:hover img.is-mono { display: none; }
  .pay-tile:hover img.is-colour { display: block; }
}
.pay-tile img.is-visa { height: 11px; }
.pay-tile img.is-mastercard { height: 17px; }
.pay-tile img.is-apple-pay { height: 15px; }
.pay-tile img.is-google-pay { height: 15px; }
.pay-tile img.is-paypal { height: 14px; }
.pay-tile img.is-bitcoin { height: 12px; }
.pay-tile img.is-coingate { height: 12px; }
.pay-tile img.is-sepa { height: 11px; }
.footer-pay.is-compact { margin: 0 0 12px; }
.footer-pay.is-compact .pay-strip { gap: 6px; zoom: 0.85; }
@media (max-width: 520px) {
  .cookie-banner { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
  .cookie-banner-actions .btn { flex: 1; }
  .footer-pay { margin-top: 24px; }
  .pay-strip { justify-content: flex-start; }
}

/* The cookie banner (views/partials/cookie-banner.php, 2026-11-11): a card at the bottom right, on the
   dark of the header and footer, with Reject and Accept the same size. On a phone it spans the
   width. "Cookie settings" in the footer's last line reads as one of its links. */
.cookie-banner { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: min(440px, calc(100vw - 40px));
           padding: 18px 20px; border: 1px solid var(--border-dark); border-radius: var(--radius-lg);
           background: var(--navy); color: var(--text-dark-primary); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--text-dark-secondary); }
.cookie-banner .cookie-banner-title { margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--text-dark-primary); }
.cookie-banner a { color: var(--cyan); }
/* Google's page and ours, side by side under the text (2026-11-13). */
.cookie-banner .cookie-banner-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cookie-banner-actions { display: flex; justify-content: flex-end; gap: 10px; }
.cookie-settings { padding: 0; border: 0; background: none; font: inherit; color: var(--text-dark-secondary); cursor: pointer; }
.cookie-settings:hover { color: var(--text-dark-primary); }

/* ---------- The header nav, seven items since /colocation ----------------
   Six already pushed two labels onto a second line below about 1300px. Now no
   label wraps, the gaps are a little tighter, and below 1200px the header uses
   the menu it already had for phones. In the site's theme.css until 2026-11-11,
   when the client area's header took the same nav (Todor). Every rule goes
   through .nav, so a header without one (my.cloudwall.bg) is as it was. */
.site-header .nav a, .site-header .nav ~ .header-actions .login { white-space: nowrap; }
.site-header .container:has(> .nav) { gap: 20px; }
.site-header .nav { gap: 18px; }
.site-header .nav ~ .header-actions { gap: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .site-header .nav, .site-header .nav ~ .header-actions { display: none; }
  .site-header .nav ~ .menu { display: block; }
}
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  /* The whole actions block goes, rather than its children one by one: the menu
     panel below repeats both of them, and a rule that reaches into a block is a
     rule that reaches into anything later nested in it. */
  .nav, .header-actions { display: none; }
  .brand-logo.is-header .word svg { height: 18.5px; }
  .menu { display: block; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}