/*
Theme Name: Trámite Fácil
Theme URI: https://tramitefacil.es
Author: Trámite Fácil
Description: Custom theme for Trámite Fácil, an immigration and legal services consultancy in Spain. Navy and gold design with a services menu, blog, FAQ and a contact form that sends email.
Version: 1.0.0
Requires at least: 6.0
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: tramite-facil
*/


/* ---------- Colors (defaults; the Customizer overrides these under Appearance > Customize > Theme Colors) ---------- */
:root {
	--tf-gold: #C9A34A; --tf-gold-rgb: 201, 163, 74;
	--tf-gold-light: #E3C56B; --tf-gold-light-rgb: 227, 197, 107;
	--tf-navy: #082B52; --tf-navy-rgb: 8, 43, 82;
	--tf-navy-dark: #061D38; --tf-navy-dark-rgb: 6, 29, 56;
	--tf-navy-mid: #0d3a6e; --tf-navy-mid-rgb: 13, 58, 110;
	--tf-soft: #F7F8FA; --tf-soft-rgb: 247, 248, 250;
	--tf-footer: #040F1C; --tf-footer-rgb: 4, 15, 28;
	--tf-ticker: #EEF1F5; --tf-ticker-rgb: 238, 241, 245;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'Inter', system-ui, sans-serif;
	background: var(--tf-soft);
	color: var(--tf-navy);
	-webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Playfair Display', Georgia, serif; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--tf-soft); }
::-webkit-scrollbar-thumb { background: var(--tf-gold); border-radius: 3px; }
.gold-divider { width: 56px; height: 2px; background: linear-gradient(90deg, var(--tf-gold), var(--tf-gold-light)); }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
body.admin-bar .tf-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .tf-header { top: 46px; } }
#consultation-form { scroll-margin-top: 130px; }

/* ---------- Buttons rendered as links ---------- */
:where(a.tf-btn) { display: inline-block; text-align: center; cursor: pointer; }
a.tf-btn.w-full { display: block; }

/* ---------- Header ---------- */
/* ---------- Text size: body text is 2px larger (see @theme in the build); the header bar keeps its original sizes ---------- */
.tf-header .text-xs   { font-size: 0.75rem; }
.tf-header .text-sm   { font-size: 0.875rem; }
.tf-header .text-base { font-size: 1rem; }

.tf-navlink { color: var(--tf-navy-dark); }
.tf-navlink:hover, .tf-navlink.is-active { color: var(--tf-gold); }
.tf-mnavlink { color: var(--tf-navy); border-color: rgba(var(--tf-navy-rgb), 0.07); }
.tf-mnavlink.is-active { color: var(--tf-gold); }
.tf-mega {
	background: #fff; border: 1.5px solid rgba(var(--tf-navy-dark-rgb), 0.1); border-top: 0;
	left: 50%; top: 100%; transform: translateX(-50%);
	width: min(1100px, calc(100vw - 48px)); border-radius: 0 0 16px 16px; overflow: hidden;
	box-shadow: 0 20px 60px rgba(var(--tf-navy-dark-rgb), 0.15);
}
[data-tf-dd-btn][aria-expanded="true"] svg { transform: rotate(180deg); }
.tf-mega-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tf-mega-col { padding: 22px 22px 26px; border-left: 1px solid rgba(var(--tf-navy-dark-rgb), 0.07); }
.tf-mega-col:nth-child(4n + 1) { border-left: 0; }
.tf-mega-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--tf-gold); color: var(--tf-navy); font-size: 13px; font-weight: 700; line-height: 1.3; }
.tf-mega-head:hover { color: var(--tf-gold); }
.tf-mega-icon { font-size: 18px; line-height: 1; }
.tf-mega-col ul { list-style: none; margin: 0; padding: 0; }
.tf-mega-item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--tf-navy-dark); font-size: 14px; line-height: 1.35; }
.tf-mega-item:hover { background: rgba(var(--tf-gold-rgb), 0.1); }
.tf-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 9999px; background: var(--tf-gold); }
.tf-burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translateY(8px); }
.tf-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tf-burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translateY(-8px); }

/* ---------- Hover effects (were inline JS in the original design) ---------- */
.tf-lift:hover  { transform: translateY(-6px) !important; box-shadow: 0 12px 40px rgba(var(--tf-navy-rgb), 0.14) !important; border-color: rgba(var(--tf-gold-rgb), 0.4) !important; }
.tf-lift4:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 40px rgba(var(--tf-navy-rgb), 0.12) !important; border-color: rgba(var(--tf-gold-rgb), 0.4) !important; }
.tf-lift4t:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 40px rgba(var(--tf-navy-rgb), 0.13) !important; }
.tf-row:hover { background: rgba(var(--tf-gold-rgb), 0.07) !important; border-color: rgba(var(--tf-gold-rgb), 0.3) !important; }
.tf-btn-soft:hover { background: linear-gradient(135deg, var(--tf-gold), var(--tf-gold-light)) !important; color: var(--tf-navy-dark) !important; }
.tf-outline-white:hover { border-color: #fff !important; }
.tf-outline-gold:hover { border-color: var(--tf-gold) !important; }
.tf-outline-gold2:hover { border-color: rgba(var(--tf-gold-rgb), 0.5) !important; }
.tf-flink:hover { color: rgba(255, 255, 255, 0.9) !important; }


/* ---------- FAQ accordion ---------- */
.tf-faq { background: #fff; border: 1.5px solid rgba(var(--tf-navy-rgb), 0.09); box-shadow: 0 1px 4px rgba(var(--tf-navy-rgb), 0.04); }
.tf-faq-num, .tf-faq-ico { background: rgba(var(--tf-navy-rgb), 0.06); color: var(--tf-navy); }
.tf-faq.is-open { border-color: rgba(var(--tf-gold-rgb), 0.45); box-shadow: 0 4px 24px rgba(var(--tf-navy-rgb), 0.1); }
.tf-faq.is-open .tf-faq-num, .tf-faq.is-open .tf-faq-ico { background: linear-gradient(135deg, var(--tf-gold), var(--tf-gold-light)); color: var(--tf-navy-dark); }
.tf-faq.is-open .tf-faq-ico svg { transform: rotate(45deg); }

/* ---------- Blog ---------- */
.tf-card { background: #fff; border: 1.5px solid rgba(var(--tf-navy-rgb), 0.08); box-shadow: 0 2px 12px rgba(var(--tf-navy-rgb), 0.05); }
.tf-card:hover { box-shadow: 0 12px 40px rgba(var(--tf-navy-rgb), 0.13); transform: translateY(-5px); border-color: rgba(var(--tf-gold-rgb), 0.3); }
.tf-tag { background: #fff; color: #4a5568; border: 1.5px solid rgba(var(--tf-navy-rgb), 0.1); }
.tf-tag:hover { border-color: rgba(var(--tf-gold-rgb), 0.5); }
.tf-tag.is-active { background: linear-gradient(135deg, var(--tf-gold), var(--tf-gold-light)); color: var(--tf-navy-dark); border-color: transparent; }
.tf-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tf-pagination .page-numbers {
	min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 9999px; font-size: 15px; font-weight: 600; color: #4a5568; background: #fff; border: 1.5px solid rgba(var(--tf-navy-rgb), 0.1);
}
.tf-pagination a.page-numbers:hover { border-color: rgba(var(--tf-gold-rgb), 0.5); }
.tf-pagination .page-numbers.current { background: linear-gradient(135deg, var(--tf-gold), var(--tf-gold-light)); color: var(--tf-navy-dark); border-color: transparent; }

/* ---------- Contact form ---------- */
.tf-input { background: var(--tf-soft); border: 1.5px solid rgba(var(--tf-navy-rgb), 0.1); color: var(--tf-navy); }
.tf-input:focus { border-color: var(--tf-gold); }
.tf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tf-notice { padding: 14px 16px; border-radius: 10px; font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
.tf-notice-ok { background: rgba(34, 139, 84, 0.08); border: 1px solid rgba(34, 139, 84, 0.3); color: #1d6b43; }
.tf-notice-err { background: rgba(197, 48, 48, 0.07); border: 1px solid rgba(197, 48, 48, 0.3); color: #9b2c2c; }

/* ---------- Article / page content ---------- */
.tf-prose { color: #4a5568; font-size: 1.125rem; line-height: 1.85; }
.tf-prose > *:first-child { margin-top: 0; }
.tf-prose p { margin: 0 0 1.25em; }
.tf-prose h2, .tf-prose h3, .tf-prose h4 { font-family: 'Playfair Display', Georgia, serif; color: var(--tf-navy); font-weight: 700; line-height: 1.3; margin: 2em 0 0.6em; }
.tf-prose h2 { font-size: 1.6rem; }
.tf-prose h3 { font-size: 1.3rem; }
.tf-prose h4 { font-size: 1.1rem; }
.tf-prose a { color: #B48A2E; text-decoration: underline; text-underline-offset: 3px; }
.tf-prose ul, .tf-prose ol { margin: 0 0 1.25em 1.4em; }
.tf-prose ul { list-style: disc; }
.tf-prose ol { list-style: decimal; }
.tf-prose li { margin-bottom: 0.4em; }
.tf-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.tf-prose blockquote { margin: 1.5em 0; padding: 0.4em 0 0.4em 1.2em; border-left: 3px solid var(--tf-gold); color: var(--tf-navy); font-style: italic; }
.tf-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 1rem; }
.tf-prose th, .tf-prose td { border: 1px solid rgba(var(--tf-navy-rgb), 0.12); padding: 10px 12px; text-align: left; }
.tf-prose th { background: var(--tf-soft); color: var(--tf-navy); }
.tf-prose .alignleft { float: left; margin: 0 1.5em 1em 0; }
.tf-prose .alignright { float: right; margin: 0 0 1em 1.5em; }
.tf-prose .aligncenter { display: block; margin: 0 auto 1em; }
.tf-prose figcaption, .tf-prose .wp-caption-text { font-size: 0.95rem; color: #718096; margin-top: 0.5em; }
.tf-page-links { margin-top: 2em; font-size: 0.9rem; }

/* ---------- Footer social icons: Dark Navy + Royal Gold ---------- */
.tf-social:hover { background: var(--tf-gold) !important; color: var(--tf-navy-dark) !important; border-color: var(--tf-gold) !important; }

/* ---------- Floating WhatsApp button (bottom right) ---------- */
.tf-wa {
	position: fixed; right: 20px; bottom: 20px; z-index: 60;
	width: 58px; height: 58px; border-radius: 9999px;
	display: flex; align-items: center; justify-content: center;
	background: #25D366; color: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tf-wa.is-left { right: auto; left: 20px; }
.tf-wa:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35); }
@media (max-width: 640px) { .tf-wa { right: 14px; bottom: 14px; width: 54px; height: 54px; } .tf-wa.is-left { right: auto; left: 14px; } }

/* ---------- News ticker (home page): fixed at the very top, above the header ---------- */
.tf-ticker {
	position: fixed; top: 0; left: 0; right: 0; z-index: 55; display: flex; align-items: stretch; height: 48px;
	background: var(--tf-ticker);
	border-bottom: 1px solid rgba(var(--tf-gold-rgb), 0.55);
	box-shadow: 0 2px 8px rgba(var(--tf-navy-dark-rgb), 0.06);
}
body.admin-bar .tf-ticker { top: 32px; }
@media (max-width: 782px) { body.admin-bar .tf-ticker { top: 46px; } }
/* On the home page the header sits directly under the ticker */
body.tf-has-ticker .tf-header { top: 48px; }
body.tf-has-ticker.admin-bar .tf-header { top: 80px; }
@media (max-width: 782px) { body.tf-has-ticker.admin-bar .tf-header { top: 94px; } }
.tf-ticker-marquee { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; scrollbar-width: none; }
.tf-ticker-marquee::-webkit-scrollbar { display: none; }
/* Static (not moving): the items sit in one line, centred; on small screens the line can be swiped sideways */
.tf-ticker-track { display: flex; align-items: center; flex-shrink: 0; width: max-content; margin: 0 auto; }
.tf-ticker-item { display: flex; align-items: center; white-space: nowrap; padding-left: 28px; color: var(--tf-navy-dark); font-size: 15px; }
.tf-ticker-item:last-child { padding-right: 28px; }
.tf-ticker-item:not(:last-child)::after { content: ""; width: 8px; height: 8px; margin-left: 52px; border-radius: 9999px; background: var(--tf-gold); flex-shrink: 0; }
.tf-ticker-item a { color: var(--tf-navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--tf-gold); text-underline-offset: 3px; }
.tf-ticker-item a:hover { color: var(--tf-gold); }
.tf-ticker-social { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-left: 1px solid rgba(var(--tf-navy-rgb), 0.12); background: var(--tf-ticker); }
.tf-ticker-social a, .tf-ticker-social span {
	width: 30px; height: 30px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
	background: var(--tf-navy-dark); color: var(--tf-gold); border: 1.5px solid var(--tf-gold); transition: background 0.2s ease, color 0.2s ease;
}
.tf-ticker-social a:hover { background: var(--tf-gold); color: var(--tf-navy-dark); }
.tf-ticker-social span.is-off { cursor: default; }
.tf-ticker-social svg { width: 15px; height: 15px; }

/* ---------- Phones: the news ticker shows only the phone number and the Gmail address ---------- */
.tf-ticker-mobile { display: none; }
@media (max-width: 767px) {
	.tf-ticker-marquee, .tf-ticker-social { display: none; }
	.tf-ticker-mobile { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; overflow-x: auto; scrollbar-width: none; }
	.tf-ticker-mobile::-webkit-scrollbar { display: none; }
	.tf-ticker-mobile .tf-ticker-item { padding-left: 12px; font-size: clamp(12px, 3.5vw, 14px); }
	.tf-ticker-mobile .tf-ticker-item:last-child { padding-right: 12px; }
	.tf-ticker-mobile .tf-ticker-item:not(:last-child)::after { margin-left: 14px; width: 6px; height: 6px; }
}

/* ---------- Mobile menu: each service category opens and closes ---------- */
.tf-acc-btn { background: transparent; border: 0; cursor: pointer; }
.tf-acc-icon { transition: transform 0.2s ease; }
.tf-acc-btn[aria-expanded="true"] .tf-acc-v { display: none; }

/* ---------- Language switch (Spanish / English) ---------- */
.tf-lang { align-items: center; gap: 2px; margin-right: 14px; padding: 2px; border-radius: 9999px; background: rgba(var(--tf-navy-rgb), 0.06); flex-shrink: 0; }
.tf-lang-mobile { display: flex; }
.tf-lang-btn { padding: 5px 11px; border-radius: 9999px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: rgba(6, 29, 56, 0.55); }
.tf-lang-btn:hover { color: var(--tf-navy-dark); }
.tf-lang-btn.is-active { background: var(--tf-navy-dark); color: #fff; }
.tf-lang-mobile { margin: 14px 0 4px; justify-content: center; background: rgba(8, 43, 82, 0.06); }
.tf-lang-mobile .tf-lang-btn { flex: 1; text-align: center; padding: 8px 10px; font-size: 13px; }