/*
Theme Name: Hallo Block.
Theme URI: https://theme.built.web.id/hallo-block
Author: Perkilo
Author URI: https://built.web.id
Description: Dirancang khusus untuk Editor Blok (Gutenberg), Hallo Block memberi Anda kontrol granular atas tata letak dan konten tanpa perlu menulis kode. Mendukung Full Site Editing, pola blok yang dapat dikustomisasi, dan Global Styles — sehingga Anda dapat membuat halaman responsif, konsisten, dan lebih mudah diakses dengan performa optimal.
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 7.0
Version: 1.4.2
Update URI: https://theme.built.web.id/hallo-block
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hallo-block
Tags: full-site-editing, block-themes, blog, portfolio
*/

/* ========================================
   GLOBAL STYLES
   ======================================== */

/* Body */
body {
  background-image: url(assets/images/bg-green-gradient.svg);
  background-repeat: no-repeat;
  background-position: left top;
}

body.is-style-retro {
  background-image: url(assets/images/bg-orange-gradient.svg);
}

/* Typography */
a {
  text-decoration: none;
}

h1 {
  font-size: 36px;
  font-weight: 800;
}

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

/* Responsive Styles */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }
}

@media (max-width: 680px) {
  body {
    background-image: none !important;
  }
}

/* ========================================
   COMMENT FORM STYLES
   ======================================== */

#commentform {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#commentform .comment-notes,
#commentform .comment-form-comment,
#commentform .comment-form-url,
#commentform .comment-form-cookies-consent,
#commentform .form-submit {
  flex: 0 0 100%;
  width: 100%;
}

#commentform .comment-form-author,
#commentform .comment-form-email {
  flex: 0 0 48%;
  margin-bottom: 15px;
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 10px;
}

/* Form Elements */
p.comment-form-comment textarea,
p.comment-form-author input,
p.comment-form-email input,
p.comment-form-url input,
textarea#comment,
input#author,
input#email,
input#url {
  padding: 8px;
  border-color: rgb(168, 168, 168, 0.5);
  border-width: 1px;
  border-radius: 5px;
  background-color: var(--wp--preset--color--base-2);
  color: var(--wp--preset--color--contrast);
}

textarea#comment,
input#author,
input#email,
input#url {
  background-color: var(--wp--preset--color--base-2);
  color: var(--wp--preset--color--contrast);
  border-radius: 5px;
}

/* Submit Button */
.form-submit.wp-block-button input#submit {
  background-color: var(--wp--preset--color--base);
  border-radius: 8px;
  color: var(--wp--preset--color--contrast);
  font-size: 16px;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 600px) {
  #commentform .comment-form-author,
  #commentform .comment-form-email {
    flex: 0 0 100%;
  }
}

/* ========================================
   THEME STYLES
   ======================================== */

/* Shadows & Hover Effects */
.box-shdw,
.box-tm:hover {
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

a:hover,
.box-tm:hover {
  transition: 0.3s 0.05s;
}

/* Image Transitions */
.wp-block-cover img,
.gb-container img,
.gb-loop-item img,
.gb-container[style*="background-image"]::before {
  transition: transform 0.5s ease;
}

/* Zoom Effect on Hover */
.wp-block-query .wp-block-post .wp-block-cover:hover img,
.gb-loop-item:hover img,
.gb-grid-column .gb-container:hover img,
.gb-grid-column
  > .gb-container:hover
  > .gb-container[style*="background-image"]::before {
  transform: scale(1.1);
}

/* ========================================
   BACK TO TOP BUTTON
   ======================================== */

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  cursor: pointer;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}