/*
 * content-pages.css  --  the two acquisition pages.
 *
 * qr-menu-for-restaurants.html and free-qr-code-generator.html. The landing page
 * styles the same generator with Tailwind utilities; these pages follow the
 * discipline of the policy pages and menu-guide -- legal.css and venues.css
 * only, no CDN, no utility framework -- so they need this small sheet.
 *
 * ⚠ WHY `.cta` AND NOT `.btn-primary`.
 *
 * `.btn-primary` and `.btn-secondary` are used across venues.html and board.html
 * and are DEFINED IN NO STYLESHEET AT ALL -- those pages have been living on the
 * browser's default <button> rendering. That is survivable for a <button> and
 * invisible for an <a>, which is how the first version of these pages shipped a
 * conversion link that rendered as a plain underlined sentence.
 *
 * Defining `.btn-primary` here would fix these two pages and silently restyle
 * nothing else, because nothing else loads this file -- leaving one class name
 * meaning two different things depending on the page. A new name says what it
 * is. If the app's buttons are ever given real styles, that is a separate job
 * and this does not get in its way.
 */

.cta {
    display: inline-block;
    padding: 0.75rem 1.4rem;
    border-radius: 10px;
    background: var(--primary, #6d5efc);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
}

.cta:hover { opacity: 0.92; }

/* Keyboard users get the same affordance as the hover. */
.cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.fq-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    align-items: start;
    margin: 1.6rem 0 2rem;
    padding: 1.4rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

/* The plate goes ABOVE the controls on a phone rather than below: the code is
   the thing somebody came for, and burying it under four form fields means the
   page looks like a form instead of a tool. */
@media (max-width: 44rem) {
    .fq-panel { grid-template-columns: 1fr; }
    .fq-plate { order: -1; }
}

.fq-controls label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.6;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.fq-controls input[type="text"],
.fq-controls select {
    width: 100%;
    box-sizing: border-box;
    /* 16px minimum, or iOS Safari zooms the page on focus. */
    font-size: 16px;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg, #fff);
    color: inherit;
}

.fq-row {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.9rem;
}

.fq-row > div { flex: 1 1 0; min-width: 0; }

.fq-controls input[type="color"] {
    width: 100%;
    height: 2.7rem;
    padding: 0.2rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg, #fff);
}

.fq-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

/* The download buttons are real <button>s, so they at least render -- but they
   render as the browser's default, which on this page reads as a form control
   rather than the thing the visitor came for. */
.fq-actions button {
    padding: 0.6rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg, #fff);
    color: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.fq-actions button.btn-primary {
    background: var(--primary, #6d5efc);
    border-color: transparent;
    color: #fff;
}

/* Disabled until there is something to download. Without this the buttons look
   live on an empty panel and the first thing a visitor does is click one. */
.fq-actions button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.fq-plate { text-align: center; }

.fq-plate canvas {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 12px;
    background: #fff;
}

.fq-hint {
    font-size: 0.75rem;
    opacity: 0.6;
    margin: 0.7rem 0 0;
    min-height: 1.2em;   /* reserve the line so the panel does not jump */
}