/* ============================================================================
   SimYak — home page sections (front-page.php). Consumes tokens.css.
   Loaded only on the front page (see simyak_assets()). Mobile-first.
   ============================================================================ */

.smyk-center{text-align:center}
.smyk-section__head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap}
.smyk-section__head--stacked{flex-direction:column; text-align:center; gap:8px}
.smyk-section__head--stacked p{color:var(--smyk-gray); margin:0}
.smyk-section__cta{display:flex; justify-content:center; margin-top:28px}

/* ---------- Hero ---------- */
.smyk-hero{background:var(--smyk-hero-bg); padding-block:40px 48px}
.smyk-hero__inner{text-align:center; max-width:760px; margin-inline:auto}
.smyk-hero__title{margin-bottom:12px}
.smyk-hero__sub{font-size:var(--fs-body-lg); color:var(--smyk-navy); margin-bottom:24px}
.smyk-hero__search{display:flex; gap:8px; max-width:560px; margin:0 auto 18px; background:#fff; padding:6px; border-radius:var(--smyk-radius-pill); box-shadow:var(--smyk-shadow-sm)}
.smyk-hero__search input{flex:1 1 auto; border:0; background:transparent; padding:0 18px; font-size:var(--fs-body); outline:none}
.smyk-hero__trust{list-style:none; display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:center; margin:8px 0 0; padding:0; font-size:var(--fs-body-sm); font-weight:var(--fw-medium); color:var(--smyk-navy)}
.smyk-hero__trust li{display:inline-flex; align-items:center; gap:6px}
@media (max-width:560px){
  .smyk-hero__search{flex-direction:column; border-radius:var(--smyk-radius-lg); background:transparent; box-shadow:none; padding:0; gap:10px}
  .smyk-hero__search input{background:#fff; border-radius:var(--smyk-radius-pill); padding:14px 18px; box-shadow:var(--smyk-shadow-sm)}
  .smyk-hero__search .smyk-btn{width:100%}
}

/* ---------- Tabs ---------- */
.smyk-tabs{display:inline-flex; gap:4px; background:var(--smyk-gray-light); padding:4px; border-radius:var(--smyk-radius-pill)}
.smyk-tab{border:0; background:transparent; padding:8px 18px; border-radius:var(--smyk-radius-pill); font-weight:var(--fw-semibold); color:var(--smyk-gray)}
.smyk-tab.is-active{background:#fff; color:var(--smyk-navy); box-shadow:var(--smyk-shadow-sm)}

/* ---------- Card grids ---------- */
.smyk-cards{display:grid; gap:var(--smyk-gap)}
.smyk-cards--country{grid-template-columns:repeat(2,1fr); gap:12px}
.smyk-cards--top{grid-template-columns:repeat(2,1fr); gap:16px}
.smyk-cards--steps{grid-template-columns:1fr; gap:20px}
.smyk-cards--blog{grid-template-columns:1fr; gap:20px}
@media (min-width:600px){ .smyk-cards--country{grid-template-columns:repeat(3,1fr)} }
@media (min-width:750px){
  .smyk-cards--country{grid-template-columns:repeat(3,1fr)}
  .smyk-cards--top{grid-template-columns:repeat(4,1fr)}
  .smyk-cards--steps{grid-template-columns:repeat(3,1fr)}
  .smyk-cards--blog{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:990px){ .smyk-cards--country{grid-template-columns:repeat(3,1fr)} }

.smyk-card{
  display:flex; flex-direction:column; gap:6px; background:#fff;
  border:1px solid var(--smyk-border); border-radius:var(--smyk-radius-md);
  padding:16px; box-shadow:var(--smyk-shadow-card); transition:transform .12s ease, box-shadow .12s ease;
}
.smyk-card:hover{transform:translateY(-2px); box-shadow:var(--smyk-shadow-md)}
.smyk-card--country{flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap}
.smyk-card__flag{width:34px; height:24px; border-radius:4px; background:var(--smyk-gray-light); display:inline-grid; place-items:center; font-size:10px; text-transform:uppercase; color:var(--smyk-gray)}
.smyk-card__name{font-weight:var(--fw-semibold); color:var(--smyk-navy)}
.smyk-card--country .smyk-card__name{flex:1 1 auto}
.smyk-card__price{font-size:var(--fs-body-sm); color:var(--smyk-gray)}
.smyk-card__price strong{color:var(--smyk-navy)}
.smyk-card__media{display:block; aspect-ratio:4/3; border-radius:var(--smyk-radius-sm); background:linear-gradient(135deg,var(--smyk-teal),var(--smyk-hero-bg)); overflow:hidden}
.smyk-card__media img{width:100%; height:100%; object-fit:cover}

/* ---------- Steps ---------- */
.smyk-steps--tint{background:var(--smyk-gray-light)}
.smyk-step{background:#fff; border-radius:var(--smyk-radius-lg); padding:24px; box-shadow:var(--smyk-shadow-card)}
.smyk-step__num{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--smyk-orange); color:#fff; font-weight:var(--fw-bold); margin-bottom:12px}

/* ---------- What is eSIM ---------- */
.smyk-whatis__inner{display:grid; gap:24px; align-items:center}
.smyk-whatis__media{aspect-ratio:16/10; border-radius:var(--smyk-radius-lg); background:linear-gradient(135deg,var(--smyk-teal),#e6fbff)}
@media (min-width:750px){ .smyk-whatis__inner{grid-template-columns:1fr 1fr; gap:var(--smyk-gap)} }

/* ---------- Forget roaming ---------- */
.smyk-roaming--dark{background:var(--smyk-navy); color:#e8edf5}
.smyk-roaming--dark h2{color:#fff}
.smyk-roaming__inner{display:grid; gap:24px; align-items:center}
.smyk-checklist{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px}
.smyk-checklist li{display:flex; gap:10px; align-items:flex-start}
.smyk-check{color:var(--smyk-navy); background:var(--smyk-success); width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; font-size:13px; flex:0 0 auto}
.smyk-roaming__media{aspect-ratio:4/3; border-radius:var(--smyk-radius-lg); background:linear-gradient(135deg,var(--smyk-purple),var(--smyk-teal))}
@media (min-width:750px){ .smyk-roaming__inner{grid-template-columns:1.1fr .9fr; gap:var(--smyk-gap)} }

/* ---------- FAQ accordion ---------- */
.smyk-faq__inner{max-width:820px; margin-inline:auto}
.smyk-accordion__item{border-bottom:1px solid var(--smyk-border)}
.smyk-accordion__h{margin:0; font-size:var(--fs-h5)}
.smyk-accordion__h button{display:flex; width:100%; align-items:center; justify-content:space-between; gap:16px; background:none; border:0; padding:18px 0; font:inherit; font-weight:var(--fw-semibold); color:var(--smyk-navy); text-align:left}
.smyk-accordion__icon{position:relative; width:16px; height:16px; flex:0 0 auto}
.smyk-accordion__icon::before,.smyk-accordion__icon::after{content:""; position:absolute; background:var(--smyk-orange); border-radius:2px; transition:transform .2s ease}
.smyk-accordion__icon::before{top:7px; left:0; width:16px; height:2px}
.smyk-accordion__icon::after{top:0; left:7px; width:2px; height:16px}
.smyk-accordion__h button[aria-expanded="true"] .smyk-accordion__icon::after{transform:scaleY(0)}
.smyk-accordion__panel{padding:0 0 18px; color:var(--smyk-gray)}
.smyk-accordion__h button[aria-expanded="false"] + .smyk-accordion__panel{display:none}

/* ---------- Newsletter ---------- */
.smyk-newsletter--tint{background:var(--smyk-hero-bg)}
.smyk-newsletter__inner{text-align:center; max-width:600px; margin-inline:auto}
.smyk-newsletter__form{display:flex; gap:8px; margin-top:18px}
.smyk-newsletter__form input{flex:1 1 auto; border:1px solid var(--smyk-border); border-radius:var(--smyk-radius-pill); padding:14px 18px; font-size:var(--fs-body); background:#fff}
@media (max-width:560px){ .smyk-newsletter__form{flex-direction:column} .smyk-newsletter__form .smyk-btn{width:100%} }