/*
Theme Name: 南美华人网 · Glacier
Author: 南美华人网
Description: 冷色户外风格的华人资讯、国家专题与本地服务经典主题。
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8.10
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sa-glacier
Tags: custom-logo, custom-menu, featured-images, footer-widgets, translation-ready, editor-style
*/
:root {
  --canvas:#0B131A;
  --deep:#101B24;
  --card:#162330;
  --glass:rgba(22,34,46,.75);
  --blue:#38BDF8;
  --cobalt:#0284C7;
  --slate:#64748B;
  --success:#10B981;
  --title:#F8FAFC;
  --text:#CBD5E1;
  --muted:#94A3B8;
  --line:rgba(148,163,184,.22);
  --radius:12px;
  --width:1200px;
  color-scheme:dark
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}

body {
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font:1rem/1.75 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif
}

body.modal-open {
  overflow:hidden
}

a {
  color:inherit;
  text-decoration:none
}

a:hover {
  color:var(--blue)
}

button,input,select,textarea {
  font:inherit
}

button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  opacity:.55;
  cursor:wait
}

img {
  max-width:100%;
  height:auto;
  display:block
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  color:var(--title);
  line-height:1.3
}

h1 {
  font-size:clamp(1.75rem,3.3vw,2.25rem);
  font-weight:600
}

h2 {
  font-size:clamp(1.25rem,2.4vw,1.5rem);
  font-weight:600
}

h3 {
  font-size:1.1rem
}

p {
  margin-bottom:1.3em
}

:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:5px
}

.wrap {
  width:min(var(--width),calc(100% - 64px));
  margin-inline:auto
}

.section {
  padding-block:70px
}

.eyebrow {
  color:var(--blue);
  letter-spacing:.16em;
  font-size:.85rem;
  text-transform:uppercase
}

.muted,time {
  color:var(--muted);
  font-size:.85rem
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  margin-bottom:28px
}

.section-head h2 {
  margin:0
}

.site-header {
  position:relative;
  z-index:20;
  background:rgba(11,19,26,.96);
  border-bottom:1px solid var(--line)
}

.header-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-block:22px
}

.brand {
  font-size:1.45rem;
  color:var(--title);
  font-weight:700;
  letter-spacing:.08em
}

.brand small {
  display:block;
  font-size:.65rem;
  letter-spacing:.22em;
  color:var(--muted);
  font-weight:400
}

.custom-logo {
  max-width:180px;
  max-height:65px;
  width:auto
}

.header-note {
  font-size:.85rem;
  color:var(--muted);
  margin:0
}

.nav-list {
  display:flex;
  align-items:center;
  justify-content:space-between;
  list-style:none;
  margin:0;
  padding:0;
  gap:22px;
  flex-wrap:wrap
}

.nav-list>li {
  position:relative
}

.nav-list a {
  display:inline-block;
  padding:15px 0
}

.nav-item,.nav-list a {
  transition:transform .25s cubic-bezier(.4,0,.2,1),color .25s ease
}

.nav-item:hover,.nav-list a:hover,.nav-list a:focus-visible {
  transform:scale(1.12);
  color:#38BDF8
}

.nav-list .current-menu-item>a,.nav-list a[aria-current=page] {
  color:var(--blue)
}

.nav-list .sub-menu {
  list-style:none;
  padding:12px 20px;
  background:var(--card);
  min-width:160px;
  position:absolute;
  display:none;
  z-index:25
}

.nav-list li:hover>.sub-menu,.nav-list li:focus-within>.sub-menu {
  display:block
}

.menu-toggle {
  display:none
}

.button,button.primary {
  border:1px solid transparent;
  background:var(--blue);
  color:#0B131A;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  padding:11px 22px;
  font-weight:600
}

.button:hover,button.primary:hover {
  background:#7dd3fc;
  color:#0B131A
}

.button.secondary {
  border-color:var(--line);
  background:transparent;
  color:var(--text)
}

.hero {
  isolation:isolate;
  position:relative;
  min-height:620px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--deep)
}

.hero-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  filter:saturate(.72)
}

.hero:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(11,19,26,.84),rgba(11,19,26,.17)),linear-gradient(0deg,#0B131A,transparent 55%)
}

.hero-content {
  padding-block:90px
}

.hero h1 {
  font-size:clamp(2.25rem,5vw,3rem);
  font-weight:700;
  max-width:660px;
  line-height:1.3;
  letter-spacing:.05em;
  margin:22px 0
}

.hero p {
  max-width:520px;
  color:#e2e8f0
}

.hero-caption {
  position:absolute;
  bottom:24px;
  right:32px;
  color:var(--muted);
  font-size:.75rem
}

.hero-index {
  display:flex;
  gap:32px;
  margin-top:54px;
  font-size:.85rem;
  color:var(--muted)
}

.hero-index strong {
  color:white;
  font-size:1.5rem;
  margin-right:8px;
  font-weight:500
}

.news-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 50px
}

.news-item {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:16px;
  padding:23px 0;
  border-top:1px solid var(--line)
}

.news-number {
  color:var(--slate);
  font-size:.85rem;
  padding-top:2px
}

.news-item h3 {
  margin:0 0 8px;
  font-weight:500
}

.news-meta {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.85rem
}

.service-section {
  background:var(--deep);
  border-block:1px solid var(--line)
}

.service-layout {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:45px;
  align-items:center
}

.service-tags {
  display:flex;
  gap:14px;
  flex-wrap:wrap
}

.service-tag {
  border:1px solid #405568;
  border-radius:999px;
  padding:14px 25px;
  background:var(--glass);
  color:var(--title);
  transition:background .2s,box-shadow .2s,transform .2s
}

.service-tag:hover {
  background:#203649;
  box-shadow:0 0 24px rgba(56,189,248,.12);
  transform:translateY(-2px);
  border-color:var(--blue)
}

.partners {
  display:flex;
  gap:35px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding-block:36px
}

.partners h2 {
  color:var(--muted);
  font-size:.85rem;
  letter-spacing:.15em;
  margin:0
}

.partners a {
  font-size:1.2rem;
  font-weight:600;
  white-space:nowrap
}

.external {
  color:var(--blue);
  font-size:.85rem;
  margin-left:8px
}

.site-footer {
  border-top:1px solid var(--line);
  padding:45px 0 28px;
  text-align:center
}

.footer-slogan {
  color:#94A3B8;
  letter-spacing:.05em
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:28px;
  font-size:.85rem;
  color:var(--muted)
}

.footer-menu {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0
}

.footer-widgets {
  text-align:left;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-bottom:35px
}

.country-hero {
  position:relative;
  overflow:hidden;
  padding:85px 0;
  background:radial-gradient(ellipse at 80% 20%,#254459 0,transparent 65%),var(--deep)
}

.country-watermark {
  position:absolute;
  right:8%;
  top:10%;
  font-size:clamp(6rem,18vw,15rem);
  opacity:.12;
  pointer-events:none;
  line-height:1.2
}

.country-hero .wrap {
  position:relative
}

.country-flag {
  font-size:2.2rem;
  display:inline-block;
  margin-bottom:16px
}

.breadcrumb {
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:25px
}

.reading {
  max-width:800px;
  margin-inline:auto
}

.entry-content {
  overflow-wrap:anywhere
}

.entry-content p {
  line-height:1.9
}

.entry-content a {
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:4px
}

.entry-content h2,.entry-content h3 {
  margin-top:2em
}

.entry-content img {
  border-radius:12px
}

.entry-content figure {
  max-width:100%;
  margin:28px 0
}

.entry-content figcaption {
  font-size:.85rem;
  color:var(--muted)
}

.entry-content ul,.entry-content ol {
  padding-left:1.5em
}

.entry-content blockquote {
  border-left:3px solid var(--blue);
  margin-inline:0;
  padding:15px 25px;
  background:var(--glass)
}

.entry-content table {
  display:block;
  overflow-x:auto;
  border-collapse:collapse
}

.entry-content td,.entry-content th {
  padding:12px;
  border:1px solid var(--line)
}

.alignwide {
  max-width:1000px
}

.alignfull {
  width:100%
}

.alignleft {
  float:left;
  margin:0 24px 20px 0
}

.alignright {
  float:right;
  margin:0 0 20px 24px
}

.aligncenter {
  margin-inline:auto
}

.wp-caption,.gallery-caption {
  max-width:100%;
  color:var(--muted)
}

.bypostauthor {
  border-color:var(--blue)
}

.sticky {
  border-left:2px solid var(--blue);
  padding-left:18px
}

.attraction-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}

.attraction-card {
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:12px;
  background:var(--card)
}

.attraction-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s cubic-bezier(.16,1,.3,1)
}

.attraction-card:hover img,.attraction-card:focus-visible img {
  transform:scale(1.08)
}

.attraction-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2))
}

.attraction-card h3 {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  margin:0;
  z-index:1;
  font-size:1.35rem;
  font-weight:700;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.75)
}

.card-index {
  position:absolute;
  left:18px;
  top:12px;
  z-index:2;
  color:#fff;
  font-size:.85rem
}

.attraction-hero {
  min-height:520px
}

.guide-links {
  display:flex;
  gap:15px;
  flex-wrap:wrap
}

.notice,.empty-state {
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px;
  background:var(--glass)
}

.post-header {
  padding:65px 0 28px
}

.post-thumbnail {
  margin:25px 0
}

.pagination {
  margin-block:35px
}

.page-numbers {
  display:inline-block;
  padding:8px 15px;
  background:var(--card);
  border-radius:6px;
  margin:3px
}

.page-numbers.current {
  color:var(--blue)
}

.sidebar {
  margin-top:45px;
  border-top:1px solid var(--line);
  padding-top:25px
}

.screen-reader-text,.skip-link:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link:focus {
  position:fixed;
  top:10px;
  left:10px;
  z-index:999;
  background:var(--blue);
  color:#0B131A;
  padding:12px
}

.lead-dialog {
  width:min(600px,calc(100% - 32px));
  max-height:90dvh;
  padding:35px;
  border:1px solid #405568;
  border-radius:20px;
  background:var(--deep);
  color:var(--text);
  box-shadow:0 30px 100px #0008
}

.lead-dialog[open] {
  animation:modal-in .2s ease-out
}

.lead-dialog::backdrop {
  background:rgba(3,10,17,.75);
  backdrop-filter:blur(8px)
}

.dialog-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}

.dialog-close {
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:50%;
  height:38px;
  width:38px;
  font-size:1.3rem
}

.step-indicator {
  display:flex;
  gap:7px;
  margin:20px 0 28px
}

.step-indicator span {
  height:3px;
  flex:1;
  background:#344556
}

.step-indicator .active {
  background:var(--blue)
}

.lead-step {
  border:0;
  padding:0;
  margin:0;
  min-width:0
}

.lead-step legend {
  font-size:1.5rem;
  color:var(--title);
  font-weight:600;
  margin-bottom:20px
}

.choice-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.choice {
  position:relative;
  display:flex;
  gap:10px;
  align-items:center;
  padding:14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--glass);
  cursor:pointer
}

.choice:has(input:checked) {
  border-color:var(--blue);
  background:#15354a
}

.choice input {
  accent-color:var(--blue);
  width:18px;
  height:18px
}

.field {
  display:block;
  margin-bottom:16px
}

.field input,.field textarea {
  display:block;
  margin-top:7px;
  width:100%;
  padding:12px 14px;
  border:1px solid #526477;
  border-radius:8px;
  background:var(--canvas);
  color:var(--title)
}

input:focus,textarea:focus,select:focus {
  border-color:#38BDF8;
  box-shadow:0 0 0 3px rgba(56,189,248,.2);
  outline:0
}

.form-actions {
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:28px
}

.form-error {
  color:#fda4af;
  margin-top:18px
}

.form-success {
  text-align:center;
  padding:28px 0
}

.success-check {
  display:block;
  color:var(--success);
  font-size:3rem;
  animation:check-in .35s ease-out
}

.privacy-note {
  font-size:.85rem;
  color:var(--muted);
  margin-top:15px
}

.hp-field {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden
}

[hidden] {
  display:none!important
}

.comment-list {
  padding-left:20px
}

.comment-form input:not([type=checkbox]),.comment-form textarea {
  display:block;
  max-width:100%;
  padding:12px;
  background:var(--card);
  border:1px solid var(--slate);
  color:var(--text)
}

.country-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px
}

.country-tile {
  padding:30px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--glass);
  transition:border-color .25s,background .25s
}

.country-tile:hover {
  border-color:var(--blue);
  background:#203244
}

.country-tile h2 {
  display:flex;
  justify-content:space-between
}

.country-backdrop {
  position:absolute;
  inset:0;
  opacity:.2
}

.country-backdrop img {
  width:100%;
  height:100%;
  object-fit:cover
}

.country-hero:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 35%,rgba(11,19,26,.6))
}

.country-hero .wrap {
  z-index:1
}

.attraction-hero h1 {
  font-size:clamp(1.75rem,3.3vw,2.25rem);
  font-weight:600
}

.post-navigation .nav-links {
  display:flex;
  justify-content:space-between;
  gap:25px;
  flex-wrap:wrap;
  padding-block:25px;
  border-block:1px solid var(--line)
}

@keyframes modal-in {
  from {
    opacity:0;
    transform:translateY(12px)
  }

  to {
    opacity:1;
    transform:translateY(0)
  }

}

@keyframes check-in {
  from {
    opacity:0;
    transform:scale(.6)
  }

  to {
    opacity:1;
    transform:scale(1)
  }

}

@media(min-width:1000px) {
  .attraction-grid .attraction-card:first-child {
    grid-column:span 2;
    grid-row:span 2;
    aspect-ratio:auto;
    min-height:320px
  }

  .attraction-grid .attraction-card:first-child h3 {
    font-size:1.7rem
  }

}

@media(max-width:800px) {
  .wrap {
    width:calc(100% - 36px)
  }

  .header-note {
    display:none
  }

  .menu-toggle {
    display:block;
    background:transparent;
    border:1px solid var(--line);
    color:var(--text);
    padding:7px 15px;
    border-radius:6px
  }

  .js .main-nav:not(.is-open) {
    display:none
  }

  .nav-list {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px 18px;
    padding-bottom:12px
  }

  .nav-list a {
    font-size:.9rem
  }

  .hero {
    min-height:550px
  }

  .hero-content {
    padding-block:65px
  }

  .hero-index {
    gap:20px
  }

  .news-list,.service-layout {
    grid-template-columns:1fr
  }

  .section {
    padding-block:45px
  }

  .attraction-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .footer-widgets {
    grid-template-columns:1fr
  }

  .partners {
    gap:20px
  }

  .partners h2 {
    width:100%
  }

  .partners a {
    font-size:1rem
  }

  .country-hero {
    padding:55px 0
  }

  .lead-dialog {
    padding:24px
  }

}

@media(max-width:440px) {
  .nav-list {
    grid-template-columns:repeat(2,1fr)
  }

  .attraction-grid {
    grid-template-columns:1fr
  }

  .hero-index {
    flex-wrap:wrap
  }

  .section-head {
    align-items:flex-start;
    flex-direction:column;
    gap:10px
  }

  .service-tag {
    padding:12px 19px
  }

  .brand {
    font-size:1.2rem
  }

  .lead-dialog {
    padding:20px
  }

  .choice {
    padding:11px
  }

  .hero-caption {
    right:18px
  }

  .footer-bottom {
    justify-content:center
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

}