/* ═══════════════════════════════════════════════════════════════════════
   Shared styles for pages using base/base_idazery_public_minimal.html
   (the minimal navbar + footer) — currently journal_planner_notes.html and
   the_idazery_practice.html. Previously duplicated verbatim in each page's
   own stylesheet; extracted here after the two copies had already started
   drifting apart (see git history) — one source of truth instead of
   remembering to edit both.
   ═══════════════════════════════════════════════════════════════════════ */

/* .button-arrow itself is only ever styled scoped to a specific parent
   (.hero-cta .button-arrow in home.css, .cta-status .button-arrow in
   plans.css, etc.) — there's no generic rule to inherit site-wide, so the
   .action-button.start-free used on these two pages needs its own sizing
   (the hover nudge is already covered by plans.css's
   .action-button.start-free:hover .button-arrow, no need to repeat it).
   Same 1.2em as every other .button-arrow — that size difference is what
   reads as "space" next to the text, not a gap. */
.action-button .button-arrow {
    display: inline-flex;
    align-items: center;
    font-size: 1.2em;
    line-height: 1;
    transition: transform 0.3s ease;
    will-change: transform;
}

/* The .start-free hover nudge above (plans.css) only covers that one
   variant — the account_exists popup's "Access" button is
   .action-button.info (see the_idazery_practice.js), which needs its own
   hover rule for the same nudge. */
.action-button.info:hover .button-arrow {
    transform: translateX(4px);
}

.navbar-minimal .nav-right {
    gap: 1.25rem;
    display: flex;
    align-items: center;
}

/* core/navbar.css's base .sign-up has a fixed width (110px, 115px for
   Spanish) sized for the short "Sign Up"/"Regístrate" — too narrow for
   "Empieza gratis →" or "Comece grátis →", which overflowed the button.
   Overridden here to size to its own content instead. Colour uses the
   same green as .sign-up on every other public page's navbar (see
   navbar.css) rather than a teal matching either page's own CTAs — a teal
   button barely showed up against the navbar's own teal gradient
   background, and green is already this site's established header-CTA
   colour, not a one-off. Same radius as .action-button (12px), for the
   same reason the body CTA uses it: one shape for "start free" everywhere. */
.navbar-minimal .sign-up {
    width: auto;
    white-space: nowrap;
    background: transparent;
    color: #ffffff;
    border: 2px solid #4caf50;
    padding: 0.5rem 1.2rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.navbar-minimal .sign-up:hover {
    background: #4caf50;
    border-color: #4caf50;
    box-shadow: 0 2px 10px rgba(76, 175, 80, 0.35);
}

/* The base navbar collapses to an icon-only button under 425px (see
   navbar.css's .su-icon/.su-text swap) — we don't have an icon variant
   here, so keep the text visible at every width instead of disappearing. */
@media (max-width: 425px) {
    /* Below this width the ES/PT button text ("Empieza gratis →" /
       "Comece grátis →") barely fits next to the language selector — the
       1.25rem gap between them was pushing the button past the edge.
       Zero it out only here; on wider screens (where "Sign In" would be
       visible on a full navbar, see navbar.css's 500px breakpoint — this
       minimal navbar doesn't show it at all) the gap gives the two
       nav-right items real visual separation and shouldn't be removed. */
    .navbar-minimal .nav-right {
        gap: 0;
    }
    .navbar-minimal .sign-up {
        width: auto;
        height: auto;
        padding: 0.5rem 1rem;
    }
    .navbar-minimal .su-text {
        display: inline !important;
    }
}

.footer-minimal {
    padding: 2rem 20px;
}

.footer-minimal .footer-bottom {
    padding: 0;
}

/* Loading state for a one-click .action-button while its fetch is in
   flight (see the_idazery_practice.js's bindSubscribeCta) — generic
   enough to reuse anywhere on these two pages, not tied to either one. */
.action-button.is-loading {
    opacity: 0.7;
    pointer-events: none;
}