/*
Theme Name: Capitaloop
Theme URI: https://capitaloop.pl/
Author: NexlifyLabs · Leveloop · Capitaloop
Author URI: https://capitaloop.pl/
Description: Spokojny, niebieski motyw dla portalu finansów osobistych. Dla osób, które zaczynają: konta, oszczędzanie, lokaty i proste kalkulatory. Mobile-first, z WooCommerce, czytelny dla wyszukiwarek i answer engines.
Version: 1.0.7
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: capitaloop
Tags: blog, education, custom-menu, featured-images, footer-widgets, e-commerce, woocommerce, responsive-layout, custom-colors, custom-logo, translation-ready
*/

/* ==========================================================================
   Capitaloop – zmienne (jasny domyślnie, ciemny przez .theme-dark)
   ========================================================================== */
:root {
	--color-bg: #F3F7FC;
	--color-bg-alt: #E6F0FA;
	--color-surface: #FFFFFF;
	--color-text: #14304F;
	--color-text-secondary: #5C738A;
	--color-accent: #1D6FE8;
	--color-accent-hover: #1558C0;
	--color-accent-soft: #E5F0FC;
	--color-deep: #0C3F86;
	--color-on-accent: #FFFFFF;
	--border-color: #D5E3F2;
	--shadow-card: 0 8px 24px rgba(20, 64, 120, 0.08);
	--radius: 16px;
	--radius-sm: 12px;
	--header-h: 64px;
	--font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

html.theme-dark,
body.theme-dark {
	--color-bg: #0B1524;
	--color-bg-alt: #101C2E;
	--color-surface: #152536;
	--color-text: #E7F0FA;
	--color-text-secondary: #A9BDD2;
	--color-accent: #6AABFF;
	--color-accent-hover: #8EC0FF;
	--color-accent-soft: #1A3354;
	--color-deep: #9CC6FF;
	--color-on-accent: #0B1524;
	--border-color: #24384F;
	--shadow-card: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html {
	box-sizing: border-box;
	font-size: 16px;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.65;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--color-accent-hover);
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

h1, .h1 { font-size: 1.85rem; line-height: 1.2; margin: 0 0 0.6rem; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 0.75rem; letter-spacing: -0.015em; }
h3, .h3 { font-size: 1.15rem; line-height: 1.35; margin: 0 0 0.4rem; }

@media (min-width: 768px) {
	h1, .h1 { font-size: 2.5rem; }
	h2, .h2 { font-size: 1.75rem; }
	h3, .h3 { font-size: 1.25rem; }
}

button,
.button,
input[type="submit"],
.wp-block-button__link {
	min-height: 44px;
	min-width: 44px;
}

.skip-link {
	position: absolute;
	left: 0.5rem;
	top: -4rem;
	z-index: 200;
	background: var(--color-accent);
	color: var(--color-on-accent);
	padding: 0.6rem 1rem;
	border-radius: 8px;
}

.skip-link:focus {
	top: 0.5rem;
	color: var(--color-on-accent);
}