/* Project-wide overrides on top of Bootstrap/Font Awesome -- see
   webui/templates/___blank.jinja2, which loads this after both. */
a {
    text-decoration: none;
}

/* webui/templates/home.jinja2's "Mail Server" title -- scales with the
   viewport (clamp's middle argument) between a sane floor and ceiling so
   it reads as a huge headline without ever overflowing a narrow phone or
   ballooning absurdly on a wide monitor. min() also folds in viewport
   height, since 20vw alone keeps growing on a wide-but-not-tall page and
   blows the .home-panel card up far past a comfortable size. line-height
   is pulled in tight so the stacked "Mail"/"Server" lines sit close
   together instead of the browser's default double-spaced gap. */
.hero-title {
    font-size: clamp(6rem, min(20vw, 20vh), 22rem);
    line-height: 0.7;
}

/* webui/templates/home.jinja2's title card. */
.home-panel {
    width: 66.6667%;
}

/* The button row (webui/templates/home.jinja2) never wraps (flex-nowrap in
   the template) and is centered as a group via justify-content-center on
   the row -- flex: 0 0 auto keeps each tile from stretching to fill the
   row, so the tiles stay a fixed, comfortable size regardless of viewport
   width. Unlike the reference this was ported from (llm-server's Tunnel/
   Router/Egress/Grafana, all similar-length labels), this project's four
   labels (Domains/Mailboxes/Aliases/Quota) vary enough in width that
   sizing purely off each tile's own content -- flex-basis auto -- would
   make every tile a different size. width is instead fixed to comfortably
   fit the widest label ("Mailboxes") so all four render identically
   sized, with shorter labels centered in the extra room.

   min-width/min-height: 0 override the flex item's default automatic
   minimum size, which is otherwise pinned to its content's min-content
   size on *both* axes -- without the min-height override specifically,
   aspect-ratio can't shrink a narrow-label tile's height down to match
   its (fixed, possibly content-exceeding) width, so it renders as a tall
   rectangle instead of the intended square. overflow: hidden clips a
   label that ever runs wider than this fixed width instead of letting it
   spill out past the square box. */
.app-tile {
    flex: 0 0 auto;
    width: 9rem;
    aspect-ratio: 1 / 1;
    padding: 2rem;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Hover affordance for .clicktocopy elements (webui/static/js/ui.js
   copies data-clickcontent to the clipboard on click) -- a copy icon
   fades in on hover/focus so the element doesn't need an icon of its
   own sitting there permanently (e.g. mail/templates/mail/
   domain_detail.jinja2's DNS records table, one per copyable value). */
.clicktocopy {
    cursor: pointer;
    padding-right: 1.3em;
    position: relative;
}
.clicktocopy::after {
    color: var(--bs-secondary-color);
    content: "\f0c5"; /* fa-copy (solid) */
    font: normal 900 .85em/1 "Font Awesome 6 Free";
    opacity: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .1s ease-in-out;
}
.clicktocopy:hover::after,
.clicktocopy:focus-visible::after {
    opacity: 1;
}