/* Access links. Inherits the host theme's type and colour, and imposes no
   palette of its own unless a template asks for one. */

/* Ghost CTA: theme-agnostic. Border = currentColor so it stays visible and
   contrast-correct on any light/dark theme. No brand hue imposed.

   DECLARED AT THE TOP LEVEL RATHER THAN NESTED UNDER .mbwp-access, and that is
   load-bearing: the default render is a bare anchor with no wrapper at all, so
   a nested rule would leave it unstyled.

   THE CURSOR IS DECLARED RATHER THAN INHERITED, and that is a fix rather than
   a tidy-up. An anchor with an href already shows the hand, so this looks
   redundant, and it is not: the Telegram skin puts a span holding an inline
   SVG inside this anchor, and a theme rule on svg overrides the inherited
   value on that one child. The pointer then alternated between the arrow and
   the hand as it crossed the icon, which is what the owner reported. */
.mbwp-access__cta {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 2px solid currentColor;
    border-radius: 0.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
.mbwp-access__cta:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* One product per item, so several products stack rather than run together. */
.mbwp-access__item { margin: 0 0 1rem; }
.mbwp-access__item:last-child { margin-bottom: 0; }

/* The icon rides the button's own text size and colour (fill: currentColor).

   AND IT IS NOT A HIT TARGET. It is decorative and already aria-hidden, so
   taking it out of hit testing costs a reader nothing and makes the button one
   target rather than an anchor with a separate span inside it. Together with
   the declared cursor above, no rule a theme puts on svg can reach it. */
.mbwp-access__icon {
    display: inline-flex;
    pointer-events: none;
}

/* Telegram skin.

   THE BRAND HUE IS A CUSTOM PROPERTY WHOSE DEFAULT IS SUPPLIED AS THE var()
   FALLBACK RATHER THAN DECLARED IN A RULE. A theme that sets
   --mbwp-telegram-blue anywhere wins with no specificity fight, because there
   is no declaration here to out-rank.

   White on #229ED9 measures about 3.0:1, below the WCAG AA 4.5:1 for normal
   text. #229ED9 is Telegram's own brand blue and the owner asked for it by
   number, so it ships, and this note is here so the next reader knows it was
   weighed rather than missed. The property is the fix if it is ever wanted:
   setting --mbwp-telegram-blue to about #1B7FAE reaches 4.5:1 with no code
   change. */
.mbwp-access--telegram .mbwp-access__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-color: var( --mbwp-telegram-blue, #229ED9 );
    background-color: var( --mbwp-telegram-blue, #229ED9 );
    color: #fff;
}
.mbwp-access--telegram .mbwp-access__cta:focus-visible {
    outline-color: var( --mbwp-telegram-blue, #229ED9 );
}

/* Link card.

   MEASURED OFF A LIVE CARD RATHER THAN DESIGNED HERE. The owner pointed at two
   link cards on a page of his own and asked for the same shape in Telegram
   blue. Every number below was read off the computed styles of that card: the
   padding, the two shadows, the 3px radius, the 44px glyph column, the 20px
   gutter, and the 18px between the body row and the action row. None of it is
   re-derived, because a number that merely looks close is what makes a
   recreation resemble the original instead of being it.

   THERE IS NO DIVIDER LINE, and its absence was measured too. border-top,
   border-bottom, ::before and ::after were read on every element of that card
   and every one of them is none. What looks like a rule above the action row
   in a screenshot is the card's own bottom edge, so a border here would draw a
   second one.

   THE TYPE IS THE THEME'S. On his page the title and the description render in
   the theme's family, size, line height and colour. So no rule below declares
   any of the four, which is the rule this file states at its top. The two
   weights are the exception and they are not type: they are what tells a title
   from a description.

   THE BRAND HUE IS AN ACCENT, NOT A BLOCK OF COLOUR. The card stays white and
   three things take the hue: the glyph, the action text and the arrow. It is
   read through the same custom property with the same var() fallback as the
   telegram skin, so a theme that sets the property wins with no specificity
   fight. */

/* The card overrides the shared item margin rather than adding a second
   spacing mechanism of its own: 0 0 1rem is what every other skin needs and
   5px 0 18px is what this one was measured at. */
.mbwp-access--card .mbwp-access__item { margin: 5px 0 18px; }
.mbwp-access--card .mbwp-access__item:last-child { margin-bottom: 0; }

/* A column that pushes its action row to the bottom edge, so two cards of
   different description lengths still line their actions up.

   THE CURSOR IS DECLARED RATHER THAN INHERITED, the same fix as on the ghost
   button above and for the same reason: this anchor holds two spans with
   inline SVG in them, and a theme rule on svg otherwise flips the pointer back
   and forth as it crosses a glyph. */
.mbwp-access--card .mbwp-access__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 20px 12px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba( 66, 66, 66, 0.08 ), 0 1px 3px 1px rgba( 66, 66, 66, 0.16 );
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
.mbwp-access--card .mbwp-access__card:focus-visible {
    outline: 2px solid var( --mbwp-telegram-blue, #229ED9 );
    outline-offset: 2px;
}

/* The body row: the glyph column, then the text column. */
.mbwp-access--card .mbwp-access__card-body {
    display: flex;
    flex-direction: row;
    margin-bottom: 18px;
}

/* The glyph column. font-size sizes the SVG, which is drawn 1em square, so the
   44px column and the 44px mark are one number rather than two that must be
   kept in step. line-height: 1 keeps the column exactly as tall as the mark.

   AND IT IS NOT A HIT TARGET, the same rule .mbwp-access__icon carries: the
   glyph is decorative and already aria-hidden, so taking it out of hit testing
   costs a reader nothing and makes the card one target. */
.mbwp-access--card .mbwp-access__card-icon {
    display: inline-flex;
    width: 44px;
    margin-right: 20px;
    font-size: 44px;
    line-height: 1;
    color: var( --mbwp-telegram-blue, #229ED9 );
    pointer-events: none;
}

/* Every element inside the anchor is a span, so every box the layout needs is
   declared here: a span is inline until a rule says otherwise. */
.mbwp-access--card .mbwp-access__card-text { display: block; }
.mbwp-access--card .mbwp-access__card-title { display: block; font-weight: 700; }
.mbwp-access--card .mbwp-access__card-description { display: block; font-weight: 400; }

/* The action row: the action text at one end, the arrow at the other. The hue
   is declared once here and both children inherit it, the arrow through
   currentColor. */
.mbwp-access--card .mbwp-access__card-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var( --mbwp-telegram-blue, #229ED9 );
}
.mbwp-access--card .mbwp-access__card-arrow {
    display: inline-flex;
    pointer-events: none;
}