/*
 * Supplemental utilities for the booking wizard (<livewire:shop.service-booking>).
 * These classes are used by the component but were not present in the design's
 * prebuilt, purged main.css. When the theme is built from source with Tailwind,
 * they are generated automatically and this file becomes unnecessary.
 *
 * Palette (from main.css): sage/turquoise #1fb8c2, sage/turquoise-dark #168a91,
 * ink #1f2a2e, turquoise-light #e1f5f7, border-medium #d5d8db, smoke #b8bcc0.
 */

.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.capitalize { text-transform: capitalize; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.min-h-\[80px\] { min-height: 80px; }

.text-nervik-border-medium { color: #d5d8db; }

.bg-nervik-sage\/15 { background-color: rgba(31, 184, 194, 0.15); }

.hover\:bg-nervik-sage-dark:hover { background-color: #168a91; }
.hover\:bg-nervik-ink\/90:hover { background-color: rgba(31, 42, 46, 0.9); }
.hover\:bg-nervik-turquoise-light\/50:hover { background-color: rgba(225, 245, 247, 0.5); }
.hover\:border-nervik-sage:hover { border-color: #1fb8c2; }
.focus\:border-nervik-sage:focus { border-color: #1fb8c2; }

/* "Terracotta" accent classes exist in the markup but the warm tone is unwanted —
   map them to the brand turquoise so the footer/hero stay on-brand (no warm color). */
.text-nervik-terracotta { color: #1fb8c2; }
.bg-nervik-terracotta { background-color: #1fb8c2; }
.hover\:bg-nervik-terracotta-dark:hover { background-color: #168a91; }

/* Misc utilities used by the ported layout/home but missing from the purged build. */
.backdrop-blur-xl { backdrop-filter: blur(24px); }

/* Padding helpers absent from the purged main.css (used by ported views). */
.pt-10 { padding-top: 2.5rem; }
.pt-12 { padding-top: 3rem; }
.pt-14 { padding-top: 3.5rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }
@media (min-width: 1024px) {
    .lg\:pt-10 { padding-top: 2.5rem; }
    .lg\:pt-12 { padding-top: 3rem; }
    .lg\:pt-14 { padding-top: 3.5rem; }
    .lg\:pb-12 { padding-bottom: 3rem; }
}

/* Vertical spacing helpers (Tailwind space-y-*) absent from the purged main.css. */
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
.space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 2.5rem; }
.space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 3rem; }
.space-y-16 > :not([hidden]) ~ :not([hidden]) { margin-top: 4rem; }
@media (min-width: 1024px) {
    .lg\:space-y-16 > :not([hidden]) ~ :not([hidden]) { margin-top: 4rem; }
}

/* Safety net for not-yet-ported legacy pages (.subpage-main lost its width when the
   old .page wrapper was removed): constrain to the home container width and clear the
   now-fixed header. New ported pages don't use .subpage-main and are unaffected. */
.subpage-main { max-width: 80rem; margin-left: auto; margin-right: auto; padding: 9rem 1.5rem 6rem; }
.articles-main { max-width: 80rem; margin-left: auto; margin-right: auto; padding: 9rem 1.5rem 6rem; }

/* Prose styling for raw blog/CMS HTML content (Tailwind preflight strips defaults). */
.article-content { color: #4b5358; font-size: 1.0625rem; line-height: 1.75; }
.article-content > * + * { margin-top: 1.25rem; }
.article-content h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.25rem; font-weight: 500; color: #1fb8c2; line-height: 1.15; margin-top: 3rem; }
.article-content h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.875rem; font-weight: 500; color: #1fb8c2; line-height: 1.2; margin-top: 2.5rem; }
.article-content h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 500; color: #1fb8c2; margin-top: 2rem; }
/* Headings authored with inner <strong> (Quill) must keep the heading colour/weight. */
.article-content h1 strong, .article-content h2 strong, .article-content h3 strong { color: inherit; font-weight: inherit; }
/* Pseudo-headings authored as a bold-only paragraph (e.g. Cennik "CENNIK USŁUG"). */
.article-content p:has(> strong:only-child) { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.625rem; line-height: 1.2; color: #1fb8c2; margin-top: 2.5rem; }
.article-content p:has(> strong:only-child) strong { font-weight: 500; color: inherit; }
.article-content p { margin-top: 1.25rem; }
.article-content ul, .article-content ol { margin-top: 1.25rem; padding-left: 1.5rem; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-top: 0.5rem; }
.article-content a { color: #1fb8c2; text-decoration: underline; }
.article-content a:hover { color: #168a91; }
.article-content strong { font-weight: 600; color: #1f2a2e; }
.article-content img { border-radius: 1rem; margin: 1.5rem auto; display: block; max-width: 100%; height: auto; }
.article-content blockquote { border-left: 3px solid #1fb8c2; padding-left: 1.25rem; font-style: italic; color: #5b6469; }