/*
 * Content pages (Om oss, Läraren, Kontakt, Premium): helper classes the Elementor widgets and
 * containers reference through Advanced → CSS Classes. Everything else is set in the panel.
 * The containers and widgets that use a class say so in their Navigator name, for example
 * "Foto (tv-ct-photo-fill: bilden fyller ramen)".
 *
 *   tv-ct-photo, -fill, -fill-m, -gold   photo frames (container with one Image widget)
 *   tv-ct-list-2col                      Icon List in two columns from 640px
 *   tv-ct-lucide                         the design's line icons in place of Font Awesome glyphs
 *   tv-ct-faq                            Nested Accordion like the design's <details> list
 *   tv-ct-form                           Form widget like the design's form
 */

/* ---------------------------------------------------------------- photo frames
 * tv-ct-photo: container holding one Image widget (rounded frame, steel background like .photo-frame).
 * tv-ct-photo-fill: the image covers the whole frame (height from the container: min height / stretch).
 * tv-ct-photo-fill-m: the same, but only below 1024px (the design's lg breakpoint).
 * tv-ct-photo-gold: warm gold tint over the photo (.photo-gold). */
.tv-ct-photo { isolation: isolate; }
.tv-ct-photo img {
	display: block;
	width: 100%;
	max-width: 100%;
}
.tv-ct-photo-fill > .elementor-widget-image,
.tv-ct-photo-fill > .elementor-widget-image > .elementor-widget-container {
	position: absolute;
	inset: 0;
}
.tv-ct-photo-fill > .elementor-widget-image img {
	height: 100% !important;
	object-fit: cover;
}
@media (max-width: 1023px) {
	.tv-ct-photo-fill-m > .elementor-widget-image,
	.tv-ct-photo-fill-m > .elementor-widget-image > .elementor-widget-container {
		position: absolute;
		inset: 0;
	}
	.tv-ct-photo-fill-m > .elementor-widget-image img {
		height: 100% !important;
		object-fit: cover;
	}
}
.tv-ct-photo-gold::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: color-mix(in oklab, var(--e-global-color-accent, #e2b42c) 9%, transparent);
	mix-blend-mode: soft-light;
	pointer-events: none;
}

/* ---------------------------------------------------------------- two-column list
 * tv-ct-list-2col on an Icon List: items in two columns from 640px (the "Alltid gratis" list). */
.tv-ct-list-2col .elementor-icon-list-items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}
@media (min-width: 640px) {
	.tv-ct-list-2col .elementor-icon-list-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tv-ct-list-2col .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
.tv-ct-list-2col .elementor-icon-list-icon svg { border-radius: 3px; }

/* ---------------------------------------------------------------- line icons
 * tv-ct-lucide on an Icon, Icon List or Nested Accordion widget: the Font Awesome icons picked in
 * the panel are drawn as the design's Lucide line icons (2px stroke) in the icon colour set in the
 * panel. Any other icon is shown as it is.
 *   book-open → BookOpen, comment → MessageCircle, wrench → Wrench,
 *   question-circle → CircleQuestionMark, chevron-down → ChevronDown */
.tv-ct-lucide svg.e-fas-book-open { --tv-lucide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E"); }
.tv-ct-lucide svg.e-far-comment,
.tv-ct-lucide svg.e-fas-comment { --tv-lucide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719'/%3E%3C/svg%3E"); }
.tv-ct-lucide svg.e-fas-wrench { --tv-lucide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z'/%3E%3C/svg%3E"); }
.tv-ct-lucide svg.e-far-question-circle,
.tv-ct-lucide svg.e-fas-question-circle { --tv-lucide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.tv-ct-lucide svg.e-fas-chevron-down { --tv-lucide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.tv-ct-lucide svg.e-fas-book-open,
.tv-ct-lucide svg.e-far-comment,
.tv-ct-lucide svg.e-fas-comment,
.tv-ct-lucide svg.e-fas-wrench,
.tv-ct-lucide svg.e-far-question-circle,
.tv-ct-lucide svg.e-fas-question-circle,
.tv-ct-lucide svg.e-fas-chevron-down {
	overflow: visible;
	background-color: var(--e-icon-list-icon-color, currentColor);
	-webkit-mask: var(--tv-lucide) center / contain no-repeat;
	mask: var(--tv-lucide) center / contain no-repeat;
}
.tv-ct-lucide svg.e-fas-book-open > *,
.tv-ct-lucide svg.e-far-comment > *,
.tv-ct-lucide svg.e-fas-comment > *,
.tv-ct-lucide svg.e-fas-wrench > *,
.tv-ct-lucide svg.e-far-question-circle > *,
.tv-ct-lucide svg.e-fas-question-circle > *,
.tv-ct-lucide svg.e-fas-chevron-down > * { visibility: hidden; }

/* An Icon widget is exactly as tall as its icon (no line box under it), like the design's inline svg. */
.elementor-widget-icon.tv-ct-lucide .elementor-icon-wrapper { display: flex; }

/* ---------------------------------------------------------------- FAQ
 * tv-ct-faq on a Nested Accordion: 16px between question and chevron, one 20px chevron at the right
 * edge that turns when the answer opens (the <details> list on Premium). The closed-state icon from
 * the panel is used for both states. */
.elementor-widget-n-accordion.tv-ct-faq { --n-accordion-icon-gap: 0 1rem; }
.tv-ct-faq .e-n-accordion-item-title-icon {
	display: flex;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
}
.tv-ct-faq .e-n-accordion-item .e-n-accordion-item-title-icon .e-opened { display: none !important; }
.tv-ct-faq .e-n-accordion-item .e-n-accordion-item-title-icon .e-closed { display: flex !important; }
.tv-ct-faq .e-n-accordion-item-title-icon svg {
	width: 20px;
	height: 20px;
	transition: transform .2s ease;
}
.tv-ct-faq.tv-ct-lucide .e-n-accordion-item-title-icon svg { background-color: var(--n-accordion-icon-normal-color, currentColor); }
.tv-ct-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-closed svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------- contact form
 * tv-ct-form on the Form widget: fields like .account-input, success box like .contact-success. */
.elementor-widget-form.tv-ct-form .elementor-field-group > label {
	line-height: 1.7;
}
.elementor-widget-form.tv-ct-form .elementor-field-textual {
	min-height: 3.3rem;
	padding: .7rem 1rem;
	box-shadow: none;
	transition: none;
}
.elementor-widget-form.tv-ct-form .elementor-field-textual::placeholder {
	color: rgba(5, 22, 68, .35);
	opacity: 1;
}
.elementor-widget-form.tv-ct-form .elementor-field-textual:focus {
	border-color: var(--e-global-color-secondary, #2d6ca9);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--e-global-color-b1a8e7f, #44a8e7) 20%, transparent);
}
.elementor-widget-form.tv-ct-form textarea.elementor-field-textual {
	min-height: 9rem;
	resize: vertical;
}
.elementor-widget-form.tv-ct-form .elementor-select-wrapper::before,
.elementor-widget-form.tv-ct-form .elementor-select-wrapper .select-caret-down-wrapper { display: none; }
.elementor-widget-form.tv-ct-form .elementor-select-wrapper select {
	-webkit-appearance: auto;
	appearance: auto;
	padding-right: 1rem;
}
.elementor-widget-form.tv-ct-form .elementor-button {
	transition: background-color .3s ease, transform .3s ease;
}
.elementor-widget-form.tv-ct-form .elementor-button:hover { transform: translateY(-2px); }
.elementor-widget-form.tv-ct-form form:has(> .elementor-message-success) > .elementor-form-fields-wrapper { display: none; }
.elementor-widget-form.tv-ct-form .elementor-message.elementor-message-success {
	position: relative;
	display: block;
	margin: 4px 0 0; /* 36px form margin + 4px = the 2.5rem gap above .contact-success */
	border-radius: 20px;
	padding: 1.5rem 1.5rem 1.5rem calc(1.5rem + 24px + 1rem);
	background: var(--e-global-color-a24cbff, #e8f5fd);
	color: rgba(14, 35, 56, .62);
	font: 400 17px/1.7 "Open Sans", sans-serif;
}
/* check icon (.contact-success > svg) */
.elementor-widget-form.tv-ct-form .elementor-message.elementor-message-success::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	width: 24px;
	height: 24px;
	margin: 0;
	background: var(--e-global-color-secondary, #2d6ca9);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Success text (Form → Custom Messages): a bold first sentence becomes the title, for example
 * "<strong>Tack för ditt meddelande.</strong> Du får svar via e-post." Plain text works too. */
.elementor-widget-form.tv-ct-form .elementor-message-success strong,
.elementor-widget-form.tv-ct-form .elementor-message-success h2 {
	display: block;
	margin: 0 0 .35rem;
	color: var(--e-global-color-primary, #051644);
	font: 600 1.4rem/1.7 "Outfit", sans-serif;
}
.elementor-widget-form.tv-ct-form .elementor-message-success p { margin: 0; }
.elementor-widget-form.tv-ct-form .elementor-message-success svg { display: none; }