/* Easy2Spain — content components (guides, tables, blog). Loaded after e2s.css. */

/* Data tables */
.e2s-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; border: 1px solid var(--c-border); background: var(--c-white05); }
.e2s-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; min-width: 420px; }
.e2s-table caption { caption-side: bottom; text-align: left; font-size: 12px; color: var(--c-white40); padding: 12px 18px; }
.e2s-table th, .e2s-table td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.e2s-table th { font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-green); background: var(--c-white05); }
.e2s-table td { color: var(--c-white80); }
.e2s-table td strong { color: var(--c-white); font-weight: 600; }
.e2s-table tbody tr:last-child td { border-bottom: none; }
.e2s-table .num { text-align: right; white-space: nowrap; font-family: 'Raleway', sans-serif; font-weight: 700; }
.e2s-table tr.e2s-row-hl td { background: var(--c-green-bg); }

.e2s-section-white .e2s-table-wrap { border-color: rgba(0,0,0,0.08); background: #f8f9fa; }
.e2s-section-white .e2s-table th { color: var(--c-green3); background: rgba(0,0,0,0.03); }
.e2s-section-white .e2s-table th, .e2s-section-white .e2s-table td { border-bottom-color: rgba(0,0,0,0.07); }
.e2s-section-white .e2s-table td { color: rgba(13,19,33,0.75); }
.e2s-section-white .e2s-table td strong { color: #0D1321; }
.e2s-section-white .e2s-table caption { color: rgba(13,19,33,0.50); }
.e2s-section-white .e2s-table tr.e2s-row-hl td { background: rgba(115,204,128,0.10); }

/* Callout / highlighted box */
.e2s-callout { position: relative; overflow: hidden; border-radius: 16px; padding: 24px 26px; background: var(--c-green-bg); border: 1px solid var(--c-green-bdr); color: var(--c-white80); font-size: 14px; line-height: 1.7; }
.e2s-callout strong { color: var(--c-white); }
.e2s-callout-title { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 18px; color: var(--c-white); margin: 0 0 8px; }
.e2s-callout-big { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 34px; color: var(--c-green); line-height: 1.1; margin: 0 0 6px; }
.e2s-section-white .e2s-callout { background: rgba(115,204,128,0.08); border-color: rgba(115,204,128,0.25); color: rgba(13,19,33,0.72); }
.e2s-section-white .e2s-callout strong, .e2s-section-white .e2s-callout-title { color: #0D1321; }
.e2s-section-white .e2s-callout-big { color: var(--c-green3); }
.e2s-callout + .e2s-callout { margin-top: 14px; }

/* Card with title + text (two-up grids) */
.e2s-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.e2s-cards-3 { grid-template-columns: repeat(3, 1fr); }
.e2s-card { background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: 16px; padding: 26px; position: relative; overflow: hidden; }
.e2s-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(115,204,128,0.4), transparent); }
.e2s-card-tag { font-family: 'Raleway', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-green); display: block; margin-bottom: 10px; }

.e2s-card .e2s-card-title { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 17px; color: var(--c-white); margin: 0 0 10px; }
.e2s-card p, .e2s-card li { font-size: 14px; color: var(--c-white60); line-height: 1.7; }
.e2s-card ul { margin: 10px 0 0 18px; padding: 0; }
.e2s-card strong { color: var(--c-white); font-weight: 600; }
.e2s-section-white .e2s-card { background: #f8f9fa; border-color: rgba(0,0,0,0.08); }
.e2s-section-white .e2s-card .e2s-card-title, .e2s-section-white .e2s-card strong { color: #0D1321; }
.e2s-section-white .e2s-card p, .e2s-section-white .e2s-card li { color: rgba(13,19,33,0.65); }
.e2s-section-white .e2s-card-tag { color: var(--c-green3); }

/* Sources / last reviewed line */
.e2s-sources { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--c-border); font-size: 12px; line-height: 1.7; color: var(--c-white40); }
.e2s-sources a { color: var(--c-white60); text-decoration: underline; text-underline-offset: 2px; }
.e2s-section-white .e2s-sources { border-top-color: rgba(0,0,0,0.08); color: rgba(13,19,33,0.50); }
.e2s-section-white .e2s-sources a { color: rgba(13,19,33,0.70); }

.e2s-mt-24 { margin-top: 24px; }
.e2s-mt-40 { margin-top: 40px; }

/* ── BLOG ── */
.e2s-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.e2s-post-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; background: #f8f9fa; border: 1px solid rgba(0,0,0,0.08); border-radius: 18px; padding: 28px; transition: 0.25s; }
.e2s-post-card:hover { border-color: rgba(115,204,128,0.45); box-shadow: 0 14px 40px rgba(13,19,33,0.08); transform: translateY(-2px); }
.e2s-post-meta { font-family: 'Raleway', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-green3); }
.e2s-post-title { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 20px; line-height: 1.3; color: #0D1321; margin: 0; }
.e2s-post-excerpt { font-size: 14px; line-height: 1.7; color: rgba(13,19,33,0.62); margin: 0; flex: 1; }
.e2s-post-more { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 13px; color: var(--c-green3); }

.e2s-article { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.85; color: rgba(13,19,33,0.78); }
.e2s-article > * + * { margin-top: 20px; }
.e2s-article h2 { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -0.3px; color: #0D1321; margin-top: 52px; scroll-margin-top: 90px; }
.e2s-article h3 { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 19px; color: #0D1321; margin-top: 32px; }
.e2s-article p, .e2s-article li { color: rgba(13,19,33,0.78); }
.e2s-article strong { color: #0D1321; font-weight: 600; }
.e2s-article a { color: var(--c-green3); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.e2s-article ul, .e2s-article ol { padding-left: 22px; }
.e2s-article li + li { margin-top: 8px; }
.e2s-article .e2s-table { font-size: 15px; }
.e2s-article .e2s-callout { font-size: 15px; }
.e2s-answer { font-size: 18px; line-height: 1.75; color: #0D1321 !important; background: rgba(115,204,128,0.08); border-left: 3px solid var(--c-green); padding: 18px 22px; border-radius: 0 12px 12px 0; }
.e2s-toc { background: #f8f9fa; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 20px 24px; font-size: 15px; }
.e2s-toc-title { font-family: 'Raleway', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-green3); margin: 0 0 8px; }
.e2s-toc ol { margin: 0; padding-left: 20px; }
.e2s-toc a { text-decoration: none; color: rgba(13,19,33,0.78); font-weight: 400; }
.e2s-toc a:hover { color: var(--c-green3); }
.e2s-byline { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: 13px; color: var(--c-white60); margin-top: 6px; }
.e2s-crumbs { font-size: 12px; color: var(--c-white40); margin-bottom: 18px; }
.e2s-crumbs a { color: var(--c-white60); text-decoration: none; }
.e2s-crumbs a:hover { color: var(--c-green); }

@media (max-width: 960px) {
  .e2s-blog-grid, .e2s-cards-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .e2s-cards, .e2s-cards-3, .e2s-blog-grid { grid-template-columns: 1fr; }
  .e2s-article { font-size: 16px; }
  .e2s-table th, .e2s-table td { padding: 10px 12px; }
}

/* ── LANGUAGE SELECTOR (same look as the menu links) ── */
.e2s-nav-menu > a, .e2s-nav-cta, .e2s-lang-btn { white-space: nowrap; }

.e2s-lang { position: relative; display: flex; align-items: center; }
.e2s-lang-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 8px 0; cursor: pointer;
  font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-white40); transition: color 0.2s; }
.e2s-lang-btn:hover, .e2s-lang.e2s-open .e2s-lang-btn, .e2s-lang:focus-within .e2s-lang-btn { color: var(--c-white); }
.e2s-lang-chev { transition: transform 0.2s; }
.e2s-lang.e2s-open .e2s-lang-chev { transform: rotate(180deg); }
.e2s-lang-list { list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 10px); right: -12px; min-width: 190px;
  background: rgba(13,19,33,0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--c-border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 950; }
.e2s-lang.e2s-open .e2s-lang-list { opacity: 1; visibility: visible; transform: none; }
.e2s-lang-list li { margin: 0; }
.e2s-nav-menu .e2s-lang-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--c-white60); }
.e2s-nav-menu .e2s-lang-list a:hover { background: var(--c-white05); color: var(--c-white); }
.e2s-nav-menu .e2s-lang-list a[aria-current] { color: var(--c-white); background: var(--c-green-bg); }
.e2s-lang-code { font-family: 'Raleway', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: var(--c-green); min-width: 22px; }
@media (min-width: 961px) and (max-width: 1280px) {
  .e2s-nav-menu { gap: 20px; }
  .e2s-nav-menu > a { font-size: 11px; letter-spacing: 1px; }
}
@media (max-width: 960px) {
  .e2s-lang { width: 100%; padding-top: 14px; border-top: 1px solid var(--c-border); }
  .e2s-lang-btn { display: none; }
  .e2s-lang-list { position: static; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; min-width: 0; background: none; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .e2s-nav-menu .e2s-lang-list a { padding: 8px 12px; border: 1px solid var(--c-border); border-radius: 100px; gap: 0; }
  .e2s-lang-name { display: none; }
  .e2s-lang-code { min-width: 0; }
}

/* Longer menu labels in other languages: switch to the mobile menu a bit earlier */
@media (min-width: 961px) and (max-width: 1100px) {
  html:not([lang="en"]) .e2s-nav-menu { display: none; }
  html:not([lang="en"]) .e2s-nav-ham { display: flex; }
  html:not([lang="en"]) .e2s-lang { width: 100%; padding-top: 14px; border-top: 1px solid var(--c-border); }
  html:not([lang="en"]) .e2s-lang-btn { display: none; }
  html:not([lang="en"]) .e2s-lang-list { position: static; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; min-width: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html:not([lang="en"]) .e2s-nav-menu .e2s-lang-list a { padding: 8px 12px; border: 1px solid var(--c-border); border-radius: 100px; gap: 0; }
  html:not([lang="en"]) .e2s-lang-name { display: none; }
  html:not([lang="en"]) .e2s-lang-code { min-width: 0; }
}
@media (min-width: 961px) and (max-width: 990px) {
  html[lang="en"] .e2s-nav-menu { display: none; }
  html[lang="en"] .e2s-nav-ham { display: flex; }
  html[lang="en"] .e2s-lang { width: 100%; padding-top: 14px; border-top: 1px solid var(--c-border); }
  html[lang="en"] .e2s-lang-btn { display: none; }
  html[lang="en"] .e2s-lang-list { position: static; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; min-width: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html[lang="en"] .e2s-nav-menu .e2s-lang-list a { padding: 8px 12px; border: 1px solid var(--c-border); border-radius: 100px; gap: 0; }
  html[lang="en"] .e2s-lang-name { display: none; }
  html[lang="en"] .e2s-lang-code { min-width: 0; }
}

/* Tables → stacked cards on phones */
@media (max-width: 640px) {
  .e2s-table.e2s-table-stack { min-width: 0; }
  .e2s-table-stack thead { display: none; }
  .e2s-table-stack tbody tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--c-border); }
  .e2s-section-white .e2s-table-stack tbody tr { border-bottom-color: rgba(0,0,0,0.07); }
  .e2s-table-stack tbody tr:last-child { border-bottom: none; }
  .e2s-table-stack td { display: block; padding: 3px 0; border: 0; text-align: left; }
  .e2s-table-stack td.num { text-align: left; }
  .e2s-table-stack td:first-child { font-weight: 600; padding-bottom: 6px; }
  .e2s-table-stack td[data-label]::before { content: attr(data-label); display: block; font-family: 'Raleway', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-green); margin-bottom: 1px; }
  .e2s-section-white .e2s-table-stack td[data-label]::before { color: var(--c-green3); }
  .e2s-table-stack td[data-label=""]::before { display: none; }
}