/*
Theme Name:   Duokraft Child
Theme URI:    https://duokraft.se/
Description:  Child theme for Duokraft. Put all site-specific changes here (CSS, PHP, template overrides, SCF field edits) so the parent theme can be updated safely.
Author:       Pixeltokig
Author URI:   https://digitalagencynordic.com/
Template:     duokraft
Version:      1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  duokraft-child
*/

/* ==========================================================================
   Custom styles
   --------------------------------------------------------------------------
   Loaded after the parent stylesheet (assets/css/main.css), so rules here win
   at equal specificity. The parent's design tokens can be overridden:

   :root {
       --dk-blue: #00a8ff;
       --dk-bg:   #040c12;
       --dk-text: #f3f5f7;
   }
   ========================================================================== */

/* =========================================================================
   Duokraft – Elementor: custom CSS kept on purpose
   -------------------------------------------------------------------------
   Layout, spacing, sizes, typography, colours and responsive values live in
   each Elementor element's own settings. Only things Elementor cannot do
   natively are here. Sizes use the parent theme's fluid unit --dk-u.
   ========================================================================= */

/* 1. Section headings: the heading and its blue highlight are two SCF fields
      (two Heading widgets) that must read as one sentence. */
.elementor .e-con.dke-headline { display: block !important; }
.elementor .dke-headline > .elementor-widget { display: inline; width: auto; }
.elementor .dke-headline .elementor-heading-title { display: inline; }
.elementor .dke-headline:not(.dke-headline--break) > .elementor-widget:last-child { margin-left: 0.25em; }
.elementor .dke-headline--break > .elementor-widget:last-child,
.elementor .dke-headline--break > .elementor-widget:last-child .elementor-heading-title { display: block; }

/* 2. Keep short lines on one row (Elementor has no white-space control). */
@media (min-width: 768px) {
	.elementor .dke-nowrap, .elementor .dke-nowrap p, .elementor .dke-nowrap .elementor-heading-title { white-space: nowrap; }
}
@media (min-width: 1025px) {
	.elementor .dke-nowrap-lg .elementor-heading-title { white-space: nowrap; }
}

/* 3. Hero background: multi-stop elliptical glow (Elementor gradients allow
      only two colours and fixed positions). */
.elementor .dke-hero { background: radial-gradient(ellipse at 75% 70%, #001c39 0%, #04101b 31%, #040c12 66%); }

/* 4. Hero symbol fades out at its edges. */
.elementor .dke-hero-art img {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 83%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, #000 16%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 83%, transparent);
	mask-composite: intersect;
}

/* 5. Button arrow icon: Elementor has no icon-size control for SVG icons and
      forces fill="currentColor", which would fill the outline. */
.elementor .dke-btn .elementor-button-icon svg { width: calc(15 * var(--dk-u)); height: auto; fill: none; }
@media (max-width: 767px) { .elementor .dke-btn .elementor-button-icon svg { width: 17px; } }

/* 6. Text links ("Läs mer"): underlined text + a short line that grows and
      turns blue on hover. */
.elementor .dke-textlink .elementor-button-content-wrapper { align-items: center; gap: calc(13 * var(--dk-u)); }
.elementor .dke-textlink .elementor-button-text { border-bottom: 1px solid #7d8b96; padding: calc(3 * var(--dk-u)) 0; }
.elementor .dke-textlink .elementor-button-content-wrapper::after { content: ""; width: calc(31 * var(--dk-u)); height: 1px; background: #a2afbe; transition: width .2s ease, background .2s ease; }
.elementor .dke-textlink .elementor-button:hover .elementor-button-content-wrapper::after { width: calc(40 * var(--dk-u)); background: #00a8ff; }
@media (max-width: 767px) {
	.elementor .dke-textlink .elementor-button-content-wrapper { gap: 11px; }
	.elementor .dke-textlink .elementor-button-content-wrapper::after { width: 25px; }
}

/* 7. Header menu: thin blue underline that grows from the left (Elementor's
      underline animations grow from the centre or slide). */
.elementor .dke-nav--header .elementor-nav-menu--main a.elementor-item { position: relative; }
.elementor .dke-nav--header .elementor-nav-menu--main a.elementor-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(3 * var(--dk-u)); height: 1px; background: #00a8ff; opacity: 1; transform: scaleX(0); transform-origin: left center; transition: transform .3s ease; }
.elementor .dke-nav--header .elementor-nav-menu--main a.elementor-item:hover::after,
.elementor .dke-nav--header .elementor-nav-menu--main a.elementor-item:focus-visible::after,
.elementor .dke-nav--header .elementor-nav-menu--main a.elementor-item.elementor-item-active::after { transform: scaleX(1); }

/* 8. Mobile menu: round 44px button and a right-aligned 320px panel. */
.elementor .dke-nav--header .elementor-menu-toggle { width: 44px; height: 44px; margin-left: auto; padding: 0; justify-content: center; border-color: #204258; }
.elementor .dke-nav--header .elementor-nav-menu--dropdown { position: absolute; top: 100%; right: 0; left: auto; width: min(320px, calc(100vw - 44px)); z-index: 100; }
.elementor .dke-nav--header .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown { padding: 10px 12px; }

/* 9. Small hover effects. */
.elementor .dke-service-link img { transition: transform .2s ease; }
.elementor .dke-service-link a:hover img { transform: translateX(4px); }
.elementor a.dke-detail:hover .elementor-widget-text-editor { color: #00a8ff !important; }

/* 10. Form fields: height/padding and placeholder colour have no native
       controls; the submit button uses the brand gradient. */
.elementor .dke-form .elementor-field-group .elementor-field-textual { min-height: calc(29 * var(--dk-u)); padding: calc(7 * var(--dk-u)) calc(9 * var(--dk-u)); }
.elementor .dke-form .elementor-field-group textarea.elementor-field-textual { min-height: calc(76 * var(--dk-u)); resize: vertical; }
.elementor .dke-form .elementor-field-textual::placeholder { color: #8796a3; opacity: 1; }
.elementor .dke-form .elementor-field-textual:focus { border-color: #00a8ff !important; box-shadow: none; outline: none; }
.elementor .dke-form .elementor-button[type="submit"] { background-image: linear-gradient(115deg, #00a4ff, #0096f5); }
.elementor .dke-form .elementor-button[type="submit"]:hover { background-image: none; }
@media (max-width: 767px) {
	.elementor .dke-form .elementor-field-group .elementor-field-textual { min-height: 46px; padding: 12px; }
	.elementor .dke-form .elementor-field-group textarea.elementor-field-textual { min-height: 120px; }
}