/*
Theme Name: ITBit
Theme URI: https://itbit.cc
Author: ITBit
Description: Block theme for itbit.cc (English) and itbit.cc/hu (Hungarian). Colours and type follow scan.itbit.cc; everything else lives in theme.json.
Version: 1.1.7
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: itbit
*/

/* Only what theme.json cannot express. */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
/* No height:auto on iframes: it collapses them to 150px (embedded forms). */
iframe { max-width: 100%; }

/* Long words (URLs, Hungarian compounds) must not push the page sideways. */
.wp-block-post-content, .wp-block-post-title { overflow-wrap: anywhere; }

/* Sticky header. No backdrop-filter: it would make the header the containing
   block of the mobile menu's position:fixed overlay and trap it inside the bar.
   The template part's own wrapper is what sticks: it is the header's parent
   and exactly as tall, so the header itself would have no room to stick.
   The mobile admin bar scrolls away, so there the header sticks at the top. */
.wp-block-template-part:has(> .itbit-header) { position: sticky; top: 0; z-index: 50; }
@media (min-width: 601px) {
  .admin-bar .wp-block-template-part:has(> .itbit-header) { top: var(--wp-admin--admin-bar--height, 0); }
}
.itbit-header { background: color-mix(in srgb, var(--wp--preset--color--base) 96%, transparent); border-bottom: 1px solid var(--wp--preset--color--border); }
.itbit-header > * { margin-block: 0; }

/* "Already hacked?" bar under the menu on every page: full width, bright
   yellow, sticks with the header. */
.itbit-alert-bar { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--base); padding-block: 0.45rem; }
.itbit-alert-bar__text { margin: 0; text-align: center; font-size: var(--wp--preset--font-size--small); font-weight: 500; line-height: 1.4; }
.itbit-alert-bar a { color: var(--wp--preset--color--base); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.itbit-alert-bar a:hover { text-decoration: none; }
@media (max-width: 599px) {
  .itbit-alert-bar__text { font-size: 0.8125rem; }
}

/* The mobile overlay menu gets the site background and large tap targets. */
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; padding: var(--wp--preset--spacing--50); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: var(--wp--preset--font-size--large); }
/* The header nav is right-justified for desktop; in the overlay the items
   read better from the left. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: 3rem 1.25rem 1.25rem !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding-block: 0.5rem; }

/* Seven menu items + switcher + SOS need ~1180px; the Navigation block's own
   hamburger breakpoint is 600px, so the header menu wraps on tablets and small
   laptops. Below 1180px the header shows the hamburger instead. */
@media (max-width: 1179px) {
  .itbit-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .itbit-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* SOS (hacked-site recovery): bright yellow, always visible, also on phones. */
.itbit-sos { flex-shrink: 0; }
.itbit-sos .wp-block-button__link { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--on-primary); padding: 0.5rem 1rem; letter-spacing: 0.05em; white-space: nowrap; word-break: keep-all; }
@media (max-width: 599px) {
  .itbit-sos .wp-block-button__link { padding: 0.4rem 0.75rem; }
}
.itbit-sos .wp-block-button__link:hover { background: #ffe94d; }

/* Cards: equal height in a row, stacked on phones by the Columns block. */
.itbit-card { height: 100%; border: 1px solid var(--wp--preset--color--border); border-radius: 0.75rem; }
/* A card without a featured image: its text gets the same room at the top
   as on the sides, instead of touching the frame. */
.itbit-card > .wp-block-group:first-child { padding-top: var(--wp--preset--spacing--30); }
/* The newest posts under a page: room above (100px on desktop, less on
   smaller screens), the page's full width, the three cards in one row. */
.itbit-latest { margin-top: clamp(3rem, 7.8vw, 6.25rem) !important; }
.itbit-latest .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.itbit-latest > .wp-block-query { margin-top: var(--wp--preset--spacing--40); }
@media (max-width: 781px) {
  .itbit-latest .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
}
.itbit-card:hover { border-color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, var(--wp--preset--color--border)); }

/* Highlighted pricing column. */
.itbit-price-featured { border: 2px solid var(--wp--preset--color--primary) !important; }

/* Tables in posts scroll inside themselves on phones. */
.wp-block-table { overflow-x: auto; }

/* Language switcher (itbit/lang-switcher block from the itbit-site plugin). */
.itbit-lang-switcher { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.itbit-lang-switcher a { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 0.375rem; text-decoration: none; font-weight: 700; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted-text); }
.itbit-lang-switcher a[aria-current="true"] { color: var(--wp--preset--color--base); background: var(--wp--preset--color--primary); }

/* Visible keyboard focus everywhere. */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }

/* Bold text in the light (300) body reads as medium, like on scan.itbit.cc. */
strong, b { font-weight: 500; }

/* Line icons (assets/icons/*.svg) drawn in the text colour of their slot:
   a paragraph or list item with itbit-ico--NAME gets the icon on its left,
   a group with itbit-ico-block itbit-ico--NAME a larger one. */
.itbit-ico, .itbit-ico-list > li, .itbit-ico-block { position: relative; }
/* An icon's top sits on the cap height of the first line, never above it:
   with Roboto at line-height 1.65 that is 0.456em below the line box. The
   block icons sit by their first child's text the same way (--itbit-ico-top). */
.itbit-ico { padding-left: 2.25rem; }
.itbit-ico-list { list-style: none; padding-left: 0; }
.itbit-ico-list > li { padding-left: 2.25rem; margin-bottom: 0.9rem; }
.itbit-ico-block { padding-left: 4rem; }
.itbit-ico::before, .itbit-ico-list > li::before, .itbit-ico-block::before {
  content: ""; position: absolute; left: 0; top: 0.46em; width: 1.25em; height: 1.25em;
  background: var(--wp--preset--color--primary);
  -webkit-mask: var(--itbit-icon) center / contain no-repeat; mask: var(--itbit-icon) center / contain no-repeat;
}
.itbit-ico-block::before { width: 2.75rem; height: 2.75rem; top: var(--itbit-ico-top, 0.5rem); }
/* An x-large heading first (line-height 1.2): its cap height starts 0.23em down. */
.itbit-ico-block:has(> .wp-block-heading.has-x-large-font-size:first-child) { --itbit-ico-top: calc(0.25 * var(--wp--preset--font-size--x-large)); }
.itbit-ico--users { --itbit-icon: url(assets/icons/users.svg); }
.itbit-ico--lock { --itbit-icon: url(assets/icons/lock.svg); }
.itbit-ico--shield { --itbit-icon: url(assets/icons/shield.svg); }
.itbit-ico--shield-check { --itbit-icon: url(assets/icons/shield-check.svg); }
.itbit-ico--database { --itbit-icon: url(assets/icons/database.svg); }
.itbit-ico--eye { --itbit-icon: url(assets/icons/eye.svg); }
.itbit-ico--timer { --itbit-icon: url(assets/icons/timer.svg); }
.itbit-ico--user { --itbit-icon: url(assets/icons/user.svg); }
.itbit-ico--settings { --itbit-icon: url(assets/icons/settings.svg); }
.itbit-ico--file-text { --itbit-icon: url(assets/icons/file-text.svg); }
.itbit-ico--coffee { --itbit-icon: url(assets/icons/coffee.svg); }
.itbit-ico--alert-triangle { --itbit-icon: url(assets/icons/alert-triangle.svg); }
.itbit-ico--megaphone { --itbit-icon: url(assets/icons/megaphone.svg); }
.itbit-ico--book-open { --itbit-icon: url(assets/icons/book-open.svg); }
.itbit-ico--graduation-cap { --itbit-icon: url(assets/icons/graduation-cap.svg); }
.itbit-ico--wrench { --itbit-icon: url(assets/icons/wrench.svg); }
.itbit-ico--mail { --itbit-icon: url(assets/icons/mail.svg); }
.itbit-ico--life-buoy { --itbit-icon: url(assets/icons/life-buoy.svg); }
/* A list nested in an icon list keeps plain bullets. */
.itbit-ico-list > li > ul { margin-top: 0.5rem; }
.itbit-ico-list > li > ul > li { margin-bottom: 0.4rem; }

/* Plain lists with green ticks. */
.itbit-check-list { list-style: none; padding-left: 0; }
.itbit-check-list > li { position: relative; padding-left: 1.75rem; }
.itbit-check-list > li::before { content: "✓"; position: absolute; left: 0.25rem; color: var(--wp--preset--color--primary); font-weight: 500; }

/* Landing-page sections. */
.itbit-section { margin-block: var(--wp--preset--spacing--50) !important; }
/* A heading + lead, and the row it introduces: kept close together. */
.itbit-section--intro { margin-bottom: 0 !important; }
.itbit-section--follows { margin-top: var(--wp--preset--spacing--30) !important; }
/* A single block centred in the page, e.g. "The first step is free". */
.itbit-centered { max-width: 28rem; margin: var(--wp--preset--spacing--50) auto !important; }
.itbit-hero { margin-top: var(--wp--preset--spacing--40) !important; }
.itbit-hero h1 { margin-top: 0; }
.itbit-illustration img { width: 100%; height: auto; }
.itbit-step { margin-top: var(--wp--preset--spacing--40); color: var(--wp--preset--color--contrast); }
.itbit-step strong { color: var(--wp--preset--color--primary); }
.wp-block-separator.alignwide { border-color: var(--wp--preset--color--border); opacity: 1; }
@media (min-width: 782px) {
  /* Thin rule between the two halves. */
  .itbit-split > .wp-block-column + .wp-block-column { border-left: 1px solid var(--wp--preset--color--border); padding-left: var(--wp--preset--spacing--50); }
}
@media (max-width: 781px) {
  .itbit-ico-block { padding-left: 3.25rem; }
  .itbit-ico-block::before { width: 2.25rem; height: 2.25rem; }
  .itbit-centered { max-width: none; }
}

/* Side-by-side offers (Lockdown | Sentinel): both columns are as tall as the
   taller one, their buttons sit on the bottom line, and the framed block in
   the shorter column takes the spare room evenly above and below. */
@media (min-width: 782px) {
  /* The gap is the minimum spacing; auto margins only add to it. */
  .itbit-col-stack { display: flex; flex-direction: column; gap: var(--wp--style--block-gap, 1.25rem); }
  .itbit-col-stack > * { margin-block: 0 !important; }
  .itbit-col-stack > .wp-block-buttons:last-child { margin-top: auto !important; }
  .itbit-col-stack > .itbit-framed { margin-block: auto !important; }
  .itbit-col-stack > .itbit-framed + .wp-block-buttons:last-child { margin-top: 0 !important; }
}

/* A framed block with an icon: the icon sits inside the frame, its top on the
   cap height of the first line (large text, line-height 1.65). */
.itbit-framed { border: 1px solid var(--wp--preset--color--border); border-radius: 0.75rem;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--30) + 3.5rem); }
.itbit-framed > * { margin-block: 0; }
.itbit-framed.itbit-ico-block::before { left: var(--wp--preset--spacing--30); top: calc(var(--wp--preset--spacing--30) + 0.5 * var(--wp--preset--font-size--large)); }

/* "Already in?" box: the alert bar's yellow, dark text, red warning sign. */
.itbit-danger-box { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--base); border-radius: 0.75rem;
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) calc(var(--wp--preset--spacing--40) + 4rem);
  margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) !important; }
.itbit-danger-box > :first-child { margin-top: 0; }
.itbit-danger-box p { font-weight: 400; }
/* First line is x-large (1.875rem max) at line-height 1.65: cap top 0.456em. */
.itbit-danger-box.itbit-ico-block::before { background: var(--wp--preset--color--danger); left: var(--wp--preset--spacing--40); top: calc(var(--wp--preset--spacing--40) + 0.456 * var(--wp--preset--font-size--x-large)); }
.itbit-danger-box a:not(.wp-element-button) { color: var(--wp--preset--color--base); }
@media (max-width: 781px) {
  .itbit-danger-box { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--30) + 3rem); }
  .itbit-danger-box.itbit-ico-block::before { left: var(--wp--preset--spacing--30); top: calc(var(--wp--preset--spacing--30) + 0.456 * var(--wp--preset--font-size--x-large)); }
}

/* Dark button, for use on the yellow box. */
.itbit-btn-dark .wp-block-button__link { background: var(--wp--preset--color--base); color: #fff; }
.itbit-btn-dark .wp-block-button__link:hover { background: #1c2438; color: #fff; }

/* A sentence lifted out of the text: thin frame, larger type. */
.itbit-callout { box-sizing: border-box; border: 1px solid var(--wp--preset--color--border); border-radius: 0.75rem;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); line-height: 1.4;
  margin-block: var(--wp--preset--spacing--40) !important; }
/* A turn in the text: no frame, larger, centred, red (colour, size and
   alignment from the block's own settings). */
.itbit-punchline { font-weight: 500; line-height: 1.3; margin-block: var(--wp--preset--spacing--40) !important; }
@media (max-width: 781px) {
  .itbit-callout { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); }
}

/* Footer: featured partners under the attack counter, three logos in one
   row, 100px (less on smaller screens) before the menus. */
.itbit-partners { margin-top: var(--wp--preset--spacing--50); margin-bottom: clamp(3rem, 7.8vw, 6.25rem); }
.itbit-partners__title { text-align: center; margin-bottom: var(--wp--preset--spacing--40); }
.itbit-partners__logos { gap: var(--wp--preset--spacing--30); justify-content: space-evenly !important; }
.itbit-partners__logos .wp-block-image { margin: 0; flex: 0 1 auto; }
.itbit-partner { gap: 0.75rem; flex: 0 1 auto; min-width: 0; }
.itbit-partner__name { margin: 0; text-align: center; font-size: var(--wp--preset--font-size--small); line-height: 1.3; }
.itbit-partners__logos img { display: block; width: clamp(4.5rem, 16vw, 8rem); height: auto; }

/* Footer menus: the site menu centred, the legal one right-aligned. */
.itbit-nav-footer .wp-block-navigation-item { text-align: center; }
.itbit-nav-legal .wp-block-navigation-item { text-align: right; }
@media (max-width: 781px) {
  .itbit-nav-footer.items-justified-center, .itbit-nav-legal.items-justified-right { align-items: flex-start; }
  .itbit-nav-footer .wp-block-navigation-item, .itbit-nav-legal .wp-block-navigation-item { text-align: left; }
}

/* Terms copied from the ÁSZF (affiliate / partner program pages): room
   between the long numbered points, so each reads on its own. */
.itbit-terms-list > li + li { margin-top: var(--wp--preset--spacing--30); }
.itbit-terms-list ul { margin-top: 0.5rem; }
.itbit-terms-list ul > li + li { margin-top: 0.35rem; }