/**
 * This is a global style.
 * Template specific styles are in /css/..
 */
/* Google font – má Latin Extended pro češtinu/slovenštinu */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Make editor post title smaller */
.editor-post-title .editor-post-title__input {
    font-size: 2.3em;
}
.contactPage a,
.link-white-underline {
    text-decoration: underline;
}
.link-white-underline:hover,
.contactPage a:hover {
    color: #f72140;
}
/* -------------------------
   Team / Redakce – layout & font
   ------------------------- */
/* Použij Inter jen v sekci team */
.team,
.team * {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Shared light-context text input style — used by every form that isn't on
   the dark modal background (.form__input is dark-themed, only right for
   the login modal). One rule, reused by contact, profile edit, and the
   newsletter form, so all three stay visually identical by construction
   rather than by three separately-maintained copies.
   Production's contact form is CF7-plugin-rendered (its own CSS bundle,
   not ported) and the newsletter block doesn't exist on production at all
   (confirmed) — these fields had no class/styling of their own to copy. */
.contact form input[type="text"],
.contact form input[type="email"],
.contact form textarea,
.edit-profile form input[type="text"],
.edit-profile form input[type="email"],
.newsletter-form input[type="email"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d5d5d9;
    border-radius: 2px;
    font-size: 14px;
    font-family: inherit;
}
.contact form input[type="text"]:focus,
.contact form input[type="email"]:focus,
.contact form textarea:focus,
.edit-profile form input[type="text"]:focus,
.edit-profile form input[type="email"]:focus,
.newsletter-form input[type="email"]:focus {
    outline: 0;
    border-color: #f72140;
}

/* The ported theme's normalize reset sets -webkit-appearance:button (and
   button gets no background/border reset anywhere), so an actual <button>
   element using .button shows the browser's native button chrome (a grey
   3D-ish box) UNDERNEATH .button's own :before/:after pseudo-border —
   a doubled-border look. .button was evidently designed with <a class="
   button"> usage in mind (Více links, load-more), which has no native
   button chrome to begin with. Affects every real <button class="button">
   on the site (contact's Odeslat, newsletter's Přihlásit se, etc.) — fixed
   once here rather than per instance. */
button.button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    border: none;
}

/* .content/.layout/.layoutTop__inner/.layoutHeader__inner all use
   width:100% + max-width + padding:0 80px under default content-box sizing
   — padding is ADDED on top of max-width instead of included in it. Nested
   (.content > .layout, both with their own 80px padding) this compounds and
   overflows the viewport horizontally (visible as a page-wide horizontal
   scrollbar). Scoped border-box keeps the same visual padding/max-width
   while keeping the actual rendered box within its constraint. */
.content,
.layout,
.layoutTop__inner,
.layoutHeader__inner {
    box-sizing: border-box;
}

/* Newsletter form container/copy — has zero CSS in the ported theme
   (production has no newsletter block at all to copy from, confirmed), so
   this part is a value-add styled from scratch. The input reuses the shared
   rule above, and the submit button reuses the real .button component
   (same one contact.ejs, sidebar links and load-more buttons use) — only
   the layout-specific bits (this form's input+button sit in a row, so
   .button's own width:100% must be overridden) live here, not a
   parallel copy of .button's actual visual styling. */
.newsletter-form {
    max-width: 640px;
    margin: 48px auto;
    padding: 32px;
    background: #f7f7f8;
    border-radius: 4px;
    text-align: center;
}
.newsletter-form h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-family: 'Barlow Condensed', sans-serif;
}
.newsletter-form .subtitle {
    margin: 0 0 20px;
    color: #56565c;
    font-size: 15px;
}
.newsletter-form .input {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}
.newsletter-form .input .newsletterInput {
    /* The real theme's unscoped `form input:not([type='checkbox'])` rule
       (style.css) sets margin-bottom:24px on every form input site-wide —
       our shared input rule above never touched margin, so it fell through
       and pushed this flex row's bottom edge down by 24px, stacking with
       .message's own 12px margin-top into the ~36px gap seen in the
       screenshot. Reset scoped here since other stacked-field forms
       (contact, edit-profile) rely on that same 24px for between-field
       spacing and shouldn't lose it. */
    margin-bottom: 0;
    flex: 1 1 240px;
    min-width: 0;
    box-sizing: border-box;
    height: 44px;
}
.newsletter-form .input .button {
    flex: 0 0 auto;
    width: auto;
    box-sizing: border-box;
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.newsletter-form .message {
    /* Real theme's bare .message rule sets text-align:center and
       max-width:460px + margin:0 auto (block-centered) — override both,
       this form's own .newsletter-form already sets text-align:center as
       a container default that would otherwise still center the text too. */
    margin: 12px 0 0;
    max-width: none;
    text-align: left;
    font-size: 13px;
}
.newsletter-form .message:empty {
    display: none;
}
.newsletter-form .message.success {
    color: #2e9e4f;
}
.newsletter-form .message.error {
    color: #f4313d;
}
@media only screen and (max-width: 699px) {
    .newsletter-form {
        margin: 32px 16px;
        padding: 24px;
    }
    .newsletter-form .input .button {
        width: 100%;
    }
}

/* .badges has no gap of its own, and .badge (single pill) has no margin —
   pills touch each other edge to edge. */
.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Real WordPress adds `is-layout-flex wp-block-gallery-is-layout-flex`
   classes to gallery blocks at PHP render time (from the block's saved
   layout attribute), with the actual flex/gap rule living in a separate,
   per-page-generated "global-styles-inline-css" stylesheet — neither of
   which exist here, since this app serves raw post_content directly
   rather than running it through WP's block renderer. Without the flex
   container, block-library.css's own `width:50%` rule on each gallery
   image has nothing to make it wrap into columns, so they stack full-width
   instead. Same effect, targeted at the classes our content actually has
   (verified exact values from production's real global-styles-inline-css:
   display:flex, flex-wrap:wrap, align-items:center, gap:0.5em). */
.wp-block-gallery.has-nested-images {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
}

/* The real theme's only `img` rule is a normalize reset (border-style:
   none) — no max-width constraint anywhere. Images pasted into post
   content have no width/height attributes either (WP usually generates
   these, but not on these posts), so they render at full natural pixel
   size — e.g. wp-content/uploads/2024/01/1-2.jpg is a real 1013px-wide
   file, wider than the article content column, causing a page-wide
   horizontal scrollbar. */
.articleContent img {
    max-width: 100%;
    height: auto;
}

/* Real theme's .articleContent .badge (tag pills) pairs light gray text
   (#a1a2a9) on a near-identical light gray background (#ebeaed) — very low
   contrast, hard to read. Background stays the same (keeps the "light
   chip" look intact), text switches to the site's actual dark ink color. */
.articleContent .badge {
    color: #120c34;
}

/* Sharing widget (article__share*) has real backend infra (sharing_stats
   table, /api/share) but no equivalent markup/CSS exists in the ported
   theme to copy — it's a value-add, not a production port. Styled to match
   the site's own accent color/button language rather than left bare. */
.article__share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 32px 0;
    padding: 20px 0;
    border-top: 1px solid #e5e5e8;
    border-bottom: 1px solid #e5e5e8;
}
.article__shareLabel {
    font-size: 13px;
    color: #56565c;
    margin-right: 4px;
}
.article__shareBtn {
    /* One unified color for every icon (not per-brand) — dark navy
       #120c34, the site's actual primary "ink" color (.button's own text
       color, used throughout style.css), with the real theme's actual
       interactive accent (#f72140) as a light hover tint. This matches how
       the rest of the site already works: red is reserved for hover/focus
       feedback specifically (.form__input:focus, .contactPage a:hover),
       never a base/resting color. Icon color is fixed and never flips on
       hover — only the background tints — so there's no repeat of the
       currentColor-inheritance issue from the last two iterations. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    color: #120c34;
    border: 1px solid #e5e5e8;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, transform .15s;
}
.article__shareBtn:hover {
    background: #fdeaea;
    border-color: #f72140;
    transform: translateY(-1px);
}
.article__shareBtn svg {
    width: 16px;
    height: 16px;
}
.article__shareBtn[data-share="copy"] svg {
    /* Drawn as an outline (fill="none", stroke="currentColor" set directly
       on the <svg>) — fill must stay none or it renders as a solid blob
       instead of an outline; only needs stroke to pick up the color above. */
    stroke: currentColor;
}
.article__shareBtn:not([data-share="copy"]) svg {
    /* Facebook/X/WhatsApp icons have no fill of their own. */
    fill: currentColor;
}
.article__shareBtn span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The ported theme has no rule at all for .sidebar-menu-title and the
   sidebar itself has no padding, so headers would sit flush against the
   edge. Line them up with the close button's left edge instead (16px,
   32px from tablet up), to the left of the icon-indented menu items. */
.sidebar-menu-title {
    padding-left: 16px;
}
@media only screen and (min-width: 700px) {
    .sidebar-menu-title {
        padding-left: 32px;
    }
}

/* .button's default text color (#120c34, near-black) is meant for the
   site's light background — illegible on .modal__content's dark
   (#1a1b1c) background used by the login modal. */
.modal .button {
    color: #ffffff;
    border-color: #3f4148;
}
.modal .button:hover {
    color: #ffffff;
}

/* The ported theme's .layoutHeader h1 has min-height:172px, sized for the
   longest possible dynamic title (search/category). Short static titles
   (Kontakt, Redakce, Podmínky užití...) end up with a huge empty gap before
   the text below. Only lowering the minimum — never caps longer titles. */
.layoutHeader h1 {
    min-height: 0;
}

/* Same issue, different element: .layoutHeader--article (the whole article
   title+author box, not just the h1) separately has its own min-height:
   350px — sized for the longest title + full author metadata row. Most
   posts' title+author content doesn't fill that, leaving visible empty
   space between the author date and the image below. Only lowering the
   minimum, same as above — never caps longer titles/content. */
.layoutHeader--article {
    min-height: 0;
}

/* Wrapper sekce - roztáhne se na celou šířku */
.team {
    margin: 4rem 0;
    padding: 0 !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* Nadpis sekce - vycentrovaný */
.team__headline {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center !important;
    margin: 0 auto 2rem auto !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* Grid – 3 sloupce, vycentrované */
.team__body {
    display: grid !important;
    grid-template-columns: repeat(3, 240px) !important;
    gap: 3rem 5rem;
    justify-content: center !important;
    justify-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* KARTA – šířka = šířka fotky, centrum */
.team .teamMember {
    width: 240px;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 1rem;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fotka */
.team .teamMember__image {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin: 0 !important;
    display: block !important;
}

/* Textová část – taky přesně 160px */
.team .teamMember__info {
    width: 240px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Texty – natvrdo centrovat, aby nic nepřebilo */
.team .teamMember__name,
.team .teamMember__position,
.team .teamMember__email {
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Jméno */
.team .teamMember__name {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.25rem !important;
}

/* Pozice */
.team .teamMember__position {
    font-size: 0.9rem;
    opacity: 0.75;
    margin-bottom: 0.25rem !important;
}

/* Email */
.team .teamMember__email {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Tablet – 2 sloupce */
@media (max-width: 960px) {
    .team__body {
        grid-template-columns: repeat(2, 240px) !important;
        gap: 3rem 4rem;
    }
}

/* Mobil – 1 sloupec */
@media (max-width: 640px) {
    .team__body {
        grid-template-columns: 240px !important;
        gap: 3rem 0;
    }
}
/* Homepage search box sits on the dark navy header.jpg background (desktop
   only — on mobile header-line.jpg is just 120px tall and the search falls
   onto the light #ebeaed body). The theme's own `.headerSearch__input
   { color: white }` loses to the more specific `form input:not(...)` rule
   (#2e2e2e) and the placeholder is #1a1b1c, so both were near-invisible.
   Light text + underline here; other pages keep the dark-on-light defaults. */
.page-type-home.is_desktop form .headerSearch__input {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.45) !important;
}
.page-type-home.is_desktop .headerSearch__input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}
.page-type-home.is_desktop form .headerSearch__input:focus {
    border-bottom-color: #ffffff !important;
}

/* Aligned Gutenberg images. Production WP wraps them in
   <div class="wp-block-image"><figure class="aligncenter">, so the theme's
   full-bleed `.wp-block-image { margin: 0 -88px }` lands on the wrapper and
   block-library's `.wp-block-image .aligncenter { margin: auto }` centers the
   inner figure. We render raw post_content, where both classes sit on the
   same <figure> — it got the bleed margins *and* block-library's
   `display: table` shrink-to-fit, so it hung off the left edge of the
   column. Restore the production layout for that combined form. */
.articleContent figure.wp-block-image.aligncenter {
    margin: 0 auto 24px;
}
.articleContent figure.wp-block-image.alignleft {
    float: left;
    margin: .5em 1em .5em 0;
}
.articleContent figure.wp-block-image.alignright {
    float: right;
    margin: .5em 0 .5em 1em;
}

/* Login modal inputs. .form__input is dark-themed (white text, #3f4148
   border) for .modal__content's #1a1b1c background, but the theme's more
   specific `form input:not([type='checkbox'])` rule wins and repaints them
   with light-page colors (#2e2e2e text, #cdcad1 border) — dark text on a
   dark modal. Re-assert the intended dark-context colors, scoped to .modal. */
.modal form .form__input {
    color: #ffffff;
    border-color: #3f4148;
}
.modal form .form__input::placeholder {
    color: #a1a2a9;
    opacity: 1;
}
.modal form .form__input:focus {
    border-color: #f72140;
}
/* Browser autofill (saved credentials — present on asianstyle.cz, absent
   on localhost) paints its own light background via a UA !important rule
   that background-color can't override. An inset shadow in the modal's
   color covers it; keep the white text and caret on top. */
.modal form .form__input:-webkit-autofill,
.modal form .form__input:-webkit-autofill:hover,
.modal form .form__input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #1a1b1c inset;
    box-shadow: 0 0 0 1000px #1a1b1c inset;
}
.modal form .form__input:autofill {
    box-shadow: 0 0 0 1000px #1a1b1c inset;
}

/* Profile page — empty-state message inside .articles__body (a 3-column
   CSS grid). As the only grid item it occupies column 1 only (≈1/3 width),
   and .center's text-align:center then shifts the text visually ~120px right
   of the .articles__header heading. The global .no-content rule also adds
   padding-top:80px, creating a large gap. Fix: span all columns so the
   element is full-width flush with the heading, reset the excess top spacing,
   and left-align the text. Scoped to .articles so search's
   .searchLayout_main .no-content is unaffected. */
.articles .no-content {
    grid-column: 1 / -1;
    padding-top: 16px;
    text-align: left;
}

/* Opened search bar sat flush against the header — give it a little
   breathing room above the input. */
.headerSearch--show {
    margin-top: 24px;
}
@media only screen and (max-width: 699px) {
    .headerSearch--show {
        margin-top: 16px;
    }
}

/* "Odeslat komentář" is an <input type="submit">, not a .button, and inputs
   can't have the ::before/::after layers .button uses for its hover fill —
   so it had no hover effect at all. Recreate the same look and the same
   left-to-right #120c34 fill with an animated background gradient. */
.forum .comment-form input.submit {
    width: auto;
    padding: 16px 24px;
    border: 1px solid #3f4148;
    color: #120c34;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(#120c34, #120c34) no-repeat left center / 0% 100%;
    background-color: transparent;
    transition: background-size .3s, color .15s;
}
.forum .comment-form input.submit:hover,
.forum .comment-form input.submit:focus-visible {
    background-size: 100% 100%;
    color: #ffffff;
}