/*
Theme Name:        IPMA Czech Republic
Theme URI:         https://ipma.cz
Author:            IPMA Czech Republic
Author URI:        https://ipma.cz
Description:       Oficiální WordPress block theme pro IPMA® Czech Republic. Postaven na ofici\u00e1ln\u00edm vizuálním manuálu (Perspectivo / MgA. Michal Ocilka, 2017). Vyu\u017e\u00edvá Full Site Editing (FSE) a WordPress 6.4+.
Version:           1.0.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.1
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       ipma-cz
Tags:              full-site-editing, block-themes, custom-colors, custom-typography, one-column, two-columns, wide-blocks, accessibility-ready

Primary color:    #E30613
Secondary color:  #000000
*/

/* ====================================================
   IPMA CZ — base styles (supplementing theme.json)
   ==================================================== */

/* Alias: block inline styles store slug "exo2" but WP generates the CSS var as "exo-2" */
:root { --wp--preset--font-family--exo2: var(--wp--preset--font-family--exo-2); }

/* Smooth rendering */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- Eyebrow utility ---- */
.ipma-eyebrow {
  font-family: var(--wp--preset--font-family--exo-2);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--wp--preset--color--ipma-red);
  display: block;
  margin-bottom: 8px;
}
/* Eyebrow na červeném pozadí (hero) — bílá místo červené */
.ipma-hero .ipma-eyebrow {
  color: rgba(255, 255, 255, 0.92);
}

/* ---- Red chevron forward-marker ---- */
.ipma-chev {
  font-family: var(--wp--preset--font-family--exo-2);
  font-weight: 800;
  color: var(--wp--preset--color--ipma-red);
  margin-left: 6px;
}

/* ---- Clear space (ochranná zóna) on logo img ---- */
.wp-block-site-logo img { display: block; }

/* ---- Header ---- */
.ipma-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid #CCCCCC;
}

.ipma-header-row {
  display: flex;
  align-items: center;
  min-height: 72px;
  gap: 32px;
  padding-left: var(--wp--preset--spacing--7) !important;   /* 48px — DS spec */
  padding-right: var(--wp--preset--spacing--7) !important;
}

/* Navigation links */
.wp-block-navigation a {
  font-family: var(--wp--preset--font-family--exo-2) !important;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.wp-block-navigation a:hover,
.wp-block-navigation a:focus,
.wp-block-navigation .current-menu-item > a {
  color: #000000;
  border-bottom-color: #E30613;
}

/* Limit nav to available space — prevent wrapping into header area */
.ipma-header-row > .wp-block-navigation {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

/* Ensure nav items don't push other header elements */
.ipma-header-row > .wp-block-navigation .wp-block-navigation__container {
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Nav button CTA */
.wp-block-navigation .ipma-nav-cta a,
.ipma-header-row .ipma-nav-cta a {
  background: #E30613;
  color: #ffffff !important;
  border: none;
  border-bottom: none !important;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 120ms ease;
}
.wp-block-navigation .ipma-nav-cta a:hover,
.ipma-header-row .ipma-nav-cta a:hover { background: #B8040F; }

/* Auth group — keep inline, don't stretch */
.ipma-header-row > .wp-block-group:last-child {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--5);
  min-height: unset;
}

/* ---- Navigation dropdowns ---- */
.wp-block-navigation,
.wp-block-navigation__container {
  overflow: visible !important;
}

.wp-block-navigation__container {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--wp--preset--spacing--6);
}

.wp-block-navigation-item {
  position: relative;
  list-style: none;
}

/* Hide the toggle button — we use CSS hover */
.wp-block-navigation__submenu-icon {
  display: none;
}

/* Submenu: hidden by default */
.wp-block-navigation-item > .wp-block-navigation__submenu-container {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  padding: 8px 0;
  padding-top: 16px; /* bridge: myš přejde z odkazu na submenu bez přerušení */
  z-index: 200;
  list-style: none;
  margin: 0;
  flex-direction: column;
  gap: 0;
}

/* Submenu: visible on hover / keyboard focus */
.wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
  display: flex !important;
}

/* Submenu links */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 9px 20px;
  font-size: 13px;
  white-space: nowrap;
  border-bottom: none !important;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: #F5F5F5;
  color: #E30613 !important;
}

/* ---- Hero cover block ---- */
.ipma-hero {
  min-height: 560px;
}
/* Inner container: full width, left-aligned within 1200px content area */
.ipma-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wp--preset--spacing--7);   /* 48px */
  padding-right: var(--wp--preset--spacing--7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
/* Cap text columns so they don't stretch to full 1200px */
.ipma-hero h1,
.ipma-hero .wp-block-cover__inner-container > p:not(.ipma-eyebrow) {
  max-width: 580px;
}

/* ---- Certification level card ---- */
.ipma-cert-card {
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  padding: 28px 24px;
  background: #ffffff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ipma-cert-card:hover {
  border-color: #000000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.ipma-cert-card .ipma-level-letter {
  font-family: var(--wp--preset--font-family--exo-2);
  font-weight: 800;
  font-size: 52px;
  color: var(--wp--preset--color--ipma-red);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 12px;
}

/* ---- CTA strip (black band) ---- */
.ipma-cta-strip {
  background: #000000;
  color: #ffffff;
}
.ipma-cta-strip h2,
.ipma-cta-strip p {
  color: #ffffff;
}

/* ---- Footer ---- */
.ipma-site-footer {
  background: #000000;
  color: rgba(255,255,255,0.8);
}
.ipma-site-footer a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.ipma-site-footer a:hover {
  color: #ffffff;
  border-bottom-color: #E30613;
}
.ipma-site-footer .ipma-footer-heading {
  font-family: var(--wp--preset--font-family--exo-2);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #ffffff;
  margin-bottom: 12px;
}
.ipma-site-footer .wp-block-site-logo img {
  filter: invert(1) brightness(10);
}
.ipma-site-footer .wp-block-separator {
  border-color: rgba(255,255,255,0.12) !important;
}

/* ---- Service / inner page layout ---- */

/* Full-width hero na podstránkách (service-page-hero) */
.service-page-hero {
  background: var(--wp--preset--color--ipma-red);
  color: #ffffff;
  padding: var(--wp--preset--spacing--9) var(--wp--preset--spacing--5);
}
.service-page-hero h1 {
  font-family: var(--wp--preset--font-family--exo-2);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin-bottom: var(--wp--preset--spacing--5);
}
.service-page-hero p,
.service-page-hero > .wp-block-group > p {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  max-width: 640px;
  margin-bottom: var(--wp--preset--spacing--6);
}
.service-page-hero .wp-block-button__link {
  background: #ffffff !important;
  color: var(--wp--preset--color--ipma-red) !important;
  font-family: var(--wp--preset--font-family--exo-2);
  font-weight: 600;
}
.service-page-hero .wp-block-button__link:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Textová sekce */
.service-content-section {
  padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--5);
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-left: auto;
  margin-right: auto;
}
.service-content-section h2 {
  font-family: var(--wp--preset--font-family--exo-2);
  font-size: var(--wp--preset--font-size--h2);
  font-weight: 600;
  margin-bottom: var(--wp--preset--spacing--5);
}
.service-content-section p {
  font-size: 18px;
  line-height: 1.6;
  color: #333333;
  max-width: 720px;
}

/* Karta se službami — 3 sloupce */
.service-cards-section {
  padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--5);
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-left: auto;
  margin-right: auto;
}
.service-cards-section .wp-block-columns {
  gap: var(--wp--preset--spacing--5);
}
.service-cards-section .ipma-cert-card h3 {
  font-family: var(--wp--preset--font-family--exo-2);
  font-size: var(--wp--preset--font-size--h4);
  font-weight: 700;
  margin-bottom: var(--wp--preset--spacing--4);
  color: #000000;
}
.service-cards-section .ipma-cert-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #444444;
  margin-bottom: var(--wp--preset--spacing--4);
}
.service-cards-section .ipma-cert-card a {
  font-family: var(--wp--preset--font-family--exo-2);
  font-weight: 600;
  font-size: 13px;
  color: var(--wp--preset--color--ipma-red);
  text-decoration: none;
}
.service-cards-section .ipma-cert-card a:hover {
  text-decoration: underline;
}

/* alignfull / alignwide pro raw HTML obsah (non-block) */
.entry-content .alignfull,
.wp-block-post-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.entry-content .alignwide,
.wp-block-post-content .alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Post / article ---- */
.wp-block-post-content > * + * { margin-top: var(--wp--preset--spacing--5); }
.wp-block-post-featured-image img {
  border-radius: 4px;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.ipma-post-meta {
  font-family: var(--wp--preset--font-family--exo-2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #666666;
}
.ipma-post-meta a { color: #E30613; }

/* ---- Archive card ---- */
.wp-block-post {
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  background: #ffffff;
}
.wp-block-post:hover {
  border-color: #000000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.wp-block-post .wp-block-post-title a {
  font-family: var(--wp--preset--font-family--exo-2);
  font-weight: 600;
  color: #000000;
  text-decoration: none;
}
.wp-block-post .wp-block-post-title a:hover { color: #E30613; }

/* ---- Pullquote ---- */
.wp-block-pullquote {
  border-left: 3px solid #E30613 !important;
  border-top: none !important;
  border-bottom: none !important;
  text-align: left;
  padding: 12px 24px;
}
.wp-block-pullquote cite {
  font-family: var(--wp--preset--font-family--exo-2);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #666666;
}

/* ---- Buttons (secondary variant) ---- */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: #000000 !important;
  border: 1.5px solid #000000 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

/* On red/black backgrounds — white outline variant */
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
.ipma-cta-strip .wp-block-button.is-style-outline .wp-block-button__link {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.6) !important;
}
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover,
.ipma-cta-strip .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: #ffffff !important;
}

/* On red background — white fill button */
.ipma-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: #ffffff !important;
  color: #E30613 !important;
}
.ipma-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

/* ---- Accessibility ---- */
:focus-visible {
  outline: 2px solid #E30613;
  outline-offset: 2px;
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: #E30613;
  color: #ffffff;
  font-family: var(--wp--preset--font-family--exo-2);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 4px;
  z-index: 999;
  transition: top 100ms;
}
.skip-link:focus { top: 8px; }

/* ---- 404 ---- */
.ipma-404-number {
  font-family: var(--wp--preset--font-family--exo-2);
  font-weight: 800;
  font-size: clamp(120px, 20vw, 240px);
  color: #E30613;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* ---- Parametrické odznaky (level stránky) ---- */
.ipma-badge {
  display: inline-block;
  font-family: var(--wp--preset--font-family--exo-2);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border: 1.5px solid #CCCCCC;
  border-radius: 100px;
  color: #333333;
  white-space: nowrap;
  margin: 0;
}
.ipma-badge--yes {
  border-color: #000000;
  color: #000000;
}
.ipma-badge--no {
  border-color: #CCCCCC;
  color: #999999;
}

/* -------------------------------------------------------
 * News section — hide when query returns no posts
 * wp:query-no-results is empty → only the outer wrapper
 * remains; collapse it to avoid dead white space.
 * ----------------------------------------------------- */
.ipma-news-section:has(.wp-block-query-no-results:only-child) {
  display: none;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .ipma-site-header .wp-block-group {
    flex-wrap: wrap;
    min-height: 56px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .ipma-hero { min-height: 400px; }
}