/* ==========================================================================
   Helsinki SEO — Tools & Industries stylesheet
   Builds on /assets/css/style.css design tokens (--primary-color etc.)
   ========================================================================== */

/* ---- Tool / page hero ---- */
.tool-hero {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 55%, var(--secondary-color) 100%);
    color: #fff;
    padding: 7rem 0 3.5rem;
    text-align: center;
}
.tool-hero .container { max-width: 820px; }
.tool-hero .eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(255, 255, 255, .08);
    padding: .35rem .9rem;
    border-radius: 100px;
    margin-bottom: 1.1rem;
}
.tool-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.tool-hero p { color: rgba(255, 255, 255, .88); font-size: 1.12rem; margin: 0 auto; max-width: 660px; }

/* ---- Workbench layout ---- */
.tool-section { padding: 3.5rem 0; }
.tool-workbench {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
.tool-panel {
    background: var(--surface);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.8rem;
}
.tool-panel h2, .tool-panel h3 { margin-top: 0; }
.tool-panel-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1.2rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--gray-200);
}

@media (max-width: 880px) {
    .tool-workbench { grid-template-columns: 1fr; }
}

/* ---- Form controls ---- */
.tool-field { margin-bottom: 1.4rem; }
.tool-field:last-child { margin-bottom: 0; }
.tool-field label {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    color: var(--text-primary);
    margin-bottom: .5rem;
}
.tool-field .hint { display: block; font-weight: 400; font-size: .8rem; color: var(--text-muted); margin-top: .25rem; }
.tool-field input[type="text"],
.tool-field input[type="url"],
.tool-field input[type="number"],
.tool-field select,
.tool-field textarea {
    width: 100%;
    padding: .7rem .85rem;
    font: inherit;
    font-size: .95rem;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    transition: border-color .15s, box-shadow .15s;
}
.tool-field textarea { min-height: 110px; resize: vertical; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: .88rem; }
.tool-field input:focus,
.tool-field select:focus,
.tool-field textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 194, .18);
}
.char-count { font-size: .78rem; color: var(--text-muted); float: right; }
.char-count.warn { color: #c05621; }
.char-count.over { color: #c53030; font-weight: 600; }

/* ---- Range sliders ---- */
.slider-field { margin-bottom: 1.9rem; }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7rem; }
.slider-head label { font-weight: 600; font-size: .95rem; margin: 0; }
.slider-value {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary-color);
    background: var(--gray-100);
    padding: .15rem .6rem;
    border-radius: var(--radius-sm);
    min-width: 70px;
    text-align: right;
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 100px;
    background: var(--gray-300);
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--secondary-color);
    border: 3px solid #fff;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform .12s, background .12s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); background: var(--primary-color); }
input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--secondary-color);
    border: 3px solid #fff;
    box-shadow: var(--shadow-md);
    cursor: pointer;
}
.slider-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--text-muted); margin-top: .4rem; }

/* ---- Checkboxes / radios ---- */
.check-row { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .7rem; font-size: .92rem; }
.check-row input { margin-top: .2rem; width: 16px; height: 16px; accent-color: var(--secondary-color); flex-shrink: 0; }
.radio-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio-pills label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .85rem;
    border: 1px solid var(--gray-300);
    border-radius: 100px;
    cursor: pointer;
    font-weight: 500;
    font-size: .88rem;
    margin: 0;
    transition: all .15s;
}
.radio-pills label:hover { border-color: var(--secondary-color); }
.radio-pills input { display: none; }
.radio-pills input:checked + span,
.radio-pills label:has(input:checked) { color: var(--primary-color); }
.radio-pills label:has(input:checked) { border-color: var(--secondary-color); background: rgba(74, 144, 194, .1); }

/* ---- ROI result panel ---- */
.roi-result { text-align: center; }
.roi-result .result-label { font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.roi-bignum {
    font-size: clamp(2.4rem, 7vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--primary-color);
    margin: .4rem 0 .2rem;
    letter-spacing: -.02em;
}
.roi-sub { color: var(--text-secondary); font-size: .95rem; }
.roi-breakdown { margin: 1.8rem 0 0; text-align: left; }
.roi-breakdown .roi-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid var(--gray-200);
    font-size: .95rem;
}
.roi-breakdown .roi-row:last-child { border-bottom: none; }
.roi-breakdown .roi-row .v { font-weight: 700; color: var(--text-primary); }
.roi-row.highlight .v { color: #2f855a; }
.roi-uplift-badge {
    display: inline-block;
    background: #c6f6d5;
    color: #22543d;
    font-weight: 700;
    font-size: .85rem;
    padding: .2rem .6rem;
    border-radius: 100px;
}
.roi-cta { margin-top: 1.8rem; }
.roi-disclaimer { font-size: .76rem; color: var(--text-muted); margin-top: 1rem; }

/* ---- Code / output blocks ---- */
.output-block {
    position: relative;
    background: #0f2233;
    color: #d6e4f0;
    border-radius: var(--radius-md);
    padding: 1.1rem 1.1rem;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .82rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    min-height: 80px;
    margin-top: .3rem;
}
.output-actions { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.btn-copy, .btn-download {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 1px solid var(--gray-300);
    background: var(--surface);
    color: var(--text-primary);
    transition: all .15s;
}
.btn-copy:hover, .btn-download:hover { border-color: var(--secondary-color); color: var(--primary-color); }
.btn-copy.copied { background: #c6f6d5; border-color: #9ae6b4; color: #22543d; }

/* ---- SERP preview ---- */
.serp-preview {
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
    font-family: arial, sans-serif;
    max-width: 600px;
}
.serp-preview .serp-url { color: #202124; font-size: .82rem; display: flex; align-items: center; gap: .4rem; }
.serp-preview .serp-url .fav { width: 16px; height: 16px; border-radius: 50%; background: var(--gray-200); display: inline-flex; align-items:center; justify-content:center; font-size:9px; color: var(--primary-color); font-weight:700;}
.serp-preview .serp-title { color: #1a0dab; font-size: 1.25rem; line-height: 1.3; margin: .25rem 0 .2rem; }
.serp-preview .serp-desc { color: #4d5156; font-size: .87rem; line-height: 1.58; }
.serp-mobile { max-width: 380px; }
.pill-meter { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.ok { background: #2f855a; } .dot.warn { background: #d69e2e; } .dot.bad { background: #c53030; }

/* ---- Keyword density table ---- */
.kw-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.kw-stat { flex: 1; min-width: 110px; background: var(--gray-100); border-radius: var(--radius-md); padding: .9rem 1rem; text-align: center; }
.kw-stat .num { font-size: 1.6rem; font-weight: 700; color: var(--primary-color); line-height: 1; }
.kw-stat .lbl { font-size: .78rem; color: var(--text-muted); margin-top: .3rem; }
.kw-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.kw-table th, .kw-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--gray-200); }
.kw-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.kw-table td:last-child, .kw-table th:last-child { text-align: right; }
.kw-bar { height: 6px; border-radius: 100px; background: var(--secondary-color); display: block; }
.kw-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.kw-tabs button {
    padding: .4rem .9rem; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--gray-300); background: var(--surface); border-radius: 100px; color: var(--text-secondary);
}
.kw-tabs button.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* ---- Tools index grid ---- */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.tool-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--secondary-color); }
.tool-card .tool-icon {
    width: 52px; height: 52px; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 1.1rem;
}
.tool-card h3 { font-size: 1.18rem; margin: 0 0 .5rem; color: var(--primary-color); }
.tool-card p { font-size: .92rem; color: var(--text-secondary); margin: 0 0 1rem; flex-grow: 1; }
.tool-card .tool-link { font-weight: 600; font-size: .9rem; color: var(--secondary-color); }
.tool-card .tag { display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--secondary-color); background: rgba(74,144,194,.1); padding:.2rem .55rem; border-radius:100px; margin-bottom:.9rem; align-self:flex-start;}

/* ---- Industries grid ---- */
.industry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.industry-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--gray-300); border-radius: var(--radius-lg);
    padding: 1.7rem; text-decoration: none; color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.industry-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--secondary-color); }
.industry-card .ind-icon { font-size: 2rem; margin-bottom: .8rem; }
.industry-card h3 { font-size: 1.2rem; color: var(--primary-color); margin: 0 0 .5rem; }
.industry-card p { font-size: .92rem; color: var(--text-secondary); margin: 0 0 1rem; flex-grow: 1; }
.industry-card .ind-link { font-weight: 600; font-size: .9rem; color: var(--secondary-color); }

/* ---- Industry landing helpers ---- */
.stat-band { background: var(--gray-100); }
.stat-band .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; text-align: center; }
.stat-band .stat-num { font-size: 2.4rem; font-weight: 700; color: var(--primary-color); line-height: 1; }
.stat-band .stat-lbl { color: var(--text-secondary); font-size: .92rem; margin-top: .4rem; }
.checklist { list-style: none; padding: 0; margin: 1.2rem 0; }
.checklist li { position: relative; padding-left: 2rem; margin-bottom: .9rem; color: var(--text-secondary); line-height: 1.6; }
.checklist li::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    width: 1.4rem; height: 1.4rem; background: #c6f6d5; color: #22543d;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700;
}

/* ---- Breadcrumb ---- */
.breadcrumb { font-size: .85rem; color: var(--text-muted); padding: 1.2rem 0 0; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--secondary-color); }
.breadcrumb span { margin: 0 .4rem; }

/* ---- FAQ accordion (details/summary) ---- */
.faq-list { display: flex; flex-direction: column; gap: 1rem; }
details.faq-item { padding: 0; overflow: hidden; }
details.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.2rem 1.5rem;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
    content: "+";
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--secondary-color);
    line-height: 1;
    transition: transform .2s;
}
details.faq-item[open] summary::after { content: "−"; }
details.faq-item p { padding: 0 1.5rem 1.3rem; margin: 0; }

/* fade-in for animated numbers */
@keyframes pop { 0% { transform: scale(.96); opacity: .6; } 100% { transform: scale(1); opacity: 1; } }
.roi-bignum.bump { animation: pop .25s ease-out; }