/*
Theme Name: Taklia
Template: twentytwentyfive
Description: Child theme för Takläggare Stockholm (demo, Webbkompaniet LIA). Standardblock, tokens i theme.json.
Version: 1.0.0
Author: Alexander Gerhard
Text Domain: taklia
*/

/* Kort som ska vara lika höga i en rad */
.tk-cards > .wp-block-column { display: flex; }
.tk-cards > .wp-block-column > .wp-block-group { flex: 1; display: flex; flex-direction: column; }
.tk-cards .tk-push { margin-top: auto !important; }

/* Tjänstekort: hela kortet klickbart via länk i rubriken */
.tk-service { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.tk-service:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(30,35,40,.12); }
.tk-service h3 a { color: inherit; text-decoration: none; }
.tk-service h3 a::after { content: ""; position: absolute; inset: 0; }
.tk-service img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Förtroenderad i hero */
.tk-trust p { display: flex; align-items: center; gap: 8px; margin: 0; }
.tk-trust p::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Checklista */
.tk-check { list-style: none; padding-left: 0; }
.tk-check li { position: relative; padding-left: 32px; margin-bottom: 10px; }
.tk-check li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--wp--preset--color--contrast) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Steg 1–5 */
.tk-step-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--accent); color: #fff; font-weight: 700; margin: 0 0 16px !important; }

/* FAQ */
.tk-faq .wp-block-details { border-bottom: 1px solid var(--wp--preset--color--line); padding: 20px 0; margin: 0; }
.tk-faq summary { font-weight: 700; cursor: pointer; font-size: 1.125rem; }
.tk-faq .wp-block-details p { margin: 12px 0 0; color: var(--wp--preset--color--muted); }

/* Knappar: tydlig hover */
.wp-element-button, .wp-block-button__link { transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-1px); }
.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--contrast) !important; color: #fff !important; }

/* Sticky header */
.tk-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .tk-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tk-header { top: 46px; } }
html { scroll-padding-top: 96px; }

/* Bilder: samma rundning överallt */
.wp-block-image img, .wp-block-cover { border-radius: var(--wp--custom--radius); }
.tk-hero.wp-block-cover { border-radius: 0; }

@media (max-width: 781px) {
	.tk-hide-mobile { display: none !important; }
}

/* Sidfot: listor utan punkter, länkar utan understrykning */
.tk-footer-list { list-style: none; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* Ninja Forms i sajtens stil */
.nf-form-cont .nf-form-title, .nf-form-cont .nf-before-form-content { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.nf-form-cont .nf-field-label label { font-weight: 700; font-size: 1rem; }
.nf-form-cont input[type="text"], .nf-form-cont input[type="email"], .nf-form-cont input[type="tel"], .nf-form-cont select, .nf-form-cont textarea {
	width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; background: #fff; font: inherit; color: inherit;
}
.nf-form-cont textarea { min-height: 140px; }
.nf-form-cont input:focus, .nf-form-cont select:focus, .nf-form-cont textarea:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; border-color: transparent; }
.nf-form-cont input[type="submit"], .nf-form-cont input[type="button"] {
	min-height: 52px; padding: 15px 32px; border: 0; border-radius: 999px; background: var(--wp--preset--color--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background-color .15s ease, transform .15s ease;
}
.nf-form-cont input[type="submit"]:hover { background: var(--wp--preset--color--accent-dark); transform: translateY(-1px); }
.nf-form-cont .nf-field-container { margin-bottom: 20px; }
.nf-form-cont .nf-response-msg { padding: 20px; border-radius: 12px; background: #fff; }

/* Mobil: fast knapprad längst ner (Ring + Begär offert) */
.tk-mobilebar { display: none; }
@media (max-width: 781px) {
	.tk-mobilebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--wp--preset--color--line); }
	.tk-mobilebar .wp-block-buttons { width: 100%; gap: 12px; }
	.tk-mobilebar .wp-block-button { flex: 1; }
	.tk-mobilebar .wp-block-button__link { width: 100%; }
	body { padding-bottom: 80px; }
}