/*
Theme Name: Anna Karekivi - Taiteilija
Theme URI: https://example.com/
Author: Anna Karekivi
Author URI: https://annakarekivi.com
Description: Minimalistinen ja moderni henkilökohtainen taiteilijan blogi. Tailwind + Vite -valmis.
Version: 1.1
License: GNU General Public License v2 or later
Text Domain: anna-karekivi-theme
*/
/* ===== Base styles ===== */

.site-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.header-lower {
  display: flex;
  justify-content: space-between; /* Ikonit vasemmalle, kytkin oikealle */
  align-items: center;
  margin-top: 10px;
}

.social-icons {
  display: flex;
  gap: 12px;
}

.icon-button {
  color: #2b4c7e;
  font-size: 1.4rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.icon-button:hover {
  color: #1d3557;
  transform: translateY(-2px);
}

.switch {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.3rem;
}

.switch input {
  display: none;
}

.post-preview {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 40px;
}

/* ===== Tablet and small laptop (≤600px) ===== */

@media (max-width: 600px) {

  .site-title {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .header-lower {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .social-icons {
    flex-wrap: wrap;
    justify-content: center;
  }

  .icon-button,
  .switch {
    font-size: 1.2rem;
  }

  .container {
    max-width: 100%;
    margin: 20px 8px;
    padding: 0 8px;
    box-sizing: border-box;
  }

  /* Stacked post layout */
  .post-preview {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .post-preview img {
    display: block;
    margin: 0 auto 12px auto;
    max-width: 90%;
    height: auto;
    border-radius: 8px;
  }

  .post-preview h2,
  .post-preview .excerpt {
    text-align: center;
  }

  /* ⭐ FIX: move title closer when image is short */
  .post-preview .post-preview-content {
    margin-top: -20px;
  }
}

/* ===== Phones (≤480px) ===== */

@media (max-width: 480px) {

  .site-title {
    font-size: 20px;
  }

  #commentform {
    max-width: 100%;
    width: 95%;
    margin: 0 auto;
    padding: 0 8px;
    box-sizing: border-box;
  }

  #commentform input[type="text"],
  #commentform input[type="email"],
  #commentform textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    margin-bottom: 12px;
    border-radius: 6px;
  }

  #commentform input[type="submit"] {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    font-size: 1rem;
  }

  .post,
  .post-preview,
  .entry-content,
  .wp-block-image {
	gap: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    padding: 0 !important;
  }

  .wp-block-image img,
  .post-preview img,
  .entry-content img {
    display: block;
    margin: 0 auto !important;
    float: none;
    max-width: 90%;
    height: auto;
  }

  .entry-content,
  .content-area,
  .site-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== Contact form ===== */

#ak-contact form {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

#ak-contact input,
#ak-contact textarea,
#ak-contact button {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 6px;
}

#ak-contact button {
  background: #2b4c7e;
  color: #fff;
  border: none;
  cursor: pointer;
}