/*
Theme Name: Mega Detectives islas (Blocksy Child)
Template: blocksy
Version: 0.2.0
Text Domain: detective-canarias
*/

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("assets/fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("assets/fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root:root {
	--dc-navy: #0c1a33;
	--dc-navy-2: #13284d;
	--dc-blue: #2062db;          /* Mega Detectives brand blue */
	--dc-blue-soft: #e8f0fd;
	--dc-orange: #f26a21;        /* call to action */
	--dc-orange-dark: #d4561a;
	--dc-wa: #1fa855;
	--dc-ink: #1b2333;
	--dc-muted: #5a6475;
	--dc-line: #e2e7ef;
	--dc-bg: #f5f7fb;
	--dc-radius: 14px;
	--dc-shadow: 0 10px 30px -12px rgba(12, 26, 51, .25);

	--theme-palette-color-1: var(--dc-blue);
	--theme-palette-color-2: #174bb0;
	--theme-palette-color-3: var(--dc-ink);
	--theme-palette-color-4: var(--dc-navy);
	--theme-palette-color-5: var(--dc-line);
	--theme-palette-color-6: var(--dc-bg);
	--theme-palette-color-7: #ffffff;
	--theme-palette-color-8: #ffffff;
	--theme-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--dc-ink); background: #fff; overflow-x: clip; }
h1, h2, h3, .dc-card__title, .dc-zone__title, .site-title { font-family: "Poppins", system-ui, sans-serif; letter-spacing: -.01em; color: var(--dc-navy); }

/* Content column: comfortable reading width, white page instead of boxed grey */
.page .ct-container-full, .page [class*="ct-container"] > article { background: transparent; }
.entry-content { font-size: 1.0625rem; line-height: 1.7; }
.entry-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.entry-content h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); margin-top: 2.6em; margin-bottom: .6em; line-height: 1.25; }
.entry-content h3 { font-size: 1.2rem; margin-top: 1.8em; }
.entry-content a:not(.dc-btn):not(.dc-card):not(.dc-zone) { color: var(--dc-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.entry-content ul:not(.dc-trust) li::marker { color: var(--dc-blue); }

/* ---------- Header ---------- */
.ct-header [data-row="middle"] { border-bottom: 1px solid var(--dc-line); }
.site-title a { color: var(--dc-navy) !important; font-weight: 700; }
.ct-header .menu > li > a { font-weight: 600; color: var(--dc-ink); }
.ct-header .menu > li.dc-menu-tel > a { background: var(--dc-orange); color: #fff !important; border-radius: 999px; padding: 0 18px !important; height: 42px; align-self: center; }
.ct-header .menu > li.dc-menu-tel > a:hover { background: var(--dc-orange-dark); }

/* ---------- Hero (carries the page H1) ---------- */
.entry-content > .dc-hero {
	max-width: none; width: 100vw; margin: 0 calc(50% - 50vw) 2.5rem;
	background: linear-gradient(135deg, var(--dc-navy) 0%, var(--dc-navy-2) 100%);
	color: #fff; padding: clamp(48px, 7vw, 88px) 20px clamp(40px, 5vw, 64px);
}
.dc-hero--foto {
	background:
		linear-gradient(100deg, rgba(12, 26, 51, .94) 0%, rgba(12, 26, 51, .82) 45%, rgba(12, 26, 51, .35) 100%),
		var(--dc-hero-img, url("assets/img/hero-arrecife-1920.webp")) center 60% / cover no-repeat !important;
	padding-bottom: 0 !important;
}
@media (max-width: 900px) {
	.dc-hero--foto { background: linear-gradient(180deg, rgba(12, 26, 51, .9), rgba(12, 26, 51, .88)), var(--dc-hero-img-m, url("assets/img/hero-arrecife-1024.webp")) center / cover no-repeat !important; }
}
.dc-hero__inner { max-width: 1120px; margin: 0 auto; }
.dc-hero--foto .dc-hero__inner { padding-bottom: clamp(40px, 6vw, 72px); }
.dc-hero__kicker { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #bcd2fb; margin: 0 0 14px; }
.entry-content .dc-hero__title { color: #fff; font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.12; margin: 0 0 18px; max-width: 760px; }
.dc-hero__lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.65; color: #dce5f5; max-width: 680px; margin: 0 0 28px; }
.entry-content .dc-hero__lead a { color: #fff; }

/* Trust strip under the photo hero */
.dc-hero .dc-trust { max-width: none; }
.dc-trust {
	list-style: none; margin: 0 auto; padding: 18px 20px; display: grid; gap: 14px 28px;
	grid-template-columns: repeat(4, minmax(0, 1fr)); background: rgba(255, 255, 255, .06);
	border-top: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(4px);
}
.dc-hero .dc-trust { margin: 0 calc(50% - 50vw); padding-left: max(20px, calc(50vw - 560px)); padding-right: max(20px, calc(50vw - 560px)); }
.dc-trust li { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 500; color: #fff; margin: 0; }
.dc-trust .dc-icon { width: 22px; height: 22px; flex: none; color: #8fb4f7; }
@media (max-width: 900px) { .dc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Buttons ---------- */
.dc-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.dc-btn {
	display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px;
	font-weight: 600; font-size: 1rem; text-decoration: none !important; line-height: 1; transition: transform .15s, background .15s, box-shadow .15s;
}
.dc-btn .dc-icon { width: 20px; height: 20px; }
.dc-btn--call { background: var(--dc-orange); color: #fff !important; box-shadow: 0 8px 20px -8px rgba(242, 106, 33, .7); }
.dc-btn--call:hover { background: var(--dc-orange-dark); transform: translateY(-1px); }
.dc-btn--wa { background: #fff; color: var(--dc-navy) !important; border: 1.5px solid var(--dc-line); }
.dc-btn--wa .dc-icon { color: var(--dc-wa); }
.dc-btn--wa:hover { border-color: var(--dc-wa); transform: translateY(-1px); }
.dc-buttons--hero .dc-btn--wa { background: rgba(255, 255, 255, .1); color: #fff !important; border-color: rgba(255, 255, 255, .35); }
.dc-buttons--hero .dc-btn--wa .dc-icon { color: #5ee08f; }

/* In-content CTA panel */
.entry-content > .dc-cta {
	background: var(--dc-bg); border: 1px solid var(--dc-line); border-radius: var(--dc-radius);
	padding: 22px 24px; margin-top: 2em; margin-bottom: 2em; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.dc-cta__note { margin: 0; color: var(--dc-muted); font-size: .92rem; }

/* ---------- Service cards ---------- */
.entry-content > .dc-cards { max-width: 1120px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1.4em; margin-bottom: 1.4em; }
.dc-card {
	display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--dc-radius);
	background: #fff; border: 1px solid var(--dc-line); text-decoration: none !important; color: var(--dc-ink);
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
.dc-card:hover { transform: translateY(-3px); box-shadow: var(--dc-shadow); border-color: #c9d7f2; }
.dc-card__icon { width: 46px; height: 46px; padding: 10px; border-radius: 12px; background: var(--dc-blue-soft); color: var(--dc-blue); }
.dc-card__title { font-size: 1.12rem; font-weight: 600; line-height: 1.3; }
.dc-card__text { color: var(--dc-muted); font-size: .96rem; line-height: 1.55; flex: 1; }
.dc-card__more { color: var(--dc-blue); font-weight: 600; font-size: .92rem; }

/* ---------- Zone grid ---------- */
.entry-content > .dc-zones { max-width: 1120px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 1.4em; margin-bottom: 1.4em; }
.dc-zone {
	display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 16px 18px; border-radius: 12px;
	background: var(--dc-bg); border: 1px solid transparent; text-decoration: none !important; color: var(--dc-ink); transition: border-color .15s, background .15s;
}
.dc-zone:hover { border-color: #c9d7f2; background: #fff; }
.dc-zone__pin { grid-row: span 2; width: 26px; height: 26px; color: var(--dc-orange); margin-top: 2px; }
.dc-zone__title { font-weight: 600; font-size: 1.02rem; }
.dc-zone__text { color: var(--dc-muted); font-size: .92rem; line-height: 1.5; }

/* ---------- Process steps (ordered lists) ---------- */
.entry-content ol.dc-steps { list-style: none; counter-reset: step; padding-left: 0; }
.entry-content ol.dc-steps li { counter-increment: step; position: relative; padding: 4px 0 18px 58px; margin: 0; }
.entry-content ol.dc-steps li::before {
	content: counter(step); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center; background: var(--dc-navy); color: #fff; font: 600 1rem/1 "Poppins", sans-serif;
}
.entry-content ol.dc-steps li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 42px; bottom: 2px; width: 2px; background: var(--dc-line); }

/* ---------- FAQ accordion (core/details) ---------- */
.entry-content .wp-block-details { border: 1px solid var(--dc-line); border-radius: 12px; padding: 0; margin-top: 10px; margin-bottom: 10px; background: #fff; }
.entry-content .wp-block-details summary {
	cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; position: relative;
	font: 600 1.02rem/1.4 "Poppins", sans-serif; color: var(--dc-navy);
}
.entry-content .wp-block-details summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--dc-blue); }
.entry-content .wp-block-details[open] summary::after { content: "–"; }
.entry-content .wp-block-details > *:not(summary) { padding: 0 20px; }
.entry-content .wp-block-details[open] { box-shadow: 0 6px 18px -12px rgba(12, 26, 51, .3); }

/* ---------- Site footer (rendered by the child theme) ---------- */
.dc-footer { background: var(--dc-navy); color: #c6d1e6; padding: 56px 20px 28px; margin-top: 64px; }
.dc-footer__grid { max-width: 1120px; margin: 0 auto; display: grid; gap: 32px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.dc-footer h2 { font-size: 1rem; color: #fff; margin: 0 0 14px; }
.dc-footer ul { list-style: none; margin: 0; padding: 0; }
.dc-footer li { margin: 0 0 8px; }
.dc-footer a { color: #c6d1e6; text-decoration: none; }
.dc-footer a:hover { color: #fff; }
.dc-footer__brand p { font-size: .94rem; line-height: 1.6; margin: 0 0 10px; }
.dc-footer__legal { max-width: 1120px; margin: 36px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .84rem; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
@media (max-width: 900px) { .dc-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dc-footer__grid { grid-template-columns: 1fr; } }
.ct-footer { display: none; } /* Blocksy's default footer is replaced by .dc-footer */

/* ---------- Sticky mobile call bar ---------- */
.dc-mobilebar { display: none; }
@media (max-width: 760px) {
	.dc-mobilebar {
		display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 99;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96);
		border-top: 1px solid var(--dc-line); box-shadow: 0 -8px 24px -16px rgba(12, 26, 51, .4);
	}
	.dc-mobilebar .dc-btn { justify-content: center; padding: 13px 10px; }
	body { padding-bottom: 76px; }
	.dc-buttons--hero .dc-btn { flex: 1 1 auto; justify-content: center; }
}

/* Pages start straight with the hero: no top spacing from Blocksy's content container */
body.page [data-vertical-spacing*="top"] { padding-top: 0 !important; }

/* Mobile header and hero density */
.site-title { font-size: clamp(1.05rem, 2.2vw, 1.3rem) !important; line-height: 1.2 !important; }
@media (max-width: 760px) {
	.site-title { font-size: 1.02rem !important; }
	.dc-hero__lead { font-size: 1rem; line-height: 1.6; }
	.dc-hero .dc-trust { padding-top: 16px; padding-bottom: 16px; }
	.dc-trust li { font-size: .82rem; }
}
.ct-header .site-title { --theme-font-size: 1.15rem !important; }
@media (max-width: 760px) { .ct-header .site-title { --theme-font-size: 1rem !important; } }

/* ---------- Island map (SVG from OpenStreetMap data) ---------- */
.entry-content > .dc-mapwrap { max-width: 760px; margin: 1.6em auto 2em; background: linear-gradient(180deg, #eaf2fd 0%, #f5f9ff 100%); border: 1px solid var(--dc-line); border-radius: var(--dc-radius); padding: 18px 18px 10px; }
.dc-map { width: 100%; height: auto; display: block; font-family: "Inter", system-ui, sans-serif; }
.dc-map__island { fill: #f4efe6; stroke: var(--dc-navy-2); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 6px 10px rgba(12, 26, 51, .12)); }
.dc-map__town circle { fill: var(--dc-navy-2); }
.dc-map__town text { font-size: 13px; fill: var(--dc-muted); font-weight: 500; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3.5px; stroke-linejoin: round; }
.dc-map__zone path { fill: var(--dc-orange); stroke: #fff; stroke-width: 1.6; transition: transform .15s; transform-box: fill-box; transform-origin: 50% 100%; }
.dc-map__zone circle { fill: #fff; pointer-events: none; }
.dc-map__zone text { font: 600 15px "Poppins", sans-serif; fill: var(--dc-navy); paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: 4px; stroke-linejoin: round; }
.dc-map__zone:hover path, .dc-map__zone:focus path { fill: var(--dc-orange-dark); transform: scale(1.18); }
.dc-map__zone:hover text, .dc-map__zone:focus text { fill: var(--dc-blue); }
.dc-map__airport circle { fill: #fff; stroke: var(--dc-navy-2); stroke-width: 1.2; }
.dc-map__airport path { stroke: var(--dc-navy-2); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.dc-map__ferry { fill: none; stroke: var(--dc-blue); stroke-width: 2; stroke-dasharray: 6 6; }
.dc-map__note { font-size: 13px; font-weight: 600; fill: var(--dc-blue); }
.dc-mapwrap figcaption { font-size: .82rem; color: var(--dc-muted); text-align: center; margin-top: 6px; }
@media (max-width: 560px) { .dc-map__town text { font-size: 15px; } .dc-map__zone text { font-size: 18px; } }

/* Static site: no WordPress search, so the header search icon is hidden */
.ct-header [data-id="search"], .ct-header .ct-header-search { display: none !important; }

/* ---------- Logo next to the site name ---------- */
.ct-header .site-title a { display: inline-flex; align-items: center; gap: 10px; }
.ct-header .site-title a::before { content: ""; width: 46px; height: 30px; background: url("assets/img/logo-icono.webp") center / contain no-repeat; flex: none; }
@media (max-width: 760px) { .ct-header .site-title a::before { width: 38px; height: 25px; } }

/* ---------- Contact form ---------- */
.entry-content > .dc-form { background: var(--dc-bg); border: 1px solid var(--dc-line); border-radius: var(--dc-radius); padding: 24px; display: grid; gap: 14px; margin-top: 1.4em; margin-bottom: 2em; }
.dc-form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; color: var(--dc-navy); }
.dc-form input, .dc-form textarea { font: inherit; font-weight: 400; padding: 12px 14px; border: 1px solid #cdd6e4; border-radius: 10px; background: #fff; }
.dc-form input:focus, .dc-form textarea:focus { outline: 2px solid var(--dc-blue); outline-offset: 1px; }
.dc-form__row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .dc-form__row { grid-template-columns: 1fr; } }
.dc-form .dc-form__check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--dc-muted); font-size: .9rem; }
.dc-form .dc-form__check input { margin-top: 3px; }
.dc-form__hp { position: absolute !important; left: -9999px; }
.dc-form button { justify-self: start; border: 0; cursor: pointer; }
.dc-form__ok { background: #e7f6ec; color: #17633a; border-radius: 10px; padding: 14px 16px; margin: 0; font-weight: 600; }