/*

  branding.css - Styling for the product branding UI ( branding.js )

  Pairs with MakeProductTitle: the logo + title layout and the gradient
  business-name subtitle. Same exact look and feel across every product.

*/


/* Product title block ( MakeProductTitle ) - logo hugging the title/subtitle. flex-wrap collapses it to a centered stack ( logo on top ) when space runs tight, no media query needed */
.producttitlearea
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.producttitleicon
{
    width: 54px;
    height: 54px;
    object-fit: contain;
    flex-shrink: 0; /* keep the icon its size while the text hugs beside it */
    filter: blur(0.5px); /* soften the crisp vector edges slightly at this large size */
}

.producttitletext
{
    text-align: left; /* title and subtitle hug the icon on wide screens */
    min-width: 0; /* let the title truncate instead of forcing the row wider */
}

/* Same look and feel as .headertitletop but a little larger - the gradient business-name line under a product title */
.presentationtitle
{
  font-size: calc(0.7rem + 0.4vw); /* responsive - scrunches down with the viewport like the title above it */
    font-weight: 800;
    letter-spacing: 0.3px;
    /* Gradient text - #00a900 fading into #8787ec, painted through the letters via background-clip */
    background: linear-gradient(90deg, #00a900, #8787ec);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #00a900; /* fallback color if background-clip:text is unsupported */
    /* Usable as a link without looking like one - drop the underline, inline-block so the vertical margin still applies */
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.15s ease; /* smooth the hover grow */
}

/* Grow slightly on hover to signal it is clickable */
.presentationtitle:hover
{
    transform: scale(1.01);
}