{%- comment -%}
  Brand Typography — per-template type override.

  Shopify's font settings are GLOBAL, so a template cannot normally have
  its own typeface. This section emits scoped CSS for the page it sits on,
  which is what lets each demo template carry its own brand's type.

  Put it first in a template. It renders nothing visible.

  Fonts: pick from Shopify's library (served by Shopify, no extra request)
  or name a Google font. Where a brand uses a licensed face we cannot ship
  (Newtime R, Avenir, Algeria Wide, TT Commons Pro), the demo templates use
  the closest freely-available substitute — noted per template.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
-%}

{%- if s.google_font != blank or s.google_font_body != blank -%}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  {%- capture gfam -%}
    {%- if s.google_font != blank -%}family={{ s.google_font | replace: ' ', '+' }}:wght@{{ s.google_weights }}{%- endif -%}
    {%- if s.google_font_body != blank -%}
      {%- if s.google_font != blank -%}&{%- endif -%}family={{ s.google_font_body | replace: ' ', '+' }}:wght@{{ s.google_weights_body }}
    {%- endif -%}
  {%- endcapture -%}
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?{{ gfam }}&display=swap">
{%- endif -%}

{% style %}

  {%- comment -%} Scope to the whole page: this section styles its template. {%- endcomment -%}
  body,
  .brand-type-{{ uid }} {
    {%- if s.google_font != blank -%}
      --brand-heading: "{{ s.google_font }}", {{ s.fallback_stack }};
    {%- else -%}
      --brand-heading: {{ s.body_font.family }}, {{ s.body_font.fallback_families }};
    {%- endif -%}
    {%- if s.google_font_body != blank -%}
      --brand-body: "{{ s.google_font_body }}", {{ s.fallback_stack_body }};
    {%- elsif s.google_font != blank -%}
      --brand-body: "{{ s.google_font }}", {{ s.fallback_stack }};
    {%- else -%}
      --brand-body: {{ s.body_font.family }}, {{ s.body_font.fallback_families }};
    {%- endif -%}
  }

  body {
    font-family: var(--brand-body);
    {% if s.body_size > 0 %}font-size: {{ s.body_size }}px;{% endif %}
    letter-spacing: {{ s.body_tracking | divided_by: 100.0 }}em;
  }

  h1, h2, h3, h4, h5,
  .h0, .h1, .h2, .h3, .h4, .h5 {
    font-family: var(--brand-heading);
    font-weight: {{ s.heading_weight }};
    letter-spacing: {{ s.heading_tracking | divided_by: 100.0 }}em;
    {% if s.heading_uppercase %}text-transform: uppercase;{% endif %}
    {% if s.heading_line_height > 0 %}line-height: {{ s.heading_line_height }}%;{% endif %}
  }

  {%- comment -%} Square vs pill buttons is a big part of a brand's feel. {%- endcomment -%}
  .button, .shopify-challenge__button, .customer button,
  button.button, a.button {
    border-radius: {{ s.button_radius }}px !important;
    letter-spacing: {{ s.button_tracking | divided_by: 100.0 }}em;
    {% if s.button_uppercase %}text-transform: uppercase;{% endif %}
    font-weight: {{ s.button_weight }};
  }

  {%- if s.page_width > 0 -%}
    .page-width { max-width: {{ s.page_width }}px; }
  {%- endif -%}
{% endstyle %}

{% schema %}
{
  "name": "Brand Typography",
  "tag": "section",
  "class": "brand-type",
  "settings": [
    {
      "type": "paragraph",
      "content": "Overrides type for THIS template only. Place it first. Renders nothing visible."
    },
    {
      "type": "font_picker",
      "id": "body_font",
      "label": "Font (Shopify library)",
      "default": "assistant_n4"
    },
    {
      "type": "text",
      "id": "google_font",
      "label": "Google font \u2014 headings",
      "info": "Overrides the picker, e.g. Karla. Leave blank to use the picker."
    },
    {
      "type": "text",
      "id": "google_weights",
      "label": "Google font weights",
      "default": "300;400;500;700"
    },
    {
      "type": "text",
      "id": "fallback_stack",
      "label": "Heading fallback stack",
      "default": "Helvetica, Arial, sans-serif"
    },
    {
      "type": "text",
      "id": "google_font_body",
      "label": "Google font \u2014 body",
      "info": "Leave blank to use the heading font for everything."
    },
    {
      "type": "text",
      "id": "google_weights_body",
      "label": "Body font weights",
      "default": "300;400;500;600"
    },
    {
      "type": "text",
      "id": "fallback_stack_body",
      "label": "Body fallback stack",
      "default": "Helvetica, Arial, sans-serif"
    },
    {
      "type": "header",
      "content": "Headings"
    },
    {
      "type": "select",
      "id": "heading_weight",
      "label": "Weight",
      "default": "400",
      "options": [
        {
          "value": "300",
          "label": "Light"
        },
        {
          "value": "400",
          "label": "Regular"
        },
        {
          "value": "500",
          "label": "Medium"
        },
        {
          "value": "600",
          "label": "Semibold"
        },
        {
          "value": "700",
          "label": "Bold"
        }
      ]
    },
    {
      "type": "range",
      "id": "heading_tracking",
      "min": -5,
      "max": 40,
      "step": 1,
      "label": "Letter spacing",
      "default": 0,
      "info": "In hundredths of an em."
    },
    {
      "type": "range",
      "id": "heading_line_height",
      "min": 0,
      "max": 200,
      "step": 5,
      "label": "Line height",
      "default": 110,
      "info": "Percent. 0 leaves the theme default."
    },
    {
      "type": "checkbox",
      "id": "heading_uppercase",
      "label": "Uppercase headings",
      "default": false
    },
    {
      "type": "header",
      "content": "Body"
    },
    {
      "type": "range",
      "id": "body_size",
      "min": 0,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Body size",
      "default": 16,
      "info": "0 leaves the theme default."
    },
    {
      "type": "range",
      "id": "body_tracking",
      "min": -5,
      "max": 30,
      "step": 1,
      "label": "Letter spacing",
      "default": 0,
      "info": "In hundredths of an em."
    },
    {
      "type": "header",
      "content": "Buttons"
    },
    {
      "type": "range",
      "id": "button_radius",
      "min": 0,
      "max": 40,
      "step": 1,
      "unit": "px",
      "label": "Corner radius",
      "default": 0
    },
    {
      "type": "range",
      "id": "button_tracking",
      "min": 0,
      "max": 30,
      "step": 1,
      "label": "Letter spacing",
      "default": 8,
      "info": "In hundredths of an em."
    },
    {
      "type": "checkbox",
      "id": "button_uppercase",
      "label": "Uppercase buttons",
      "default": true
    },
    {
      "type": "select",
      "id": "button_weight",
      "label": "Weight",
      "default": "500",
      "options": [
        {
          "value": "400",
          "label": "Regular"
        },
        {
          "value": "500",
          "label": "Medium"
        },
        {
          "value": "600",
          "label": "Semibold"
        },
        {
          "value": "700",
          "label": "Bold"
        }
      ]
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "page_width",
      "min": 0,
      "max": 1800,
      "step": 20,
      "unit": "px",
      "label": "Page width",
      "default": 0,
      "info": "0 leaves the theme default."
    }
  ],
  "presets": [
    {
      "name": "Brand Typography"
    }
  ]
}
{% endschema %}
