/*
Theme Name:           Flatsome Block Theme
Theme URI:            https://flatsome.com
Description:          Multi-Purpose WooCommerce Theme
Version:              1.0.0-beta.1
Requires PHP:         8.2
Requires at least:    7.0
Tested up to:         7.1
WC requires at least: 11.0
WC tested up to:      11.0
Text Domain:          flatsome-theme
Author:               UX Themes
Author URI:           https://uxthemes.com
License:              GPL-2.0-or-later
License URI:          https://www.gnu.org/licenses/gpl-2.0.html
Update URI:           https://api.flatsome.com/v1/themes/flatsome-theme
*/

:root {
  --fs-element-th-letter-spacing: 0.05em;
  --fs-scroll-padding-top: calc(
    var(--fs-blocks-header-stuck-height, 0px) + var(--wp-admin--admin-bar--height, 0px) +
      var(--wp--preset--spacing--base)
  );
}

@layer reset {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }

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

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

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
  }
}

html {
  scroll-padding-top: var(--fs-scroll-padding-top);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  /*
   * A WooCommerce block adds `overflow:auto` to the body for
   * some reason, so we use !important for now to override it.
   * TODO: Investigate...
   */
  overflow-x: clip !important;
}

textarea,
input:where(
  [type="date"],
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="text"],
  [type="tel"],
  [type="time"],
  [type="url"]
) {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  width: 100%;

  /** TODO: Remove these and use theme.json instead when WordPress 6.9 is released. */
  padding-block: var(--wp--custom--element--input--padding-block);
  padding-inline: var(--wp--custom--element--input--padding-inline);
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
  border: 1px solid var(--wp--preset--color--border);
  box-shadow: var(--wp--preset--shadow--base);
}
textarea:focus-visible,
select:focus-visible,
input:where(
    [type="checkbox"],
    [type="date"],
    [type="email"],
    [type="number"],
    [type="password"],
    [type="radio"],
    [type="search"],
    [type="text"],
    [type="tel"],
    [type="time"],
    [type="url"]
  ):focus-visible {
  border-color: var(--wp--custom--color--input-border-focus);
}

/**
 * Date and time inputs sit outside core's `textInput` element selector, so
 * the global-styles radius never reaches them, and their shadow content
 * sizes a couple of pixels taller than a text line; pin both to match the
 * other inputs.
 */
input:where([type="date"], [type="time"]) {
  border-radius: var(--wp--preset--border-radius--base);
  block-size: calc(1lh + 2 * var(--wp--custom--element--input--padding-block) + 2px);
}

/**
 * TODO: Remove use theme.json instead when WordPress 6.9 is released.
 */

select {
  appearance: none;
  padding-block: var(--wp--custom--element--input--padding-block);
  padding-inline-start: var(--wp--custom--element--input--padding-inline);
  padding-inline-end: 2.75em;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--base);
  box-shadow: var(--wp--preset--shadow--base);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: right 0.5em top 50%;
  background-repeat: no-repeat;
  background-size: auto 1.25em;
}

input[type="button"],
input[type="submit"],
textarea {
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  display: block;
  width: 100%;
  resize: vertical;
  field-sizing: content;
}

[hidden] {
  display: none !important;
}

td,
th {
  text-align: left;
}

th {
  letter-spacing: var(--fs-element-th-letter-spacing);
  text-transform: uppercase;
}

:where(a) {
  text-underline-offset: var(--wp--custom--element--link--underline-offset);
}

/*
 * Keyboard focus ring for links, buttons, and form controls, from the
 * `custom.focusRing` tokens. Text-like controls also darken their border above;
 * they match `:focus-visible` on click too, which no selector can tell apart.
 */
:where(a, button, [role="button"], summary, input, select, textarea):focus-visible {
  outline: var(--wp--custom--focus-ring--width) solid var(--wp--custom--focus-ring--color);
  outline-offset: var(--wp--custom--focus-ring--offset);
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/*
 * Targets the hairline ring is easy to lose on: a checkbox or radio is a
 * fraction of the size of the other controls and fills its border with the
 * primary color when checked, a filled button shares that color with its own
 * background, and nav items are small and sit in a dense row. Widen the ring
 * and offset it clear of the box, so page background separates the two.
 * WooCommerce's controls and buttons read the same tokens, so they follow.
 *
 * The classes carry no element qualifier on purpose: WordPress puts
 * `.wp-element-button` on the links and submit inputs that render as buttons,
 * not only on `<button>`, and a nav item is a link or a button depending on
 * whether it opens a submenu.
 */
input:where([type="checkbox"], [type="radio"]),
.wp-element-button,
.fs-nav-link,
.fs-nav-toggle {
  --wp--custom--color--input-border-focus: var(--wp--preset--color--border);
  --wp--custom--focus-ring--offset: 2px;
}

/* TODO: Move to admin styles */
#wp-admin-bar-flatsome_panel > a {
  display: flex !important;
  align-items: center;
  gap: 0.25rem;
}

#wp-admin-bar-flatsome_panel > a svg {
  display: block;
  margin-top: 0 !important;
}

.wp-site-blocks {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  display: flex;
  flex-direction: column;
  overflow: clip;

  > main {
    flex: 1 0 auto;
  }
}

.wp-block-post-template {
  list-style: none;
  padding-left: 0;
  padding-right: 0;
}

.wp-block-query-pagination,
.wp-block-comments-pagination {
  gap: var(--wp--preset--spacing--base);
}

.wp-block-query-pagination a,
.wp-block-comments-pagination a,
.wp-block-post-navigation-link a,
.fs-button-link {
  border: 1px solid currentColor;
  border-radius: var(--wp--preset--border-radius--base);
  color: inherit;
  display: inline-flex;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.85em 1.2em;
  text-decoration: none;
  text-transform: uppercase;
}

.wp-block-query-pagination a:hover,
.wp-block-comments-pagination a:hover,
.wp-block-post-navigation-link a:hover,
.fs-button-link:hover {
  background: var(--wp--preset--color--foreground);
  border-color: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--background);
}

.fs-site-header {
  position: relative;
  z-index: 10;
}

.fs-site-header__inner {
  border-bottom: 1px solid var(--wp--preset--color--divider);
}

.fs-site-title a {
  text-decoration: none;
}

.fs-site-footer {
  margin-block-start: 0;
}

.fs-loop-card {
  border-bottom: 1px solid var(--wp--preset--color--divider);
}

.fs-loop-card:last-child {
  border-bottom: 0;
}

.fs-post-meta {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fs-404-code {
  line-height: 0.9;
}

.fs-search-title mark {
  background: transparent;
  color: var(--wp--preset--color--secondary);
}