/* ===========================================================================
   Obris Launch - mobile interface corrections
   ---------------------------------------------------------------------------
   Overrides only. No theme stylesheet is edited by this file; everything here
   is written to sit on top of main.css and meanmenu.css and can be removed in
   one line without leaving a mark.

   Every number below came out of a measured sweep of the site at 390x844,
   not from a style guide. 44x44 is the tap-target floor Apple publishes and
   48x48dp is Google's; 44 is used throughout as the common floor.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tap targets
   The pattern is always the same: the control keeps the size you can see, and
   an invisible box is centred on it to catch the tap. Nothing moves, nothing
   resizes, so no layout anywhere shifts by a pixel.
   --------------------------------------------------------------------------- */
.hamburger-btn,
.offcanvas__close-btn,
.offcanvas__social ul li a,
.mean-expand { position: relative; }

.hamburger-btn::after,
.offcanvas__close-btn::after,
.offcanvas__social ul li a::after,
.mean-expand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* The menu button is the most-tapped control on the site on a phone and it was
   30px square with no padding at all, so the target was exactly the three lines
   you can see. Nothing may clip the box that now catches the tap. */
.hamburger-btn { overflow: visible; }

/* The menu's own links were 41-42px tall - short by two or three pixels each.
   The theme sizes these rows as content plus padding (they are 90% wide with 5%
   padding either side, so they cannot be switched to border-box without making
   them narrower), and the label's line is 21px. 11 above and 12 below makes the
   row exactly 44 with the label sitting where it always did. The selector
   matches the theme's own so this wins on order rather than on weight, and the
   dropdown arrow is left out of it - it is positioned separately. */
.mean-container .mean-nav ul li a:not(.mean-expand) {
  padding-top: 11px;
  padding-bottom: 12px;
}

/* The address, phone number and email inside the menu were 20-25px tall. These
   grow their rows rather than overlapping the neighbours above and below. */
.offcanvas__contact-text a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* The logo at the top of the menu was a 20px-tall link. */
.offcanvas__logo a {
  display: inline-block;
  padding: 12px 0;
}

/* ---------------------------------------------------------------------------
   2. Room between neighbouring targets
   The close button sat 5.4px from the logo link at the top of the menu, and
   anything under about 8px invites the wrong tap - at exactly the moment
   someone is being quick. The menu logo is given a slightly smaller ceiling so
   the two are properly apart; the header logo is untouched.
   --------------------------------------------------------------------------- */
.offcanvas__logo img { max-width: 210px; height: auto; }

/* ---------------------------------------------------------------------------
   3. The page must not scroll behind the open menu
   Measured before this: 600px of movement while the menu was open, so people
   closed it and found themselves somewhere else entirely. The class is put on
   and taken off by mobile-ui.js, which also restores the exact scroll position
   - position:fixed alone would send the page back to the top.
   --------------------------------------------------------------------------- */
body.bd-scroll-lock {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   4. The login boxes
   They were identified only by their placeholder, which disappears the moment
   anyone types, and their text was 14px, which makes an iPhone zoom in on the
   field and leaves the page sideways. The labels are real <label> elements in
   the markup now; this only sets the size.
   --------------------------------------------------------------------------- */
.bd-login__form input[type="email"],
.bd-login__form input[type="password"] { font-size: 16px; }

/* The caption above each box was a <span> and is now a real <label>. The theme
   styles the span, so the label is given the same four declarations verbatim,
   and the boxes look exactly as they did. */
.postbox__comment-input label {
  font-weight: 600;
  color: var(--bd-common-black);
  margin-bottom: 12px;
  display: block;
}

/* ---------------------------------------------------------------------------
   5. Reading size on the contact page
   Its three long paragraphs were 14px - small for the page where somebody is
   deciding whether to write to you. The fine print underneath the form is
   deliberately smaller and is left alone.
   --------------------------------------------------------------------------- */
.bd-contact-prose { font-size: 16px; line-height: 1.65; }

/* ---------------------------------------------------------------------------
   6. The rest of the undersized targets
   The first sweep report named the menu and the login page. Re-reading the raw
   measurements afterwards, the same fault runs through the footer, the blog
   listing, the work page and the home page's service list: links that are wide
   enough to read but only 17 to 26 pixels tall. They are all corrected here.

   Two techniques, chosen per case by measuring the clear space around each one:
   an invisible 44px-tall box centred on the link where there is room for it, and
   real padding where the links are stacked close enough that invisible boxes
   would overlap each other and make the edges ambiguous.

   Everything in this section is phone and tablet only. A mouse pointer does not
   need a 44 pixel target, and confining it here means no desktop layout moves.

   Deliberately NOT changed: links sitting inside a sentence (the phone number
   in the privacy page's address block, the "By Obris Launch" byline), which
   WCAG 2.5.8 exempts for exactly this reason - padding them would break the
   line they sit in. Form labels are left alone too: tapping one focuses a field
   that is 55 pixels tall and directly below it.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* -- a. wide enough, too short: give each one a 44px-tall catch area ----- */
  :is(.logo > a,
      .bd-footer-widget__title a,
      .bd-legal table td a,
      .postbox__thumb > a,
      .postbox__read-more .link-btn-2,
      .postbox-4__read-more .link-btn-2,
      .rc__post-thumb a,
      .postbox__author-line a,
      .bd-svc-card__link,
      .sk-crumb a,
      .sk-more,
      .bd-login__forgot a,
      .tp-pt__inmner-step span a,
      .bd-work__filter-btn,
      .bd-work-card__cta) { position: relative; }

  :is(.logo > a,
      .bd-footer-widget__title a,
      .bd-legal table td a,
      .postbox__thumb > a,
      .postbox__read-more .link-btn-2,
      .postbox-4__read-more .link-btn-2,
      .rc__post-thumb a,
      .postbox__author-line a,
      .bd-svc-card__link,
      .sk-crumb a,
      .sk-more,
      .bd-login__forgot a,
      .tp-pt__inmner-step span a,
      .bd-work__filter-btn,
      .bd-work-card__cta)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* The skills-library wordmark carries a byline four pixels under it. The
     wordmark's new catch area reaches twelve pixels down, so the byline is
     moved clear of it rather than being covered by it. */
  .sk-byline { margin-top: 14px; }

  /* -- b. square controls a few pixels short ------------------------------ */
  :is(.bd-footer-widget__social span a,
      .postbox__share-btn,
      .hero__arrow) { position: relative; }

  :is(.bd-footer-widget__social span a,
      .postbox__share-btn,
      .hero__arrow)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* The slide dots are 24px across with 8px between them, so a 44px-wide box
     would reach into the next dot. 32 is the exact pitch: the boxes meet and
     never overlap, so every point on that row belongs to the nearest dot. */
  .hero__dots button { position: relative; }
  .hero__dots button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* -- c. stacked lists: the row itself becomes 44 ------------------------- */
  /* Each of these absorbs the gap that was already between the rows, so the
     lists grow by a few pixels rather than by the full difference. */
  .bd-footer-widget__menu ul li,
  .bd-footer__contact li,
  .sidebar__widget ul li { margin-bottom: 0; }

  /* The post count beside each blog topic is floated right, and a float sits at
     the top of the line rather than in the middle of it, so a taller row left
     the numbers riding above their labels. Laying the row out as a flex line
     puts the two back on the same centre line. */
  .sidebar__widget ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .sidebar__widget ul li span { float: none; }

  .bd-footer-widget__menu ul li a { display: block; padding: 9px 0; }

  /* The icon sits beside the link as a plain sibling, so this stays inline -
     display:flex here would drop the number onto its own line under the icon. */
  .bd-footer__contact li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The count sits outside the link, so the row is laid out inline: an inline
     flex box keeps it exactly where it was and still guarantees the height. */
  .sidebar__widget ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* The blog pagination sizes itself under 575px: the page's own stylesheet
   divides one row into equal cells so every control (Newer, 1-6, Older) stays
   on the same line. Nothing here should widen those cells - an earlier 44px
   floor in this file is what pushed the last two onto a second row. */

/* ---------------------------------------------------------------------------
   7. The buy bar on the two skills-library pages
   That bar is fixed to the bottom edge, so the last 79 pixels of those pages sit
   behind it and cannot be scrolled clear - the footer's Privacy and Terms links
   ended up permanently underneath. The page keeps room for the bar instead. The
   strip this adds is exactly the height of the opaque bar covering it, so
   nothing looks any different. (The page's own body.has-buybar rule was left at
   zero and the class was never put on the body, so it never took effect.)
   --------------------------------------------------------------------------- */
body:has(.bd-buybar) { padding-bottom: 96px; }

/* The chat button and the back-to-top button both live in the bottom right
   corner, which is where the bar's own button is, so the chat bubble sat on top
   of "Get it now". Both move up while the bar is showing and drop back when it
   hides, on the same quarter-second the bar itself takes. */
.obris-chat-launcher,
.progress-wrap { transition: bottom .3s ease; }

body:has(.bd-buybar.is-visible) .obris-chat-launcher { bottom: 104px; }
body:has(.bd-buybar.is-visible) .progress-wrap { bottom: 180px !important; }

@media (max-width: 768px) {
  body:has(.bd-buybar.is-visible) .progress-wrap { bottom: 160px !important; }
}
@media (max-width: 480px) {
  body:has(.bd-buybar.is-visible) .obris-chat-launcher { bottom: 96px; }
}

/* ---------------------------------------------------------------------------
   6. The logo lockup
   A line of type under the wordmark saying what the company does. It belongs to
   the logo block, so it sits on the wordmark's own left edge and travels with
   it into the sticky header. OBRIS LAUNCH is set heavy and all-caps, so this
   line is small, tracked open and a step lighter in colour: it has to read as a
   descriptor, not as a second wordmark competing with the first.

   Scope: this file is loaded by obris.co's own 84 pages and by nothing under
   work/. The spec sites keep their own brands and are deliberately untouched.
   --------------------------------------------------------------------------- */
.logo > a { display: inline-block; }

.logo__tagline {
  display: block;
  margin-top: 5px;
  font-family: var(--bd-ff-body);
  font-size: 14px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: #444444;
  white-space: nowrap;
  /* Julia 2026-09-06: breathing room under the line, so the lockup does not sit
     hard against the bottom edge of the header band. */
  padding-bottom: 6px;
}

/* On a phone the header sizes to its contents, so that 6px lands as real space.
   On a computer the band is 72px tall no matter what, set by the nav links, and
   the logo column is shorter than that, so the padding was simply absorbed by
   the row centring it. Julia asked for the gap to show there too, so above 992
   the band itself carries the 6px and everything below the header moves down by
   the same amount. */
@media (min-width: 992px) {
  .bd-header__main { padding-top: 6px; padding-bottom: 6px; }
  /* The row centres the logo block inside the band, and the 6px above lives on
     the block while the 6px below lives on the band, which tipped the lockup low
     by about 4px. Above 992 the band carries the space on both sides and the
     block is handed back its plain height, so it centres true. */
  .logo__tagline { padding-bottom: 0; }
}

/* Below 992 the theme gives the band 25px top and bottom. The tagline's own 6px
   sits inside the block, so the underside was 31 against 25 on top and the
   lockup read low in the band. The top matches it at 31. Written out rather than
   added to the theme value because main.css is vendor and is never edited. */
@media (max-width: 991.98px) {
  /* Written as absolute totals, not as an addition: below 992px the theme sets
     25px on both sides, so "take 7px off" has to be the finished number or the
     next reader adds to a value that is already the answer. 31 -> 24 above the
     logo, and 25 -> 18 under the band, which with the tagline's own 6px leaves
     24px under "Digital Marketing". Julia, on her phone, 2026-09-09. */
  .bd-header__main { padding-top: 24px; padding-bottom: 18px; }

  /* The menu button is centred against the whole lockup - wordmark plus
     tagline - so it hangs below the lettering it reads as belonging to.
     Measured off the rendered pixels: the bars span 38 to 61 and the black
     lettering spans 25.9 to 51.9, so their centres are 10.6px apart. 11px puts
     the bars level with the letters. Julia's own estimate was 12. */
  .hamburger-btn { position: relative; top: -11px; }
}

/* ---------------------------------------------------------------------------
   6b. The whole wordmark has to be clickable

   The logo image renders 250px wide but the theme gives it a col-lg-2, which is
   209px at 1440 and narrower still below that. The right-hand third of the mark
   - from the rocket through the end of LAUNCH - therefore hangs outside its own
   column, and the next column in the row paints over it and swallows the click.
   Julia reported it exactly that way: "starting after the rocket the UNCH I
   can't click on that part."

   Not caused by the tagline: measured with the tagline hidden, the box is the
   same width. Lifting the logo's own box is enough, and it cannot cover the
   menu - the nearest nav link sits 200px or more to the right at every width
   from 992 up, and on a phone the burger is 86px clear of the mark.
   --------------------------------------------------------------------------- */

.logo { position: relative; z-index: 3; }

/* ---------------------------------------------------------------------------
   7. Social buttons
   Julia 2026-09-09: round instead of square, and each one in its own network's
   colour rather than a row of identical grey tiles.

   The markup is not touched. Every glyph is an inline SVG filled with
   currentColor, so setting the link's own colour to white turns the mark white,
   and the three links are told apart by the site they point at rather than by a
   class that would have to be added to 84 pages twice over.

   Both places the row appears are covered: the footer on every page, and the
   menu that slides in on a phone. Nothing under work/ loads this file, so the
   spec sites keep the social styling their own brands were built with.
   --------------------------------------------------------------------------- */
.bd-footer-widget__social a,
.offcanvas__social ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* the glyphs are fill:currentColor, so this is what colours the mark */
  color: #FFFFFF;
  /* a readable slate stands in if a network below is ever missed */
  background: #37455A;
  /* the SVGs are sized in em, so the button's own size drives the glyph.
     14px inside a 40px circle read as a speck; 18px fills it properly. */
  font-size: 18px;
  line-height: 1;
}

.bd-footer-widget__social a[href*="facebook.com"],
.offcanvas__social ul li a[href*="facebook.com"] { background: #1877F2; }

.bd-footer-widget__social a[href*="//x.com"],
.offcanvas__social ul li a[href*="//x.com"] { background: #000000; }

/* Instagram's mark is a gradient, not a flat colour. This is the brand's own
   corner-lit ramp: yellow at the lower left through orange and magenta into the
   blue at the top right. */
.bd-footer-widget__social a[href*="instagram.com"],
.offcanvas__social ul li a[href*="instagram.com"] {
  background: radial-gradient(circle at 30% 107%,
    #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}

/* The theme repaints every one of these brand blue on hover, which would undo
   the whole point. They keep their own colour and simply brighten. No movement:
   these are links, not something to bounce. */
.bd-footer-widget__social a:hover,
.bd-footer-widget__social a:focus-visible,
.offcanvas__social ul li a:hover,
.offcanvas__social ul li a:focus-visible {
  color: #FFFFFF;
  filter: brightness(1.12);
}
.bd-footer-widget__social a[href*="facebook.com"]:hover,
.offcanvas__social ul li a[href*="facebook.com"]:hover { background: #1877F2; }
.bd-footer-widget__social a[href*="//x.com"]:hover,
.offcanvas__social ul li a[href*="//x.com"]:hover { background: #000000; }