/* landing-trezo.css — Luppis fixes on top of the Trezo finance theme
   (static/landing/css/style.css). Loaded only by the public marketing pages.

   These exist because the vendored theme is desktop-first and has a few genuine
   bugs; each rule below documents what it corrects. Do NOT fold these into the
   vendored style.css — keeping them separate means the theme can be re-pulled. */

.lp-ticker-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.lp-ticker { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: lp-scroll 34s linear infinite; }
.lp-ticker-wrap:hover .lp-ticker { animation-play-state: paused; }
.lp-chip { font-size: 20px; font-weight: 700; color: #4b5563; padding: 0 26px; }
.lp-dot { color: #605DFF; font-size: 9px; vertical-align: middle; }
@keyframes lp-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* About photo: the theme only caps it at >=1399px, so it balloons at laptop widths. Apply the cap across all desktop widths for consistent sizing (same cards/composition). */
@media (min-width: 992px) {
    .about-area .about-img-wrap .about-img { max-width: 460px; }
    /* Cap the wrapper to the same box. The floating cards are positioned against the
       wrapper, so while it kept growing with the column (630px) and the photo stayed
       at 460px, they drifted up to 113px past the photo's right edge on wide screens. */
    .about-area .about-img-wrap { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 991px) {
    /* Mobile: columns stack, so the sticky image column would scroll over the text (a bug present in the Trezo demo too). Make it static. */
    .about-area .col-lg-6.position-sticky { position: static !important; top: auto !important; }
}
/* The two floating cards are transparent PNGs with their rounded corners and drop
   shadow baked into the alpha. The theme's CSS box-shadow on .activity follows the
   element's rectangular border-box instead, drawing a square halo around the
   invisible corners — which is exactly what made these read as hard-edged boxes. */
.about-area .about-img-wrap .activity { box-shadow: none; }
/* Sit the light card over the photo rather than off its edge, so it has something to
   contrast against (the purple card already overlaps). Offsets absorb the shadow
   padding baked into each PNG. */
.about-area .about-img-wrap .net-profit { right: -34px; }
.about-area .about-img-wrap .activity { right: 4px; bottom: 40px; }
/* Standards ticker section: padding in CSS (not inline) so it can respond. */
.partners-area { padding-top: 90px; padding-bottom: 90px; }
@media (max-width: 767px) {
    .partners-area { padding-top: 50px; padding-bottom: 50px; }
    /* Ticker: 20px only fits ~2 sliced items on a phone. */
    .lp-chip { font-size: 14px; padding: 0 16px; }
    .lp-dot { font-size: 7px; }
    /* Footer: let the two link columns use the full width instead of bunching left. */
    .footer-area .footer-import-link { width: 100%; }
    .footer-area .footer-import-link .d-flex { justify-content: space-between; gap: 20px; }
}

/* Language switcher in the marketing navbar. The Trezo theme has no such control,
   so this styles both variants: pinned <a> links on the landing (hreflang
   alternates) and the set_language <button>s used on every other public page —
   the button reset keeps them visually identical to the links. */
.lp-lang { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.lp-lang > span { color: #9ca3af; font-size: 12px; }
.lp-lang-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 13px; font-weight: 600; letter-spacing: .5px;
    color: #6b7280; text-decoration: none; transition: color .15s ease;
}
.lp-lang-btn:hover { color: var(--bs-primary, #605DFF); }
.lp-lang-btn.active { color: var(--bs-primary, #605DFF); }

/* i18n: Croatian labels are markedly longer than the English originals
   ("START FREE" -> "ZAPOČNITE BESPLATNO"), which made nav items and the CTA wrap
   onto two lines and left the navbar ragged. Keep them on one line and trim the
   nav spacing a little so the row still fits. */
.navbar .navbar-nav .nav-link,
.navbar .others-option .default-btn span { white-space: nowrap; }
/* Uppercase in CSS, not in the msgid: translators shouldn't have to remember the
   casing, and it keeps every locale's nav visually consistent. */
.navbar .navbar-nav .nav-link { text-transform: uppercase; }
/* No gap override: the theme's own 30px nav spacing is kept. Croatian labels are
   longer but still fit, because nowrap (above) is what actually prevents the
   two-line wrapping that caused the ragged navbar. */

/* Button labels are uppercased in CSS rather than in the msgid, so translators
   write natural sentence case ("Start free") and every locale renders alike. */
.default-btn span { text-transform: uppercase; }

/* Article/content body spacing. The theme's ptb-150 leaves a ~150px void directly
   under the page banner, which already provides generous breathing room. */
.vodic-article-area { padding-top: 70px; padding-bottom: 110px; }
@media (max-width: 767px) {
    .vodic-article-area { padding-top: 40px; padding-bottom: 64px; }
}

/* Contact form: the theme's textarea carries an intrinsic (cols-based) width that
   overflows narrow viewports. */
.contact-us-form .form-control,
.contact-us-form textarea { width: 100%; max-width: 100%; }

/* Skip link (a11y). Lives here, not in guides.css: base_marketing.html renders it
   on EVERY public page, and guides.css is only loaded on the content pages — so
   there it would sit unstyled and visible on the landing. */
.pub-skip {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--bs-primary, #605DFF); color: #fff;
    padding: 10px 16px; border-radius: 0 0 8px 0;
}
.pub-skip:focus { left: 0; }

/* Content-page banner (page_banner.html) sat too tall — the Trezo default is
   220px/110px, of which ~90px top is just fixed-navbar clearance. Trim it so the
   gradient header stops dominating short content pages (guides / kontakt / tools).
   Home has its OWN hero (.banner-area), so it's untouched. */
.page-banner-area { padding-top: 150px; padding-bottom: 64px; }
@media (max-width: 767px) {
    .page-banner-area { padding-top: 96px; padding-bottom: 52px; }
}

/* Footer breathing room. The theme's ptb-150 (150/150) felt heavy, but there is
   NO .ptb-100 utility in this build — so set explicit, comfortable padding here
   rather than lean on a class that doesn't exist. Extra room above the logo and
   below the links before the copyright bar (.copyright-area keeps its own 28.5px). */
.footer-area { padding-top: 124px; padding-bottom: 100px; }
@media (max-width: 767px) {
    .footer-area { padding-top: 80px; padding-bottom: 72px; }
}