/*
Theme Name:     NANOGO-2026
Theme URI:      https://nanogo.co.uk/
Template:       kadence
Author:         Saulius.B
Author URI:     n/a
Description:    Child Theme Description
Version:        1.9
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* =========================================================
   NANO GO UK — KADENCE-SUDERINTA TURINIO SISTEMA
   Švari child temos bazė be senų WooCommerce ir globalių taisyklių.
   Sistema naudoja Kadence Global Palette ir paveldi temos šriftą.
   Visi selektoriai apriboti .ng-content, .ng-guide, .ng-legal
   ir .ng-about-page klasėmis.
   ========================================================= */

/* =========================================================
   NANO GO CONTENT DESIGN SYSTEM
   Straipsniai, gidai ir teisiniai dokumentai
   ========================================================= */

/*
NAUDOJIMAS

Straipsnis / gidas:
<article class="ng-content ng-guide">...</article>

Teisinis dokumentas:
<article class="ng-content ng-legal">...</article>

Specialus produkto gidas:
<article class="ng-content ng-guide ng-product-guide">...</article>

Svarbu:
- Straipsnio HTML viduje nebedėkite <style>...</style>.
- WordPress įrašo pavadinimas paliekamas vieninteliu H1.
- Hero bloke naudokite <div class="ng-hero-title">...</div>.
*/

/* =========================================================
   1. BENDRA BAZĖ
   ========================================================= */

.ng-content {
    /* Kadence Global Palette fallbacks from nanogo.co.uk */
    --ng-black: var(--global-palette3, #080808);
    --ng-dark: var(--global-palette4, #2D3748);
    --ng-gray: var(--global-palette5, #4A5568);
    --ng-light: var(--global-palette8, #F7FAFC);
    --ng-border: var(--global-palette7, #EDF2F7);
    --ng-orange: var(--global-palette1, #fd5800);
    --ng-link: var(--global-palette1, #fd5800);
    --ng-soft-orange: #fff7ef;
    --ng-red: var(--global-palette13, #b82105);
    --ng-soft-red: #fff5f5;
    --ng-green: var(--global-palette11, #13612e);
    --ng-soft-green: #f3faf5;
    --ng-blue: var(--global-palette12, #1159af);
    --ng-soft-blue: #f2f7fb;

    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    color: var(--ng-dark);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.ng-content,
.ng-content * {
    box-sizing: border-box;
}

.ng-content img,
.ng-content svg,
.ng-content video,
.ng-content iframe {
    max-width: 100%;
    height: auto;
}

.ng-content section,
.ng-content header,
.ng-content footer,
.ng-content nav,
.ng-content div {
    min-width: 0;
}

/* Antraštės */

.ng-content h1,
.ng-content h2,
.ng-content h3,
.ng-content h4 {
    color: var(--ng-black);
    font-family: inherit;
    font-weight: 700;
}

.ng-content h1 {
    margin: 8px 0 16px;
    font-size: clamp(26px, 2.7vw, 32px);
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.ng-content h2 {
    margin: 40px 0 14px;
    padding-top: 2px;
    font-size: clamp(21px, 2.1vw, 24px);
    line-height: 1.28;
    letter-spacing: -0.015em;
}

.ng-content h3 {
    margin: 22px 0 9px;
    font-size: 17px;
    line-height: 1.35;
}

.ng-content h4 {
    margin: 18px 0 8px;
    font-size: 15px;
    line-height: 1.4;
}

/* Tekstas */

.ng-content p {
    margin: 0 0 15px;
}

.ng-content ul,
.ng-content ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.ng-content li {
    margin-bottom: 7px;
}

.ng-content strong {
    color: var(--ng-black);
}

.ng-content a {
    color: var(--ng-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ng-content a:hover,
.ng-content a:focus {
    text-decoration-thickness: 2px;
}

.ng-content code {
    padding: 2px 5px;
    border-radius: 4px;
    background: #f1f1f1;
    color: #222222;
    font-size: 0.92em;
}

.ng-content hr {
    margin: 30px 0;
    border: 0;
    border-top: 1px solid var(--ng-border);
}

/* =========================================================
   2. STRAIPSNIŲ IR GIDŲ HERO
   ========================================================= */

.ng-guide .ng-hero {
    padding: clamp(24px, 4vw, 42px);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(237, 125, 26, 0.20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #111111 0%,
            #1d1d1d 100%
        );
    color: #ffffff;
}

.ng-guide .ng-hero-title {
    margin: 8px 0 16px;
    color: #ffffff;
    font-size: clamp(26px, 2.7vw, 32px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.ng-guide .ng-hero h1,
.ng-guide .ng-hero h2,
.ng-guide .ng-hero h3,
.ng-guide .ng-hero h4,
.ng-guide .ng-hero strong {
    color: #ffffff;
}

.ng-guide .ng-hero p {
    max-width: 780px;
    margin-bottom: 0;
    color: #eeeeee;
    font-size: 15.5px;
    line-height: 1.65;
}

.ng-guide .ng-eyebrow {
    display: inline-block;
    margin-bottom: 4px;
    color: var(--ng-orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ng-guide .ng-intro {
    max-width: 900px;
    margin: 26px auto 0;
    font-size: 15.5px;
}

/* =========================================================
   3. TEISINIŲ DOKUMENTŲ ANTRAŠTĖ
   ========================================================= */

.ng-legal {
    max-width: 940px;
}

.ng-legal .ng-legal-header {
    margin-bottom: 28px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--ng-border);
}

.ng-legal .ng-legal-title {
    margin: 0 0 8px;
    color: var(--ng-black);
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.ng-legal .ng-legal-meta {
    margin: 0;
    color: var(--ng-gray);
    font-size: 13px;
    line-height: 1.55;
}

.ng-legal h2 {
    margin-top: 34px;
}

.ng-legal .ng-legal-section {
    scroll-margin-top: 110px;
}

.ng-legal .ng-legal-index {
    margin: 22px 0 30px;
    padding: 18px 20px;
    border: 1px solid var(--ng-border);
    border-radius: 10px;
    background: var(--ng-light);
}

.ng-legal .ng-legal-index h2 {
    margin: 0 0 10px;
    padding: 0;
    font-size: 18px;
}

.ng-legal .ng-signature-block {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--ng-border);
    color: var(--ng-gray);
    font-size: 13px;
}

/* =========================================================
   4. INFORMACINIAI BLOKAI
   ========================================================= */

.ng-content .ng-notice,
.ng-content .ng-info,
.ng-content .ng-warning,
.ng-content .ng-success {
    margin: 22px 0;
    padding: 17px 19px;
    border: 1px solid var(--ng-border);
    border-left-width: 4px;
    border-radius: 10px;
}

.ng-content .ng-notice {
    border-left-color: var(--ng-black);
    background: var(--ng-light);
}

.ng-content .ng-info {
    border-left-color: var(--ng-blue);
    background: var(--ng-soft-blue);
}

.ng-content .ng-warning {
    border-left-color: var(--ng-red);
    background: var(--ng-soft-red);
}

.ng-content .ng-success {
    border-left-color: var(--ng-green);
    background: var(--ng-soft-green);
}

.ng-content .ng-notice p:last-child,
.ng-content .ng-info p:last-child,
.ng-content .ng-warning p:last-child,
.ng-content .ng-success p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   5. TURINYS / INKARAI
   ========================================================= */

.ng-content .ng-toc {
    margin: 28px 0;
    padding: 20px 22px;
    border: 1px solid var(--ng-border);
    border-radius: 12px;
    background: #ffffff;
}

.ng-content .ng-toc h2 {
    margin: 0 0 13px;
    padding: 0;
    font-size: 19px;
}

.ng-content .ng-toc ol,
.ng-content .ng-toc ul {
    columns: 2;
    column-gap: 42px;
    margin-bottom: 0;
}

.ng-content .ng-toc li {
    break-inside: avoid;
    margin-bottom: 6px;
}

/* =========================================================
   6. KORTELĖS
   ========================================================= */

.ng-content .ng-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 21px 0;
}

.ng-content .ng-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ng-content .ng-card {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--ng-border);
    border-radius: 12px;
    background: #ffffff;
}

.ng-content .ng-card h3 {
    margin-top: 0;
}

.ng-content .ng-card p:last-child,
.ng-content .ng-card ul:last-child,
.ng-content .ng-card ol:last-child {
    margin-bottom: 0;
}

.ng-content .ng-number {
    display: inline-flex;
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ng-black);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.ng-content .ng-icon-card {
    position: relative;
    padding-top: 20px;
}

/* =========================================================
   7. CITATOS IR IŠSKIRTINĖS MINTYS
   ========================================================= */

.ng-content .ng-quote {
    margin: 22px 0;
    padding: 17px 19px;
    border-left: 4px solid var(--ng-orange);
    border-radius: 10px;
    background: var(--ng-soft-orange);
    color: var(--ng-dark);
    font-style: normal;
}

.ng-content .ng-quote p:last-child {
    margin-bottom: 0;
}

.ng-content blockquote {
    margin: 22px 0;
    padding: 17px 19px;
    border-left: 4px solid var(--ng-orange);
    border-radius: 10px;
    background: var(--ng-soft-orange);
    color: var(--ng-dark);
}

.ng-content blockquote p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   8. LENTELĖS – KOMPIUTERIO VERSIJA
   ========================================================= */

.ng-content .ng-table-wrap {
    width: 100%;
    margin: 21px 0;
    overflow-x: auto;
    border: 1px solid var(--ng-border);
    border-radius: 11px;
    background: #ffffff;
    -webkit-overflow-scrolling: touch;
}

.ng-content .ng-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    table-layout: fixed;
}

.ng-content .ng-table th,
.ng-content .ng-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ng-border);
    vertical-align: top;
    color: var(--ng-dark);
    font-size: 14.5px;
    line-height: 1.55;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: normal;
}

.ng-content .ng-table th {
    background: var(--ng-black);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.ng-content .ng-table tr:last-child td {
    border-bottom: 0;
}

.ng-content .ng-table tbody tr:nth-child(even) {
    background: var(--ng-light);
}

/* Paprastesnė teisinė lentelė */

.ng-legal .ng-table {
    min-width: 640px;
}

.ng-legal .ng-table th {
    background: #2a2a2a;
}

/* =========================================================
   9. ŽINGSNIAI
   ========================================================= */

.ng-content .ng-steps {
    margin: 22px 0;
    padding: 0;
    list-style: none;
    counter-reset: ng-step;
}

.ng-content .ng-steps li {
    position: relative;
    min-height: 42px;
    margin-bottom: 16px;
    padding-left: 54px;
    counter-increment: ng-step;
}

.ng-content .ng-steps li::before {
    content: counter(ng-step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ng-black);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

/* =========================================================
   10. DUK
   ========================================================= */

.ng-content .ng-faq {
    margin-top: 18px;
    border-top: 1px solid var(--ng-border);
}

.ng-content .ng-faq details {
    border-bottom: 1px solid var(--ng-border);
}

.ng-content .ng-faq summary {
    position: relative;
    padding: 15px 34px 15px 3px;
    color: var(--ng-black);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.ng-content .ng-faq summary::-webkit-details-marker {
    display: none;
}

.ng-content .ng-faq summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    color: var(--ng-orange);
    font-size: 22px;
    font-weight: 500;
}

.ng-content .ng-faq details[open] summary::after {
    content: "−";
}

.ng-content .ng-faq details > div {
    padding: 0 3px 16px;
}

/* =========================================================
   11. ŠALTINIAI
   ========================================================= */

.ng-content .ng-source-list {
    margin-top: 22px;
    padding: 20px 22px;
    border-radius: 12px;
    background: var(--ng-light);
}

.ng-content .ng-source-list h2 {
    margin-top: 0;
}

.ng-content .ng-source-list li {
    margin-bottom: 9px;
}

/* =========================================================
   12. CTA
   ========================================================= */

.ng-guide .ng-cta {
    margin-top: 38px;
    padding: clamp(24px, 4vw, 38px);
    border-radius: 16px;
    background: var(--ng-black);
    color: #ffffff;
    text-align: center;
}

.ng-guide .ng-cta h2,
.ng-guide .ng-cta h3,
.ng-guide .ng-cta strong {
    color: #ffffff;
}

.ng-guide .ng-cta h2 {
    margin-top: 0;
}

.ng-guide .ng-cta p {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
    color: #eeeeee;
}

.ng-guide .ng-button {
    display: inline-block;
    margin-top: 6px;
    padding: 11px 18px;
    border: 2px solid #ffffff;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ng-black) !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

.ng-guide .ng-button:hover,
.ng-guide .ng-button:focus {
    background: transparent;
    color: #ffffff !important;
}

/* =========================================================
   13. FOOTER
   ========================================================= */

.ng-content .ng-article-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--ng-border);
    color: var(--ng-gray);
    font-size: 13px;
    line-height: 1.55;
}

.ng-content .ng-article-footer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ng-content .ng-article-footer p {
    margin-bottom: 5px;
}

.ng-content .ng-article-footer__date {
    margin-left: auto;
    white-space: nowrap;
    text-align: right;
}

.ng-content .ng-small {
    color: var(--ng-gray);
    font-size: 13px;
    line-height: 1.55;
}

/* =========================================================
   14. PRIEINAMUMAS
   ========================================================= */

.ng-content a:focus-visible,
.ng-content summary:focus-visible,
.ng-content .ng-button:focus-visible {
    outline: 3px solid rgba(237, 125, 26, 0.45);
    outline-offset: 3px;
}

/* =========================================================
   15. MOBILIOJI VERSIJA
   ========================================================= */

@media (max-width: 760px) {

    .ng-content {
        width: 100%;
        max-width: 100%;
        font-size: 15px;
        line-height: 1.62;
        overflow-x: hidden;
    }

    .ng-content h1 {
        font-size: 25px;
    }

    .ng-content h2 {
        margin-top: 34px;
        font-size: 21px;
    }

    .ng-content h3 {
        font-size: 17px;
    }

    .ng-guide .ng-hero {
        padding: 24px 20px;
        border-radius: 14px;
    }

    .ng-guide .ng-hero-title {
        font-size: 25px;
    }

    .ng-guide .ng-hero p,
    .ng-guide .ng-intro {
        font-size: 15px;
    }

    .ng-content .ng-grid,
    .ng-content .ng-grid--3 {
        grid-template-columns: 1fr;
    }

    .ng-content .ng-toc ol,
    .ng-content .ng-toc ul {
        columns: 1;
    }

    .ng-content .ng-card,
    .ng-content .ng-toc,
    .ng-content .ng-source-list,
    .ng-legal .ng-legal-index {
        padding: 17px;
    }

    .ng-content .ng-notice,
    .ng-content .ng-info,
    .ng-content .ng-warning,
    .ng-content .ng-success,
    .ng-content .ng-quote,
    .ng-content blockquote {
        padding: 15px 16px;
    }

    .ng-legal .ng-legal-title {
        font-size: 25px;
    }

    /* Lentelė mobiliajame rodoma kaip kortelės */

    .ng-content .ng-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .ng-content .ng-table,
    .ng-content .ng-table thead,
    .ng-content .ng-table tbody,
    .ng-content .ng-table tr,
    .ng-content .ng-table th,
    .ng-content .ng-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .ng-content .ng-table {
        border-collapse: separate;
        table-layout: auto;
    }

    .ng-content .ng-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .ng-content .ng-table tbody tr {
        margin: 0 0 16px;
        overflow: hidden;
        border: 1px solid var(--ng-border);
        border-radius: 12px;
        background: #ffffff;
    }

    .ng-content .ng-table tbody tr:nth-child(even) {
        background: #ffffff;
    }

    .ng-content .ng-table td {
        display: block;
        padding: 13px 15px;
        border-bottom: 1px solid var(--ng-border);
        color: var(--ng-dark);
        font-size: 14px;
        line-height: 1.55;
        text-align: left;
    }

    .ng-content .ng-table td:last-child {
        border-bottom: 0;
    }

    .ng-content .ng-table td:first-child {
        padding: 14px 15px;
        background: var(--ng-light);
        color: var(--ng-black);
        font-weight: 700;
    }

    /*
    Naudokite:
    <td data-label="Ką galima suprasti?">...</td>
    */

    .ng-content .ng-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: var(--ng-orange);
        font-size: 11px;
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .ng-content .ng-table td:first-child::before {
        display: none;
    }

    .ng-content .ng-article-footer__date {
        width: 100%;
        margin-left: 0;
        white-space: normal;
        text-align: left;
    }
}

/* =========================================================
   16. LABAI MAŽI EKRANAI
   ========================================================= */

@media (max-width: 430px) {

    .ng-content {
        font-size: 15px;
    }

    .ng-guide .ng-hero {
        padding: 22px 18px;
    }

    .ng-guide .ng-hero-title,
    .ng-legal .ng-legal-title {
        font-size: 23px;
    }

    .ng-content .ng-table td {
        padding: 12px 14px;
    }
}

/* =========================================================
   17. SPAUSDINIMAS
   ========================================================= */

@media print {

    .ng-content {
        max-width: none;
        color: #000000;
        font-size: 11pt;
    }

    .ng-guide .ng-hero,
    .ng-guide .ng-cta {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #cccccc;
    }

    .ng-guide .ng-hero-title,
    .ng-guide .ng-hero p,
    .ng-guide .ng-hero h1,
    .ng-guide .ng-hero h2,
    .ng-guide .ng-hero h3,
    .ng-guide .ng-cta h2,
    .ng-guide .ng-cta p {
        color: #000000 !important;
    }

    .ng-content a {
        color: #000000;
        text-decoration: none;
    }

    .ng-content .ng-table-wrap {
        overflow: visible;
    }

    .ng-content .ng-table {
        min-width: 0;
    }

    .ng-guide .ng-button {
        display: none;
    }
}

/* =========================================================
   CLP PIKTOGRAMOS STRAIPSNIUOSE
   ========================================================= */

.ng-content .ng-hazard-name {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.ng-content .ng-hazard-icon {
    display: block;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    object-fit: contain;
}

.ng-content .ng-hazard-name strong {
    line-height: 1.35;
}

@media (max-width: 760px) {
    .ng-content .ng-hazard-name {
        gap: 10px;
    }

    .ng-content .ng-hazard-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}

@media (max-width: 430px) {
    .ng-content .ng-hazard-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}

/* =========================================================
   NANO GO UK — ABOUT US
   Papildymas prie bendros .ng-content / .ng-guide sistemos.
   Tipografija, spalvos, kortelės ir CTA paveldimi iš Kadence
   bei bendro NANO GO turinio dizaino, todėl čia paliekami tik
   šiam puslapiui būtini išdėstymo skirtumai.
   ========================================================= */

.ng-about-page .ng-about__hero p + p {
    margin-top: 14px;
}

.ng-about-page .ng-about__lead {
    font-size: 15.5px;
}

.ng-about-page .ng-about__section {
    margin-top: 40px;
}

.ng-about-page .ng-about__section > h2:first-child {
    margin-top: 0;
}

.ng-about-page .ng-about__cards {
    align-items: stretch;
}

.ng-about-page .ng-about__cards .ng-card {
    height: 100%;
}

.ng-about-page .ng-about__link-card h3 a {
    color: inherit;
    text-decoration: none;
}

.ng-about-page .ng-about__link-card h3 a::after {
    content: " →";
    color: var(--ng-orange);
}

.ng-about-page .ng-about__link-card h3 a:hover,
.ng-about-page .ng-about__link-card h3 a:focus {
    color: var(--ng-orange);
}

.ng-about-page .ng-about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 0;
}

.ng-about-page .ng-hero .ng-about__actions {
    max-width: none;
}

.ng-about-page .ng-cta .ng-about__actions {
    justify-content: center;
}

.ng-about-page .ng-about__button--secondary {
    background: transparent;
    color: #ffffff !important;
}

.ng-about-page .ng-about__button--secondary:hover,
.ng-about-page .ng-about__button--secondary:focus {
    background: #ffffff;
    color: var(--ng-black) !important;
}

.ng-about-page .ng-about__closing-line {
    margin-top: 20px;
    font-size: 16px;
}

@media (max-width: 760px) {
    .ng-about-page .ng-about__section {
        margin-top: 34px;
    }

    .ng-about-page .ng-about__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ng-about-page .ng-button {
        width: 100%;
        text-align: center;
    }
}