/*
Theme Name: LATW — LLM Automatic Translation
Theme URI: https://llm-automatic-translation.top/
Author: AdsPol / Szymon Zawadzki
Author URI: https://x.com/szymon_eryk
Description: Marketing theme for LLM Automatic Translation — AI translation plugins for WordPress (WPML and Loco Translate). Ships a home page template plus dedicated landing-page templates for each plugin. All copy is fully translation-ready via the "latw" text domain.
Version: 1.6.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: latw
*/

/* ===== Design tokens — mirrors @heroui/theme's dark layout exactly,
   so this theme matches llm-automate-translate-wpml-web pixel-for-pixel. ===== */
:root {
  --accent: #006FEE;        /* HeroUI primary.DEFAULT (blue.500) */
  --accent-foreground: #fff;
  --background: #000000;    /* HeroUI dark background.DEFAULT */
  --content1: #18181b;      /* HeroUI dark content1.DEFAULT (zinc.900) */
  --content2: #27272a;      /* HeroUI dark content2.DEFAULT (zinc.800) */
  --content1-foreground: #fafafa;
  --divider: rgba(255, 255, 255, .15);
  --focus: #006FEE;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 14px;
  --shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / .06), 0px 2px 30px 0px rgb(0 0 0 / .22), inset 0px 0px 1px 0px rgb(255 255 255 / .15);
  --shadow-large: 0px 0px 30px 0px rgb(0 0 0 / .07), 0px 30px 60px 0px rgb(0 0 0 / .26), inset 0px 0px 1px 0px rgb(255 255 255 / .15);
  --transition: 250ms ease;
}

/* ===== Global base (shared by every template) ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Anchor jumps land the section at the very top of the viewport, so give it a
   little breathing room - and, where the sticky sub-nav exists, enough room
   that the strip does not cover the heading we just scrolled to. */
html { scroll-padding-top: 16px; }
html:has(.latw-subnav) { scroll-padding-top: 80px; }
@media (max-width: 1199px) {
  /* Sub-nav is hidden at this width, so the extra offset is not needed. */
  html:has(.latw-subnav) { scroll-padding-top: 16px; }
}
body {
  margin: 0;
  background: var(--background);
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.01em;
}
::selection { background: rgba(0, 111, 238, .4); }
a { color: inherit; text-decoration: none; }
img { display: block; }

/* ===== Global typography scale — same px values site-wide, every template =====
   Uses !important to win over per-element inline font-size attributes. */
body, p { font-size: 16px !important; }
h1 { font-size: 68px !important; }
h2 { font-size: 48px !important; }
h3 { font-size: 24px !important; }
@media (max-width: 767px) {
  body, p { font-size: 14px !important; }
  h1 { font-size: 40px !important; }
  h2 { font-size: 36px !important; }
  h3 { font-size: 20px !important; }
}

/* ===== Section spacing — same vertical rhythm site-wide ===== */
section { margin: 120px 0 !important; }
@media (max-width: 767px) {
  section { margin: 60px 0 !important; }
}

/* ===== Mobile hamburger nav ===== */
.latw-menu-checkbox { display: none; }
.latw-menu-burger { display: none; }
.latw-mobile-menu { display: none; }

/* Keep every nav label on a single line — never break "LATW Multilingual"
   into two rows, which left an ugly ragged gap next to the CTAs. */
.latw-nav-links a { white-space: nowrap; }

/* Every desktop width: the link list grew (Home + all plugins / landing
   anchors + Knowledge base + Team), so tighten the row — smaller logo, gaps
   and CTAs — so it still fits on one line before the burger takes over
   instead of overflowing past the edge. This applies above 1240px too: the
   nav itself is capped at max-width 1240px, so a wider viewport gives the
   links no extra room. (Localised CTA labels such as "POBIERZ WTYCZKĘ" are
   wider than English.) */
@media (min-width: 1200px) {
  nav { gap: 16px !important; }
  .latw-nav-links { gap: 20px !important; font-size: 15px !important; }
  .latw-nav-ctas-desktop { gap: 8px !important; }
  nav > a img { height: 40px !important; width: auto !important; }
  .latw-nav-ctas-desktop .latw-btn-sm { padding: 12px 16px !important; font-size: 14px !important; }
}

/* Collapse to the burger menu earlier: below ~1200px the full horizontal nav
   can no longer hold all the links (now including Knowledge base and Team)
   plus the CTA cluster comfortably. Measured, the widest nav needs ~1060px of
   content width, and localised CTA labels such as "POBIERZ WTYCZKĘ" are wider
   than the English ones, so the cut-off leaves deliberate headroom.
   The language switcher stays visible right next to the burger; only the
   text CTAs are dropped (they reappear inside the opened mobile menu). */
@media (max-width: 1199px) {
  .latw-nav-links { display: none !important; }
  .latw-nav-ctas-desktop a.latw-btn { display: none !important; }
  .latw-nav-ctas-desktop { margin-left: auto !important; }
  .latw-menu-burger { display: flex !important; }
  .latw-menu-checkbox:checked ~ .latw-mobile-menu { display: flex !important; }
}

/* Phones: shrink the wordmark and tighten the bar so the logo, the language
   switcher and the burger all sit on one row without overflowing. */
@media (max-width: 640px) {
  nav { gap: 12px !important; padding-left: 16px !important; padding-right: 16px !important; }
  nav > a img { height: 36px !important; width: auto !important; }
}
@media (max-width: 430px) {
  nav > a img { height: 32px !important; }
}

/* ===== Page sub-nav (parts/nav.php) =====
   The bar above is site-wide, so anchors belonging to a single page get their
   own sticky strip underneath it. Brand and spacer take equal shares of the
   leftover space, which keeps the link row centred whatever the brand label
   is. */
.latw-subnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 11, 13, .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.latw-subnav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
}
.latw-subnav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  flex: 1 1 0;
}
.latw-subnav-spacer { flex: 1 1 0; }
.latw-subnav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14.5px;
  font-weight: 500;
  color: #9CA3AF;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 1 auto;
}
.latw-subnav-links::-webkit-scrollbar { display: none; }
.latw-subnav-links a { white-space: nowrap; }
.latw-subnav-links a:hover { color: #fff; }

/* Same breakpoint at which the main nav collapses into the burger: below it
   these anchors are served by the "On this page" group inside the mobile
   drawer, so the strip would only duplicate them. */
@media (max-width: 1199px) {
  .latw-subnav { display: none; }
}

/* ===== About-me media row (home page) — image full-width on top on mobile ===== */
@media (max-width: 767px) {
  .latw-about-row { flex-direction: column !important; }
  .latw-about-img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; }
}

/* ===== Pricing card divider between CTA button and feature list ===== */
.latw-pricing-features { margin: 20px -24px 0; padding: 16px 24px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.latw-free-features { border-left: 1px solid rgba(255, 255, 255, .08); }
@media (max-width: 767px) {
  .latw-free-features { border-left: none !important; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 20px; }
}

/* FAQ accordion (used on the plugin landing templates) */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }

/* Modest responsive fallbacks so the fixed grids degrade on small screens */
@media (max-width: 860px) {
  .latw-grid-2,
  .latw-grid-3,
  .latw-grid-4 { grid-template-columns: 1fr !important; }
  .latw-split { grid-template-columns: 1fr !important; }
}

/* ===== Bento grid =====
   Irregular card sizes on one 12-column track: the two or three claims worth
   arguing get a large tile with a diagram, everything else is a small tile the
   eye can skim. Spans collapse to a single column on narrow screens, where an
   uneven grid only produces orphans. */
.latw-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  align-items: stretch;
}
.latw-bento > * { grid-column: span 4; }
.latw-bento .b-4  { grid-column: span 4; }
.latw-bento .b-5  { grid-column: span 5; }
.latw-bento .b-6  { grid-column: span 6; }
.latw-bento .b-7  { grid-column: span 7; }
.latw-bento .b-8  { grid-column: span 8; }
.latw-bento .b-12 { grid-column: span 12; }
.latw-bento .b-tall { grid-row: span 2; }
@media (max-width: 1024px) {
  /* Halfway house: two columns, so the tall tile does not tower over a
     single-column stack of small ones. */
  .latw-bento { grid-template-columns: repeat(6, 1fr); }
  .latw-bento > *,
  .latw-bento .b-4,
  .latw-bento .b-5 { grid-column: span 3; }
  .latw-bento .b-6,
  .latw-bento .b-7,
  .latw-bento .b-8,
  .latw-bento .b-12 { grid-column: span 6; }
  .latw-bento .b-tall { grid-row: auto; }
}
@media (max-width: 720px) {
  .latw-bento { grid-template-columns: 1fr; }
  .latw-bento > * { grid-column: auto !important; grid-row: auto !important; }
}

/* The four-stage pipeline diagram turns vertical on phones, where five boxes
   side by side would each be two characters wide. */
@media (max-width: 560px) {
  .latw-pll-flow { flex-direction: column; }
  .latw-pll-flow > div { transform: none; }
  .latw-pll-flow > div:nth-child(even) { justify-content: center; transform: rotate(90deg); }
}

/* ===== Team page avatar grid =====
   Four portraits across on desktop, two per row below that. Deliberately not
   .latw-grid-4, which drops to a single column and blows each square avatar
   up to the full content width. */
@media (max-width: 860px) {
  .latw-team-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ===== Comparison page hero: "[Product] vs [Competitor]" logo row =====
   Desktop keeps it on one line; below ~480px there isn't room for two logos
   plus the "vs" label side by side, so stack them into a column instead. */
@media (max-width: 480px) {
  .latw-vs-hero { flex-direction: column !important; gap: 10px !important; }
}

/* ===== "To be fair" honesty card on comparison pages =====
   Same fixed padding as larger cards looks oversized against phone-width
   text; tighten it up below the tablet breakpoint. */
@media (max-width: 640px) {
  .latw-tobefair-card { padding: 22px 20px !important; }
}

/* ===== HeroUI-equivalent Button =====
   Mirrors @heroui/theme's button.js: size md (h-10, px-4, rounded-medium,
   text-small), 250ms transform/colors/opacity transition, hover opacity .9
   (HeroUI dark hoverOpacity), active/pressed scale .97, focus ring in the
   primary color. */
.latw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-medium);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  outline: none;
  transition: transform var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
}
.latw-btn:active { transform: scale(.97); }
.latw-btn:focus-visible { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--focus); }

.latw-btn-sm { height: auto; padding: 16px 26px; border-radius: var(--radius-small); font-size: 16px; }
.latw-btn-lg { height: 48px; padding: 0 24px; border-radius: var(--radius-large); font-size: 16px; }

/* Hero CTA (directly under the H1 on each landing page) — bigger than the standard lg button */
.latw-btn-hero { height: auto; padding: 20px 30px; font-size: 20px; }
@media (max-width: 767px) {
  .latw-btn-hero { font-size: 16px; }
}

/* solid / primary — the main CTA style */
.latw-btn-primary {
  background: var(--accent);
  color: var(--accent-foreground);
}
.latw-btn-primary:hover { opacity: .9; }

/* bordered — secondary CTA style */
.latw-btn-bordered {
  background: transparent;
  color: #fff;
  border: 1px solid var(--divider);
}
.latw-btn-bordered:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); }

/* flat / ghost — low-emphasis CTA style */
.latw-btn-flat {
  background: rgba(0, 111, 238, .15);
  color: var(--accent);
}
.latw-btn-flat:hover { background: rgba(0, 111, 238, .25); }

.latw-btn-light {
  background: transparent;
  color: #fff;
}
.latw-btn-light:hover { background: rgba(255, 255, 255, .08); }

/* ===== HeroUI-equivalent Card =====
   Mirrors @heroui/theme's card.js: bg-content1, rounded-large (14px),
   shadow-medium, data-[hover=true]:bg-content2 + a subtle lift, 250ms
   transition on transform/colors. */
.latw-card {
  background: var(--content1);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-medium);
  transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.latw-card-hoverable { cursor: pointer; }
.latw-card-hoverable:hover {
  background: var(--content2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-large);
}
.latw-card-hoverable:active { transform: translateY(-2px) scale(.99); }

/* ===== Testimonials — real review screenshots on light cards =====
   Two featured WordPress.org reviews on top, then a masonry of shorter
   email/chat feedback. Screenshots are dark text, so cards are white. */
.latw-reviews-featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 18px;
  align-items: start;
}
.latw-reviews-masonry { columns: 3; column-gap: 18px; }
.latw-review-shot {
  display: block;
  background: #fff;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-medium);
  padding: 20px;
}
.latw-reviews-masonry .latw-review-shot { break-inside: avoid; margin-bottom: 18px; }
.latw-review-shot img { width: 100%; height: auto; display: block; border-radius: 8px; }
@media (max-width: 860px) {
  .latw-reviews-featured { grid-template-columns: 1fr !important; }
  .latw-reviews-masonry { columns: 2; }
}
@media (max-width: 560px) {
  .latw-reviews-masonry { columns: 1; }
}

/* ===== Blog post content (the_content() output — arbitrary editor HTML) ===== */
.latw-prose { color: #C7CCDA; line-height: 1.75; }
.latw-prose > * + * { margin-top: 22px; }
.latw-prose h2 { font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: #fff; }
.latw-prose h3 { font-weight: 700; letter-spacing: -.015em; line-height: 1.3; color: #fff; }
.latw-prose p { margin: 0; }
.latw-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.latw-prose strong { color: #fff; }
.latw-prose ul, .latw-prose ol { margin: 0; padding-left: 1.4em; }
.latw-prose li + li { margin-top: 8px; }
.latw-prose blockquote { margin: 0; padding: 4px 20px; border-left: 3px solid var(--accent); color: #9CA3AF; font-style: italic; }
.latw-prose img { max-width: 100%; height: auto; border-radius: var(--radius-medium); display: block; }
.latw-prose figure { margin: 0; }
.latw-prose figcaption { margin-top: 8px; font-size: 13px; color: #6B7185; text-align: center; }
.latw-prose pre { background: var(--content1); border-radius: var(--radius-medium); padding: 18px 20px; overflow-x: auto; font-size: 14px; }
.latw-prose code { background: var(--content1); border-radius: 4px; padding: 2px 6px; font-size: .9em; }
.latw-prose pre code { background: none; padding: 0; }
.latw-prose hr { border: none; border-top: 1px solid rgba(255, 255, 255, .08); }

/* ===== Single post: article + product ad rail (single.php, parts/post-ads.php) =====
   The article keeps its 720px measure and the promos sit in a 300px rail beside
   it, sticky so they stay in view down a long read. Below 1100px there is no
   room for a second column without squeezing the text, so the rail is dropped
   and the same two products appear as a compact strip above the article. The
   block under the post is shown at every width. */
.latw-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) 300px;
  gap: 48px;
  justify-content: center;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
.latw-post-main { min-width: 0; }
.latw-post-ad-rail { position: sticky; top: 24px; }
.latw-post-ad-mobile { display: none; }
@media (max-width: 1099px) {
  .latw-post-layout { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .latw-post-aside { display: none; }
  .latw-post-ad-mobile { display: block; }
}
@media (max-width: 640px) {
  .latw-post-ad-grid { grid-template-columns: 1fr !important; }
}

/* ===== Blog pagination (archive.php) ===== */
#latw-pagination a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-medium);
  border: 1px solid var(--divider);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: background-color var(--transition), border-color var(--transition);
}
#latw-pagination a:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); }

/* ===== Comparison tables (template-polylang-vs-autopoly.php) =====
   Below 700px the grid rows stop being columns and stack, each value cell
   labelled with the product it belongs to, so the page never scrolls
   sideways and the card never needs an inner scrollbar. */
@media (max-width: 700px) {
  .latw-vs-head { display: none !important; }
  .latw-vs-row {
    display: block !important;
    min-width: 0 !important;
    padding: 16px 18px !important;
  }
  .latw-vs-crit {
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
  }
  .latw-vs-cell {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    text-align: right !important;
    padding: 5px 0;
  }
  .latw-vs-cell::before {
    content: attr(data-col);
    flex: none;
    color: #5C6173;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
}