

{% liquid
  assign use_inverse_logo = false

  if section.settings.enable_transparent_header_home and template.name == 'index' and section.settings.home_color_scheme == 'inverse'
    assign use_inverse_logo = true
  elsif section.settings.enable_transparent_header_product and template.name == 'product' and section.settings.product_color_scheme == 'inverse'
    assign use_inverse_logo = true
  elsif section.settings.enable_transparent_header_collection and template.name == 'collection' and section.settings.collection_color_scheme == 'inverse'
    assign use_inverse_logo = true
  endif

  if use_inverse_logo
    if settings.logo_inverse != blank
      assign inverse_logo = settings.logo_inverse
    else
      assign inverse_logo = settings.logo
    endif
  endif
%}

{% comment %}
  Output all logo variants, use CSS to hide/show the appropriate one
  based on the .header[transparent] selector
{% endcomment %}
<a
  {% if template.name == 'index' and block.settings.hide_logo_on_home_page %}
    data-hidden-on-home-page
  {% endif %}
  href="/"
  class="size-style spacing-style header-logo dc-menu-logo-only"
  style="
    {% render 'size-style', settings: block.settings %}
    {% render 'spacing-style', settings: block.settings %}
    --font-family: var(--font-body--family);
    --font-style: var(--font-body--style);
    --font-weight: 600;
  "
  {{ block.shopify_attributes }}
>
  <span
    class="header-logo__original"
    data-testid="header-logo"
  >
    <img
      src="{{ 'decor-cedar-menu-transparent-logo.png' | asset_url }}"
      alt="{{ shop.name | escape }}"
      class="header-logo__image header-logo__image--decor-cedar"
      width="1536"
      height="1024"
      loading="eager"
    >
  </span>
</a>

<style>
  .header-logo__image {
    --header-logo-image-height: {{ block.settings.custom_height_mobile }}px;

    @media screen and (width >= 750px) {
      --header-logo-image-height: {{ block.settings.custom_height }}px;
    }
  }
</style>

{% stylesheet %}
  .header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    /* Make sure the logo visually hugs the left edge of the column when it is the first item in the left column */
    margin-inline: calc(-1 * var(--padding-inline-start));

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (width < 750px) {
      padding: 0;
    }

    @media screen and (width >= 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    height: var(--header-logo-image-height);
    object-fit: contain;
    /* For Safari with SVG logos */
    width: auto;
  }

  /* sd-header-logo-brand-fix-20260704 */
  .header-logo {
    min-width: clamp(150px, 18vw, 245px);
    margin-inline: 0;
  }

  .header-logo__image--decor-cedar {
    width: auto;
    max-width: min(245px, 45vw);
    height: var(--header-logo-image-height);
    max-height: 74px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(32, 45, 33, .08));
  }

  @media screen and (width < 750px) {
    .header-logo {
      min-width: clamp(132px, 42vw, 190px);
    }

    .header-logo__image--decor-cedar {
      max-width: min(190px, 48vw);
      max-height: 58px;
    }
  }

  .header-logo:has(.header-logo__inverse) .header-logo__original {
    display: var(--header-logo-display, block);
  }

  .header-logo__inverse {
    display: var(--header-logo-inverse-display, none);
  }



  /* dc-transparent-header-logo-block-20260704-v1 */
  .header-logo.dc-menu-logo-only {
    min-width: clamp(168px, 16vw, 245px);
    margin-inline: 0;
    justify-content: center;
  }

  .header-logo.dc-menu-logo-only .header-logo__image--decor-cedar {
    display: block;
    width: min(245px, 45vw);
    height: 72px;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
    filter: none;
  }

  @media screen and (width < 750px) {
    .header-logo.dc-menu-logo-only {
      min-width: clamp(145px, 42vw, 180px);
    }

    .header-logo.dc-menu-logo-only .header-logo__image--decor-cedar {
      width: min(180px, 48vw);
      height: 58px;
    }
  }

{% endstylesheet %}

{% schema %}
{
  "name": "t:names.logo",
  "tag": null,
  "class": "header-logo",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:content.edit_logo_in_theme_settings"
    },
    {
      "type": "header",
      "content": "t:content.visibility"
    },
    {
      "type": "checkbox",
      "id": "hide_logo_on_home_page",
      "label": "t:settings.hide_logo_on_home_page"
    },
    {
      "type": "header",
      "content": "t:content.size",
      "visible_if": "{{ settings.logo != blank }}"
    },
    {
      "type": "range",
      "id": "custom_height",
      "label": "t:settings.desktop_height",
      "min": 12,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 20,
      "visible_if": "{{ settings.logo != blank }}"
    },
    {
      "type": "range",
      "id": "custom_height_mobile",
      "label": "t:settings.mobile_height",
      "min": 12,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 20,
      "visible_if": "{{ settings.logo != blank }}"
    },
    {
      "type": "header",
      "content": "t:content.padding_desktop"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-start",
      "label": "t:settings.left",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-end",
      "label": "t:settings.right",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    }
  ]
}
{% endschema %}
