@import url("chrome://global/skin/onion-pattern.css");

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  --form-max-width: 600px;
  grid-template:
    /* Start space: unfilled. */
    ". . ." 1fr
    "heading heading heading" auto
    "tor-check tor-check tor-check" auto
    ". form ." min-content
    "message message message" auto
    "survey survey survey" auto
    /* End space: unfilled.
     * Reserve 150px for background image.
     * NOTE: Since the body has "auto" height, the other "1fr" flex row will
     * not shrink to zero, but will instead shrink to a minimum size of
     * 75px = (150px * 1fr / 2fr) */
    ". . ." minmax(var(--onion-pattern-height), 2fr)
    /* NOTE: "form" will be given a maximum width of --form-max-width. */
    / 1fr minmax(max-content, var(--form-max-width)) 1fr;
  justify-items: center;
  padding-inline: var(--space-large);
}

body:not(.initialized) {
  /* Hide the components before the page is initialized.
   * NOTE: The layout can still be adjusted or measured in this time since we
   * use visibility rather than `display: none`. */
  visibility: hidden;
}

h1 {
  grid-area: heading;
  display: flex;
  align-items: center;
  gap: var(--space-large);
  font-size: 40px;
  margin-block-start: 0;
  margin-block-end: var(--space-small);
}

#tor-browser-logo {
  height: 80px;
  flex: 0 0 auto;
}

body.is-testing #tor-browser-home-heading-stable {
  display: none;
}

body:not(.is-testing) #tor-browser-home-heading-testing {
  display: none;
}

#tor-check {
  grid-area: tor-check;
  display: flex;
  gap: var(--space-small);
  align-items: center;
  padding-inline: var(--space-xlarge);
  padding-block: var(--space-medium);
  border-radius: var(--border-radius-medium);
  margin-block-start: var(--space-xxlarge);
  margin-block-end: 0;
}

.tor-home-box {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--background-color-box-info);
  max-width: var(--form-max-width);
  width: -moz-available;
  box-sizing: border-box;
}

body:not(.show-tor-check) #tor-check {
  display: none;
}

#tor-check-icon {
  flex: 0 0 auto;
  width: var(--icon-size);
  height: var(--icon-size);
  -moz-context-properties: fill;
  fill: currentColor;
}

.home-message:not(.shown-message) {
  display: none;
}

.home-message {
  grid-area: message;
  text-align: center;
  margin-block: var(--space-xlarge);
}

.message-emoji {
  height: var(--icon-size);
  vertical-align: sub;
  margin-inline-end: var(--space-xsmall);
}

#search-form {
  grid-area: form;
  /* Occupy the entire "form" block. */
  justify-self: stretch;
  margin-block-start: var(--space-xxlarge);
  background: var(--background-color-canvas);
  display: flex;
  align-items: stretch;
  /* Padding between elements. */
  --form-padding: var(--space-medium);
  --form-border-width: var(--border-width);
  /* Padding between elements and the parent's border edge. */
  --form-outer-padding: calc(var(--form-padding) - var(--form-border-width));
  --form-radius-container: var(--border-radius-medium);
  --form-radius: calc(var(--form-radius-container) - var(--form-border-width));
  --logo-size: var(--icon-size-xlarge);
  border-radius: var(--form-radius-container);
  border-width: var(--form-border-width);
  border-style: solid;
  border-color: var(--border-color);
}

#search-form:has(#search-input:focus-visible) {
  outline: var(--focus-outline);
}

#dax-logo {
  width: var(--logo-size);
  flex: 0 0 auto;
  align-self: center;
  margin-inline-start: var(--form-outer-padding);
  /* Does not occupy any layout width. */
  margin-inline-end: calc(-1 * (var(--logo-size) + var(--form-outer-padding)));
}

#search-input {
  flex: 1 0 auto;
  min-width: 200px;
  min-height: var(--logo-size);
  box-sizing: content-box;
  margin: 0;
  padding-block: var(--form-outer-padding);
  padding-inline-end: var(--form-padding);
  padding-inline-start: calc(var(--form-outer-padding) + var(--logo-size) /* logo */ + var(--form-padding) /* padding after logo. */);
  /* Make sure clickable area does not extend beyond the form's border. */
  border-start-start-radius: var(--form-radius);
  border-end-start-radius: var(--form-radius);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  /* Focus and outline styling move to the parent. */
  background: none;
  border: none;
  outline: none;
}

#onionize-toggle {
  flex: 0 0 auto;
  align-content: center;
  padding-block: var(--form-outer-padding);
  padding-inline-end: var(--form-outer-padding);
  border-start-end-radius: var(--form-radius);
  border-end-end-radius: var(--form-radius);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  padding-inline-start: 0;
  /* Non-clickable gap between input and toggle. */
  margin-inline-start: var(--space-small);
}

#survey {
  grid-area: survey;
  display: grid;
  grid-template:
    "icon heading close" min-content
    "icon body close" auto
    ". buttons buttons" min-content
    / min-content 1fr min-content;
  border-radius: var(--border-radius-small);
  padding-block: var(--space-xsmall) var(--space-medium);
  padding-inline: var(--space-large) var(--space-xsmall);
  gap: var(--space-small);
  margin-block-end: var(--space-xlarge);
}

body:not(.show-survey) #survey {
  display: none;
}

#survey > * {
  margin: 0;
}

#survey-icon {
  grid-area: icon;
  width: var(--icon-size-large);
  height: var(--icon-size-large);
  padding: var(--space-small);
  border-radius: var(--border-radius-circle);
}

#survey-heading {
  grid-area: heading;
  font-size: inherit;
}

#survey-icon,
#survey-heading {
  margin-block-start: var(--space-small);
}

#survey-body {
  grid-area: body;
  margin-block-end: var(--space-small);
}

#survey-buttons {
  grid-area: buttons;
  display: flex;
  gap: var(--space-small);
}

#survey-buttons > * {
  flex: 0 0 auto;
  margin: 0;
}

#survey-close {
  grid-area: close;
}

@media not ((prefers-contrast) or (forced-colors)) {
  /* Force the page to follow the same Tor theme, regardless of
   * prefers-color-scheme. */

  /* On dark background */
  :root {
    background-color: #2c0449;
    --focus-outline-color: var(--focus-outline-color-tor-dark);
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
    --onion-pattern-stroke-color: #3e0663;
    --onion-pattern-fill-color: #350556;
    /* Same as --text-color when "prefers-color-scheme: light" */
    --text-color-light: var(--color-gray-100);
    /* Same as --text-color when "prefers-color-scheme: dark" */
    --text-color-dark: var(--color-gray-05);
  }

  #tor-check {
    background-color: #1f0333;
    border-color: transparent;
  }

  body > :not(#search-form) {
    color: var(--text-color-dark);
    --button-text-color: currentColor;
    --button-text-color-hover: var(--button-text-color);
    --button-text-color-active: var(--button-text-color);
    --button-text-color-ghost: var(--button-text-color);
    --button-text-color-ghost-hover: var(--button-text-color);
    --button-text-color-ghost-active: var(--button-text-color);
    --link-color: var(--link-color-tor-dark);
    --link-color-hover: var(--link-color-tor-hover-dark);
    --link-color-active: var(--link-color-tor-active-dark);
  }

  #search-form {
    /* Use light color for background and moz-toggle shadow root. */
    color-scheme: light;
    color: var(--text-color-light);
    border-color: transparent;
  }

  #search-form:has(#search-input:focus-visible) {
    /* Use a light-themed inner-border to contrast with the dark-themed
     * focus outline. */
    border-color: var(--focus-outline-color-tor-light);
  }

  #search-form.onionized-search:has(#search-input:not(:focus-visible)) {
    box-shadow:
      0 4px 40px #9400ff66,
      0 4px 16px #9400ff33;
  }

  /* Light background. */
  #search-form > * {
    --focus-outline-color: var(--focus-outline-color-tor-light);
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
    /* Variables used for --toggle- variables. */
    --color-accent-primary: var(--button-background-color-tor-light);
    --color-accent-primary-hover: var(--button-background-color-tor-hover-light);
    --color-accent-primary-active: var(--button-background-color-tor-active-light);
  }

  #search-form.onionized-search #onionize-toggle {
    color: var(--text-color-tor-light);
  }

  #survey {
    background-color: #3d1559;
    border-color: transparent;
  }

  #survey-icon {
    background-color: #00000040;
  }

  #survey-launch {
    color: var(--text-color-light);
    --button-background-color-primary: var(--button-background-color-tor-dark);
    --button-background-color-primary-hover: var(--button-background-color-tor-hover-dark);
    --button-background-color-primary-active: var(--button-background-color-tor-active-dark);
  }
}

/* Year End Campaign (YEC). */
body:not(.show-yec) #yec-banner {
  display: none;
}

body.show-yec h1 {
  /* Text of heading is still available to screen readers, but it does not
   * contribute visually to the page or the body grid layout. */
  position: absolute;
  clip-path: inset(50%);
}

#yec-banner {
  grid-area: heading;
  border-radius: var(--border-radius-medium);
  border: var(--border-width) solid var(--border-color);
  display: grid;
  grid-template:
    "yec-heading yec-image" auto
    "yec-body yec-image" auto
    "yec-matching yec-image" auto
    "yec-donate yec-image" min-content
    / 1fr min-content;
  --yec-image-background: #3a1653;
  padding-block: 56px 56px;
  padding-inline: 48px 48px;
  box-sizing: border-box;
  max-width: 840px;
  margin-block-end: var(--space-small);
  /* Position for the close button. */
  position: relative;
  gap: 0 var(--space-xlarge);
}

#yec-image {
  grid-area: yec-image;
  align-self: center;
  /* Center horizontally for small width layout. */
  justify-self: center;
  /* background color, padding and border radius only stands out when using a
   * contrast or forced color theme. */
  background-color: var(--yec-image-background);
  border-radius: var(--border-radius-medium);
  padding: var(--space-xsmall);
  height: 196px;
  border: var(--border-width) solid transparent;
  /* Remove border and padding from the layout size. These parts are only
   * visible in contrast or forced color themes. */
  margin: calc(-1 * (var(--border-width) + var(--space-xsmall)));
  /* Do not let forced colors ignore the background-color, which is needed to
   * see the drawing. */
  forced-color-adjust: none;
}

#yec-image:dir(rtl) {
  transform: scaleX(-1);
}

#yec-heading {
  grid-area: yec-heading;
  margin-block: 0 var(--space-large);
  font-size: var(--font-size-xxlarge);
  font-weight: var(--font-weight-semibold);
}

#yec-body {
  grid-area: yec-body;
  margin-block: 0 var(--space-medium);
}

#yec-matching {
  grid-area: yec-matching;
  margin-block: 0 var(--space-xlarge);
}

#yec-banner b {
  font-weight: var(--font-weight-semibold);
}

#yec-donate-link {
  grid-area: yec-donate;
  justify-self: start;
  /* Style like a button. */
  font-weight: var(--button-font-weight);
  color: var(--button-text-color);
  border: var(--border-width) solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  background-color: var(--button-background-color);
  padding: var(--button-padding);
  box-sizing: border-box;
  min-height: var(--button-min-height);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-small);
  white-space: nowrap;
}

#yec-donate-link > * {
  flex: 0 0 auto;
}

#yec-donate-link:hover {
  background-color: var(--button-background-color-hover);
  color: var(--button-text-color-hover);
  border-color: var(--button-border-color-hover);
}

#yec-donate-link:hover:active {
  background-color: var(--button-background-color-active);
  color: var(--button-text-color-active);
  border-color: var(--button-border-color-active);
}

#yec-donate-icon {
  -moz-context-properties: fill;
  fill: currentColor;
}

#yec-close {
  position: absolute;
  inset-block-start: var(--space-large);
  inset-inline-end: var(--space-large);
}

@media (max-width: 768px) {
  /* Small width layout. */
  #yec-banner {
    grid-template:
      "yec-image" min-content
      "yec-heading" auto
      "yec-body" auto
      "yec-matching" auto
      "yec-donate" min-content
      / 1fr;
    padding-block: var(--space-xxlarge);
    padding-inline: var(--space-large);
    /* Match max-width of the form. */
    max-width: var(--form-max-width);
    margin-block-end: var(--space-xxlarge);
  }

  #yec-image {
    height: 156px;
  }

  #yec-heading {
    margin-block-start: var(--space-large);
    text-align: center;
    text-wrap-style: balance;
  }

  #yec-heading {
    font-size: var(--font-size-xlarge);
  }

  #yec-matching {
    margin-block-end: var(--space-large);
  }

  #yec-donate-link {
    justify-self: center;
  }
}

@media ((prefers-contrast) or (forced-colors)) and (prefers-color-scheme: dark) {
  #yec-image {
    /* Give the dark image a light border to separate from background. */
    border-color: var(--border-color);
  }
}

@media not ((prefers-contrast) or (forced-colors)) {
  #yec-banner {
    border-color: #523168;
    background-color: var(--yec-image-background);
    --yec-text: #ffffff;
    --yec-button-background: var(--button-background-color-tor-light);
    --yec-button-background-hover: var(--button-background-color-tor-hover-light);
    --yec-button-background-active: var(--button-background-color-tor-active-light);
    --yec-button-text: var(--button-text-color-tor-light);
    color: var(--yec-text);
  }

  #yec-donate-link {
    --button-text-color: var(--yec-button-text);
    --button-text-color-hover: var(--yec-button-text);
    --button-text-color-active: var(--yec-button-text);
    --button-background-color: var(--yec-button-background);
    --button-background-color-hover: var(--yec-button-background-hover);
    --button-background-color-active: var(--yec-button-background-active);
  }
}
