/* Platform additions to Elmo's export (styles.css, pages.css, visual-upgrade.css
   are the export, untouched, so a fresh export can be dropped in over them).

   1. The REAL O'Reilly logo replaces the export's generic diamond mark.
      Its red R and red strapline would disappear on the crimson hero, so in the
      header it sits on a white plate; the near-black footer takes the logo's
      dark twin (neutral ink lifted, red kept) with no plate. Sized by HEIGHT on
      desktop and by WIDTH on a phone, so it can never push the burger off a
      360px screen (the AG-1 rule). */
.brand-logo{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none}
.site-header .brand-logo{background:#fff;border-radius:16px;padding:7px 14px;
  box-shadow:0 10px 30px rgba(60,0,8,.28),0 0 0 1px rgba(255,255,255,.6)}
.site-header .brand-logo img{display:block;height:62px;width:auto}
.brand-footer.brand-logo img{display:block;height:96px;width:auto}
@media(max-width:1180px){.site-header .brand-logo img{height:52px}}
@media(max-width:920px){
  .site-header .brand-logo{padding:5px 10px;border-radius:12px}
  .site-header .brand-logo img{height:auto;width:min(150px,40vw)}
  .brand-footer.brand-logo img{height:auto;width:min(240px,70vw)}
}

/* 2. The current page in the menu (the export marked it on About only).
      Desktop only: the phone menu already draws its own bar under it. */
@media(min-width:921px){.site-nav .nav-current{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}}

/* 3. A form that came back with a message shows it as a message. */
[data-status][data-scroll]{font-weight:600;color:inherit;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28)}
.contact-form [data-status][data-scroll],.project-form [data-status][data-scroll]{background:#fff4f5;border-color:#f3c3c8;color:#5a0710}

/* 4. Two rules the export kept in pages.css, which the HOME page never loads:
      so on the home page the spam trap showed as an empty box at the top of
      the form, and the privacy tick-box broke onto four lines. */
.hp-field{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;
  overflow:hidden!important;pointer-events:none!important;left:-9999px!important}
.form-privacy{display:flex!important;align-items:flex-start;gap:.7rem;font-size:.84rem;line-height:1.6;margin:1rem 0}
.form-privacy input{margin-top:.35rem;flex:0 0 auto;width:18px;height:18px}
.form-privacy a{color:inherit;text-decoration:underline;text-underline-offset:.16em}

/* 5. Standalone links are controls, not words in a sentence, so they get the
      24px pointer minimum (WCAG 2.5.8). The footer links measured 14px. */
.footer-links a,.display-foot a,.portal-note a,.scroll-prompt{display:inline-flex;align-items:center;min-height:24px}
@media(pointer:coarse){.footer-links a{min-height:40px}}
.footer-bottom a{display:inline-flex;align-items:center;min-height:24px}

/* 6. The concept dashboard's little app icon was the export's generic diamond:
      it carries the real O'Reilly monogram now. */
.board-logo{font-size:0!important;color:transparent!important;
  background:#fff url("/static/img/clients/oreilly-icon.png") center/88% no-repeat!important}

/* 7. The phone menu is a panel under the header with no height limit, so on a
      short phone (iPhone SE: 375x553, or 320x568) "Start a project" sat below
      the screen with no way to reach it. It scrolls inside itself now, and its
      rows tighten when the screen is short. Measured at 320 to 768 wide. */
@media(max-width:920px){
  .site-nav.is-open{max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:920px) and (max-height:700px){
  .site-nav a{padding-top:12px;padding-bottom:12px}
  .site-nav .nav-login,.site-nav .nav-cta{margin-top:10px}
}